DESIGN GUIDANCE FOR BUILDING WEB STORIES 

We are going to look at:

LEGIBILITY

IMAGERY

ANIMATIONS

LEGIBILITY

Font size:  16 as the minimum for essential font.

Font weights: Don´t combine a small font with light weights and poor color contrasts.

Line height:  Give your paragraph a good amount of space.

CONTRAST

The text should have a strong contrast with the story page background or image.

For example use a text box to make your text visible on a busy background.

IMAGERY

Include as many videos as possible.

Aim for videos that are less than 15 seconds.

Avoid low resolution and distorted images.

Full bleed images and videos are the most immersive.

Jazz up your stories with gifs. 

Add motion to static images to liven up the page.

ANIMATIONS

A FEW TIPS ON ANIMATION

Don´t use the same animations across multiple pages.

Don´t animate every single page of your story.

Avoid text animations to ensure legibility.

Try to animate with purpose.