The Design phase is where a site’s look and feel are created. It is where trial designs are created, evaluated, modified or rejected, and, finally, agreed upon. It is also where a site’s structure, features, functions, and components are decided upon. A site’s design focusses on a site’s:

The Design Process

During the design phase, the site begins to acquire its shape, style, appearance, structure, and capabilities. The design process starts with the site plan and proceeds with providing the details on how to implement it. You need to decide on what messages to send, how best to convey each message (text, graphics, animation, video, audio, 3D), as well as how each blends into an overall style, feel, look, and ambiance. Design should also consider costs, completion time, and amount of sparkle and pizzazz. Designers too often have a desire to add excess sparkle to impress other designers rather than considering simplicity that doesn’t distract from the purposes of the site. Finding the happy medium is the mark of a good designer.

Start the process by eliciting target audience and client preferences regarding colors, logo treatment options, look/feel preferences, and desired ambiance.

 After gathering and synthesizing preferences, the process continues with creating page mockups that incorporate those preferences, reviewing the mockups with clients, making requested modifications, finalizing the final prototype with navigation elements, and final signoffs by the design team and client.

Even though a final design has been selected and signed off on, there remains the need for flexibility. New events and circumstances often demand changes in order to accommodate them and both designer and client need to be flexible enough to adjust accordingly. This is where balance and flexibility need to be exercised by all.  Too many changes, or major ones requiring significant additional hours to implement should be addressed in a separate work order with a revised cost that fairly reflects the value of the new work to be done and the savings from the omission of the old work previously scheduled. Smaller minor changes should probably just be implemented without a separate work order. Where the line is drawn between major and minor changes will definitely be defined by the good will and intentions of both parties and can be the focus of whether the project will be a complete success and rewarding experience for all, or a partial success and the result of struggles between the involved parties.
 

Outline Site Structure and Hierarchy

Designing your site’s structure and hierarchy involves determining its main sections and what each will contain. This is a multi-step process which includes:

  • Listing the pages and items to be contained on the site
  • Organizing them into sections, subsections together forming a coherent hierarchy.
  • Grouping items together into pages based on size and commonalities
  • Deciding whether to create a long page or dividing its content into several smaller pages
  • Creating a spoked “tree” diagram with the home page as the center hub with each main section surrounding it and connected to it by a spoke. Surrounding each main section, connected to it by spokes, will be it’s content pages.
  • Converting the tree diagram into an outline showing the site’s structure
     

Determine Site’s Look and Feel

The look and feel of your site can convey as effective an impression as the contents. The colors you choose, the way you combine them, even the font style you choose all will effect the general atmosphere and feeling tone your site creates in its visitors. Whether you want the image conveyed to be formal, technical, or whimsical, your site’s  look and feel will be the vanguard of your company’s image creation.

When selecting a certain look and feel for your site, make sure the one you choose displays consistency across different browsers and screen resolutions.
 

Create Site Style

Your site’s style includes the colors, fonts, page backgrounds, top banner, navigation bars and buttons, and other graphics used to separate or delineate items included on your site. Your site’s style also provides consistency and continuity to visitors. When designed right, it provides flexibility and allows quick site-wide modifications with a minimum of reprogramming. Components in your site’s style include the following:

  • Navigation bars and buttons (Left side vertical buttons, Tabs at top of page)
  • Page Banners -
  • Page and Text Box Backgrounds
  • Images
  • Buttons
  • Menus
  • Rollover Objects and Actions (Pop-up window information)
  • Colors, Fonts, and Master Borders
     

Determine Photos

Photos add interest and clarification. Selection or creation of digital photos for use on a web site is a critical task. Existing photos can be scanned, sized, cleaned up and compressed for web use. Sometimes new photos need to be shot. A shot list of photos to use in the site organizes the photo gathering effort.

