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
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!
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.
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
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)
Learn More