The Blueprint for Online Success: Understanding the Fundamentals of Website Design	Visited: 670 5.0/5.0 (5 votes total) Rate: Select 1 - Terrible 2 - Poor 3 - Average 4 - Good 5 - Outstanding
by Peter J Sena March 06, 2008

In this article I will cover the importance of good website design and the process to streamline the creation and create success for any website project.

It starts with an idea—not with a technology:

In today’s internet obsessed world, far too many people are becoming more focused on the latest and greatest Web2.0 buzzwords than on the fundamental purpose of the website. Whether that purpose is to provide information or allow for the purchase of a product or service, there is a main purpose for the site and that needs to be identified.

Building the Blueprint: How to Plan your Website

CONCEPTING AND WIREFRAMING:

Creating a website is not that far removed from other traditional marketing campaigns in that a thorough initial analysis is crucial to the overall success of the project.

Simple sketches to identify your information flow and user interface become the building blocks of how you will position yourself online.

The website design should be based on the content, not the other way around. If you look into any successful website online their structure and information architecture surely have had a good amount of planning and research.

Having an understanding of this concept, you should blueprint your website with the following elements in mind:

· Objective: What are you trying to do with this website? It’s crucial you identify your objectives and goals in order to determine the direction the site will take.

· Competitive Analysis: Understanding what your competition is doing will help you compile a knowledge base that can be used in strengthening your brand and creating a differentiation that will help you compete in your market. Marketing professionals will sometimes refer back to Marketing 101 and talk about S.W.O.T analysis.

A SWOT analysis is a strategy used to quickly evaluate the Strengths, Weaknesses, Opportunities, and Threats involved in a project or business venture. Using the SWOT principals when doing your competition analysis is again, Marketing 101.

· Vocabulary and Message: Who are you trying to communicate with? Is your message being heard by the audience you are trying to reach? This is where graphic design and fundamental marketing concepts matter. You have approximately 8 seconds to captivate your audience before they grow tired and leave a page. Website visitors that leave your website in 8 seconds or less are considered a “bounce”. It is reported that the average bounce rate is close to 50%. Websites that heavily exceed this number are in drastic need of attention. When you are creating a website always keep in mind that the content you are delivering on any page within the site will be a determining factor as to how long the user stays on the page.

Sitemap & Wireframes: After gaining a solid understanding of your message, it is important to lay out the roadmap of how your information will flow throughout the website. A wireframe is the roadmap of your website and defines how visitors travel throughout the site. To reduce clutter and streamline usability, be sure that your navigation and site flow is consistent with good navigation and usability practices.

Wireframes also start to show “classifications” on a website. As users of the World Wide Web and interfaces on a daily basis, information architecture exists all around you.

o Lexicon Classifications: A Lexicon is simply a complex way of describing labeling systems and classifications. The lexicon breaks up a website into various sections and labels the sections with popular verbiage such as “Resources” and “Support”. These are functions of the various navigation systems, but these labels also help define and segment various pieces of information.

o Organizational Classifications: This is how the website’s information is presented to the user with respect to organization. For example, how various navigation elements are grouped together.

o Search: These tools, similar to how Google would search the web for content, give the user the ability to search the website and the various content within the website.

o Navigation: This is how we help users move through the content, digging deeper into the site as they visit the content areas of their choice.

· Look & Feel: Despite popular belief, having Photoshop or Dreamweaver installed doesn’t make someone a graphic artist or user interface designer. Having the “dorm-room” designer build your website can have a profound negative effect on your bottom line. Granted, you can cut costs by working with template-based solutions or hiring an inexperienced web developer, but this is not the route to take if you are serious about your website and the success of your business. Identifying the look and feel that will send the proper message to your target audience will have a direct effect on how visitors will respond to the website.

· Content: Have you ever visited a website and clicked on a number of things only to find the famous “Under Construction” message? Content, or should I say lack thereof, is one of the main reasons a site fails or never gets completed. You can have the best concept and layout in the world, but if there is no quality content to place into the site, at the end of the day, all you are left with is dead air.

From Paper to Web: Transforming your Blueprint into a Live Web Site.

Graphic Design and Website Page Creation:

Once you have created the blueprint of where you are going to take the website, you now have the necessary pieces to get started on the Concept Phase.

Depending on the designer, a number of applications may be utilized to compile the website design concepts. The most popular software suite by far used for website design concepts is the Adobe Creative Suite which contains applications such as Photoshop, Illustrator, and InDesign. In addition to this application, many users still use Macromedia/Adobe’s Fireworks for website layouts.

By using a combination of the content and information presented in the above wireframes you can now start to compile how the website will look and feel.

Generally speaking, it is best to finalize the look and feel aspects of your website before spending time and resources on having it programmed. Design concepts that will play a big role in your website creation include traditional design composition elements such as point, line, form, texture, color, and type.

Keeping in mind these various elements will ensure the end result of your website possesses the needed attributes to deliver your message in a clear and concise manner. A clearly defined website message will result in a lower bounce rate and more people actually seeing and reading your website.

The Importance of Color in Successful Website Design

The use of color in website design has a profound impact on the website viewer experience. Colors affect people in a deep psychological, and often completely subconscious, manner and have the power to make the website experience overwhelmingly positive or negative. Most professionals recommend choosing up to five colors and using them consistently throughout the website.

Color choices provoke different responses for different people. The color palette of your website should consider the age group, gender, and culture of your intended audience, while also reflecting the emotional response you wish to stimulate in the potential customer. Certain colors have the tendency to create calm, excitement, happiness, or distaste, again depending upon who the website user is.

Another major factor in website color scheme is readability. The choice of background and type color should contrast well for readability without being harsh and glaring to the eye. Color can also be used to make certain phrases stand out within your site content or to indicate links within the text. Following are some color choice basics to consider when planning the palette of your website.

Color Choice Fundamentals

Use colors from nature. Using forest greens, sea blues, and the reds and yellows of flowers and fall leaves is much more alluring to viewers than harsh colors not seen in the natural world (such as shocking pink, electric blue, and neon green).

Color preference differs from men to women. Men prefer blue and orange while women are drawn to reds and yellows. Women also are capable of perceiving a much broader spectrum of colors and sense subtle shade variations much more easily.

Viewer age plays a role in color choice. Young adults and teens are often excited by bright, vibrant colors and contrast. Older people tend to be more interested in websites that have more conservative color schemes such as blues, grays, and browns, without glaring contrasts that can tire the eye.

Culture & nationality affect response to colors. In the United States and most European cultures, the color White symbolizes purity and marriage. However, in Japan and China white is a color of bad luck and red is the traditional color of new brides. If your website is aimed at attracting international customers, make sure to research the cultural color beliefs of your target audience.

The universal safe color. Blue seems to be a universally safe choice among different cultures, ages, and genders, evoking good feelings of peace and calm for most everyone.

Choose background and text colors for good contrast and readability. The best choice for readability is a white background with black text. Other good choices include gray or black backgrounds with a well contrasting text color. Avoid harsh contrasts such as red and green or blue and yellow, which have been shown to cause eye fatigue.

Keep in mind the most common meanings & emotions associated with color. Although different people react differently to colors, there are some very common meanings and emotions associated with certain colors. See below for a few examples:

Red: Excitement, power, passion, or anger.

Yellow: Joy, happiness, light

Blue: Cool, peace, trustworthiness, loyalty, or sadness

Black: Sophistication, mystery, or evil

Green: Life, nature, health, wealth

Consider website viewers with color perception problems. The most common form of color-blindness, most commonly seen in men, is blue-green colorblindness, where a person cannot differentiate between these two colors when they are next to each other. A blue background with green text will be completely unreadable to this person.

Stock Photography and Gathering Photography:

Obviously, using completely custom photography is ideal, but let’s face it, who has the time or the budget to always do that? Below I have outlined a few of my personal favorite sources for graphics and photography:

· STOCK XCHNG

o www.sxc.hu/ this massive gallery online has many high quality stock photos for non commercial usage. You can also purchase credits online for this.

· ISTOCKPHOTO

o http://istockphoto.com/index.php Great website for member-generated royalty free images. You can purchase these images by credits and they are relatively inexpensive at around $1.00 per image

· SHUTTERSTOCK

o http://www.shutterstock.com/ A subscription based website for downloading stock photos.

· GETTYIMAGES

o Great website with a massive database and the ability to custom search. A drawback for some people can be that many of these photos are rights-managed, meaning the license costs can get to be pretty expensive for smaller projects.

To the Chopping Block we Go: Transforming your Graphic Design into a Working Website.

The first step of coding a website is deciding upon the programming language to be used. The web developer will use different programming languages depending upon the features and abilities the website needs to accomplish its goals. Most promotional websites are best coded in HTML (Hyper Text Markup Language) which is very search engine friendly and flexible. When an ecommerce shopping cart, an interactive event calendar, or content management system is needed, you will need to use a server-side programming language such as PHP or ASP.

In almost all cases, avoid creating a website from a pre-packaged templated website building program. The vast majority of these programs, many featuring shopping carts, are not search engine friendly and the code is messy and extraneous. Additionally, the website builder has little access to the actual code of the site, limiting options for further development. The website software company usually will not allow outside developers to make changes to their website creation program and can charge very high fees for necessary upgrades or modifications to the website.

Why Custom Design is the Smart Choice

Choosing an experienced website design professional, proficient in multiple aspects of web design and ecommerce development, to build a custom website from scratch could be the best business investment you ever make. This ensures that your website will be built to reflect your company’s goals and your client’s needs and desires from the ground up.

A professional website developer should also ensure that your site meets the stringent standards of the W3C (World Wide Web consortium) and follows industry best practices to ensure smooth, efficient function and a good reception by the major search engines. Well structured websites are designed to be scalable, so that when upgrades or additional product lines are added the site can easily adapt to accommodate the growth of the company.

