When you’re working with mockups to test your ideas, speed is crucial. You don’t want to spend days working before you can gain valuable feedback. For that reason Photoshop is often ignored in favour of sketches and wireframes. Using Photoshop, however, to create high fidelity prototypes doesn’t need to be time consuming. Many of the components graphic designers use are freely available on the web and can be quickly remixed to create almost any interface. In this article I’ll walk you through a process that enables you to mock up high fidelity prototypes in a matter of hours instead of days.
Before you begin
To make this work you need:
- A basic understanding of Photoshop.
- Photoshop (in case you don’t have Photoshop you could give Gimp a try).
- A few sketches of the pages you want to make.
- An idea of the ‘feeling’ you want to communicate.
Step 1: Grid and baseline
Grids make it easy to make decisions on what to place where. One of the most popular grids in the 12 column 960 grid that you can download from 960.gs. Pick the psd file from the zip and use it as a starting point for your document.
Opened the 960.gs grid and added a baseline – available for download in the mock-up template.
Bonus: Marc Boulton wrote a lot on designing with grids.
Bonus: Teelax has created a psd file ready with columns, baseline and some text.
Step 2: Background pattern
Add a little more character to your mock-up by using one of the quiet patterns from Subtle patterns.
Added wood pattern – this one and 5 others available in the mockup template.
Bonus: how to make a pattern in Photoshop.
Step 3: A typeface with character
Use Font Squirrel to find a typeface that will give your site a bit of extra character. You can use it for the logo and important headers. The rest of the copy can be in Arial or Helvetica and you can use Lipsum to quickly generate some copy.
Added these typefaces: Bebas, ChunckFive, CabinSketch, Josefin and Pacifico – all 5 typefaces are available in the mockup template.
Bonus: more on selecting typefaces.
Step 4: Add the interface elements you need
If you look at Dribbble you see that some people are obsessed with creating interface elements. Luckily a group of these people has made their work available for free. You can find many of these elements on 365psd.com.
Added navigation and button
Bonus: the web is obsessed with icons, here’s a good set, and a blog post with more.
Bonus: there are some attempts to create a complete sets, here are some examples.
Step 5: Add some bold photography
If you’re looking for some great photos to add to your mock-up, the easiest thing you can do is go to Flickr’s advanced search and check the ‘search in Creative Commons’ photos box, for example these landscapes.
Combined the video player plus a spices image.
Step 6: Make a clickable prototype
By using a service like InvisionApp you can easily connect your screens and click together a prototype.
Linked two screen together in the Invision app, you can try it here.
Bonus: a free option to connect images is connect a sketch.
Bonus: If you plan to use the mock-ups in a presentation instead, here are links to an iPhone template and a MacBook Air template.
Finally you can download one zip with the grid, 5 backgrounds and 5 fonts via this link:
Download the mockup template zip here
Let me know how it goes, and leave a comment if you know more great resources.