Tips for Building Clean Website PSD Mockups in Photoshop

Advertise here with BSA

If you’re a web or graphics designer then you should know about that oh-so-adorable design suite Adobe Photoshop. Folks who have been using the software for years can vouch that it’s quite difficult to master. There are so many techniques for creating UI elements, website layouts, icons, and other digital graphics. It’s crucial that you learn how to organize these assets into a complete, unified design.

In this article I’d like to cover methods of organizing PSD files in Photoshop. Whether you’re a one-man team or working in a large studio setting, it always helps to stay organized. These tips may appear like common-sense ideas but so many designers overlook this systematic and detailed approach.

Consistent File Delivery

If you’ve been comfortable working as a one-man operation you may have developed your own sense of file organization. This is great if everything is still easy to locate when passed onto a 3rd party. But never expect others to just understand your line of thinking.

When finishing up a PSD file and delivering it to someone else you want to be as precise as possible. Files should be named based on their relation to the interface. If you need to keep separate versions it would be best to separate those into folders(v1, v2) with the final version being labeled as such.

Also it’s not necessary to include the date in your filename because Windows Explorer & OS X Finder can give you info about when the file was last modified. If you need the date for some other reason it’s perfectly acceptable – just try to keep filenames as small as possible.

I would recommend splitting UI designs into separate PSDs based on their purpose. So you may have 1 primary PSD for the website and internal pages, then another PSD for the mobile responsive site and those pages. Then a 3rd PSD might contain individual UI elements like form inputs, buttons, select menus, and other common pieces of the interface.

The main goal is to be consistent with your delivery. Keeping all your graphics organized in a similar pattern helps you quickly locate items as needed. This also maintains a level of understanding between other designers or developers.

Starting from Scratch

We all need to start somewhere and this can be a daunting task. I’d recommend always using a grid when designing your mockups – whether for websites, mobile apps, or a combination of the two.

Grids help you get a better sense of vertical and horizontal spacing between elements. It also helps you adjust proper font sizes and line heights for blocks of text. GuideGuide is a PS extension for CS5 and CS6. You can generate custom guides for any layout you need with ease.

Using a fluid-based grid system also helps you scale each design from wide monitors down to smartphone screens. As I mentioned earlier it may be easiest to save these files as separate PSD documents. But using the same grid system helps with consistency and fluid design patterns.

You might also try looking into layer comps for web design interfaces. These work much like InDesign for master pages which build upon internal pages. You can design multiple layer comps which relate to different pages on the website. Each page most likely has the same header and footer, maybe even the same content structure. But each page will probably use very different internal elements and blocks of text.

Clean Layers

Every designer will bring this up so I won’t go crazy about layer structure. But it is very important that you name layers beyond the Photoshop defaults. The tiny layer thumbnail is not always enough to provide a guess as to what the layer contains. And why should you toil away designing a fantastic layout only to leave the layer structure a mess?

Layer groups will be your best friend here. Build parent groups to house smaller groups – a header group may contain a logo group, search bar group, and navigation group. This may seem confusing or nitpicky but it’s surprisingly versatile.

The reason it may seem annoying is if you were to create more elements, add more buttons or boxes into the layout. Then you’d be scanning all the groups to make sure your new layer is in the proper order. But coming from a developer’s perspective there is little need to change or update anything beyond basic elements Developers just want an easy-to-skim PSD file with everything labeled nice and neat.

I suggest playing with different ideas to find a layer structure that works best for you.

Triple-Check your Work

This might go without saying but I’m gonna say it anyways: don’t expect to get it right the first try! Or even the second try for that matter. Sometimes we feel the creative juices flowing and just want to keep moving. But this is how spelling mistakes or slight alignment errors get saved into the final mockup.

It’s never a bad idea to let someone else take a look at your designs to gather some feedback. If the project is under NDA then you may only be able to share with your client. But you don’t always need someone else to proofread your design skills. Just take a break from the computer and go do something else. Get your mind clear and really try to distance yourself from the work(at least 30-60 mins).

When you come back to Photoshop any glaringly ridiculous mistakes will be glaring right back at you. It’ll be quite obvious what needs to be changed, be it a color scheme or some heading text. Just try to avoid creating your mockup and calling it finished without a second look.

Closing

It’s never an easy goal to stay organized. How many of our houses look like a bombshell? But the easiest route is not always the best route when it comes to website design.

Whether you’re new to Photoshop or have been using the software for years, these organizational structures will help out your workflow. It takes a bit of adjustment but you’ll thank yourself in the future. Along with these ideas feel free to share your own organizational techniques in the post comments.