Build a Graphical Mockup of your Site as Part of your Development Plan

Graphical Mockups are the designs that you create of the site with a graphics program such as Photoshop™, Fireworks™, the GIMP or another graphics program.

This mockup focuses upon making the site look attractive. (Almost half of Web visitors believe that a site is more credible based upon how attractive the design is.)

Some key concepts for the Graphical Mockup include:

• Account for how visitors scan and skim text
• Account for the “Eight Second Test” Rule. In eight seconds or less...
• Can the visitor figure out what the site is about?
• Can the visitor figure out the site's navigation?
• Can the visitor see the entire page of any landing page of the site?
• Focus the visitor upon what action you want them to take
• Keep everything simple
• Test in “Grayscale”. If the design works in grayscale, it will probably work wonderfully in color (the right colors)

Complete the design first, before adding the colors.

Note:One benefit of using CSS (thereby future-proofing your site’s design) is that changing colors for the entire site is easier to manage.

Here are links to more planning information on this site.

• Discovery
• Wireframing
• Storyboarding
• (Note: Storyboarding involves the following steps...)
• Copywriting
• Rough Sketching
• Creating a Graphical Mockup
• Building a Color Mockup
• Building a HTML Mockup