Understanding the Fundamentals of Web Site Design, Part 1

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 Web 2.0 buzzwords than on the fundamental purpose of the Web site.

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 Web Site

Creating a Web site 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 Web site design should be based on the content, not the other way around. If you look into any successful Web site, its structure and information architecture likely entailed a good amount of planning and research.

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

• Objective: What are you trying to do with this Web site? It's crucial that 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 SWOT analysis—a strategy used to quickly evaluate the strengths, weaknesses, opportunities, and threats involved in a project or business venture.
  
  
• Vocabulary and message: Whom 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 eight seconds to captivate your audience before they grow tired and leave a page. Web site visitors that leave your Web site in eight seconds or less are considered a "bounce." It is reported that the average bounce rate is close to 50%. Web sites that heavily exceed this number are in drastic need of attention. When you are creating a Web site, 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 and wire frames: After gaining a solid understanding of your message, it is important to lay out the road map of how your information will flow throughout the Web site. A wire frame is the road map of your Web site and defines how visitors travel throughout the site. To reduce clutter and to streamline usability, be sure that your navigation and site flow are consistent with good navigation and usability practices. Wire frames also start to show "classifications" on a Web site. Information architecture exists all around us as users of the Web and various interfaces:


• Lexicon classifications: A Lexicon is simply a complex way of describing labeling systems and classifications. The lexicon breaks up a Web site 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.


• Organizational classifications: This is how the Web site's information is presented to the user with respect to organization—for example, how various navigation elements are grouped together.


• Search: These tools, similar to how Google would search the web for content, give the user the ability to search the Web site and the content within the site.


• 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 doesn't make someone a graphic artist or user-interface designer. Having the "dorm-room" designer build your Web site 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 Web site 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 respond to your Web site.

• Content: Have you ever visited a Web site 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 that a site fails or is never 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:

Graphic Design and Web Page Creation

Once you have created the blueprint of where you are going to take the Web site, you now have the necessary pieces to get started on the "Concept Phase."
Depending on the designer, various applications may be used to compile the Web site design concepts. The most popular software suite by far for doing so is the Adobe Creative Suite, which contains applications such as Photoshop, Illustrator, and InDesign. In addition, many users still use Macromedia/Adobe's Fireworks for Web site layouts.

By using a combination of the content and information presented in the above-noted wireframes, you can start to compile how the Web site will look and feel.

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

Keeping in mind those various elements will ensure that your Web site possesses the needed attributes to clearly and concisely deliver your message. A clearly defined Web site message will result in a lower bounce rate—and more people will actually see and read your Web site.

The Importance of Color in Successful Web Site Design

The use of color in Web site design has a profound impact on the viewer experience. Colors affect people in a deeply psychological, and often completely subconscious, manner and have the power to make the Web site experience overwhelmingly positive or negative. Most professionals recommend choosing up to five colors and using them consistently throughout the Web site.
Color choices provoke different responses for different people. The color palette of your Web site 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 Web site user is.

Another major factor in Web site 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 Web site.

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 Web sites that have more conservative color schemes such as blues, grays, and browns, without glaring contrasts that can tire the eye.

• Culture and 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 Web site 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 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 and emotions associated with color. Although different people react differently to colors, there are some common meanings and emotions associated with certain colors. Here are 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 Web site viewers with color-perception problems. The most common form of color-blindness, most common in men, is blue-green colorblindness; that is, a person cannot differentiate between these two colors, even when they are next to each other. A blue background with green text will be completely unreadable to such a person.