ENRU
In-app storiesGraphic Design
Anastasia Bazhanova

In-app stories visual style

We want the stories layouts to be diverse: we use bright backgrounds, lively photos, coloured labels, and decorative elements. To keep the visuals recognizable and consistent with the overall Dodo style, we follow the rules described in this guide.

General standards: what a visual should be

We've formulated four standards that we follow when developing stories:

Recognition. We experiment with design, but create layouts within the same graphic style: we use a corporate font, recognizable labels, and natural photos.

Variety. We keep flexibility in the choice of colours and additional elements. We try out various colour schemes, change composition, and create unique illustrations.

Lightness. We make use of the air in the composition; we use labels and illustrations moderately, and split a long text into several slides.

Comprehensibility. We support the text with the visuals: choose images to match the theme carefully, place simple icons and symbols, avoid crowding in the layout. We do this so that the user can grasp the key message, even when briefly viewing the posts.

Colours

We don't limit the colour palette, but we stick to basic standards:

  1. Orange is the main brand’s colour indicator. Paint the maximum area in orange if you need to communicate that this is Dodo.
  2. Use contrasting colours for text and backgrounds to improve readability.
  3. Add variety with gradients.

    Examples of gradient backgrounds for stories

  4. Use backgrounds with warm colours for product stories. Avoid overly flashy colours - they distract attention from the product.
Product layouts look better when the background colour is warm
Acidic colours distract attention from the product

Colour schemes that work

The use of red on the layout is justified, as the stories warns the user of danger
Bright gradient shapes support design elements and don't conflict with the text, while making the layout more interesting
We show the products, so the gradient for the background is in warm orange colours
Combine several colours in a background gradient. Colours in the layout do not conflict with each other and do not complicate the perception of the text
Homogeneous background and a neat pattern that does not interfere in the reading of the text

Font and text styles

  1. The main font for stories is Dodo Rounded v2 Variable.
  2. The size and settings of the text in different programs are set according to templates.
  3. Make headlines at least 1,75-2 times larger than the main text.
  4. Use no more than 2-3 font sizes within a page. Font size setting is optional.
    Text block structure that looks fine
    Bad example with a large number of outlines, which lacks contrast and there is no visual hierarchy
  5. Place text on a plain background so it is easier to read.
  6. Detailed and motley photos are arranged in collages. This leaves room for text.

Stories cover

  1. We use templates to design stories covers. They specify font sizes and proportions.
  2. Always make the background of the cover in colour, so that it doesn't blend in with the white background of the app.
  3. The label with a section title should be placed in the right top corner of the cover.
    Sections examples
    Cover with a label example
  4. Place large elements on the cover, so that they are visible from a distance.

Photos and images style

  1. We show the product in the context of real life. Go for live photos over plain backgrounds.
  2. Focus on the people and the situations in which they consume the product. Thus, we remind people that you can have a quick snack at Dodo's, and then get on with your business.
    On a tray at a pizzeria.
    A picnic on a lawn
    While eating
  3. We create content which is as close to everyday life as possible. We choose photos that reflect realistic situations and moments from everyday life. Make sure that the characters’ postures and emotions look natural.
    A girl with an open box standing in the middle of the street. The situation is unnatural, the picture does not evoke emotions
    The character imitates the joy of eating food. Despite the home interior, relaxed clothes and posture, the picture looks staged
  4. We only work with images that have a license for commercial use. Choose a high quality photo with clear clipping.

Buttons

  1. Add only one button to a series of stories. Excessive number of buttons confuses the user.
  2. Make the button text colour contrasting the background.
    Good contrast
    Poor contrast
  3. Always use standard button size.
    Proper button proportions
    Wrong button proportions
  4. We leave the font size of the buttons unchanged.
    The correct button font size
    The button font is too large
  5. Place the button at the bottom of the layout. We are guided by the template.

Additional elements

Use labels, arrows, and illustrations to diversify the layout.

Label with text

  1. Put no more than two words on a label.
  2. Make the colour of the label contrasting the colour of the text.
  3. Experiment with the positioning of the labels. If you want to make the layout more dynamic, place the labels at different angles.
    Highlighted text on the layout with coloured labels

Numbering in the posts

  1. We use numbering tags in stories that are longer than four slides. We help users navigate through the content and see how much of it is coming ahead.
  2. We place the labels both at the top and at the bottom of the layout.
    Example of using numbered labels

Arrows

  1. Use the arrow to guide the user's attention.
    Arrow options
  2. Place no more than 1-2 arrows in a series of stories.
  3. Make all the arrows in a series the same thickness and style.
  4. Draw smooth curves, avoid jags.
    Draw smooth curves, avoid jags.
    Arrow with jagged edges.
  5. Use a moderately thick outline so it doesn't distract from the text and other elements.
    Normal bold outline
    Too bold outline

Decorative elements

  1. Use decorative elements moderately and integrate them into the composition so that there is harmony in it.
  2. Drop them if the layout has a lot of text and other content elements.
  3. Make sure that the decorative elements support and enhance the message, rather than compete with it. Decorative elements for stories in the app.
Line elements
Dimensional elements

Grid

Always consider safe zones and grids when designing stories.

Main area: This is where our content is located (1500 px by 840 px).

Visible area. On some devices, these fields are cropped, so we don't insert text and important elements here (2084 px by 130 px).

Fields which are not shown on cell phone screens.

Button area 962 px by 146 px.

Read next: