DESIGN GUIDANCE FOR BUILDING WEB STORIES

[{"selector":"#anim-789f6567-2e0a-45e4-a830-780d26f809d2","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}]

We are going to look at:

[{"selector":"#anim-ff518bf8-0bb6-44f9-8e3f-79b237f89787","keyframes":{"opacity":[0,1]},"delay":0,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a1505999-50a1-44f7-aab5-c79d3a70d66b","keyframes":{"transform":["translate3d(115.33547%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5b35a2e6-621d-4fd5-a8a1-50bcf04eea80","keyframes":{"opacity":[0,1]},"delay":0,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-68b504c2-07c3-4e56-9a02-b70c92fe7727","keyframes":{"transform":["translate3d(172.39262%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1656efef-bc4a-48d3-a43f-f2c44c4567d0","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e6d50bfb-880e-438a-b971-bfab02308baf","keyframes":{"transform":["translate3d(115.33547%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-58ae494a-2ef0-4d14-a6e9-68d512a538f6","keyframes":{"opacity":[0,1]},"delay":0,"duration":1200,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0eda7375-90d4-4b91-b469-f31ebb3d1105","keyframes":{"transform":["translate3d(175.15921%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":1200,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e7d83488-79c5-44f1-b92e-bfe015316782","keyframes":{"opacity":[0,1]},"delay":0,"duration":3000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-732d9eb9-40fb-455f-b18e-ff6f3c239e72","keyframes":{"transform":["translate3d(115.97445%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":3000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-19804740-20cf-4a22-a495-b23807d81fd3","keyframes":{"opacity":[0,1]},"delay":0,"duration":1800,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-252d0c1d-ae93-481d-a09c-a0a707a4ab7d","keyframes":{"transform":["rotate(-360deg) translate3d(146.79805%, 0px, 0) rotate(360deg)","rotate(-360deg) translate3d(0px, 0px, 0) rotate(360deg)"]},"delay":0,"duration":1800,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-91f462be-d852-4e24-a5cb-1f140f433215","keyframes":{"opacity":[0,1]},"delay":0,"duration":1200,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e1c56435-ed9c-4e97-b4e4-1019e8ac161d","keyframes":{"transform":["rotate(-360deg) translate3d(146.79805%, 0px, 0) rotate(360deg)","rotate(-360deg) translate3d(0px, 0px, 0) rotate(360deg)"]},"delay":0,"duration":1200,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

LEGIBILITY

Font size: 1 6 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

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.

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.

DESIGN GUIDANCE FOR BUILDING WEB STORIES

We are going to look at:

LEGIBILITY

IMAGERY

ANIMATIONS

LEGIBILITY

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

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

MORE ON YOUTUBE

Watch the whole video on YouTube for more information about the Visual Stories Editor.

Sign up and start creating your own Stories!