Too many photos, however, can be distracting and can slow down the time it takes for the page to load. You need to balance loading time with image size and quality. Larger, higher quality images take longer to load, making users wait for the page to appear. This is especially true with dialup connections such as AOL. Thus you need to make come critical decisions about whether to use a photo or just text to illustrate a point. At Web Fin, we generally will opt to use photos as much as possible since they provide such a visual interest for the visitor and, if they’re sharp, interesting, and well done, a visitor may be willing to wait a bit longer to view them. Keeping pages short and addressing a single point also helps.
 

Include Graphics and Animation

Using graphics for your site elevates its impact above text only media and makes your web site much more than just text. The graphics you use should be informative and seamlessly integrated into the rest of the site.

Animations can provide an interesting visual for visitors, especially when viewed for the first time. But they can become quite irritating when viewed repeatedly. Caution should be observed when using animations. When used to illustrate a process or motion, they can be extremely useful. But you should also give your visitor an option to turn the animation on and off at will and not automatically force them to view it. Animations can be programmed using Java or javascript, or can be created using Flash or Shockwave.  Video can also be used to illustrate motion or a process and usually shows more detail, but the file size is much larger. However, advances in animation technology allows us create animated objects that just don’t exist in real life and move them in ways only limited by the imagination.
 

Design Navigation Bars, Buttons and Links

Navigation involves how visitors will get to the various sections and pages of your site. This is done using navigation bars, buttons, and links.  These can be graphics, text, or both. Navigation bars located generally along the left side or across the top of the page contain buttons with each of the site’s main sections labelled. Button options include rollovers which can color or style when the visitor’s cursor passes over them, submenus which pop up during rollovers offering one click access to the sub sections of a button, and popup text windows displaying more information about what’s available at that link location. When deciding on the navigation system for your site, you need to keep in mind the following concerns:

  • Accessibility - How easy is it to reach most site sections?
  • Linking - How will you link to other site sections as well as other sites?
  • Crumb trails - How do you intend to help visitors locate where in the site they currently are?
  • Navigation bars and buttons - What color, style and rollover effects do you wish them to incorporate?
     

Determine Functional Elements (Forms and Search Tools)

In addition to determining the site’s style and structure, the design phase also addresses the site’s functional elements as well. These elements perform functions that go beyond appearance and structure, adding utility and task accomplishment to your site’s overall effectiveness. Some of the functions include:

  • Forms - Allow visitors to send information to you, submit orders and feedback
  • Informational Pages - Contain the info you want visitors to read such as products and services you offer, how to use certain functions on the web site, or info about your company
  • About Us - Special section that provides information about you, your company, its philosophies and ways of doing business to site visitors. Providing a human look at who they’re doing business with provides a feeling of comfort to your prospective customers
  • Site Search Tools - Allow visitors to more easily find specific information or terms included in your site
     

Assure Usability

One of the main purposes and goals of design is to instill usability in the site. Visitors who cannot find what they want or complete an order will leave your site and not return. Doing what you can to make it as easy to use as possible is one of the missions of the design team. Usability features that should concern you at this sage include:

  • designing the site to follow “common sense”
  • avoiding too many levels, too many menu options (No more than 9, preferably 7 or fewer)
  • providing a “cookie crumb” trail allowing visitors to see exactly where they are when they burrow several levels down for information
  • providing clear, descriptive page titles and button labels that clearly describe what’s on the page
  • providing a quick way for visitors to return to the home page from any page on the site
  • providing a graphical site tree or map showing the entire web site
  • conducting interactive usability testing by volunteers matching target audience demographics
     

Verify Continuity

Continuity describes the consistency encountered throughout the site. Continuity assures that visitors will not be confused when using your site and can trust that things will do what they expect. Some continuity elements to consider when designing your site include:

  • All buttons of a particular type or color should perform the same functions
  • Navigation bars and menus should look and act the same on every page
  • Duplicate buttons should be located in the same place on every page
  • Colors, style should be the same on all pages
  • Font type, size, and color should be the same when used for the same purposes (text boxes, titles, links, captions)
  • Page headers, footers, borders, and background should look the same on all pages
     
Design

HOME

© Copyright 2004 Web Fin Networks, Inc.