When creating interactive content in the Studio, it’s helpful to stay organized and keep your Layers panel neat and descriptive. This way, whenever you need to go in and make a change, or if you pass your experience off to another teammate, it’s easy to understand the organizational structure of your layers so you can quickly find and identify different assets.
We have compiled some helpful tips and tricks to keep your Layers panel consistent and organized. Here are some of our team’s best practices for naming conventions:
Best Practices for Layers & Folders
Numbering: Using numbering systems is a great way to organize an experience (especially long scroll experiences) by dividing major portions of the experience into individual sections. If your experience has a clear Header and Footer, it can be helpful to use prefixes such as:
00_Header
99_Footer (ideally there will not be 99+ sections)
Each subsequent section in the experience should then follow the sequential numbering system (including nested layers that contain hidden layers used in carousels or popups).
Folders: You can also utilize Folders to help consolidate the Layers panel. By organizing similar content and components (i.e. carousels, hover states, popups, etc.) into folders you can save space as well as locate different portions of your experience with ease
Labeling: The way you label your layers will vary from project to project, but having a clear system in place so that anyone can navigate your Layers panel is important. Systematically labeling similar elements such as Carousel 1, Carousel 2, Carousel 3, etc., will help you find related elements like carousels or popups with ease.
An example of a potential name could look like this:
Tip: In cases where there are not many sections, and the Layers panel is less cluttered and easier to navigate, you can use underscores or another symbol to indicate sections with similar associations.
Best Practices for Naming Hotspots:
Label, label, label! Having a hotspot without a name will add unnecessary confusion to your Layers panel. You should always name your hotspots for two major reasons:
If someone else jumps in to take a look at your work or assist you on your project, whether it be your coworker or someone from our support team, it will take them much longer to figure out what is going on if you do not have descriptive names.
Naming hotspots is critical for analytics. If you look at your analytics and see that you have 80% clicks on Hotspot 2, that is not going to mean much to you unless you go into the Studio and figure out what element and interaction Hotspot 2 correlates to. Having a descriptive name allows you to jump into your analytics and see exactly how your experience is performing.
There’s no such thing as too much detail when naming a hotspot!
Best Practices for Naming Objects:
Certain objects in the Studio we don’t recommend renaming, this is for a few reasons:
Your design team probably has a shared drive where its JPGs and PNGs live. If someone from your team wants to jump into your experience and make any edits or re-upload a certain image, but you’ve renamed it in the Studio, it will be difficult for your teammate to find it in your shared drive.
If you are using a lot of Studio Objects (shapes, .svg icons from the Noun Project, etc.), they will be easier to locate in your Layers panel if you don’t rename them.
However, if you are using a large number of shapes or .svgs in one layer, you may want to consider using a PNG or a JPG instead (the Studio will run smoother and will lighten the processing required to render those objects after it is published).
It’s always a best practice to label key elements in your Layers panel with a descriptive name. This will benefit you in the long run and keep your Layers panel more organized. For more best practices on operationalizing Studio, take a look at this article.