Photoshop IA: The Structure Behind The Design

While everyone else is busy studying the UI in those clichéd skewed monitor dribbble shots, without fail, I’m that guy who’s zooming in to the bottom right of the photograph and picking apart how that designer has structured his or her PSD.

 

This pattern led me to realize something. As many distinct and different ways as there are to actually design a website, a user interface or even a newsletter, I’ve always found the byproduct of such endeavours to be a fascinating and often overlooked form of design in and of itself. Of course, I’m talking about the art of structuring one’s PSD: Photoshop IA, if you will.

“Necessity is the mother of invention” goes the saying, and it couldn’t be more true for how this idea made its way into my daily workflow. Aside from the universal frustration of receiving a comp and finding a billion layers named “layer 103 copy 14” that I’m sure all designers can relate to, it was my underlying fascination for order which pushed me to develop this idea of Photoshop IA. Over time, I became aware that I was inadvertently developing ‘pieces’ of this framework to satisfy tangible day-to-day needs that I was facing, those of which being achieving a) smoother collaboration with fellow teammates (both design and dev) and b) the simplification of both starting as well as continuing work (as a new team member) within large and complex design comps.

Although this led to extensive experimentation which resulted in dozens of ways of organizing and structuring my files, I believe that I have at least nailed down a preliminary formula for a half decent Photoshop IA. As a side note, things such as properly naming folders & layers, globalizing common elements and having a starting lineup of things like grids, palettes etc. will be assumed for the purpose of this post; a slightly separate topic perhaps worthy of a more thorough exploration in the future.. Maybe.

In any case, the guiding principles of the Photoshop IA framework are actually fairly simple: Color makes for great metadata, folder hierarchy delivers valuable perspective _and lastly nesting folders helps you manage large sections with ease._

 

Color makes for great meta data

There’s a reason Adobe has been including the ability to color code your folders for a while now, and it’s a piece of functionality that I’ve adopted as a key part of my workflow. Color coding my Photoshop folders adds a lot of contextual meta data that not only helps me keep track of what portion of the comp I am working in or viewing (when there are a hundred open folders), but it also alerts me to it’s current state (e.g., done, not done, supplementary, etc.) which I find useful when managing multiple comps at once.

I can also tell you that this is a subtle nuance that has helped both myself and the developers I tag-team with collaborate more effectively on countless occasions through a shared understanding in what constitutes primary content versus secondary and hidden / triggered content like modals and alerts. Above you’ll see a quick legend that I’ve put together which depicts how I tie in state and purpose to my Photoshop folders simply by using color.

 

Folder hierarchy delivers valuable perspective

This one is fairly straightforward: structure your comp like you would a site in HTML. I always begin with the more invisible / supplementary elements (much like the scripts in the header tag of an HTML page) which includes things like the deprecated assets folder that house buttons, text styles and other elements that I’m no longer using. The tools folder follows and is packed with goodies like interaction cursors, grid frameworks, color palettes and wireframes from our client design studio – all things that will hopefully aid me in the design work to come.

After that, I work my way down the site in a linear fashion by beginning with the header which typically includes things like the navigation, logo, icons and other universal elements. The body element folders are usually where we begin to create more root and sub folders, as they typically contain larger elements like focal banners, introductory content, sub content, galleries, etc. Last but not least, we get to the footer and site background folders which house – wait for it – the elements that make up the site footer and the background that the rest of the site sits upon.

 

Nesting folders helps you manage large sections with ease

Nesting isn’t just for yellow throated New England warblers. Leveraging the ‘top-down’ style of folder hierarchy that we just looked at, I apply the same thinking when creating the internal elements (e.g., buttons, tabs, etc.) so that there’s an inherent consistency as you dive deeper into the design comp.

Because most elements are made of a background (or visual) and content (e.g., text / iconography), we can structure our folders in such a way that helps us quickly find and interact with all the elements that make up a particular section of a page. Not only does this make finding elements easier, but it also keeps the larger components (think a full analytical graph) in check because they live in easily manageable folders within a larger root folder or section.

In short, what are the benefits?

  • Logical ordering makes for smoother collaboration with fellow teammates (both design and dev)
  • Color coding provides useful contextual at-a-glance information on folder state and purpose
  • Large and complex design comps are simplified through nesting, making components easier to find, tweak and use
  • And lastly, no one ever has to get a comp from you with a thousand scattered “copy 14” layers

It’s a starting point, but there’s always room for improvement.

I’m sure there are a ton of things that still have room for iteration, and for that I look to my friends and colleagues for critique. One thing that I will admit I am currently stuck on is that all the folders tend to slightly blend in to one another when fully expanded. I’ve tried appending, prepending and messing with the upper / lowercase nature of the folder and layer names and have not quite yet worked out a perfect solution.

I think Charlie’s method of prepending a ‘//’ for all his root folders and ‘::’ for all secondary folders, comes closest to solving these issues from what I’ve seen. Furthermore, I think his method does a good job of separating the main levels of hierarchy when dealing with an entire screen of open folders.

As simple as they are, I think there’s something to these guiding principles of Photoshop IA and I look forward to see how it goes on to evolve and become more refined as more people challenge, build upon and generally improve this idea. For now, however, all of my projects always start with these principles and it’s been working out well thus far.

Written by

Andrew Semuschak

Andrew Semuschak

Sign up for our newsletter