Design that reads in five seconds

A stranger should know who you are, what you offer and what to do next within five seconds of landing. Size and contrast do that work: the largest thing on the screen is the headline, the second is the hero image or subhead, the third is the primary button. One focal point per screen; two buttons of equal weight split attention and neither gets pressed.

On a freeform canvas nothing stacks itself, which is a freedom and a responsibility. Use the snap guides and the rulers to line things up, and the layers panel to keep the order readable. Then look at the page with your eyes half closed: if the headline is not the first thing you see, it is not big enough.

Each of the eleven themes pairs a display face with a body face. Stay inside that pair. Body text at sixteen to eighteen pixels, a line height around one and a half, and lines no longer than about sixty-five characters, which is a comfortable column on a laptop and the full width of a phone, so do not widen paragraphs to the edge of a wide screen.

Headings step down in order (H1, then H2, then H3) and never skip a level because the smaller one looked nicer; screen readers and search engines both read the order. Avoid paragraphs in capitals, and keep bold for the one phrase that matters in a passage.

The theme gives you a palette; the accent is for the things a visitor should press, and the neutrals are for everything else. If every element wears the accent, nothing stands out. Keep body text at a contrast of at least 4.5 to 1 against its background, which is the accessibility floor, and check it on the tinted sections as well as the white ones.

Near-black text on an off-white ground reads as more considered than pure black on pure white, and it is what the themes do by default. Change the palette on purpose, once, in the theme, rather than colouring elements one at a time on the canvas.

Whitespace is not empty; it groups what belongs together and separates what does not. Keep the padding between sections consistent and align elements to a grid of eight or twelve pixels. Cards of equal height in a row look designed; a staggered row looks accidental.

The phone layout is derived from your desktop page: elements flow into a column in reading order, and you can adjust that column by hand. Switch the editor to the phone view before you publish and check three things: the reading order still makes sense, nothing sits under anything else, and every button is at least 44 pixels tall so a thumb can hit it.

A real photograph of your work, your room or your team beats a stock image every time, even a slightly worse one. Crop to one aspect ratio inside a grid and export at the size the page needs; a photo three times wider than its box slows the page for nothing. Keep icons to one style and one stroke weight.

The editor can give a section or an element an entrance animation. Use one, on the hero, or none. A page where every section slides in from a different direction reads as a slideshow, and a visitor who has asked their system to reduce motion should see the page still, which the published site respects.

Alt text on every image (the field is in the editor), a label on every form field, a visible focus state on every button. Do not carry meaning in colour alone: an error needs a word or an icon as well as red. Captions on video help everyone, not only people who cannot hear it.

Accessible pages tend to be simpler pages, and simpler pages load faster and rank better. Design for the widest audience from the first draft; retrofitting it later costs more than doing it once. Test the whole page with the keyboard alone, tab by tab, and fix whatever you could not reach.