How to Design Graphic Mock-ups

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.

How to create your mock-up

1. 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 your site.

   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 growing population.

   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 always possible.

   There is a detailed discussion of this topic on the forums.

2. 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.

3. 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 format.

4. 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 right.

   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 same yourself.

   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 format.

5. 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.

6. 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 content.

• 

  This was the original design for A Padded Cell, created using Inkscape. Download the svg file.

• 

  This was a site I created about our wedding in June, 2007. Created using Gimp. Download the xcf file

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.

• 

  The current A Padded Cell design (you're lookin' at it!), created in Inkscape. Download the svg file.

• 

  An early design for the Webmaster Forums that was never used, creatd in photoshop. Download the .psd file.

You may also be able to find some samples of mock-ups by browsing the projects section of The Webmaster Forums.

Resources

• Inkscape (available for Linux, Mac and Windows)
• Five simple steps to designing grid systems
• Optimal width for 1024px resolution? and Gridding the 960 – explain why 960px is an optimal canvas width and shows different ways of applying a grid, from Cameron Moll.
• How big are your mock-ups? forum discussion
• Huge collection of CSS layouts

Discussion

Discuss this article in the forums.