Phase 4: Design & Prototype
    Overview
Approaching Visual Design
    Developing an HTML Prototype

It is tempting to approach visual design from a pure look-and-feel standpoint. Many award-winning designs have come from inspired moments (or all-nighters), rather than solid research or testing. Visual designers come from a variety of backgrounds including multimedia, print and industrial design. Many of today's web 'designers' come from the programming or technical side, with no training in traditional design background or theory. Approaching visual design for the web is creating a solution that combines effective navigation, visual appeal and functionality into one interface. The work that was completed during the structuring phase will now come into play as the designers apply the information design, navigation and content to actual pages. Think about your primary objectives and measurable goals. How will the visual design help achieve these goals? Designing for the web is more than just applying a pretty interface; it is focusing on creating an effective user experience, not just making it look cool.

User Experience

Intuitive design that allows the user to complete online tasks quickly and easily. Fulfills or exceeds the user's expectations, and creates a consistent and learnable experience. A combination of visual design, effective navigation and integrated functionality presented in a usable manner. Apple Corporation defines user experience as "a broad term describing the visual appearance, interaction and feedback...(of software)."

Reviewing Target Audience Needs
Who is your target audience and what are their specific needs? Pull out the deliverables from the discovery phase - the user profiles and audience demographics. Before starting the visual design, the design team should review the target audience's goals and technical specifications (or limitations) of the project. Reviewing user profiles will allow the designers to put themselves into the mindset of the user, instead of the developer.. Who will be visiting the site? What sites to they visit most often and why? How technically savvy are they? What connection speed are they on? Understanding what the target browser, platform, connectivity and savviness helps to design for the end user's goals, instead of a designer's ego. Begin your brainstorming and exploration with the user in mind.

K-size Handicap

The client may ask for a page to download in 40k or less. As a starting point for visual design, this is a handicap, and can limit the creative thinking. Make sure to respond to the client's request of a 'fast-loading' page - but don't let that limitation affect creative thinking. Start out of the box, and then restrain after the overall look and feel is set.

Conceptual Brainstorming
Pull out the creative brief and determine the visual and perceptual goals of the site. How should the site be perceived? Corporate, elegant and sophisticated? Casual, humorous and bright? Brainstorming should be a fast, iterative exploration of concepts. Start with an inspirational board, which is a visual representation of the creative brief. Begin to associate the web site's look and feel with the company's branding, identity and audience's perception. Pull colors, fonts and images associated with the direction of the creative brief. This includes signed-off navigation, content information and required logos, company colors and anything else you can dig up from the client-side marketing team.

Inspirational Boards

A visual creative brief. This is a chance for the designers to cut, tear, print and paste together their visual concept of the web site. Sometimes, the designers might have a certain impression of the target audience or client's desired perception of the site. The inspiration board can be focused on the target audience, the company, the topic or industry. It should be a visual reference that can stand side by side with the creative brief.

Developing Initial Comps
Several rounds of design directions may be shown during this creative stage. Presenting look and feel can be tricky, as much of the decisions made during this time are based on aesthetics and opinions, which can vary from day to day, or from CEO to CEO. Stay focused on maintaining control of scope creep during this phase and help to maintain client control. Set clear expectations for design rounds (2-3) and client response/feedback (1-2 days). Keep the client on track with the original goals and intentions outlined in the Define stage. Revisions can run rampant during this time, although sometimes it does take a few iterations to hit the target. Work with your designer(s) to maintain company branding and standards, while making sure the directions shown provide a compelling, yet smart solution. Clearly define your expectations with the design team - letting them know how many directions are due, and how many hours are allocated for each direction. Tracking hours at this stage is very important as this is one of the areas where budget can get quickly out of control. Remember to reserve enough hours for revisions and graphic production.

For an easy reference to standard screen sizes and their maximum resolution, refer to the size chart at the bottom right of the Dreamweaver interface. No more guessing.

Client Control

Education continues to be the primary solution to keeping a project in scope and the client (external or internal) under control. Make sure you are getting feedback from someone with the authority to make decisions. Pull out the initial creative brief, which was presented and approved in the Defining stage of the project. Make sure the client is on track with their original goals and intentions, and not caught up with 'make it cool' mode.

Creating Graphic Templates
Once the design direction is set, and the look and feel has been established for all main pages (the homepage, main section pages and secondary pages) the creation of graphic template files can be created. These files are usually created in Fireworks, and saved with unrendered text in layers to allow for easy editing and changes. These pages are approved by the client, and then handed off to the HTML production team (or individual) where they will be translated into HTML pages in Dreamweaver, using the slicing and optimization tools in Fireworks. Graphic template files are the main 'look and feel' pages that will be translated into regular HTML or dynamically populated shells during the production stage. Testing the designs with users during this stage is helpful, before you get into full-blown production, you will want to get feedback on the layout, navigation, look and feel and functionality.

Many sites today are created to automatically stretch with the browser. Sometimes called liquid pages, these pages automatically flow to the width of the browser. Dreamweaver's autostretch feature allows for easy experimentation and implementation of this function.

HTML shell

Once the graphic templates (layered Fireworks files with text and graphics in place) have been approved, HTML shells are created. These are generic pages based on the templates that were provided by the design team. Actual HTML pages are created using the style guides set up within the shells.

Creating Style Guide and Handoff
The graphic style guide is a detailed overview of the visual design stage. It is designed to be handed off to the production or maintenance team for ongoing graphic production and/or maintenance of the site. The style guide can be created in HTML, and has specifications for color usage, font usage, photo and graphic treatments and details for usage of other elements (buttons, graphics) through the site. The style guide will be expanded to carry HTML information once the production stage is completed, and can be burned onto a CD-ROM and included in the handoff packet once the site is completed, and maintenance begins.

View Complete Styleguide

Style guide

This document will set the standards for visual and html elements for all main pages of the site. The level of detail will vary depending on the needs of the site, but the treatment all main elements (fonts, graphic treatment, colors, etc.) should clearly indicated.

Developing an HTML Prototype >>

. . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . .