Spoiler alert: you may have read/seen this post already. Tucked into the Focus Lab journal is a lot of valuable information from the past few years of learning and growing. We want to make sure you have access to all the in-our-heads goodies we have to offer.

This is a super valuable post by our former Interactive Director Charlie Waite. Enjoy!

The day has finally come for me to outline the layering process we’ve adopted at Focus Lab. This system emerged to help me organize my thoughts and flush hand-drawn wireframes into Photoshop before going in and pushing pixels. It also allows multiple designers or developers to navigate robust PSD files quickly and easily. Further, it is convenient for designers who like to work more freely within a PSD, providing for a certain level of structure without impeding freeform design processes.

Alright, here we go…

After I’ve mocked up a hand-drawn wireframe I then open Photoshop and add 10-15 folders, depending on the number of sections outlined in the initial wireframe. This instantly gives me a structure to start with and, better yet, the freedom to work on different areas of the page in no particular order without worrying about missing important information or sections.

Next, I add in the high level items from the wireframe: headers, body, footer, CTA (call to action) areas, etc. For these higher level areas we use: // HEADER // to denote that section. Initially I added in the “//” before and after the text to help distinguish sections from content, but I ended up liking how it looked in the sidebar as well.

For all subsections of that main category “// HEADER //,” such as navigation, logo, CTA buttons, etc., we place “::” before the subcategory.

For specialty items, like modal windows, colors, fixed navigation, etc., we use “**” before and after the text to delineate it from the rest of the layers palette.

In the instance of buttons, we use a global folder called “something btn.” Within that folder we include the ‘static’, ‘hover’ and ‘pressed’ states so that the development team or other designers on the team can easily find all assets.

The purpose of this layering system was to bring a consistent look to our PSDs. Regardless of the project lead, anyone can jump in mid-way and add/edit without wasting time searching through hundreds of unnamed and ungrouped layers (internally known as the “Kenney Layers”).

Hopefully this helps shed some light the processes at Focus Lab that help keep things organized and consistent for our ever-growing team. What process(es) do you or your team incorporate? It would be great to hear other suggestions of how to maintain a unified structure when dealing with large PSD files.