Landing page layout checklist
General
- Does your layout support the message or meaning of the content?
- Have you considered the layout at an element (e.g. button), component (e.g. containers) and page level?
- Have you made sure that related elements are both properly aligned and grouped, if possible?
- Is your layout consistent with other websites?
- Does your layout offer something extra to help it stand out?
- Should you take advantage of common layout patterns?
Order
- Did you start by prioritising the content to make sure you know the order of importance?
- Are there any sets of elements that look odd because they’re not ordered by visual weight?
Hierarchy
- Have you emphasised more important elements and/or de-emphasised less important elements?
- Are visible elements that help reinforce layout (e.g. borders, dividers, containers) subtle enough?
- Should you take advantage of depth effects (e.g. overlapping, shadows) to reinforce visual hierarchy?
- Are the non-content content/sprinkles (e.g. hand-drawn arrows) on the page stealing focus from the content?
Connected areas
- Should you use background transitions to visually separate sections of the page?
- Are areas that are conceptually related visually connected in some way?
- Are related elements or areas noticeably grouped?
- Where you cannot noticeably group related elements or areas, should use some other visual effect to visually connect them?
Systematic design
- Should you use a grid system of some kind to help with layout?
- Is your layout systematic and orderly, even if it’s energetic/varied?
- Are there any “paper cut” layout issues (i.e. slight misalignment or wrong spacing) that will annoy people?
- Have you made sure that any nested rounded corners look as if they match?
Space
- Have you set out a spacing scale so that all of your spacing feels coherent?
- Is there anywhere that you can rely on whitespace to highlight an element, instead of more visual effects?
- Is your spacing consistent between not necessarily the content, but the areas of high visual weight, at element, component, and page level?
- Are the elements on the page so crowded or dense that the page is overwhelming?
- Are the elements on the page so far apart or loose that they don’t feel related?
- Have you got both areas of visual interest and areas of rest in the design?
Alignment
- Have you used optical alignment where it’s better than mathematical alignment?
- Where you’ve got two elements of different sizes vertically aligned, have you tried top, centre, and bottom alignment?
- Where you have text vertically aligned with other elements, does it follow best practices for vertical text alignment?
- Have you used any visual effects (e.g. solid drop shadows) that make alignment difficult?
The viewport
- Have you considered how the layout will work at different viewport widths?
- Have you made sure that no matter the viewport size, a person will know if there’s more content below?
- Does your layout feel consistently laid out in every possible scroll/viewport position?
Visual interest
- Should you use more horizontal stacking where it adds visual interest or supports the content?
- Can you introduce more variety at any level, to add more energy and visual interest?
- Have you added so much visible structure that the design now feels too busy or rigid?
- Have you struck a good balance between orderly and varied layout everywhere?
- Have you considered whether the layout should be softer or harder (e.g. more rounded corners, softer colours for dividers)?
- Should you intentionally ignore the layout anywhere to help the layout feel energetic, or to add visual interest (e.g. tilt or misalign an element)?