PSDs: Keep it Clean!

There’s nothing worse for a web developer than starting a project from an untidy or unorganised Photoshop file! In my role at Tann Westlake I both design and develop, so at any one point I could be providing artwork for another developer to work from, for myself to code or I could be the one building a site from another designers visuals, so I know the importance of a PSD that’s easy to read and understand.

I’m fortunate enough to have a knowledge base of both practises whereas some designers may not, but I always like to group my layers as I would imagine the basic HTML of a page may be laid out and named something close to the relevant CSS classes that might be used. The screenshot below is from a blog page of a recent site I worked on the design for and gives a good example of how a standard page on a website may be organised in Photoshop.

Although it may be fairly obvious from the artwork itself the above layer structure could also quickly be translated by a developer to the following page layout, obviously the grid group is for artwork purposes only and the properties of ‘BG’ are attributed to the body tag.

[html]
<header class=”page__header”>
<!– Content –>
</header>

<nav class=”navigation–secondary”>
<!– Content –>
</nav>

<div class=”page__content”>
<!– Content –>
</div>

<footer class=”page__footer”>
<!– Content –>
</footer>
[/html]

It pays to be colourful

I also find colouring groups helps with organisation; tagging each top level group of layers with a different colour can be especially useful when your have multiple groups open at once, you can still quickly see what area of the site individual layers belong to.

Some of this may seem pretty obvious to many designers already working in this way or considered overkill by others but in my previous life as a freelance developer I’ve come across some horror shows in terms of the way PSDs have been provided and can only vouch for how frustrating it can be to start a project in this way. Any time the designer saved by not organising their layers will be lost when the developer has to spend time trying to work out what goes where.

It pays to get in the frame of mind to organise layers as you go along from the very beginning. It can be very easy to start a design creating more and more layers and think to yourself that you’ll go back and rename/group them later but before you know if you’re left with a file like the one below which would give any other designer/developer a headache just to look at!

I’ve actually seen final, submitted PSDs similar to the above example! Rename and organise your layers/groups as you go along and it will soon became second nature to you and you’ll find you have minimal issues when collaborating with other designer/developers on your web projects.