Content Studio

design guide

A brief introduction to designing custom Docs and templates

Consistency in Foleon Docs is important. When there is no unity between the templates you create, combining them into a Doc can result in a disastrous reader experience.

This Doc explains the logic behind the default templates in your account and helps you jump into the Content Studio to design your own templates and Foleon Docs.

Check it out!

Overview of the Content Studio design features

Drag and drop elements onto your Foleon Doc. Multiple elements can be stacked in a column. See the image for an overview.

Design lessons

Video: Build your first page (3:30 min)
Video: Design Docs for every screen (3 min)
Video: Make your content engaging (4 min)

Consistency is key

Ensure your templates go well together.

Spacings are an important setting so make sure to:

  • Match spacings in your designs to the spacing of the default Foleon templates so they can be combined.
  • Combining block and page templates with different spacings leads to inconsistency in design.
  • In the Content Builder, spacings can't be adjusted.
Creative freedom comes with creative responsibility.

Optimal spacings

Based on a window size of 1440x900 pixels

  • 100px column spacing on desktop.
  • 50px column spacing on tablet.
  • 25px column spacing on mobile.
  • 30px spacing between columns. (Instead of custom spacing between columns. This will save you a lot of time resetting them repeatedly.)
  • 30px bottom column border ‘spacing’ in the case of a card grid.
  • Element bottom spacing varies. Stick to default unless there is a good reason not to.
  • If large spacings are needed, please stick to 50, 100, 150, etc., if possible.

Templates recommendations

  • Keep the template layout as simple as possible for other users to create content.
  • Follow your Brand Kit styling. The main exception is text needing light color because of a dark background.
  • Don’t use hotspots in templates. Backgrounds will get changed and confuse users.
  • Structure folders in the template library so that creators easily find what they need.
  • Name templates wisely.
  • Always check responsiveness before saving a template.

General design tips

  • Use column settings over element settings.
  • Animation settings are, after spacings, one of the most time-consuming adjustments to make. If applied only on columns, you can achieve great results with only 20% of the number of clicks.
  • Always check responsiveness before duplicating an element, block, or column.

Create content that counts