AMP Story Design Ideas

Tap to Read ➤ More the merrier and simpler the better. A beautiful and appealing story has to balance both with finesse. Swarali Jambhale

Imagine a story being talked about for its aesthetics and visual appeal, and it turns out to be yours! What exactly does it take to get the readers stick to your story?

It's the Design!

Customizing a story to make it beautiful is what creative designing on Visual Stories is all about. Design can be applied on 3 levels - Story level, Layer level and Field level.

Story Level

Design on this level applies to the story as a whole. Story settings branch up further as Themes and Design. See Settings!

Layer Level

Design at layer level gets applied to specific layers. Layer level design overrides story level design. See Settings!

Field Level

Customization at field level is for title and text separately. Field level customization overrides layer level customization. See Settings!

Layer Layout

Decide the placement of text depending upon the image or video. See Settings!

Top Layout Text is placed at the top. Center Layout Text is placed in the center. Bottom Layout Text is placed at the bottom.

Overlay

The text here is readable due to the overlay! There are 2 types of overlays - Gradient and Solid....lets see! See Settings!

1. Gradient Overlay

You can hardly see the overlay, right? That's the magic of gradient, it allows a combination of 2 colors with varying opacity and degree! See Settings!

2. Solid Overlay

Give the content its place value. A solid overlay is used to make the image/video elements visible and the text readable. See Settings!

Title Background Color

Distinct background colors can be used to highlight the text. See Settings!

Font

The content must allow the image/video element to be in focus. Font has been further forked into: Font Alignment, Font Style (Font Family & Font Size) and Font Color. See Settings!

Font Style

Styling should correlate to the emotion being portrayed by the image/video. See Settings!

Font Color

Your browser doesn't support HTML5 video. The font color should be visible but should not steal the show. *Choose one of the colors that suits the image/video.

Font Size - 'Default' is Just Perfect!

VERY LARGE fonts look overdone! Very small fonts look undone!

Border

To highlight the content, borders are used. *Bottom border can be used as an underline. See Settings!

There are 6 Types of Borders

1. Solid 2. Dashed 3. Dotted 4. Double 5. Groove 6. Ridge See Settings!

Radius

To give the border an aesthetic appeal, you can curve the borders according to your need! See Settings!

Padding

The space between the text and border. See Settings!

Margin

The space between the device edge and the layer. See Settings!

With Padding and Margin

* While applying borders, keep padding = 20 or more and margin at least 15 from all sides.

Some of The Best Design Ideas!

To achieve what you see in the designs ahead, read the text on every slide...

Use groove border with light colors!

Font Family - PT Sans Narrow Border Type - Groove, Dashed Overlay - Gradient

Font Family - Oleo Script Border Type - Groove Radius - 20 (top-left & bottom-right) Overlay - Solid Radius on any 2 sides gives a good shape to the border.

Make the borders attractive.

Your browser doesn't support HTML5 video. Font Family - Dosis Border Type - Solid, Dashed Radius - 20 (top-left & bottom-right) Overlay - Solid

Contrasting colors highlight the content and the media.

Font Family - Alice Border Type - Double, Solid Overlay - Solid

Prefer light font on dark backgrounds.

Font Family - Fira Sans Border Type - Solid, Double Overlay - Solid Margin - 32 (top) 15 (sides)

Give an overlay only when necessary.

Your browser doesn't support HTML5 video. Font Family - Advent Pro Border - Solid Margin - 15 (bottom)