Moove’s PSD File Structure – Responsive Design Guidelines

As a designer, it’s important that I can do things quickly and effectively.  One key aspect of my workflow is the fact that I am almost always working in a team; this means that making sure we communicate our ideas with others in an intelligible and clear way is crucial.

Technological advances over the last few years have meant that we now design for desktops, tablets, mobiles and smart TVs. Almost any screen you use today can display a website – that’s amazing!

I don’t intend to talk about responsive design in this post, as that is a subject well debated on many other blogs. Instead, I am going to present the way that we, the team at Moove, have developed our design process and workflow to be extremely efficient for the whole group.

Like most website design agencies, we use Photoshop to create our mock-ups. In the past five years, we have gone from designing for 1024 pixel screens, to starting to use the 960 grid, to creating designs for wider screens. And thanks to the new gadgets on the market, we always make website design versions for tablets and mobiles as standard. It’s an exciting time!

So here’s our challenge: How can I make sure that my idea will look good and work well on all devices? And at the same time, how can I structure my Photoshop PSD file so the coder using it has a clear view of the full design?

An agency that I admire a lot, teehan+lax, have shared their PSD template in one of their blog posts. The approach was quite interesting and novel, as they were showing three displays in one single file. What a great idea! But we felt that we needed a bit more than that. So, based on their example, we’ve created our own PSD starter template.

Having a clear PSD file structure saves time

As our coders were always asking questions we felt could be answered simply by having a clear PSD file structure, we’ve ended up designing a sidebar that contains the main information about the design. That includes page width, the number of columns (most of the time this is 12, but there is the occasional exception), targeted device, main colours and also a legend for layer colouring. The last one is very important, as we always need to make sure that every element is found easily by the person who codes the website.

We've designed a sidebar that contains the main information about the design. That includes page width, number of columns (most of the time this is 12, but there is the occasional exception), targeted device, main colors and also a legend for layer coloring.

Most of the time, the PSD file accommodates three areas: desktop, tablet and mobile. Each of these areas is divided into 12 columns so that the design can be coded on bootstrap or any other modern framework. Sometimes we include four areas in the PSD file, as we want to show our clients and coders how the site looks on larger screens (e.g. 1920 pixels wide). If the project requires it, we include a tablet landscape view as well.

Most of the time, the PSD file accommodates three areas: desktop, tablet and mobile. Each of these areas is divided into 12 columns, so that the design can be coded on bootstrap or any other modern framework.

We’ve been conscious of the way we name the main layer groups, so naming conventions are in place as well. The layer groups that include the designs for a certain screen are always named by using the screen width and the number of layout columns. The comments layer group additionally includes sidebar elements of colouring legend and design notes.

We’ve been conscious of the way we name the main layer groups in our PSD file structure, so naming conventions are in place as well.

Moove’s PSD file structure

I’m sure that we will be continually revising and trying to improve the structure of this file, but for now, I am very happy with what we have. From the design point of view, it helps me a great deal when it comes to visualising the site on different screen sizes and devices, all at the same time. From the coder’s point of view, they have all the information they require, don’t need to clarify anything with us, and consequently, we avoid having to spend time on Skype calls or internal meetings that we might otherwise use designing.

The only downside that we’ve discovered by using this approach so far has been this: if you are working on a slow machine, you might have problems using the file, as it can end up being quite large. We’re all professionals, however, and investing in good machines is always the right thing to do! Personally, I anticipate that Adobe will introduce a concept similar to the Artboards from their Illustrator software to Photoshop and this will solve the file size problems.

So go ahead! Download the PSD file and let us know how you get on with it.

Let's connect

  • Have you got a web development project you need help with? Get in touch.
  • Subscribe and get our latest news and insights delivered directly to your inbox!