Web Design - The Creative Process
- Now What?
- What's Under The Hood
- Pricing Estimates
Web design is a general term mistakenly used by people to describe the process of creating a website. We see it more specifically as the group of activities that relate to the creating of the visual elements that a user sees in their web browser. The backgound code or programming for a website that offers eCommerce or other features is produced by another process known as web development.
Web development is sometimes used simultaneously with web design to indicate the design process, the development process and the management of content. To IT professionals and programmers, web development is more of a pinpoint process relating specifically to the "backend" aspects such as programming and other response related processes. Think of database driven sites, forms that process information, shopping carts and the like. Many applications that are driven by the Internet's Infrastructure use programming languages such as PHP, .NET, Cold Fusion, JAVA, RUBY and many more. These languages typically create dynamic Webpages that link to databases such as MySQL, Postgre and MSSQL.
The fall of 2001 marked the bursting of the dot-com bubble. The after-shock started a re-thinking process and from this catalyst a new wave of technological thinkers ascended on the Web.
The concept of "Web 2.0" began with a conference brainstorming session between O'Reilly and MediaLive International. Dale Dougherty, web pioneer and O'Reilly VP, noted that far from having "crashed", the web was more important than ever, with exciting new applications and sites popping up with surprising regularity. What's more, the companies that had survived the collapse seemed to have some things in common. Could it be that the dot-com collapse marked some kind of turning point for the web, such that a call to action such as "Web 2.0" might make sense? We agreed that it did, and so the Web 2.0 Conference was born.
From an article by Tim O'Reilly at oreilly.com
Web 2.0 has become a marketing buzzword and perhaps used too often by those who really don't understand its true definition - if indeed, there is one!
We see Web 2.0 as using the Web as a Platform where the user can control his/her data. At its core are browser based services (not software out of the box), architecture designed for user participation, scalability such as cloud environments and the harnessing of collective intelligence.
Some examples are sites like - Google, Flickr, Tweeter, Wikipedia, Blogs, folksonomy, mweb services (SaaS) and more.
A Web 2.0 Website is one that responds to customer needs and demands in a dynamic way and provides immediate access to information and allows users to proactively interact with that information. A good example of this concept is Wikipedia. The day of the sales brochure style Website, while perhaps not extinct, are fast becoming a relic. Customers these days demand that a Website provides some sort of interaction, useful services and information, participation and ultimate security when needed. The Web experience should be as rich and as fulfilling as any interaction with the business itself.
HTML is an acronym for HyperText Markup Language; it is a term known and used by just about anyone, anywhere that has access to the Web (aka - World Wide Web - www). However, it is often referred to as a prgramming language - "Can you program a Website for me?". In fact it is a coding language and is not difficult to use or learn; it is how the Web was made possible to start with.
The example (a typical HTML tag) below shows how to make any text bold. Of course there are hundreds of HTML tags that perform various functions, from simple to complex, on a Website. If you are really interested in more information, we suggest you visit The World Wide Web Consortium (W3C) an international community that develops standards to ensure the long-term growth of the Web.
This code <b>This is bold text</b> produces this This is bold text
There are millions of Websites resident on the Web that have been coded by the work-at-home business owner, ebay followers, MLM types and others. Clearly demonstrating that the Web is accessible by anyone with a computer, an HTML editor and time on their hands. Many of these privately developed sites are superbly done; others are pretenders and fall by the wayside soon enough. Coding a Website that passes validation standards (within a respectable level) is a critical consideration for many reasons such as cross browser compatibility (looks good in all browsers such as IE, Firefox, Opera, Google Chrome and others), is indexable by the search engines and meets SEO (Search Engine Optimization) standards.
XHTML is a reworking of HTML 4.0 designed to work as a application of XML (Extensible Markup Language). It allows anyone to create sets of markup tags for new purposes.
XML (Extensible Markup Language) is a standard for creating expandable information formats that allow both the format and the data to be shared. XML is similar to HTML in that both use tags to describe the contents of a document. However, while HTML only describes how the data should be displayed or used, XML describes the type of data. This allows anyone who can interpret those tags to use the data they contain.
Hundreds of XML-based languages have been developed, including RSS, Atom, SOAP, and XHTML. XML-based formats have become the default for most office-productivity tools, including Microsoft Office (Office Open XML), OpenOffice.org (OpenDocument), and Apple's iWork
From a definition at Wikipedia.org
The document you are currently looking at has been written in validated XHTML. This will allow us to incorporate existing XML modules or add our own.
The information on this page barely touches the proverbial tip of the iceberg. Our only intention is to enlighten you, if only in a small way, to some considerations in Web Design (see next tab) and a few simple definitions about Web Standards. Below we present some links to sites that will satiate the curiosity of those hungry for more.
Next Step - Click Here to view the Website Planning
We are writing the content on this page as a guide to understanding the basic concepts of Website design. It is not intended to be an in depth study of the creation process since each genre and each individual Website demands distinct techniques, from design - to layout - to navigation and to back-end technologies.
There is one common thread however, and that is, to follow a series of planning steps before even one pixel is loaded to the live Web. Following such a procedure greatly increases the chances of online success.
Whether you're building your own personal site for family and friends, building your company's online presence, or working with a design agency, you are better equiped if you have a basic knowledge of the process.
First thing to do is to clear your mind of "the bottom line". What do we mean by that? We've all visited a Website that hypes up there product or services to the point where their credibility is questioned by its visitors. These days consumers simply get turned off and leave.
Don't sell your goals - communicate to the visitor the benefits of your services and products. Address the goals of your site's visitors by sharing with them the information they need to satisfy their purpose in visiting your site. They came there for a reason and that is their goal, their purpose and not yours. Provide solid advice, details, benefits and guide your visitors to the locations on your site that will cause them to take some sort of action that will provide an opportunity to build a relationship with him or her. Whatever action your visitor took be sure to follow up with a professional no-pressure response and invite them to call for more information or take a similar response action. When you motivate the buyer properly they will help you accomplish your visions by purchasing your products or service.
Focus on making your site customer centric with an eye to business continuity. Consider what services you can provide for your customers and visitors that will help them accomplish tasks, contribute their intelligence and provide top-notch support.
A site's home page is where the majority of visitors will first see its content. Is it a refreshing oasis with all the essentials in plain site or is it more like landing on the dark and evil Planet of the Apes?
You have less than 15 seconds to make a positive impression; after that people leave and will probably never return. Here is a list of essentials for your Website's Home Page:
- Brand your site with a professional logo and tagline that quickly indentifies to the visitor that you have what they need.
- Write a clear and concise benefit statement that speaks to how your service or product will help solve the visitors needs.
- Stay away from marketing hype ("We are the best in the world", "Our software crunches the competition", "You will earn more than 2 million dollars in the first six months", etc, etc) and leave the buzzwords (aka - "Techno-Babble") to those that understand them.
- Build "calls to action" into your Webpage. Examples: More information, sign up for our newsletter, RSS feeds, a free service or download.
- Your primary call to action will be to get people to view your order page and that should be done in a low pressure manner. Providing a free trial (if possible) or a solid product or service warranty is a great way to engage your visitor and if you treat him/her right you have a much better chance of turning them from potential customer to a solid client.
- Build an easy to use navigation system. Your site should take the guesswork out of finding information.
- Provide a sitemap - for visitors and for the search engines
- The contact page and the about page are of great importance. People want to know who you are, where you are and how to contact you. A Website with just an email address and nothing more does nothing to build trust and credibility. These pages should be clearly linked on each page of any site
Once you've considered the information above (and many more) it's time to think about site layout. Before you select colors, technologies, fonts and styles think about making your site do what your site visitors expect.
Perhaps, in this situation, pictures will speak louder than words. Navigate the Websites listed below and pay particular attention to the layout and how it works to direct the visitor to essential areas. Apply these ideas to your own site, making sure you mantain a uniqueness and persona that best fits you and your company.
Keep your site's navigation positioned exactly the same thoughout your site otherwise viewers will become frustrated and will simply become blind to your content.
Most of us have viewed movie storyboards; they are simply a graphical representation of scenes and how they should play out. We can and should storyboard our Websites.
A superb way to make sure all the information, navigation and services on your Website flow nicely and are easy to use, is to storyboard your Web site. Storyboarding allows you to see what information goes where and how that page will flow with the other pages on the site. The best place to start is with your homepage as it's most probably the first page people will see when they find your site; and without question must make a good impression.
We have included a Storyboard Template that will give you an idea of how to use a Storyboard to plan your site. You can right click on the image and save it to your PC or MAC.
You can also use the great service at My.Lovelycharts.com to build a nifty looking Storyboard.
The information presented on this page is intended merely as a primer - to help you set your sails
in the right direction. There is, of course, much more to the complete process of site design and planning.
You must decide on colors, fonts, look and feel, services and much more. The more you know - knowledge
really is power - the better equiped you will be to realize your Internet dreams.
Should you build your own Website?
Most mid-sized to large companies outsource their Website Design and Development work. Why? Time and cost. They want to focus on their core business and simply do what they do best.
For an individual or a small business the motivation might be different. Perhaps the budget simply is not there and how to get a functional, quality Website becomes a dilemma.
This decision rests on several factors - your site requirements (eCommerce, blogs, forms , databases), your budget, your skill level, and, perhaps most importantly, whether you have the time. Saving $2-3,000 may end up costing much more if the site does not pass the toughest of all litmus tests - the one administered by your site's visitors.
Next Step - Click Here to view "Now What?"
One of the biggest mistakes many site designers make is their failure to include SEO (Search Engine Optimization) as part of the site. So what we discuss on this page really doesn't fit into Web Design but SEO and other items presented on this page are of critical importance.
Your Web Designer will do great work for you in color selections, graphics such as navigation buttons and site layout but for the rest you'll need someone who knows SEO and SEM (Search Engine Marketing). Later a Web Developer makes his/her way into the picture.
Search Engine Optimization should be built into your site's coding from the very beginning. This will give you a jump start and will help get you better results in the SERPS (search engine results pages). Search engines like Google will find your site not long after you post it to the live Web - you don't have to worry about submitting it, their Bot (named GoogleBot) will find you. In fact, you're better off not to submit your site to Google through their submission page or any other submission service.
If GoogleBot comes to your newly posted site and you have little or no SEO at all, then you have little chance of showing up anywhere close to the top of the SERPS. Consider the fact that Google simply does not reward new sites with high results rankings and the importance of having a properly optimized site is even of greater significance.
Here's a list of a few of the necessities of SEO:
- Your site's code needs to validate in compliance with acceptable Web standards. This is important because corrupted code could break the search engine's bot and prevent it from properly indexing your site.
- You need to do keyword research so you can place keywords and phrases within your site's content.
- Your content needs to be well written so it reads normally and not as if it was stylized just for the search engines
- You'll need a Google Site Map to tell Google where your content is and what you want it to do with it
- You must make sure that your site complies with Google's and other search engines guidelines. Search spamming could get you banned
- Effective SEO involves dozens of different variables that should be analyzed and applied in a strategic process. It is therefore an ongoing task and is characterized and defined by the constant changes that the major search engines are making to optimize search results for their users. What was important a week, a month or a year ago can be easily minimized by new search technologies or Web site evolution; consider the impact of sites such as Tweetertm, Facebooktm and other social media sites; the importance of blogging; developing strong one-way back links and much more. Today a more holistic approach is needed when it comes to online marketing
The process of marketing a Website on search engines, submitting your site to the search engines and directories for organic listings, pay per inclusion, pay per click, banner ads, Google Adwords or any other marketing programs offered by search engines.
With Google AdWords, you can create and run ads for your business, quickly and simply. Run your ads on Google and our advertising network -- no matter what your budget, you'll only pay when people click your ads.
AdWords ads are displayed along with search results when someone searches Google using one of your keywords. That way, you'll be advertising to an audience that's already interested in your business. You can also choose to display your ads on content sites in the growing Google Network. And, you can choose the exact content placements where you'd like your ad to appear, or you can let contextual targeting match your keywords to content.
You can choose from a variety of ad formats, including text, image, and video ads, and easily track your ad performance using the reports available in your account.
There's no minimum monthly charge with AdWords -- just a nominal activation fee. Learn more about the cost of advertising with Google AdWords.
To find out more about Google AdWords or to begin creating your ads, visit the AdWords home page.
The above (in red type) is right from the source - The Google Adwords Page.
Today there are many that believe that "Online" is the real world. Well, whatever you may believe, the fact is that the real world still exists and it stands as an integral part of the Internet; afterall didn't real world characters develop the Internet to start with? Having said that, there are many ways to market your website to the "real world".
- Yellow Pages - Yes, people actually still use it and if you're business offers consumer products or services, you should too!
- Flyers, Direct Mail - Googletm sends us direct mail on a monthly basis offering discounts on their Adwords services. We see flyers from many small to mid-sized businesses on a regular basis.
- Business Cards - Hand out your business card to people you meet; you might be surprised at how many will show interest.
- TV, Magazines, Newspapers - Local or nationwide, people still read.
- Direct Calling - Visit a handful of local businesses each week that may need your products or services. It takes only a few minutes to market yourself and your services and provide them with a link to your website.
Of course, there are more methods available to market your services to the real world and you can surely find them and use them. It's an open area that many have abandoned and one that you can definitely work to your advantage.
Next Step - Click Here to view "Under The Hood"
Awesome looking automobile, isn't it? Attracts attention and is certainly true eye-candy. These days, as compared to the 90's and early 2000's, there are plenty of great looking Websites out there. Today we have so many great tools available that make turning a Website into a work of art possible for those who know how to use them.
One just hopes that what's under the hood of that sleek looking Jaguar will make it roar and humm exactly as expected. When it comes to a Website what's under the hood and not visible to the site visitor is the coding and programming that deliver the user functions that add value to its use.
In our definition this constitutes the Web Development process.
For the purposes of this discussion we are going to address this subject in a very general manner. We will list some of the programming languages out there and how they are utilized; and will speak briefly about coding. We are not going to get into specifics as that goes well beyond the scope og just one page. We suggest you research and you can find out more about programs and coding that we list herein.
Web Development is a rapidly expanding industry as campanies rush to bring the products and services online. In January of 2008 there were more than 365,000 web Developers employed in the USA and Canada alone.
For those reading this that have a project in mind, feel free to contact us for any questions or advice you may need.
Web Development Services
- Shopping Carts
- PCI Compliance
- Funds Processing
- SSL Security
- EDI - Electronic Data Exchange
- Inventory Management
- ERP - Enterprise Resource Planning
- Business Development
- Shared Intelligence - Wikipedia, TagsEasy and dozens upon dozens more
- Lead Generation
- CRM - such as SugarCRM (pipeline)
- Job Search Sites
- Custom Services
- Internet, Intranet
- Information Management
- Customer Support
- SaaS - Software as Service
- Hosted Exchange and other Microsoft Applications
- CRM (Customer Relationship Mnagement)
- CMS (Content Management)
- SaaS Platforms
- Literally hundreds of existing hosted applications and many more to come
- IT - Servers and Complex Systems
- Web Server Configuration
- Intrusion Protection
- Virus and Spam Control
- Appliciation Security -ModSecurity
- Cloud Computing and Storage
- Social Networking
- Classmate Sites
- Facebook, LinkedIn, Twitter, MySpace, Nexopia
Popular Programming and Coding Methods
- HTML 4 and 5 (CSS)
- XHTML 1.0 and 2.0
- Adobe Flex
- Ajax (can also be used server-side)
- Java 2 - J2EE
- ASP/ASP.NET (Programming Framework)
- Cold Fusion Markup Language (.CFM)
- Java Server Pages (.JSP)
- PHP (.php)
- Perl (.pl)
- Python (.py)
- Ruby (.rb)
- Lasso .lasso
Obviously there is a cornucopia of choice and it can get just a little confusing. That's why it's important to
make your selections before the development phase of your site commences. Naturally you will discuss your development plan with your programmer and get his/her advice. A little team work and communication will go a long way and helps the bottom line as well.
Don't over develop by adding services you really don't need. Keep it simple! It's all related to what you want your site to do for the customer and for you and your company. If you want to build the next power social site or the next mega online auction, then your challenges and ensuing costs will be enormous.
Or, if like most, you just want to post your services and products online there are a wide spectrum of choices at reasonable costs.
If you're depending on eCommerce on the Web to provide an income for your company and its employees, then you need to budget for SEO, SEM, press releases and other forms of Internet marketing and branding.
Next Step? Some Pricing Estimates
The expectations of project costs can, and usually are, drastically different between the client and the Web Development Team. So how much should a Website really cost? The answer is almost directly proportional to the Website itself.
A major sector of the Web is occupied by those individuals with a small home-based business - software vendors, secretarial services, photographers and many more. These people often own Websites with just 10-15 pages; that's really all they need to market their services and products. It is will within reason that an investment of $1500-3000 could get anyone in this group a quality Website with some customization and dynamic functions. Once you add a shopping cart, a merchant account and payment gateway and PCI compliance the price an easily top $7,000 to 10,000.
Many SMB's offer hundreds of products and services and therefore require larger, interactive sites with several applications and a eCommerce set up like a shopping cart. This genre of Websites can range in price from $15,000 to $75,000.
Insurance companies, banks, large retail stores, software companies and others with 1,000 or more employees and thousands of customers can spend upwards of $100,000 on their Web presence. One can only imagine the cost to build and maintain the sites of some of the top properties on the Internet. Recently one large Canadian retailer spent $40 million!! Thank about that.
One thing we've noticed over the past 5-10 years is that we are moving from a quality conscience consumer base to one which is now primarily focused on price. This certainly has some basis in fact due to the globilization of economies and the tough economic times. However, while the majority puts price first in making buying decisions on almost any level, there are those that will look at quality first.
This is very evident in Internet related services and products. Consider the hosting industry; now there are literally thousands of Websites out there offering $3-7 a month hosting plans that include unlimited data transfer and unlimited storage space. It doesn't take a degree in rocket science to figure out this is just pure nonsense directed at the unwary and the inexperienced. The Website owner that wishes to open an image sharing service; or the one with the busy blog getting 2 million page views per month; or the site owner with even a small CMS getting 250,000 or more page views monthly, are all in for a rude awakening. None of the latter services are going to run smoothly or even be allowed on their $5 a month miracle hosting plan. Read the terms of service and you'll quickly note that image sharing sites or those that consume too much of the server's resources (and they usually don't define how much) are subject to immediate termination.
Wouldn't it be nice if these 'cheap' hosting plans were a reality!! We could immediately dump thousands of dollars in our cloud, high availability and Litesepeed Infrastuctures and move all of our sites and those of our customers to $5 a month unlimited host and spend the money saved at the local pub. Now, did we tell you about the bridge we're selling?
Web Designers and Developers are faced with a similar dilemma on an almost daily basis. The expectations of the client and those of the designers and developers are very different. The latter understands what their services are worth based on their experience. The client has no accurate source of comparison; they understand that a full page ad running in a major newspaper can cost upwards of $15,000 a day. However, when they think of the value of a Website their major point of reference is the mulitude of Internet advertising they see that promises high quality Websites at just $10 an hour or custom programming at $12 an hour. The Internet stands as the most amazing tool that mankind has ever seen; we all know what it can do. However, as our Fathers and Grandfathers said: "You had better learn to separate the wheat from the chaff". This pearl of wisdom applies as much today as it did a generation or two ago, and very so much to the Internet. We all still get emails based on the Nigerian Scam (this scam started in the early 1980's)about how you have been choosen to help export 40 Million US dollars from the estate of the late King. Apparently their are people out there that actually believe this stuff or why do these emails keep circulating? - to us that is simply unimaginable.
Just to point out that we should all do our homework before we leap into anything. In the winter of 2008 a potential customer called us and wanted a price on a new Website. We quoted a total price of $2,800 based on the site's requirements, our hourly rate and our experience. A week later he called us back and asked us if we could do the job for $900. Well no, we said, and asked if he wanted a much smaller site with less functionality. He said no and informed us that he had found someone on the Web that quoted him $10 an hour. We can only assume that he made the assumption that the other individual could do the work in the same amount of time. Some months later we discovered that he paid $4000 for the site based on $10 an hour. That's $1200 more than we quoted. We're sure he learned an important lesson.
Check out this little story from the Technology Executives Club. It really makes the point very clear.
By Sonny Origitano, VP Advisory Services, PSC Group, LLC
Once upon a time there was a steam generating plant that was not producing much steam. After a
frustrating search for the cause, the plant manager, in desperation, called in an expert. After only two
hours on site, the expert found the problem and placed "X's" on two pipes that were causing the problem,
saying that they had to be removed.
When presented with the bill, the plant manager asked the consultant how he could charge $5000 for only
two hours of work. When he asked for an itemized bill, this is what he got:
Total amount due $5000
- Placing "X's" on two pipes $ 400
- Knowing where to place the "X's" $ 4600
The plant manager got what he paid for and probably a lot more. He had already used up more than that
amount on his own staff not to mention the loss in revenue while the plant was shut down. For him,
securing the advisory services of a consultant was the right thing to do. It was a matter of make versus
buy. He could have funded his own internal staff but chose to "buy" outside advice. In today's business
climate, particularily for mid-sized enterprises, advisory services for many of us makes good business