[Taken from the first edition of Writer / Designer]

A mock-up is a rough layout of a screen or page. It is most commonly used for drafting Web sites, but it can also be used for drafting any type of still composition that is primarily visual, such as a poster, an album cover, a brochure, or an instruction set.

Essentially, a mock-up is an outline of a visual project. A good mock-up should include the proposed layout, colors, images, fonts, and recurring elements such as headers. Though mock-ups may include the actual textual content, often they do not. The idea is to create a kind of road map that shows where everything will eventually go, not to actually create the finished product. Web authors often compose mock-ups by hand, on paper, or in some type of screen-based software such as Photoshop. You can also create mock-ups using word processors, spreadsheets, or slideshow software. It’s not so much how you create the mock-up that’s important as it is what the mock-up illustrates.

Mock-ups will also let you know where you might need to make adjustments before you put lots of time and effort into building your project. As writer/designers, we often find that our first ideas about how to arrange elements need tweaking, and they sometimes don’t work at all. By first sketching out really rough layouts and then revising and making changes, we ultimately save ourselves time and create more successful designs.

Mock-Up Guidelines

Here are some questions to consider as you design a mock-up: