The jury’s out on what the best artboard naming convention is, but we can all agree that having naming conventions in place is a necessity.
This very basic element of what’s been called workplace hygiene helps keep you and your teammates aligned on your file contents and workflow—and with so many different stakeholders involved in design projects, clarity is key.
Who are the people impacted by naming conventions?
- Clients, who don’t know whether to look at Final_FINAL1 or Final2_final.
- Developers, who don’t have the time or energy to decipher your naming habits.
- Project managers, who just want to understand what you’re working on.
- Your design colleagues, who want to collaborate but don’t know where to begin.
Names matter. And if you want your design collaborations to be smooth, you have to obey the naming rules.
Let’s discuss:
- The most important principle of artboard naming
- What goes into choosing a naming convention
- Why artboard naming conventions matter—with real-life examples
The backbone of artboard naming
Best practices for artboard naming are all about consistency, for both practical and creative purposes:
- Consistent naming practices allow anyone to step into your project at any time and figure out what you’re working on—so you can go on vacation in peace.
- The creative benefit is that using consistent naming conventions gives you one less thing to worry about when you’re working—leaving you more creative energy for better design. Since the templates are reusable, they don’t take any thinkie work.
(Collaborate easily on prototypes using InVision Cloud.)
The goal of determining an artboard naming convention is to simplify the collaboration process. The more thorough your chosen naming convention is, the easier it will be for collaborators to step in and understand the context of what they’re looking at.
Choosing a naming convention
The best naming convention for your team is the one that works for your team. This is based on a few factors:
1. Project size
If the project is small, then the naming conventions don’t need to go into detail—they just need to maintain order. If the project is complex, however, with lots of moving parts (and stakeholders), then your naming convention will have to account for all of that.
If, for example, you’re building a website with multiple responsive versions, labeling an artboard “Home_menu” isn’t enough; rather, you’ll have to specify which home this fits, at what screen size.
2. Team makeup
Who’s working with you on this design? Developers will benefit from a different kind of language than designers, for example, and clients will need names that don’t rely on design terms.
3. Team growth
Do you see yourself adding people to this project? The more you see yourself onboarding teammates into your processes, the simpler your style should be to understand. Instead of relying on project-specific terms, make sure your project is understandable to folks who aren’t on your team.
4. Workflow
Where will these artboards be living? What’s their purpose? What will you be doing with them? If you’re planning on using them in a prototype, for example, the naming conventions will have to make sense in that context.
(Experience the magic of live prototyping with InVision Cloud plugin.)
Recommended practices
There’s no universal best practice when it comes to artboard naming, but we have a few recommendations.
1. Mix-and-match numbers and letters
Take advantage of all of the resources at your disposal—and on your keyboard. While words will always give the best context for the story, numbers are excellent as identifiers within a sequence.
For example, interaction designer Christian Behrens uses this construct:
He writes, “[Once] I have a rough idea of the information architecture of a product, I go through all screens/views and assign them an ID and a name tag. These IDs are numerical identifiers that provide a hint to the hierarchical structure of an app or website.”
2. Accommodate for the future
Naming conventions aren’t just for you, and they aren’t just for today. The processes you set up at the beginning of this design project will (hopefully) stay consistent throughout—so if your project grows, your naming conventions need to adapt.
(Upload artboards to InVision Cloud from Sketch using the InVision Craft plugin.)
For example, alphanumeric systems (as discussed above) offer unparalleled versatility and flexibility—which is critical for complex projects. If you’re working on a project that you know will see endless iteration cycles, working in increments will allow you to add screens without compromising the existing flow.
3. Master punctuation
Periods and slashes open a whole new world for naming conventions.
For example, the Royal Caribbean design team uses slashes to organize their Symbols. Working within an “element/property/variant” structure, the slashes allow the team to continuously adjust and deepen their file structure.
This example, by Royal Caribbean’s Principle Designer Lea Botwinick, represents Pro:Cards / Card / Pricing / Plan.
Keep names short
Let’s build upon the above example. As those files get more and more complex, the component names get longer and longer. And longer.
Which is why each element’s name needs to be as short as can be. Especially because when importing artboards to InVision Cloud for prototyping, the names can get cut off—leaving you wondering which version of Home/Desktop/Menu you’re looking at.
The art of designing naming conventions for easy prototyping
Rarely do artboards remain in Sketch—which is why you should have prototyping in mind from your first artboard name.
Let’s go into how to name your artboards in Sketch for the easiest move to prototyping.
To get started, name your artboards upon creation or from the layer list on the left-hand side.
By implementing your naming conventions at the beginning of the design process, you’ll set yourself up for success all the way through to prototyping.
Keep up with this is important, because when syncing artboards to the InVision Cloud using Craft, you can sort them based on their title in alphanumeric order.
Sort alphanumerically within Craft for easy prototyping—and prototype navigating.
Once inside InVision, your counterparts will be able to see your screens ordered based on their title—and view the titles themselves. This means engineers, copywriters, clients, and any other stakeholders will be relying on your files’ “working titles” to navigate your prototypes,
“Onboarding-screen-3” is what your collaborators will see when viewing your prototypes. Make that space count.
Artboards aren’t roses. Names matter.
Do it for yourself, for your project stakeholders, for your teammates and future teammates.
Building a consistent naming practice for your artboards simplifies collaboration. Save your creative energy for the design process and start automating your artboard naming.
by Kacy Boone
Product Marketing at InVision. Passionate about customer advocacy, being creative, and running.
Shayna is Managing Editor of InVision's design publication, Inside Design. She lives in Tel Aviv with two big dogs.
