Operationalizing Ceros

Creating a new Ceros experience but not sure where to start? Lucky for you, our in-house Professional Services team has turned creating interactive experiences into a science. From planning, to designing, to building, and publishing, here are the best practices for operationalizing Ceros, from our team to yours!

Stage 1: Planning and Design

Create a brief: When creating a Ceros 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, it’s important that you 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 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 Ceros.

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 Ceros. 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 Ceros.

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 Ceros. You can either export all the assets from your design platform individually, and drag and drop these onto your Ceros canvas (this is the most common option), or you can use Ceros Import to import your entire design file into Ceros. 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 Ceros 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 Ceros, check out this Educate article.

Create your experience: Now you’re ready to create your experience in Ceros! If you’re new to Ceros, you can find detailed step by step instructions on building out your experience in our Getting Started Designer Courses. 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:
  1. Define Layout
  2. Set Up Hotspots & Interactions
  3. Add Animations
• To define your layout, we recommend exporting a jpg of the full design from your POC to use as a placeholder in the Studio. This will act as a guideline to keep your layout consistent. You can delete this as soon as your individual assets are arranged on your canvas.
• When arranging your assets, remember that it’s best to use the Ceros 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.

• First thing to do is navigate to the global layouts window within the top left of the studio and select mobile to create your mobile variant.
• Next, resize your assets in Ceros 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 live 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.

As always, please feel free to reach out via the chat widget with any questions you may have. For more detailed step by step lessons on various features and Ceros functionality, take a look at our Video Lessons!