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.
Step 2: Background pattern
Add a little more character to your mock-up by using one of the quiet patterns from Subtle patterns.
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.
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.
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.
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.
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.