Creating a new experience but not sure where to start? Lucky for you, we've turned creating interactive experiences into a science. From planning to designing, to building, and publishing, here are the best practices for operationalizing Studio:
Stage 1: Planning and Design
Create a brief
When creating an experience, the first step before touching a single program is to sit down and come up with a plan. To get our team on the same page we always fill out a creative brief to help hash out major themes and stories and to review all of the information surrounding a project. If you’re a designer, you may want to sit down with your content team to set expectations about project requirements on both ends.
Some questions you should think about before you move on to the next steps are:
Will this project require a wireframe? (Hint: it almost always should- more on this in the next step)
Will you have to create any custom illustrations?
Is this piece going to be standalone or embedded?
Build out your wireframeÂ
We know, we know, wireframes might feel like extra work, but we absolutely swear by them. Creating a wireframe allows you to see all of the areas where you may run into issues as well as how much (or little) content you’ll need for each section. If you’re on a tight timeframe, even just a few quick sketches on paper can be immensely helpful. Below we’ve included two vastly different wireframes our team has put together. Figure out the way that works best for your team, just ensure you get pen to paper and start generating some ideas.
Complete this pre-proof of concept (POC)/ design checklistÂ
Once you have all agreed on the wireframe, the next step is going to be putting together your proof of concept (POC)/design. A POC is essentially a prototype of your final product that gives you an idea of what it will look like. Before you put together your POC however, make sure:
Your design and content are compliant with all of your brand guidelines
All of the copy that will be included in the piece has been finalized (if the copy is not finalized, at least establishing a word count and length will help you flush out the spacing in the design)
The POC/design
In this step, you should create a static design to establish the overall look and feel of the piece (colors, fonts, etc.) based on the wireframe you’ve created. As you ’re designing this out, you should be thinking about the elements in the design that you want to be animated or a part of an interaction in Studio.
Don’t forget to design with Retina displays in mind! If you are creating in Photoshop or Illustrator, design at double the height and width that you want it to appear in Studio. If you’re creating in Sketch, you can design at the actual size, but make sure to export the assets at 2x.
Also in this step, you should determine whether or not this experience is going to be embedded (living within an iframe) or standalone. If it is going to be embedded, be sure to design at the correct specs. It’s also important to remember that embedded experiences cannot utilize pinned objects in Studio.
Stage 2: Desktop Production
Prep your assetsÂ
Once you and your team are happy with the POC design, you can get ready for your desktop build! There are two ways to export/import content into Studio. You can either export all the assets from your design platform individually, and drag and drop these onto your Studio canvas (this is the most common option), or you can use Ceros Import to import your entire design file into Studio. This section below will run through best practices for the first option (to learn more about optimizing for a full file import, see this article).
If the asset is going to be a part of an interaction or is going to be animated, it’s best practice to export it individually. Any other assets can be exported as a flat image. For example, if you had a diagram and certain pieces of it were animated, you should bring them in separately, but if the entire diagram was going to be static (or animated as one unit), you could bring it into the Studio as a whole.
You should optimize all of the assets by running them through a program like tinypng.com or compresspng.com/compressjpg.com. This will eliminate any extra weight in your experience which will improve performance and speed.
For more best practices on designing for the Studio, check out this Educate article.
Create your experienceÂ
Now you’re ready to create your experience! If you’re new to Studio, you can find detailed step-by-step instructions on building out your experience on our YouTube. If you have some experience and just need a quick refresher, here are a few key things to remember:
The most efficient workflow for building an experience is:
Define Layout
Set Up Hotspots & Interactions
Add Animations
To define your layout, we recommend exporting a jpg of the full design from your POC to use as a placeholder in Studio. This will act as a guideline to keep your layout consistent. You can delete this as soon as your assets are arranged on your canvas.
When arranging your assets, remember that it’s best to use the Studio's live Text Tool rather than PNGs to ensure your text is crawlable by search engines and is easier to update.
When applying interactions, you should use Hotspots rather than applying interactions directly to your objects. Doing so will keep your team more organized and allow for easier/quicker edits since the Hotspot indicator is present. It is also important to remember to name your Hotspots something unique so they stand out in tracking analytics.
If you want to publish your experience so you can send the link to other team members for review, you can disable SEO in the Settings Panel to ensure your experience is not crawlable and will not show up in search results.
Stage 3: Mobile Production
Create a mobile and/or tablet version
Once your desktop build has been completed, you can move into creating your mobile and/or tablet versions.
The first thing to do is navigate to the Global Layouts panel within the top center of the Studio and select mobile to create your mobile variant.
Next, resize your assets in Studio and stack them to give your experience more of a portrait-oriented format.
Resize your text to ensure it’s legible for mobile viewing, you can follow our recommended text sizes and test on mobile to confirm it is all legible.
Don’t forget to change all On hover interactions and instructional text to On click.
Don’t forget, in your Preview, you will be able to see exactly how your experience is coming along for desktop, tablet, and mobile builds.
Stage 4: Publishing
Final checklist:Â Before you go live with your experience, make sure that:
Your SEO is optimized- you have entered keywords, a meta description, and a canonical URL into the SEO section of your settings panel.
You’ve entered tracking codes (optional)- you can set these up in the Custom HTML section of your settings panel.
You’ve run through our Publishing Checklist to finalize your experience.
For more detailed step-by-step lessons on various features and Studio functionality, take a look at our Video Library!