THE LANDING PAGE
Design
Hierarchy
Cheatsheet
The Secret Principles of Visual Design That
Guides Attention, Persuades Visitors and Drives
Higher Conversions
PILLARS
Why Visual Hierarchy Matters
Check out the image below and see how accurate it is
That's just scratching the surface. In fact, there's 10
pillars of visual design hierarchy we're going to focus
on so keep reading.
Copyrights by FreedomFunnels™ | Do not copy, share or re-sell this content.
PILLARS
10 Pillars of Design Hierarchy
Here's the non-negotiables for when you design funnels
1. Layout
Layout - How images and text are arranged or laid out
2. Image
Image Size
Size - Highlighting the image/video they should see first
3. Font
Font Size
Size - Directing attention when people "scan" your page
4. Alignment - Making content easy to consume with a "grid"
5. Spacing
Spacing - Separating sections and elements from each others
6. Shadows
Shadows - Highlighting certain areas of content
7. Colour
Colour Contrast
Contrast - Increasing readability & consuming content
8. Congruency
Congruency - Presenting ideas in agreement with the brand
9. White Space
Space - Allowing the design space to breath
10. Visibility - Attracting attention towards certain areas first
Copyrights by FreedomFunnels™ | Do not copy, share or re-sell this content.
Layout
How images and text are arranged or laid out
Structure
Always have a structure to your content. Whether it's 1 column, 2 columns,
3 columns or more. You can almost think of your elements as lego pieces.
Your job is to structure all the "info" in a way that's easy to consume .
Copyrights by FreedomFunnels™ | Do not copy, share or re-sell this content.
Image Size
Highlighting the image/video they should see first
Priorities
As you can see by the example below, there's a main big image that draws
in their attention when landing on the page. Then there's smaller images of
people in the background, that aligns with the keyword "community" in the
copy on the page.
Multiple "layers"
In this example, you'll see that the
image in front is the people behind
the brand and the image behind them
is the "offer", in this case a free case-
study. Since the brand is for kids
education, it fits well to highlight the
parent and child first.
Copyrights by FreedomFunnels™ | Do not copy, share or re-sell this content.
Font Size
Directing attention when people "scan" your page
Hook them in
A great rule of thumb is to make your headline double the size of your sub-
headline or body text. See example below.
Here's why:
Here's what it would look
like if you had the same size
for your headline and body
text. This makes it super
hard for people in knowing
what to focus on first.
Copyrights by FreedomFunnels™ | Do not copy, share or re-sell this content.
Alignment
Making content easy to consume with a "grid"
Stay consistent
If you have text aligned to the left, continue down that path. Don't have a
headline centered, while aligning your body text to the left. Be consistent
in your alignment. See 2 examples below, first how NOT to do it. Then how
to actually do it.
Copyrights by FreedomFunnels™ | Do not copy, share or re-sell this content.
Spacing
Separating sections and elements from each others
Example 1: Zero spacing
This is zero spacing to illustrate the point, but check out how busy it feels:
Example 2: Great spacing
Here's the "after" version, with great spacing to make the content easy to consume:
Copyrights by FreedomFunnels™ | Do not copy, share or re-sell this content.
Shadows
Highlighting certain areas of content
Example 1: No shadows
You don't always need shadows. In this case it's already clear that the
image is getting attention and people then go on to read the text.
Example 2: Great shadows
Here's an example where we're using highlights to showcase testimonials:
Copyrights by FreedomFunnels™ | Do not copy, share or re-sell this content.
Colour Contrast
Increasing readability & consuming content
Example 1: Bad contrast
Bad contrast makes it super hard to read the text, and the more our brains
have to "think" about the text, the less persuasive it is. Same thing with
images they can't really see. Here's an example of bad vs good contrast:
I'm sure you could read it, but not with a breeze, right? Here's another
example where it's super easy to read the text on both the headline and
the button:
Example 2: Great contrast
Copyrights by FreedomFunnels™ | Do not copy, share or re-sell this content.
Congruency
Presenting ideas in agreement with the brand
Consistent branding
When using custom graphics or elements to "spice up" your images, icons,
backgrounds or overall design, make sure you have a congruent "theme":
Since the theme was "cartoonish" we decided to use the same style
throughout the page, to stay on-brand.
Copyrights by FreedomFunnels™ | Do not copy, share or re-sell this content.
White Space
Allowing the design space to breath
Dark vs. Light
Sometimes it's hard knowing if you should go with a dark theme or a light
theme for your overall background on a page. The general rule of thumb is
to use a lot of white space, combine with darker to give contrast, keep
complex topics light so it's not as overwhelming and always use more dark
text on light background than the opposite, just like books are designed.
Dark example: Light example:
This dark theme looks great This light theme helps people
for a funnel in the NFT space, "consume" the info and
but it CAN feel overwhelming: therefor make it less confusing:
Copyrights by FreedomFunnels™ | Do not copy, share or re-sell this content.
Visibility
Attracting attention towards certain areas first
Guiding the visitor
You can direct the attention of a reader towards headlines, images, videos
or any call to actions by highlighting the key part you want them to focus
on. Here's a few examples, starting with a gradient background:
Big headline goes
here on this side
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Autem dolore, alias,
numquam enim ab.
Here's another example of guiding attention towards the video:
Copyrights by FreedomFunnels™ | Do not copy, share or re-sell this content.
