THE PAGEBROWSER FIELD GUIDE
Browse web design with better questions.
Study typography, spacing, contrast, and responsive behavior to build an original design brief.
Good web design begins with the people using the page and the information they need. Give each page a clear purpose, build a readable structure, and choose visual details that support understanding. Use this guide to connect inspiration with decisions you can explain and review in a working website.
Plan with real content
Draft the main message and supporting details before polishing the layout. Use realistic headings, images, and paragraph lengths when comparing designs. A layout that works with your actual material is a better starting point than one judged only by empty boxes or short placeholder copy. Keep the primary action specific to the page's purpose.
Include accessibility in the design
W3C's accessibility guidance recommends sufficient contrast, recognizable interactive elements, consistent navigation, and headings and spacing that group related content. It also advises against relying on color alone to communicate information. Consider these requirements while choosing typography, states, imagery, and page structure, then check the implemented result as part of your review.
Review the complete experience
Examine the page at different widths, move through its links with a keyboard, and read it in the order it presents information. Check whether each destination matches its label. When something fails, describe the problem precisely before changing the styling. Keep a short decision log so later edits preserve what makes the page understandable and usable.
For the underlying guidance, see Designing for Web Accessibility | W3C WAI.
Four observations worth keeping
Type
How do headings, body text, and labels establish a readable hierarchy?
Space
Which elements belong together, and where does the layout give the reader a pause?
Color
Does color explain a role, create emphasis, or help an action stand out?
Behavior is part of the design
Check how the same page works with a narrow viewport, keyboard navigation, and enlarged text. A pleasing still image cannot answer those questions.
Write the decision, not just the preference
“I like this heading” is a starting point. “The heading states the audience’s problem before the page introduces a solution” is a design lesson. Write down the reasoning you want to apply and test it against your own content.
Collect a few contrasting examples and explain what each contributes. Avoid reproducing one source’s distinctive composition, copy, or imagery. Use the sources to identify principles, then create a combination that fits your work.
Continue with an AI-assisted design workflow or explore the three page starters.