The Essential Landing Page Hero Checklist

For those who design and build landing pages

Note: Checkmarks aren't saved to your local storage, so it'll reset on refresh. I hope it's useful – happy building!

Content

Headline

Convey the value you provide. Make it specific and useful. WeWeb does this well.

Pro tip: Overused sayings like “For creators, by creators” are not useful. Instead, say what the product/service is OR say what you can do with it OR say what you get.

Subheadline

Elaborate on the headline. Focus on the "how". WeWeb example.

Imagery

Give a clear preview. Allow the user to envision it. Here's a well-executed example.

Proof

Show off any real results or testimonials.

call-to-action

Make it specific and easy. Here's a great example.

Layout

sizing, spacing, alignment

Elements are aligned, sized, and spaced consistently. Consider making use of the 8pt spatial system where everything (sizing and spacing) is a multiple of 8.

hierarchy

There is a clear visual hierarchy. A good visual hierarchy makes it so that users encounter information in an order that is consistent with the intended meaning of the content.

grouping

Related elements are grouped together using either proximity, boundary, or similarity.

Consistency

The layout is consistent internally and externally. Also, sibling elements are visually consistent.

External consistency: Your buttons look like buttons
Internal consistency: Your style of buttons is similar throughout the layout

Scannability

The layout is scannable. Use the 5-second test with a team-member/friend.

Pro tip: You can make a layout scannable by including the most pertinent info in headings, decorated text, first few words of paragraphs, imagery, lists, and tables

Visual Identity

motif

There is a clear motif (i.e. A visual idea that recurs in multiple formats and gives the design an identity)

The motif here is rectangles.
The motif here is hand-drawn lines.

balance

The layout's balance aligns with the intended mood.

Asymmetrical layouts are dynamic, playful, engaging
Symmetrical layouts feel stable, static and authoritative
Off-balance layouts create a feeling of tension, intrigue or discomfort (very viable)

font selection

The choice of font aligns with the intended mood. The concept of mood lines should help you select appropriate typefaces

Color

The choice of color aligns with the intended mood. Keep in mind that there is even variety in meaning within the same hue. Use Plutchik’s color wheel of emotions.

Visual treatment

Similar to motifs. Are you styling other parts of the design in a way that aligns with the intended mood? We're talking borders, corners, shapes, patterns, textures, shadows.

E.g. Round corners feel playful. Sharp corners feel more stern.

Accessibility

contrast

Foreground and background elements have enough contrast (Check using WebAIM)

typography

Words are comfortably discernible. Shape and sizing are paramount here. Learn more about type accessibility here. Consider investing in Stark to easily check accessibility.

Touch targets

Touch targets (buttons, links) are big enough on both mobile and desktop (easy to activate). Consider investing in Stark to easily check touch target accessibility.

focus order

Users can clearly and easily tab through your page's focusable elements (links, inputs, buttons). Learn more about focus order.

alt-text

Images have alternative text that appears in place of the image in case the image doesn't load. The alt text should verbalize the meaning or role of the image, and not merely describing what appears in the image.

disabilities

Can users with disabilities use this layout? Users can have visual, auditory, and motor disabilities.

For visual disabilities: Ensure proper HTML structure and alt-text (H1, H2 etc) for screen readers
For auditory disabilities: Ensure the presence of subtitles for videos and audioclips
For motor disabilities: See "Touch targets" and "Focus order" above

For those who design and build landing pages

Content

Layout

Visual Identity

Accessibility

The essential landing
page hero checklist