Visual guide
Why a layout works
See how size, spacing, contrast and grouping guide the eye.
NN/g visual design guideMethods
Learn, practise and check.
Use one lesson on a real page, then check that it works.
Guides by topic
Pick what you are working on. See its small topics, a guide, examples and a relevant skill where one helps.
Loading topics…
These are starting routes, not a requirement to learn every topic before building. A saved skill document is not an installed or tested tool.
Previously approved references
Dylan approved HyperUI marketing and neobrutalism component references. That records the visual direction; the chosen part still needs its source, behaviour and phone checks.
Icons & communities
Start with a matching SVG family. These six Phosphor duotone icons are saved locally as a candidate; the site's existing icons have not been replaced.
Retained Phosphor MIT notice. SVG files remain editable. AI images can help explore an illustrated direction; small interface icons still need clean vector paths and checks at their actual size.
Browse icon families
Terms checked 5 November 2026. Keep applicable notices. Brand marks, premium bundles and separately shared Figma files need their own terms. RemixIcon restricts standalone library redistribution and branding uses.
Communities & shared resources
A community is a place to find work and ask questions. Reuse permission comes from the individual file's licence or its creator, not from Discord membership. No communities were joined.
Tech-company design systems to study
Google Material SymbolsExisting company studies
Study spacing, type, navigation and states. A company's attractive interface is a reference; reuse its source only where the specific code or asset terms permit it. These links are source leads, not completed visual studies of every company.
Learn
Visual builder course
Lay out and style a site
Start with the layout lesson in this Webflow learning path.
Webflow for Designers
Course
Design for every screen
Short lessons on flexible layouts, typography, images and interaction.
Google’s Learn Responsive DesignPractise
First exercise · Al Basri
Can someone find a dish and its price on a phone?
Open the menu on a phone. Try the three steps and note where you hesitate.
- Find a category
- Pick a dish
- Read its price
Compare the current page with a few menu examples before choosing a change.
Build checklist
Tick each item after checking it. Use one project at a time.
W3C Easy Checks for a first accessibility review. Webflow Build & Launch Checklist for more detailed checks, including Webflow-specific steps.
Explained examples
See the idea in a mini diagram, then open the real examples Kelley Gordon discusses. NN/g’s five principles
01 · Scale
Give the main item more space
Try a larger image for a featured dish. Keep the regular menu rows easy to scan.
Two examples from NN/g
- Medium’s home screen uses larger cards for popular articles.
- Kraków parking garage makes the current zone the biggest sign.
02 · Hierarchy
Show what to read first
Make the dish name and price easy to scan. Use quieter styling for its description.
Three examples from NN/g
- Medium’s article screen separates the headline, subtitle and body with type size.
- Uber’s rider screen uses a shaded field to draw attention to the destination.
- Dropbox’s file list takes more reading when files have few distinguishing cues.
03 · Balance
Give each side enough visual weight
On a split hero, a strong headline can balance a photo even when the two sides differ in size.
Four examples from NN/g
- The Hub job-board concept distributes its cards evenly around the centre.
- Nike Air Vortex balances different text sizes and placements on either side of the product.
- Brathwait watch leads the eye to the centre of the dial.
- Editorial spread puts uneven visual weight on either side of the page.
04 · Contrast
Make different actions look different
Give the main action a distinct fill. Check that both action labels are readable.
Two examples from NN/g
- iOS Reminders uses a strong red background to distinguish Delete.
- Greenhouse Juice bottles show how the same white lettering is harder to read over pale liquids.
05 · Gestalt and grouping
Keep related things together
Leave less space between a category and its dishes than between two categories.
Four examples from NN/g
- Picasso drawing shows how the eye completes partially drawn figures.
- NBC logo makes a peacock recognisable in the space between shapes.
- Uber driver signup keeps each label close to its field.
- 2017 US tax form shows how tight spacing can obscure which fields belong together.
More examples with explanations
More Design Brain guides
Guide
Build briefs & practical guides
Existing website prompts, planning material and supporting guides.