Tips for Consistent and Clear Names in the UX Field (Applicable to Any Other Field)
These are my personal habits, which you can modify, adjust, and add to as needed to suit your needs. There are no strict rules. The objective of these tips is to assist you in staying organized, not only in UX but in any type of work you may be doing.
When it comes to naming conventions, there are several different approaches that you can take to ensure consistency and clarity across a project. Personally, I have found that the following conventions work well:
Use descriptive names that accurately describe the entity's purpose or functionality.
Use a consistent naming convention, like PascalCase, camelCase or snake_case, across the entire project to avoid inconsistencies and ensure easier maintenance.
Avoid ambiguous or generic names to prevent confusion and misunderstandings.
By following these guidelines, creating a naming convention that is easy to understand and consistent throughout the entire project is possible.
File Names
Project Name Adding a project name will help with search and make it easy to know which project the file is related to.
File Type (wireframe/visuals, etc.) It's useful to know the content of the file without having to open it, so adding a one-word description of the file type can be helpful.
Platform If you use different files for different platforms, adding the platform type will make it easier to organize the files without having to open them.
Date (DDMMMYY) Adding the date will help you keep track of when you worked on the file and easily manage versions. I prefer to write it as 5May23, so it can be easily read and understood without confusion as to whether it represents the day or month.
Version Number This is an easy way to understand which version you are working on, in addition to the date. Sometimes, adding only the date without the version is not enough, especially if you make many versions in the same day.
User (anyone who worked on it) Knowing who owns the file will help you find it easily in the future and get back to the person if needed.
Folders
Folder names Always use the same camel case in folder names to keep them user-friendly and avoid unknown symbols or broken links.
Empty folders Don't create empty folders as they can cause confusion in the future. Instead, create folders for each step as needed.
Structure A recommended structure is to have five main pillars with everything falling below them:
Client Resources: what you received from the client
Assets/Footage: what you have now
Designs: what you're currently working on
Exports: what you delivered
Archive: what you don't need at the moment
5 main pillars Below these main pillars, add files and try to create folders to group similar types together. This will help you easily find sources in the future.
Here's an example of a folder structure:
Client Resources
├── Contracts
├── Briefs
└── Research
Assets/Footage
├── Raw Footage
├── Stock Images
└── Audio
Designs
├── Concepts
├── Mockups
└── Full Design
Exports
├── JPG Screens
├── Final Products
└── Reports
Archive
├── Old Projects
└── Unused Assets
Figma or similar online tools
File Name Use the same file naming convention as the file name (without platform or types). This will help identify when the project began and who the owner is. You can add a date, but it's an extra step since Figma already has a history log.
Page Name Use simple, short words to describe the content of each page (e.g. iPhone, Android, Desktop, Archive, Drafts, etc.).
Grouping Add separators between different types of pages to group them together and make it easy to distinguish the difference.
Thumbnails Use thumbnails to easily understand what's inside each page without having to open them.
Bonus Tip:
URL-friendly names are links that are easily read and understood. They do not include any symbols or special characters such as $ or %. These characters are automatically created when sharing files online to replace symbols and spaces. To create a readable file name that is friendly even when shared over the internet, follow these two guidelines:
PascalCase/UpperCamelCase/snake_case This method is widely used among developers and is the most user-friendly way to understand words without adding spaces. Simply write the first letter of each word in capital letters, instead of adding spaces. Examples of this method include GreenGame and RunForFun.
Underscore When converting to a URL, the space character is replaced by either + or %20, which may cause issues in reading. To replace this "space" with something visually similar, use the underscore character "_". Use the underscore instead of the dash "-" because the dash may not always remain a dash when converted to URLs, and it may also be read as a minus sign. Additionally, it may be turned into symbols during sharing or links.
Thank you for reading!
I hope you found this helpful. If you have any questions or feedback, please don’t hesitate to reach out. randavictor.com
Randa Victor | April 2023