Home Design Categories Search

Magazine Collections Recommended Popular

Improve Productivity by Properly Organizing Your Folders in

Photoshop

By Erlen Masson on Feb 9 2016 Photoshop / Web Design

In the digital world, organising les is an essential part of e ciency. This practice even goes down to the smallest details, like
organising every Photoshop layer and each line of CSS.

My career has changed from working only on print projects to only working on digital projects. I want to share what I have picked
up over the years.

Situations all designers & developers hate:

Youre unable to edit type layers in your PSD because you cant locate the font le you need toinstall.
You want to replace a pixellated layer, but you cant nd the original asset.
You are not sure which PSD to use because there is two named nal_v1 and nal_v1_copy.

1. Organising Folders
To avoid these situations, you need strict rules. The rst rule is to stick to a simple folder structure for all projects. Everyone
works di erently, but here is how I work:

The Client Folder

On the top-level, I have my client folders. Inside them, I have the project folders (e.g. Product Launch or Christmas Sale 2015).

The Project Folder

Inside the project folders, I have two types of folders, Assets and Design Formats. A project might require a few design solutions
like a website with an email, so I duplicate and rename the design format folder and name them accordingly.
The Assets Folder
The Assets folder is where I store briefs, invoices, project plans, images, videos, copy and anything else related to project
management.
The Design Format Folder
This is where all design related les are saved. Only the nal PSD is saved in this root folder, all the other les are saved in the
relevant subfolders.
/Archive
Archive the Old PSDs, old storyboards and old presentation les in here.
/Design-Assets
This folder is home to the supporting les like fonts, iconography and linked PSDs.

/Dev-Assets
This folder is for all the assets needed for development like SVGs, optimised images, videos.
/Inspiration
This is for all things inspirational, including mood boards, screenshots, screen recordings and UI patterns.

/Storyboards
This folder is for all the storyboard or presentation les.

/UX
This is where I save all my idea generation notes, wireframes, user journeys and user ows.
2. Naming Your Files
The second rule is to create a very simple naming convention for your les. Name them in a way that is searchable and easy to
read. Your abbreviations and terminology will change due to personal preference but something similar to this should help:

Here is an example of a PSD. It includes the client name, project name, format and version:

I name storyboards and screenshots in a similar way with a small addition at the end:
This practice helps me to quickly nd the les I want regardless of the year, format, version or le type. Its easy to remember
and I can comfortably explain a le location without a screen in front of me.
The quantity and variety of work you do will determine how in-depth you organise your folders. Create a diagram of your folder
structure, this will serve as a visual reminder to your colleagues and encourage persistence.

If you want to, you can download the folder structure template & iconsand make your own diagrams:

Download the Folder Structure Template & Icons

You might also like...
Productivity Tools for Creatives
Building Websites in Collaboration With Clients, Not in Spite of Them
Common Misconceptions About Web Design & Development
Finding Internships as a Young Web Designer
How To Handle Ethical Disagreements With Your Clients
Tips for Managing Multiple Websites for Multiple Clients

Erlen Masson (1 Posts)

Erlen is a London-based digital designer with over six years experience working on high-pro le commercial
campaigns for global brands. He specialises in rich media content and fuses his creativity with code to create
innovative advertising solutions. With a background in illustration, his attention to detail and genuine passion for
design+code makes Erlen a talent to follow. You can follow Erlen on Twitter.

Previous Post Next Post

Comments
5 Comments Speckyboy Design Magazine
1 Login

Sort by Best
Recommend 4 Share

Join the discussion

LOG IN WITH
OR SIGN UP WITH DISQUS ?

Name
 Luke Pettway 2 years ago
This article could not have come out at a better time, I've been referencing it for work and it's been monumental!
Reply Share

JorgenGedeon 2 years ago

Super system! I've noticed that adding a date and your initials to the filename can help if you're in a team.
Reply Share

Jens Martsch 2 years ago

I had many discussions about folder structures and filenamings. I personally think that naming files or folders with a prefix (number and
underscore) is a mistake. I often use keyboard navigation in my folders to get where I want. So I am typing the first letter of the folder and then
press ENTER to go into that folder. With the prefixes I have to remember which prefix belongs to which folder or file. Yeah, sure, I can read first,
but this is not intuitive. Why dont just use the natural alphabetical order for your files?

When you cant use a CVS like GIT then you can append the version number as you suggested. I recommend using a CVS instead.

The rest of your folder structure is very similar to what I use.

Reply Share

JoEllen 2 years ago

This is dope!!! I'm all for this!
Reply Share

Avatar Ahsan Idrisi 2 years ago

Great article, i also use some similar method or you can say almost identical to this
Reply Share

Subscribe d Add Disqus to your siteAdd DisqusAdd Privacy

The St. Regis Bali Resort

LIVE THE LUXE LIFE IN

BALI, LANGKAWI &
SINGAPORE.
BOOK NOW *Terms and conditions
apply

Our Weekly Newsletter

Join our 35,000+ subscriber creative community newsletter and discover the latest web design, UX and freelance designer resources, tips and deals.

your.email@address.com Subscribe
 Currently Popular

10 Useful Web Typography Frameworks and Libraries

September 14, 2017

10 Creative Examples of CSS Grid in Action

September 11, 2017

50 Free eBooks for Web Designers & Developers

September 8, 2017

100 Free High-Resolution Photorealistic Mockup Templates

September 4, 2017

25 Essential Chrome Extensions for Web Designers & Developers

September 3, 2017
About Contact Advertise Submit an Article Privacy

Copyright 2017 Speckyboy Design Magazine