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.