by Megan McDermott, 1 June 2008 - 10:22pm
A typical stage in the web design process for most professionals is the
creation of a graphic mock-up. A graphic mock-up or proof allows you to focus
on the overall design rather than the logistics of creating the design using
CSS. This article will outline the process of creating a graphic mock-up and
include several examples for download.
What is a graphic mock-up?
A graphic mock-up is simply a non-working image of the design created
using graphic design software. The mock-up is often a fully detailed version
of the design as it is intended to be viewed when created in HTML and CSS. In
professional settings, the mock-up is often created by a graphic designer and
sent on to a coder to be developed in HTML and CSS.
Why create a graphic mock-up?
Developing a separate graphic mock-up allows you to focus on the visual
design of the site before getting into the intricacies of actually creating
the web page. This allows you to perfect the colours, layout, and imagery choices and
create a fully coordinated design. It also allows you to be creative
without being bound by the limits of HTML and CSS.
If this step isn't followed websites often end up with a mish mash of
styles and design elements that don't work together as a coherent whole.
Which software to use
You can use any graphic software you're comfortable with when creating a
mock-up. Professional designers will usually use Photoshop, but others prefer
vector programs such as Adobe Illustrator. As a beginner, you don't need to
invest in expensive professional software to create great graphics. Free and
low cost alternatives such as Paint Shop Pro, Gimp (raster), and Inkscape
(vector) will be just fine for your needs.
What's the difference between vector and raster?
A vector program uses mathematical calculations to draw lines and shapes.
These can then be filled with colour, including gradients and patterns.
Vector drawings are crisp and sharp. The shape drawing tools are great for
creating boxes that can be easily created in HTML/CSS.
Raster programs create images using coloured pixels. Every element in the
image is simply a collection of dots. If you zoom in closely you can see this
in action. Raster programs allow for intricate blending of images and the
integration of photographic elements.
Both types of design software are useful for creating web page mock-ups. I
may use one or the other depending on the style I want to achieve in my
design. This will be illustrated more fully in the examples below.
How to create your mock-up
- Create a new image with the dimensions you want to work with. Often
designers will start with a typical screen size, such as 1024 x 768.
You'll probably want to design for the most common screen resolution for
Which screen resolution should I design for?
Ideally you would check your site stats and find out which screen
resolutions are most common on your site. I find that browser and screen
stats can vary significantly from site to site. These days, 1024 x 768 is
usually the most common resolution, but some sites find a significant
proportion of visitors using 800 x 600.
There is quite a lot of variation among designers in how to approach
this. I feel that it's best to make your site look best for the majority
of your visitors, while ensuring that it's still looks good for the rest.
Other designers stay on the safe side and design for the smallest
resolution in use (800 x 600).
I'm also finding that larger screen resolutions are becoming
increasingly common. On one of the sites I work on 1280 x 800 is the most
common resolution. Designing for the lowest common
denominator means that your site is less likely to look good for this
Another thing to consider is the length of the page – there will
be more on the page than what is viewable on an 1024 x 768 screen. I
often make my mock-ups much bigger (often 1200 by 1500 or longer), to
make sure I account for the lower portions of the page. Inside this large
image is a 1000 pixel wide box that becomes the canvas for the page.
When you're starting out, using 1024 x 768 is a good bet. As you're
working, you may find that you want to enlarge the canvas, which is
There is a detailed discussion of this topic on the forums.
- Now is a good idea to create some guides
or set up a grid for your design. This helps to keep your design uniform
in proportion and pleasing to the eye. A larger discussion of using
grids in web design is available from Mark Boulton. As a beginner,
you don't have to go into too much detail here – just know that
having some guides (e.g. dividing the page into 3 or 4 equal columns) is
a good idea.
The image to the right shows a starter canvas with a basic grid
applied. This image was actually set to 960px width to make it easier to
apply a consistent grid. The gridlines are spaced 32px apart, with major
gridlines every 5 lines. This divides the canvas into 6 equal columns,
which are grouped into 3 columns using guides. Download this canvas in SVG format.
- If you're using a wider canvas you may
want to create a white box to hold your page content. This way you can
ensure that the outer background looks good on higher screen resolutions
while keeping your actual design within set limits. At this stage I'll
also usually apply a darker background to the remainder of the page. It's
usually good to have something there so the page doesn't look too empty
at higher resolutions (unless you're going for a white on white look!)
This image shows the same starter canvas as above but with a darker
outer background applied. Download this canvas in SVG
- Start creating! Often you'll begin with the header since it is the most
important thing people see. Don't forget about the content too! It's a
good idea to create boxes representing the content you want to have on
the page. This way you can play with their shapes and get the layout just
Try not to be too constrained by what you
can and cannot do with CSS. It's important to be creative, but do keep
the technical limitations in the back of your mind. This way you'll learn
to push your design skills to the limt, even if you have to make some
compromises later on. In a professional setting a designer will often
create several mock-ups for the client to choose from. You can do the
This thumbnail shows a mock-up with basic page sections applied:
header, sidebar, footer. Once you know where the major sections of your
page are going to go, you can begin adding the details. Download this canvas in SVG
- Once you're completed your mock-up, it's time to begin translating it
into HTML. In the old days, designers used slicing functions in graphic
programs to divide the mock-up into individual images that would be placed
in a table layout. Techniques have changed now that tables are no longer
used for page layout.
Determine which parts of the page need to be done with images and
which can be done with CSS. These may be actual images in the HTML or, as
is more often done these days, background images in CSS. Take those
parts that need to be images and create the image files by cropping or
selecting and exporting the parts you need. Make sure you save a copy of
your full mock-up – you never know when you'll need it again.
- Now it's time to take those images and create your HTML and CSS page
layout. Go back to your mock-up and determine the major sections. These
become the major divs that make up your page (header, content, sidebar
etc.) You may need some additional containing divs to make the layout
come together. It's often a good idea to work on the HTML first, getting
the structure correct, and then building the layout with CSS.
Not sure how to create page layouts with CSS? Not to worry –
future articles in this series will help you learn the basics of CSS
layout. Another option is to look for CSS templates that match your page
layout. Many sites have pre-built HTML/CSS templates for a variety of
typical page layouts.
Examples of Graphic Mock-ups
The examples below are released under the Creative Commons
Attribution-Non-Commercial license. You are free to create derivitave works
from the examples for non-commercial purposes as long as a credit and
linkback is provided to this article. Mock-ups in svg format should be viewed
with a program that has good support for svg, such as Inkscape, although
other programs and even web browsers will be able to show most of the
The following examples are copyrighted by Megan McDermott and may not be
reproduced in any way. The orange/teal design is available for sale –
please let me know if you're interested in using it.
You may also be able to find some samples of mock-ups by browsing the
projects section of The Webmaster Forums.
Discuss this article in the forums.