Based upon conversations, design questionnaires, and additional sources of information, a professional website designer will present design concepts, also called a ‘mock up’ of the website for your approval and feedback. Based upon that feedback, the designer will make revisions to your specifications. Usually a round or two of revisions occurs before the final website creation is ready for launch live on the web. A reliable website design agency will perform all kinds of testing on different platforms to ensure the site functions efficiently and looks great from all the major browsers.

Proper Page Names are Essential

The proper taxonomy (naming structure) of your website pages is essential to identify to the search engines what that page is all about. When creating a website, the individual page names should clearly label the purpose of the page and use your industry’s most important keyword phrases whenever possible.

Most templated website building programs generate automatic page names (URL’s) that involve series of numbers and symbols that are highly un-search engine friendly and do not identify the page is any logical manner to the viewer. The majority of templated programs do not allow the user to rename the pages individually.

Page Taxonomy Examples:

When a website is custom built from the ground up, the designer will name each page in a manner that reflects the products or services on the page and is easily indexed by Google and the other major search engines. For example:

Correct Page Naming: www.Digitalsurgeons.com/Ecommercewebsites.php clearly defines that this page is about building ecommerce websites.

Poor Page Naming: A page with the naming structure of: www.kidsclothing/series?123/x4 tells the search engines absolutely nothing and the page will never be properly indexed for the correct category of product.

When you create a new website, everything that goes into the process is meant to tell both the customer and search engines what your business is all about.

Building the Titles and Meta Data: Another Way to Tell the World What it’s All About

Once the website developer has built the framework of the website navigation and pages, the strategic fields of your new site should be developed to further reflect what your business is all about. These fields include title tags, meta descriptions, and meta keyword tags, as well as several other strategic areas that can further identify your site to the search engines and to clients.

Each page of a website has its own set of titles and meta tags and these should all be developed individually to reflect the purpose and content of the page. Repeating the same title and keywords throughout every page of the website is ineffective and can actually harm your chances of doing well in the search engine listings.

Keyword Stuffing is Not the Answer

When the idea of search engine optimization was new, some web developers got into the bad habit of stuffing as many keywords as possible into the strategic fields of sites. I still see it today when I look at a prospective client’s website source code and notice a block of keywords half a page long! Cramming huge lists of keywords into the title, description, or keyword tag is just one way that some people still practice ‘keyword stuffing’.

Google and the other search engines now penalize websites that use this practice to try to bump up their search engine rankings. The practice is now completely ineffective and can result in getting your website dropped down or banned from the search engine listings.

Correct Meta Data Development is an Art & Science

Experienced search engine optimization and web development professionals are skilled at analyzing what the search engines are looking to see in a title tag or description. Rules can change frequently and can differ among the types of websites the search engine is looking at (ecommerce, promotional, etc.). Your web designer or SEO expert will develop your title and meta data fields based on a careful review of what is happening online and with competing sites and determining what the search engines are favoring. Just as in life, there is no one magic formula for optimizing your site.

Put the Customer First: Never sacrifice readability and accuracy for the chance to get a couple more keywords in the mix. The client always comes first when creating your website, while keeping the search engines firmly in mind. Balance is the key and a good rule of thumb is to include two or three of the most pertinent keywords in your title and description tags. Also, use exact phrase matches when listing keywords in your keyword tag.

Building a Website Founded on Industry Best Practices

The W3C

The W3C (World Wide Web Consortium) has published standards for good website design and HTML validation that have become widely accepted everywhere. Websites that meet these guidelines are much, much more likely to do well in the search engines. These practices also look out for the user in encouraging efficient, user friendly website coding practices. Good tools are available free online for analyzing sites to see if they meet validation and finding out what specific issues exist. The W3C standards also make it easier for HTML programmers from all over to interpret coding and work with existing site programming.

Google’s Webmaster Guidelines:

Google’s set of webmaster guidelines are a great place to start when you want to find out what Google wants to see in a website. These recommendations cover areas such as using sitemaps, correct text link development, naming conventions, and encourage website builders to develop sites with the end-user always as the primary focus of the endeavor.

Google strongly encourages creating a website rich in good quality information with a logical structure and user-friendly navigation. All of their more recent algorithm changes are aimed at making a better quality experience for the user.

Pulling it all Together

An excellent website designer will always be researching industry best practices and working to stay on the cutting edge of web development. Working with an agency that delivers great website development skills with high power search engine optimization abilities makes for a powerful combination for your business.

The overriding message of this article is the importance of creating a solid website foundation for your online business from the ground up by designing with the customer as the focus and the search engines always in mind. Keeping practical website design principles in mind and planning thoroughly will put you and your new website on the road to online success.

The team at Digital Surgeons encourages your questions and ideas. Call us at (203) 672-6201 or visit our site at www.Digitalsurgeons.com. We look forward to hearing from you.