Naming Convention
How I found a way of naming design files
The problem that I had was that every time I needed to check a specific page designed or a specific version, I had to open files one by one as all their names were confusing or not clear enough. You can’t always figure out what the pages are about by only seeing the thumbnail image, especially in Mobile. And it was hard for me to search for a specific file related to a ticket number, a specific page or the right breakpoint or project.
Even Project Managers and Developers couldn’t understand which Mobile page was linked to which Desktop or Tablet page.
As I was working as a designer in a team-of-one, I needed a way of organising myself and also make sure I could communicate clearly to clients, developers and project managers.
That’s how I came up with the idea of finding a solution to this problem by using “Naming conventions”. It might sound pretty obvious, but not every agency is well organised or has a standard process. So it was my time to start applying it.
The first thing I did was list all the items or sections that I considered were important to distinguish from others in order to identify files. These were:
- Breakpoint
- Page name/ section
- Version
- Jira ticket/ or any other board number
Based on a breakpoint, the three devices that we mostly use are:
- For mobile 375px = M375
- For tablet 786px= T786
- For Desktop 1440px= D1440
For page names or sections, I tried to make a list of conventional page names that were generic but also carried a specificity. These names could be “Collection-Click and Collect”. This way, everyone knows this is a Collection page, but it is also focused on the Click and Collect section of the page.
Versions: this one is pretty simple and it really depends on each person. I personally like to start with using the “V1.1” and keep changing to “V1.2” when there are minor changes or after a client’s review. If we are presenting two different versions, then the other one should be “V2.1”.
For organising tasks, boards, etc. we use Jira where each ticket has its own number and project name code. Saying this, I decided to implement each Jira ticket number to the page related. So if I ever need to search a design in my computer for any random reason, I can type the ticket number (it works as an SKU) and the design-related would come up instantly. If you are not using any Kanban board or project management tool (which I strongly recommend if you’re not), I would add any 3 or 4 letter name to represent each project and use it in the naming convention.
As a result, the naming convention will really help you organise designs, visually and for any other department or even future designers. If you sum up all the items listed above, the result would be
It doesn’t matter which items you choose to use as long as you find them useful and apply consistently throughout the files. Do what you think is best and more helpful. Not every agency or team works the same way or applies the same process.
What I am sure is that by applying this it will be easier for the eye to scan through and find what you’re looking for.
I hope you find it helpful or at least this inspires you to create your own naming conventions
Thanks!
