Making Mockups Easy

Mockups are a vital part of any design process, especially when you’re working with a client.  Spending hours upon hours coding without a design approval is never a good idea, and is likely to result in more time behind the keyboard for you and potentially a disappointed customer.

If you’re like me, when you first realized mockups were necessary you weren’t thrilled.  It’s extra time and effort, for sure.  But it doesn’t have to be that difficult, and it actually can save you time later when you’re designing!

I’ve tried the web-based wireframing and mockup tools, but I didn’t like them.  Where I really felt confident and like my work could pay off later, was doing mockups in Photoshop.  There are three tools and techniques that will forever be your friend: group/layer organization, Smart Objects and slice.

photoshoplayersGroup/Layer Organization
I admit it. I am particular about organization in general, but I promise that being hyper-organized when creating mockups in Photoshop will pay off. Take a look at this example to the right. This was my layer organization for the mockup for this site.  I used multiple groups to keep sections together which made layers I was looking for easy to find.  I also labeled every layer. Working this way means that when I am looking for something, I can find it quickly.  I can also move sections of my mockup around without having to select multiple layers but just selecting the group folder.  Awesome.

Smart Objects
You know you’re a nerd when just thinking about Smart Objects makes you physically smile.  They seriously are that great, though.  Web design tends to be a lot of repeated shapes and sizes and treatments, and Smart Objects make it simple to drop an image or text in a particularly sized frame and to duplicate those frames with the same graphic treatment where you need them.  Smart Objects can do WAAAAAAY more than this, but for mockups, the “new via copy” and editable smart object frame are amazing. To turn a layer into a smart object, just right click it, and choose “Convert to Smart Object.”  To duplicate an already existing Smart Object, right click the layer and choose “New Smart Object via Copy.” To edit, double click the little Smart Object icon that will show up on the layer thumbnail.  That will open a new Photoshop tab where you can edit just that item, constrained to its size.  Easy!

When mocking up in Photoshop, you’re already doing a lot of the graphic work for your site.  You probably already sized your images, formatted your logo how you need it and more.  Great news – you can use these items from your mockup directly on your site, with the Photoshop slice tool.  Just turn off your backgrounds behind the items you want to cut out, choose the slice tool (it’s hiding behind the crop button) and select the things you want.  Go to File > Save for web, and save your selections in the format you want.  Guess what?  You’ve just saved all the graphics for your site.  BOOM!

With these tricks, I’ve streamlined my mockup process and make them do double duty for me to boot.