7 best practices for creating mockups

Photoshop has a large following of devoted users, thanks to its deep wealth of features, options, and user-created content. This list of the 250 best Photoshop resources speaks volumes about the tool's popularity. And many pixel-perfect die-hards still feel more comfortable designing their mockups in Photoshop over its direct competitors and more specialized mockup tools.

Win clients & work smarter with our FREE ebook: get it now!

Photoshop can be used to make phenomenal mockups, as long as you know the relevant features — some of its features can seem like overkill for web design unless you're editing images heavily.

Let's take a look at some tips for creating mockups in Photoshop (based on advice from PlasticMinds and our own experiences), and how to make the experience more collaborative.

01. Take advantage of Shapes & Shape Layers

Much in the same way a wireframe provides the basic outline for a mockup, shapes and shape layers are a good starting point for your PS mockup. (As a bonus, all layers are also preserved if you import your Photoshop file into our app, UXPin).

Photoshop gives you a variety of options for creating these basic shapes, and they can be easily resized for edits later. Jake Rocheleau agrees, and points out that if you look closely at most published websites, you can still find the original shapes used for headers, navigation bars, buttons, and sidebar widgets.

This tutorial explains the essentials to Shapes & Shape Layers.

02. Use crisp antialiasing for fonts (when possible)

This prepares your mockup for browser rendering. But it may not work for all fonts, so when in doubt, check with your developer.

To learn more about font anti-aliasing, check out this tutorial. If you'd like to learn more about typography in the specific context of web design, check out the free e-book Web UI Design Best Practices.

03. Choose web-safe fonts as a backup

It won't matter how great your font looks if it's not compatible with CSS/HTML. Browser text, on the other hand, can be indexed by search engines, used by screen readers (for the visually impaired), and make for easier translations. It's best to start out using them (aside Comic Sans or Papyrus, obviously).

Google Fonts is the largest source of free web-safe fonts (check out awwwards’ selection of the 20 best). On the other hand, Adobe Typekit is well worth the money: our company has an annual subscription and the 4200+ fonts are more than enough.

04. If there's several versions of the page, use different groups

If you're doing multiple versions of a mockup, usually you'll just be modifying the main content. The header, footer, and sidebar probably won’t be touched. To speed things up and help you stay organized, you can create folders like:

• content - homepage
• content - feature photo
• content - call to action

In each version, you can just turn on or off the visibility. Whenever we work in Photoshop, this tends to improve our mockup efficiency.

Next page: 3 more best practises for creating mockups in Photoshop