Tap to Read ➤

AMP Story Design Ideas

More the merrier and simpler the better. A beautiful and appealing story has to balance both with finesse.
Swarali Jambhale Sep 16, 2019
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.

Layer Level

Design at layer level gets applied to specific layers. 

Layer level design overrides story level design.

Field Level

Customization at field level is for title and text separately.

Field level customization overrides layer level customization.

Layer Layout

Decide the placement of text depending upon the image or video.
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!

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!

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.

Title Background Color

Distinct background colors can be used to highlight the text.

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.

Font Style

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

Your browser doesn't support HTML5 video.

Font Color

The font color should be visible but should not steal the show.
*Choose one of the colors that suits the image/video.
VERY LARGE fonts look overdone!
Very small fonts look undone!

Font Size - 'Default' is Just Perfect!

Border

To highlight the content, borders are used.

*Bottom border can be used as an underline.

There are 6 Types of Borders

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

Radius

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

Padding

The space between the text and border.

Margin

The space between the device edge and the layer.

With Padding and Margin

Without 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.

Your browser doesn't support HTML5 video.

Make the borders attractive.

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) 

Your browser doesn't support HTML5 video.

Give an overlay only when necessary.

Font Family - Advent Pro
Border - Solid
Margin - 15 (bottom)