Designing for Ceros Best Practices

5 Minute read

Reading Time: 5 minute

If you’re new to Ceros — or even if you’ve been with us for years — there are some helpful tricks to set yourself up for success when designing in an external application like Photoshop, Illustrator, or Sketch. Below are some of these best practices to keep in mind!

Where to start?

Before you even begin designing your experience, it’s important to think about where you want your final piece to live so you can determine an appropriate size. Will this piece be standalone, or will it be embedded within your site? Once you answer this, you can better determine the size your experience should be.

Standalone

When creating standalone experiences in Ceros, you really have the freedom to create whatever size experience you want. However, two common standalone layouts we use quite often are full bleed (think landing page/microsite/presentation) and more infographic like (think tall and narrow). If you want a full bleed experience where the content fills the screen and flows all the way to the edges, we recommend a 1280px width, by 625px fold, by whatever height you need. If you want a narrower experience that looks more like an infographic with a gutter on either side, we recommend an 800px width and a fold of around 1200px, to create a vertical viewing area. As a general rule of thumb, we recommend keeping experiences under 30,000px tall to avoid any performance disruptions.

Tip: If you want your experience to appear full bleed at all times, regardless of the size of the browser it is being viewed on, try decreasing your fold to something small, such as 200 px for example. This will force the content to always flow to the edges of the screen.

Embedded

If you are embedding a Ceros experience within your site, it’s important to know the dimensions of the iframe area it will be placed into so you can design with those constraints in mind. If you don’t know these dimensions, you can always ask your web team or use the Developer Tools in Google Chrome to determine the size. To figure out these dimensions in Google Chrome:

  1. Navigate to a similar page on your site, right click anywhere on the page, and select Inspect from the dropdown
  2. Select the arrow icon and then hover over an area that is similar in size to where you will embed your Ceros experience
  3. Dimensions should appear when you hover over the area–use these dimensions as your canvas dimensions in Ceros
Developer Tools - Size for Ceros Embedded

Once you determine what these dimensions should be, you can start designing your experience!

When designing in Photoshop:

Photoshop is an incredible tool for creating your visions — which is why our entire Professional Services team uses it in combination with the Ceros platform. But before you set up your Photoshop canvas to match the dimensions you determined above, it’s important to know that Ceros is automatically set up for Retina screens. So when you create your Photoshop canvas, you’ll want to ensure that you do so at double the dimensions of the Ceros canvas (your resolution can stay at 72ppi). For example, if you determined your Ceros experience should be 1280px wide, you will need to set up your Photoshop canvas at 2560px wide. If you would prefer designing at the actual size, you can do so by increasing your resolution to 144ppi.

Designing in Photoshop for Ceros

Additionally, since Ceros is intended to produce animated, interactive content — you should design with that in mind by separating out individual assets you that will be the target of an interaction or that you intend to animate. For example, when animating a chart object, we would likely save each pie slice or bar object as a separate image so we can cascade them using animations.

When designing in Illustrator or Sketch:

Unlike Photoshop, if you’re designing for Ceros in Illustrator or Sketch, you can set up your design canvas at the same size as your desired Ceros canvas. Just make sure that you export all elements at 2x to account for the Retina screen dimensions. For example, if you want your piece to display at 1280px wide, you can design it in Illustrator or Sketch at 1280px and then export all of your individual assets at 2x.

Note: For best results, we suggest keeping your canvas under 1500px wide in Ceros.

Exporting individual assets:

After you create your assets in Photoshop, Illustrator, or Sketch, you’re going to want to export the individual images/assets so you can bring them into Ceros. Depending on your plans for the assets, you could do this a few different ways. If you plan on animating the asset or having it be a part of an interaction, we recommend you export each object (or layer) as its own image. We suggest that you use .jpg for all images that don’t require transparency, and .png for any images that do.

Currently, the Ceros platform accepts most file formats, including (but not limited to) JPG, PNG, SVG, GIF, MOV, MPEG, MP4, and AVI.

Note: To optimize images for web viewing, we recommend you drop your exported images into a program like tinypng.com or compresspng.com/compressjpg.com for further compression before bringing them into the studio.

Creating in Ceros:

After you’ve finished designing your assets, it’s time to create your Ceros experience! When creating in Ceros, we recommend following this path:

  1. First, address layout and placement of your assets. Arrange all of your images, GIFs, videos, icons, text, and any other assets you have in the appropriate layout within your experience. We recommend exporting a jpg of your entire design to use as a framework for placing everything on your design and then deleting the jpg once your assets have been arranged.
  2. We recommend, whenever possible, that you create text elements in the Ceros Studio (rather than using image files of text) to ensure that the copy is crawlable by search engines. Additionally, using live text within Ceros makes it easier to update in the future and hand off to other team members if need be.
  3. After you’ve created the layout of your experience, you can begin adding Hotspots and Interactions to your experience. In short, these Hotspots are invisible clickable areas on the canvas that a user can interact with to trigger an action.
  4. Finally, once you have your interactions set up and working correctly, you can then add the finishing touch of Animations. These generally take the least amount of time in the production process.

If you have any questions or concerns about designing for Ceros or creating your experience, please reach out to us through the chat widget and we’ll be happy to help! For a deeper dive into best practices for creating experiences in Ceros, be sure to check out our Video Lessons.

Was this helpful?

7 0
7 out of 7 people found this helpful