Wall of Love

Focus on specificity, transparency and usefulness. In five seconds customers try to establish whether or not you can help them. Make their life easy. Clarity, then creativity.
-Harry, marketingexamples.com

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!


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.
Elaborate on the headline. Focus on the "how". WeWeb example.
Give a clear preview. Allow the user to envision it. Here's a well-executed example.
Show off any real results or testimonials.
Make it specific and easy. Here's a great example.


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.
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.
Related elements are grouped together using either proximity, boundary, or similarity.
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
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

There is a clear motif (i.e. A visual idea that recurs in multiple formats and gives the design an identity)
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
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.


Foreground and background elements have enough contrast (Check using ​WebAIM​)
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.
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.
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