Notes on Designing a client website

Part I: Designing a client website using Adobe Fireworks

Tonight we are using Adobe Fireworks to layout a design for the non-profit company's website. The product we're creating is called a Design Comp. This an electronic drawing that shows a detailed design of a web page.

Your goals for this activity:

• Apply design principles when creating visual designs.
• Create design comps of a home page and a sample content page to show different looks.
• As a team, select the best design comps to present to a client.

Reading Assignment: Start the tutorial
Design Comps are composed of the following elements. It's important to consider each aspect as you develop your skill in communicating your client's plans for a website.

Mood: The comp is the client’s first impression of what the site really looks like. The comp should immediately convey an appropriate message, such as fun, serious, youthful, organized, trendy, or family-oriented.

Color: Colors should be well coordinated, fit the mood and tone of the site, and provide enough contrast for legibility. Discuss web-safe colors and decide whether it’s appropriate for students to design only with web-safe colors. To see how colors work together and to match colors, visit the color wheel found on Well Styled.com

Fonts: Use different fonts sparingly to be effective; consider how size and weight draw attention. Most sites are designed with one or two fonts, using size, color, and boldface for further distinction. Make sure the contrast between the font and background colors is adequate to make the text legible. Discuss which fonts are common on Windows and Macintosh operating systems.

Images: Images reflect the content and mood of the site. Photographs should be the highestquality images. Graphics should match the mood and tone of the site. Text used with an image should be close enough to be visually associated with the image. The logo of an organization should be properly positioned, sized, and so on. Go get images from Getty Images.

Text: Web visitors are more likely to skim than to read carefully. The biggest challenge is to use only as much text as is necessary to convey key messages. Organize the text so visitors can scan it to find relevant information.

Navigation elements: Buttons, menus, and navigation bars should all reflect the site mood and integrate effectively with site colors, fonts, and images.


Part II: Reviewing and revising to client specifications

After you create the Design Comp the client reviews it and provides feedback on likes and dislikes. You need to revise the Design Comp to reflect all changes from the client. By the end of the class, tonight, you should have completed Design Comps for both the home page and the secondary pages of your website. Those will be used to build the actual website in Dreamweaver.

Your goals during this process:
• Present design comps to a client.
• Use active listening skills during a client review.
• Revise design comps and present revised comps to a client.
• Create production storyboards for a client website.