This book answers a question that frustrates countless PMs and engineers:Can I make decent UI if I have no artistic talent? The answer is yes. The core argument of Adam Wathan and Steve Schoger is:Good design is not mysticism; it is a pile of concrete rules you can memorize— when to add whitespace, how many shades of gray you need, how to apply shadows, how to grade buttons. You do not need "good taste"; you need a checklist.
The meta-method of the whole book can be summed up in one sentence:Turn every small decision you agonize over repeatedly into a system in advance. "Should I use 12px or 13px here?" "Should shadow opacity be 10% or 15%?" — these agonies are not design, they are waste. Define a fixed set of options first, and only pick from them later. This article reorganizes that system by topic into eight chapters plus three practical teardowns:
1. Starting Mindset(How to start, how not to get tangled up) 2. Visual Hierarchy(Let the important things be seen first — the foundation of the whole book) 3. Whitespace and Spacing(Sense of space determines professionalism more than content) 4. Color Systems(Why you need far more colors than you think) 5. Typography(Copy-ready rules for choosing fonts and setting text) 6. Depth and Shadows(Give interfaces a three-dimensional feel) 7. Image Handling(Photos, icons, user-uploaded content) 8. Final Polish(The last mile from "usable" to "good-looking") 9. Three before/after practical teardowns(Putting the first eight chapters to use together)
Complementary to NNGroup Visual Design Principles: Gestalt Grouping · Visual Hierarchy · Layout · Color · Imagery (19 articles · Five major visual principles / Gestalt proximity-similarity-closure-common region / visual hierarchy-grid-golden ratio / typography terminology-pairing-reading typefaces / color 60-30-10 / picture superiority effect-photos-imagery / aesthetics-usability effect / glossary)Complementary: that article explains the "why" (cognitive science + principles), while this one explains the "how" (operations down to the pixel). Reading the two side by side on the same topic (hierarchy/Gestalt/color) gives the most solid understanding.
1. Starting Mindset (Starting from Scratch)
When you first start designing a new feature, the easiest traps to fall into are "thinking about layout first" and "overthinking". This chapter is a mindset calibration before you start building.
1.1 Start with function, not layout
Mindset:Do not start with "should the navigation go on top or the side, where does the logo go, do I need a container", but start with one concrete feature (for example, "search flights": origin, destination, date, search button is enough).Why: Layout is an empty frame to "hold features". Drawing layout before features are defined is pure imagination — it easily leads to a pile of redundant pages (you think you need "profile/favorites/settings/messages", when in reality only "settings" needs a standalone page), and causes repeated rework due to insufficient information (you only discover after drawing the "create project" entry that there are two project types with completely different flows).
| Scenarios | ❌ Wrong starting point | ✅ Correct starting point |
|---|---|---|
| Building a new app | First agonize over navigation style, content area width | First pick one core feature, list the input fields/buttons it needs |
| Mindset | Pursue a complete page framework from the start | Quickly sketch/wireframe to clarify your thinking, throw it away once direction is set, do not spend too much time at this stage |
1.2 Details come later + no color at first
Mindset: Do not get bogged down in details like fonts, shadows, icons in the early stage.Why: Details steal your attention from whether the structure actually works. Two anti-trap tricks:
- Draw with a marker on paper(Basecamp founder Jason Fried's method): a thick pen makes it impossible to agonize over tiny details, and instead lets you quickly test multiple layouts.
- Start with only black, white, and gray(Hold the color): force yourself to build hierarchy using fundamentals like spacing, contrast, and size. Once the structure is clear, adding color is "icing on the cake" and very easy; conversely, using color to cover up structural problems will not hide them.
1.3 Do not over-design: work in cycles + be a pessimist
Mindset: Build a working basic version first, then refine it after launch using real feedback.Why: Trying to make everything perfect in one go often leads to making nothing at all.
- Work in cycles: Design the simplest version of a feature → implement it → iterate until satisfied → then move on to the next feature.
- Be a pessimist: Only design features you "can actually build right now". Counterexample: when building a comment feature, you casually add "upload attachments" to the design, but attachments turn out too complex to finish,and you fail to deliver even basic comments. A crude comment feature is better than a blank space.
1.4 Limit choices + systematize everything (the meta-rule of the whole book)
Mindset:Too many options cause paralysis. "12px or 13px, shadow 10% or 15%, avatar 24px or 25px" — these differences are almost invisible to the naked eye, but they stop you from making confident decisions. The solution:Define a limited set of values in advance, and only choose from them later. Why: Turn "infinite continuous agonizing" into "process of elimination among finite options", making decisions easy instead of painful.
Select values by process of elimination: For example, icons are only allowed to be four sizes: 12 / 16 / 24 / 32px. First pick one that looks okay (16px), then compare it with its neighbors on either side (12, 24) — usually you can eliminate the obviously wrong one at a glance, and the middle one is the answer; if one neighbor is better, use it as the new baseline and keep comparing.Picking from a few clearly distinct options is much easier than tweaking values across a continuous range.
Checklist of things to systematize(Anything you regularly spend time thinking about should be made into a fixed rule): font size / font weight / line height / color / margin / padding / width / height / shadow / border radius / border thickness / opacity. You do not need to define all of them at the start,the key is to build the habit of asking "can I turn this into a rule", to avoid repeatedly agonizing over the same small problem.
1.5 Choose a personality
Mindset: Every design has a personality (bank = professional and reliable, startup = fun and lively), and personality is determined by a few concrete, controllable factors, not abstract mysticism:
| Factor | How it affects personality |
|---|---|
| Font | Serif = elegant and classic; rounded sans-serif = lively and cute; neutral sans-serif = minimal |
| Color | Blue = safe and reliable, gold = upscale, pink = lively.Trust your own feel when picking colors > studying color theory |
| Border radius | Small border radius = neutral; large border radius = lively; no border radius = formal.Pick one style and keep it consistent throughout, do not mix styles |
| Language (copy tone) | "Thank you, Mr. Benson…" vs "Awesome, thanks Steve!" —language has a bigger impact on personality than color or fonts |
Not sure what personality to pick? Look at what style of websites your users usually use, and follow that. It is fine to borrow ideas from others, but do not copy a competitor's entire set wholesale.
2. Visual Hierarchy (Hierarchy is Everything)
The most important chapter in the book. In one sentence: the number one secret to making a design look good has nothing to do with "decoration", it is visual hierarchy — making different content on the page present different levels of importance. If everything is equally prominent, it is like a wall plastered full of paper; no one knows where to look. Push secondary content down and bring important content up,and even if color/fonts/layout stay the same, the design immediately becomes clear.
2.1 Size isn't everything
Mindset:Relying only on font size to distinguish hierarchy causes problems— important text that is too big, secondary text that is too small, both look bad. In addition to font size, you also need to adjust font weight and color. Why: with one more dimension, you do not have to push font sizes to extremes.
| Dimension | Recommended rules (copy-ready) |
|---|---|
| Color (2–3 tiers) | Dark = important (headings) · Gray = secondary (dates) · Light gray = least important (footer copyright) |
| Font weight (2 tiers) | Regular 400/500 = most text · Bold 600/700 = places that need emphasis |
| ❌ Don't do this | When you want to de-emphasize a piece of text,do not use a lighter font weight (<400)— thin fonts only work for large headings; they become blurry at small sizes. To de-emphasize, adjust color or font size |
2.2 Don't use grey text on colored backgrounds
Mindset: Using light gray text on a white background to de-emphasize is OK; but gray text on colored backgrounds causes problems. Why: gray text on white is essentially "lowering contrast between text and background"; on a colored background, gray only makes text look dirty.
| ❌ Approach | ✅ Approach |
|---|---|
| Put gray text directly on a colored background | Pick a color in the same hue family as the background, fine-tune its lightness and saturation until it looks comfortable |
| White text + lowered opacity | Opacity makes text look dark, faded, and unclickable; if the background is an image/pattern, it will show through and look even messier |
2.3 Emphasize by de-emphasizing
Mindset: Sometimes the focal point is already big and prominent enough but still doesn't pop — in that case don't add more things to the focal point; instead, tone down the surrounding secondary content. Why: contrast is relative; reducing background noise = boosting the signal.
- Example: the selected navigation item still doesn't stand out enough after you change its color → tone down the unselected items, bring them closer to the background color, and the selected item will naturally pop out.
- Example: the sidebar is too distracting and overpowers the main content → remove the sidebar's background color, let it blend into the page background.
2.4 Labels are a last resort
Mindset: When presenting data, use the "label: value" structure sparingly.Why: It makes every piece of information look equally heavy, so you can't highlight key points.
| Scenario | Approach |
|---|---|
| The data itself identifies what it is | Omit the label entirely —janedoe@example.com(email),$19.99(price), or "Customer Support" under a person's name (job title) — you can tell from formatting and context |
| Data needs a bit of explanation | Blend labels and values into a natural sentence:"In stock: 12" → "Only 12 left in stock"; "Bedrooms: 3" → "3 bedrooms" |
| Dashboards full of similar data | Labels are genuinely needed, but Labels play a supporting role: make them smaller, lighter, thinner, and let the values take the lead |
| Information-dense specification pages (where users look for a specific item) | Exception: when users look for "thickness", they scan the word first then look at "7.6mm", so Labels can be more prominent, but don't make the values too faint either |
2.5 Visual hierarchy ≠ document hierarchy (Separate visual from document hierarchy)
Core principle: HTML h1–h6 tags are semantic structure meant for machines and accessible screen readers, and should not determine visual size. Why:h1 is very large by default; you will unconsciously make headings like "Account Management" too big, ruining the design.
- Many headings are actually more like "small labels for content"; what really matters is the content below the heading,so headings should often be made smaller.
- For accessibility/SEO, you can keep heading tags in the code, but hide them completely visually.
- In short: choose HTML tags to express meaning, and adjust the display style however you like.
2.6 Balance weight and contrast (Balance weight and contrast)
Core principle: Why does bold text stand out more? Because in the same space there are more pixels(it uses more "ink"). This "visual weight vs contrast" can compensate for each other — this is a key technique for handling icons.
| Situation | Technique |
|---|---|
| Icons (especially solid ones) placed next to text are too eye-catching | Lower contrast: use a lighter color to reduce the icon's weight; the size stays the same but it looks lighter |
| Light-colored elements are too weak (e.g., a 1px light border is invisible) | Increase weight: make the border a bit thicker so it's visible while staying soft — better than switching directly to a dark color (which is too harsh) |
2.7 Semantics are secondary (Semantics are secondary)
Core principle: When designing buttons, don't only think about "what function it serves",first think about its level of importance on this page. Buttons on each page fall into three levels:
| Level | Quantity | Style |
|---|---|---|
| Primary button | Usually only 1 | Most prominent: solid fill + eye-catching color |
| Secondary button | Possibly several | Visible but not competing: outline or light background |
| Tertiary button | As needed | Most understated: styled like a regular text link |
Dangerous actions don't have to be big and red: if "Delete" is not the main function of this page, style it as a secondary button or even a text link. When the user actually clicks it,then use a confirmation dialog + a prominent red button to give a serious warning. Save red for the "about to happen" moment, not the default state.
III. White Space and Spacing (Layout and Spacing)
Theme:A sense of space (white space) often determines whether an interface looks professional more than the content itself, yet it is the easiest thing to overlook.
3.1 Start with too much white space (Start with too much white space)
Core principle:White space should be arrived at by removing things, not by adding it. Most people's approach is: pile the content in first, then when it gets crowded, add gaps little by little until it's "okay" — but that only gives the content the minimum breathing room.Why: Good design usually needs far more white space than your intuition tells you.
- Correct approach:Start with a lot of white space, then gradually pull it back until you're satisfied. White space that you think is "too empty" often looks just right in the overall layout.
- Exception:Dense UI has its place — when a dashboard needs to fit a lot of information on one screen, it is reasonable to sacrifice some white space. But do it consciously, not by default cramming everything together. People are usually better at judging "when to reduce white space" than "when to add it".
3.2 Establish a spacing and sizing system (Establish a spacing and sizing system)
Core principle: Don't jump back and forth between 120px and 125px.Why: It wastes time and makes the design feel inconsistent.
| Key point | Explanation |
|---|---|
| ❌ Linear scales aren't enough | A rule like "everything is a multiple of 4px" won't help you choose between 120 and 125.What matters is the ratio between adjacent values |
| Small sizes vs large sizes | A few pixels make a big difference for small sizes (icons/padding): 12→16px is a +33% change; a few pixels are barely noticeable for large sizes (card width): 500→520px is only +4% |
| ✅ Rule of thumb | Adjacent steps should differ by at least 25% to make choosing easy |
| Starting point | Use 16px as the base(easy to calculate, and it's the default font size in most browsers), and expand outward; small sizes have tighter gaps, larger sizes have wider gaps |
Benefits: faster when typing values directly in the browser, you can decide by testing just two adjacent values, and the overall design is more consistent.
3.3 Avoid ambiguous spacing (Avoid ambiguous spacing)
Core principle:When using spacing to group elements, the spacing between groups must be clearly larger than the spacing within groups. Why: Without borders or background colors, people rely entirely on spacing to judge "who belongs with whom".
| Counterexample (ambiguous) | Consequence |
|---|---|
| The spacing between "label ↔ input field" in a form = the spacing between two groups | Users can't tell which label goes with which field, it's tiring to look at, and they may even fill it out wrong |
| Insufficient white space above an article title | The title looks like it's stuck to the tail of the previous paragraph |
| Spacing between list items = line height | Can't tell which lines belong to the same item |
The solution is always the same: increase the "group spacing".
3.4 Grids are overrated (Grids are overrated)
Core principle: A 12-column grid helps you plan quickly, but don't put blind faith in it — not every element should use percentage-based fluid width.Why: The core of grids is percentage width, but many elements have a "most comfortable fixed width".
| Element | ❌ Problem with grid percentages | ✅ Better approach |
|---|---|---|
| Sidebar (e.g., fixed at 25%) | Too wide and wasteful on large screens, too narrow and crushes text on small screens | Give the sidebar a fixed width, and let the main content area take the remaining space |
| Login box (e.g., taking 6 columns = 50%) | Ends up wider on medium screens than on large screens (because it's percentage-based) | If you know its best width is 500px,just write 500px directly, and only let it narrow when the screen is actually too small |
In short:Only use percentages when you genuinely want an element to scale with the screen; otherwise use fixed values.
3.5 Relative sizing doesn't scale (Relative sizing doesn't scale)
Core principle:Don't scale all elements up and down by the same ratio. Why: A ratio that works on a large screen will look out of proportion on a small screen.
| Example | Desktop | Mobile | Lesson |
|---|---|---|---|
| Body text vs heading | Body text 18px, heading 45px (2.5×) | If body text drops to 14px, a 2.5× heading would be 35px —too big; in reality 20–24px (1.5–1.7×) is correct | When the screen gets smaller, large elements should shrink more, small elements should shrink less to avoid an excessive size gap |
| Button padding | Text 16px, left/right padding 16px, top/bottom 12px | Scaling up/down proportionally is technically possible but not optimal | Large buttons should have relatively larger padding, small buttons relatively smaller padding, so large ones stand out more and small ones are more compact |
3.6 You don't have to fill the whole screen (You don't have to fill the whole screen)
Core principle: Large screens (1200–1400px) having space doesn't mean you have to use it all.Why: Spreading content out unnecessarily actually makes it harder to use; appropriate white space is better.
- If 600px is enough, use 600px;don't stretch all content to full width just because the navigation bar is full width. Each element should take only the space it needs.
- Shrink the canvas trick: When doing responsive design,design at mobile size first (around 400px), then scale up to large screens — you'll find there's actually not much to change.
- Column thinking: To make narrow content (like a narrow form) look better on wide screens,put explanatory text in a side column instead of simply widening the form itself.
IV. Working with Color (Working with Color)
Theme:You need far more colors than those tools that "give you 5 perfect palettes from 1 input color" provide. A fully functional website usually needs about 10 colors, each with 5–10 shade steps.
4.1 Ditch hex for HSL (Ditch hex for HSL)
Core principle:hex(#3490dc) and RGB are not intuitive for humans — very similar color codes can look completely unrelated. Switch to HSL(Hue/Saturation/Lightness), where all three values correspond to concepts people can understand.
| HSL dimension | Meaning | Key point |
|---|---|---|
| H Hue | Color type (0° red / 120° green / 240° blue), a full color wheel 0–360° | —— |
| S Saturation | Vividness, 0% = grey, 100% = most vivid | When saturation is 0, hue is meaningless (everything is grey) |
| L Lightness | Brightness, 0% = black, 100% = white, 50% = purest color | —— |
HSL vs HSB: Design software commonly uses HSB, but browsers only recognize HSL, so use HSL for web work.
4.2 You need more colors than you think + Define your shades up front (Define your shades up front)
Composition of a practical color palette:
| Category | Quantity | Use case |
|---|---|---|
| Greys | 8–10 steps | Text, backgrounds, borders, secondary buttons/links — the main body of the interface |
| Primary color | 1–2 colors, each with 5–10 steps | Primary buttons, navigation, links; defines brand recognition (think Facebook = blue) |
| Accent / semantic colors | As needed, up to ~10 colors | Red = danger, yellow = warning, green = success, bright colors = new features; used for distinguishing charts/labels |
How to build a set of shade steps (using one primary color as an example):
- First choose a base color(base): pick a mid-tone suitable for button backgrounds; judge by how it looks, don't nitpick the numbers.
- Find the two ends: the darkest (for text) and the lightest (for backgrounds) — use "alert box = dark text + light background" as a reference to set the boundaries.
- Fill in the middle: use 9 steps, numbered 100–900(900 darkest / 500 base / 100 lightest). Fill in 700 and 300 first, then 800/600/400/200.
- Do the same for greys, but the base color isn't important; the key is to set the darkest (text) and lightest (background) ends first, then fill in the middle.
Don't use CSS to automatically calculate lightness/darkness(such as
darken()): it will produce a bunch of similar near-colors, and the system becomes useless. Color isn't pure math — you can use this method to start, but trust your eyes to fine-tune in actual use,and resist the urge to "casually add new colors", otherwise the system exists in name only.
4.3 Greys don't have to be grey (Greys don't have to be grey)
Core principle: Pure grey = no other color tint at all, but most "greys" in life actually have a bit of color temperature.Why: Greys with color temperature feel more textured and more harmonious.
- To go cool: mix a little blue into the grey; to go warm: mix a little yellow/orange.
- Mix in the same tint from light grey to dark grey, otherwise the tones won't be unified and it will look dirty.
4.4 Don't let lightness kill your saturation (Don't let lightness kill your saturation)
Core principle: When a color is adjusted to be especially light or especially dark, it will look less vivid(it is most vivid at medium lightness). Solution:While lightening/darkening, also nudge the saturation up a bit to preserve vibrancy. This is especially important on large color blocks.
Perceived brightness: Yellow and blue have the same technical brightness, but the human eye perceives yellow as brighter — every color naturally has its own sense of lightness. On the color wheel,red/green/blue look relatively dark, yellow/cyan/magenta look relatively bright.
Lighten/darken by shifting hue (to prevent going grey): If you directly adjust L (lightness), colors easily turn white/grey and lose life. A better method is to slightly shift the hue toward the nearest light or dark color:
- To lighten → shift toward the nearest light hue: 60° (yellow) / 180° (cyan) / 300° (magenta). Example: keep L the same, shift H from 210 to 190 (toward cyan) and it lightens without going grey.
- To darken → shift toward the nearest dark hue: 0° (red) / 120° (green) / 240° (blue). Example: to darken yellow, shift it toward orange; it looks warm and natural instead of grey and dull.
- Hue fine-tuning should not exceed 20–30°, otherwise it will look like a completely different color; this can be used in combination with adjusting lightness.
4.5 Accessible doesn't have to mean ugly (Accessible doesn't have to mean ugly)
Core principle: WCAG contrast requirements —Body text (<18px) requires a 4.5:1 contrast ratio; large text requires 3:1. Light backgrounds with dark text easily meet the standard; colors are the tricky part. Two techniques that preserve aesthetics while meeting the standard:
| Technique | How to do it |
|---|---|
| Flipping the contrast | When pairing white text with a colored background, you often have to darken the background so much that it becomes too visually dominant.Do the opposite: light background + dark text, which preserves the presence of the color without letting it steal the show |
| Rotating the hue | When choosing secondary text colors on dark blocks, adjusting only lightness/saturation makes it hard to meet the standard without ending up close to white.Switch to an inherently lighter hue(cyan, pink, yellow), balancing aesthetics and readability |
4.6 Don't rely on color alone
Core principle:Color is a nice extra, not the sole carrier of information. Why: Color-blind users cannot tell colors apart (especially red and green).
| Scenario | ❌ Relying only on color | ✅ Add redundant cues |
|---|---|---|
| Data rise/fall cards | Red/green to distinguish rises and falls | Color + up/down arrows |
| Multi-line line charts | A different color for each line | Instead use lightness (value) differences— color-blind users distinguish light and dark far more easily than hue |
5. Designing Text
5.1 Establish a type scale
Core principle: Don't let font sizes scatter randomly between 10–24px (teams without standards often do this). Define a fixed set of font sizes.Why: Arbitrary font sizes = messy and time-consuming.
| Method | Evaluation |
|---|---|
| Modular scale (e.g., golden ratio 1.618) | Not recommended for interfaces: It produces decimals like 31.25px (browsers render them inconsistently; if you must use it, round to integers); also, interfaces often need intermediate values between the formula outputs, making it too rigid |
| ✅ Hand-crafted | Manually pick a set of appropriate integer values directly — no decimal issues, fully tailored to actual needs, not constrained by formulas. Use it together with your spacing system |
Units: don't use em, use px or rem. em is relative to the parent element and compounds out of control across nested levels (parent 1.25em = 20px, then an inner 0.875em becomes 17.5px, breaking the spec).
5.2 Use good fonts
You don't need years of experience to quickly identify good fonts:
| Tip | How to do it |
|---|---|
| Start conservative | When in doubt, use the system default font stack (users are already familiar with it, practical):-apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue |
| Filter by number of weights | Ignore fonts with fewer than 5 weights; filter by weight on Google Fonts and choose fonts with at least 10 styles (including italics)— more weights usually means more care was put into the font |
| Check readability | Body text fonts should have tall lowercase letters (large x-height) and wide letter spacing; heading fonts have tighter letter spacing and shorter lowercase letters. Don't choose body fonts with very short lowercase letters |
| Go with the crowd | Popular fonts are usually good fonts; especially when choosing distinctive serif fonts, checking usage rankings helps you avoid pitfalls |
| Steal like an artist | Use developer tools to see what fonts your favorite websites use — they have professional teams behind them |
5.3 Keep your line length in check
Core principle:45–75 characters per line(shorter for Chinese).Why: Lines that are too long make it easy to skip lines or re-read text.
- On web pages, using em to set width is most convenient(it adapts automatically with font size); body text containers are roughly 20-35em.
- Occasionally exceeding 75 characters is fine, but try not to.
- When a page has wide images/wide content, body paragraphs should still maintain a comfortable width— multiple widths on the same page looks odd at first glance, but is actually more professional.
5.4 Line-height is proportional
Core principle: "Line-height 1.5 is best" is only a starting point; adjust it based on both line width and font size adjust in both directions.Why: Line-height helps the eye find the start of the next line from the end of the current one.
| Variable | Rule |
|---|---|
| The wider the line | the larger the line-height (up to 2) — longer lines make it easier to jump to the wrong next line |
| The narrower the line | the smaller the line-height can be |
| The smaller the text | the larger the line-height (small text needs more room to breathe) |
| The larger the text (headings) | the smaller the line-height (as low as 1) |
5.5 Baseline, not center
Core principle: When there are different sizes of text on the same line (e.g., large heading + small button),align to the baseline (the invisible line at the bottom of text), don't vertically center. Why: Baseline alignment matches our normal reading habits and looks much tidier than centering when elements are close together.
5.6 Align with readability in mind
| Alignment method | Where to use it |
|---|---|
| Left-aligned | Default for long Chinese and English text — most readable |
| Centered | Only for short text (headings), don't use for long paragraphs; when text is too long, shorten the content instead of forcing center alignment |
| Right-align numbers | Right-align numbers in tables and align decimal points, making comparisons easier |
| Justified | Suitable for formal settings (e-magazines);hyphenation must be enabled, otherwise large gaps will appear between words; left alignment is also perfectly fine, it's a matter of preference |
5.7 Not every link needs a color
Core principle: Links embedded in body text should look clickable; but when most of a page is links, don't make every one of them stand out strongly. Why: Highlighting everything is the same as highlighting nothing, and it distracts attention from what truly matters.
- Common approach:a little bolder or a little darker is enough.
- Secondary links:only show underline/color change on hover— people who need them can find them, and they don't interfere the rest of the time.
5.8 Use letter-spacing
Core principle: Trust the type designer's judgment by default, but there are two cases where you should adjust manually:
| Situation | Adjustment | Why |
|---|---|---|
| Using a body font for headings | Tighten letter-spacing | Body fonts (such as Open Sans) are designed for readability at small sizes and have relatively wide letter spacing; tightening makes them look more like dedicated heading fonts. Conversely: don't enlarge heading fonts for body use, and don't add wide spacing to headings |
| All-caps text | Widen letter-spacing | Uppercase letters are all the same height and lack the height variation of lowercase letters like n/v/e/y/g/b, making them hard to distinguish at default spacing; widening improves readability |
6. Creating Depth
Theme: Give interfaces a three-dimensional feel of "raised / recessed / floating"; there is only one core physical rule.
6.1 Emulate a light source: light comes from above
Core principle:Assume light always shines straight down from above, and add highlights and shadows accordingly; the brain will automatically judge whether an element is raised or recessed.Why: This is the instinctive intuition real-world door panels and outlets give us.
| If you want to make it look | Top edge | Bottom edge | Notes |
|---|---|---|---|
| Raised (buttons) | Lighter (top highlight, offset slightly downward) | Darker + add a sharp-edged small shadow below (like the cast shadow of a window frame) | Pick a bright color for highlights manually,don't use semi-transparent white(it will wash out the original color) |
| Recessed (input boxes / checkboxes) | Add a little shadow at the top (the top edge blocks light), offset slightly downward, not reaching the bottom | Bottom edge is lighter | —— |
Don't overdo it: After learning to simulate a light source it's easy to get obsessed with tuning for extreme realism. Remember that clarity and usability come first in interfaces;a little three-dimensional feel is enough, no need for photorealism.
6.2 Use shadows to convey elevation
Core principle: Larger, softer shadows = the element is farther from you = the more attention it draws. Build a set of5 fixed shadow levels(define the smallest and largest first, then fill in 3 graduated levels in between).
| Element | Shadow | Meaning |
|---|---|---|
| Button | Small shadow | Slightly raised |
| Dropdown menu | Medium shadow | Easier to notice |
| Modal | Large shadow | Immediately grabs the eye |
Pair with interaction: When dragging a list item, increase the shadow = it is being lifted; when pressing a button, decrease the shadow = it is being pressed. The point isn't the shadow itself, but first asking "how prominent should this element be", then choosing the corresponding level.
6.3 Shadows can have two parts
Core principle: Good-looking shadows are often two shadows layered together, each with its own job:
| Layer | Characteristics | What it simulates |
|---|---|---|
| Large shadow | Large and soft, offset far downward, blurred edges | The natural cast shadow of sunlight in front of an object |
| Small shadow | Small and dark, little downward offset, sharp edges | The dark shadow directly beneath an object where light can't reach |
Why: Two layers are more controllable than one (the large one can be very soft, and the small edge shadow can be very sharp).The farther from the surface, the fainter that direct dark shadow beneath becomes(try lifting something off a desk and you'll understand) — so the higher an element is raised, the fainter this two-part shadow becomes overall.
6.4 Even flat designs can have depth
Flat = not simulating real light and shadow, but you can still create a sense of depth, just with different techniques:
| Technique | How to do it |
|---|---|
| Use color | Lighter colors appear closer, darker colors appear farther: to make an element protrude, make it lighter than the background; to make it recede, make it darker than the background |
| Solid shadow | Use a short, downward,sharp, unblurred shadow to make cards/buttons feel lightly lifted off the page, preserving a flat style while adding hierarchy |
6.5 Overlap elements to create layers
Core principle: The simplest sense of three-dimensionality = letting elements overlap each other.
- Let cards stagger across the dividing line between two different backgrounds, instead of sitting neatly inside one block.
- Let an element extend beyond its container at the top and bottom, creating overlap on both sides.
- Carousel button controls placed over the image use this same trick.
- Be careful overlapping images doesn't look messy: Add a"invisible border" the same color as the background around images to create a small gap, and they'll look tidy.
7. Working with Images
7.1 Use good photos
Core principle:One bad photo can ruin an entire design, even if everything else is done well. If you're not good at taking photos:
- Hire a professional photographer (good photos rely on skill with lighting/composition/color, not just an expensive camera).
- Or use high-quality stock libraries (Unsplash has free premium content).
- Never use placeholder photos taken on the fly thinking "I'll just snap a quick replacement with my phone later" — that doesn't work.
7.2 Text needs consistent contrast
Core principle: When placing a heading over a large image, it's hard to read no matter what color the text is —the problem is the image, not the text. Why: Photos have high contrast between light and dark; white text disappears in bright areas, dark text is unreadable in dark areas. The solution is to compress the image's dynamic range:
| Method | How to do it |
|---|---|
| Add a semi-transparent overlay | A black overlay darkens highlights and helps light text; a white overlay lightens shadows and helps dark text. Remember to adjust overall brightness for a more natural look |
| Colorize the image | ① Reduce light/dark contrast ② Reduce saturation ③ Overlay a solid color layer using "Multiply" blending → text is clearer and matches brand colors |
| Text shadow | When you want to preserve the image's original light and dark, add a soft glow(large blur, no offset) to the text, rather than an obvious drop shadow; with it, you don't need to crush contrast too hard |
7.3 Everything has an intended size
Core principle:Don't scale up or down arbitrarily— icons, screenshots, and logos each have their own designed target size.
| ❌ Don't do | Consequence | ✅ Solution |
|---|---|---|
| Scaling up small icons (16–24px SVGs scaled up 3–4×) | "Vectors don't lose quality when scaled" is an illusion — they look rough and out of proportion | Place the small icon inside a shape with a background color to fill the space, keeping the icon itself at its original size |
| Scaling down screenshots (large images compressed to 70%) | The text inside becomes so small you have to lean in to the screen to read it | ① Take screenshots directly at tablet size ② Crop only the most important part ③ Draw a simplified interface diagram showing only the main structure |
| Scaling a 128px large logo down to a 16px favicon | Blurriness | Specifically redraw a simplified small icon |
7.4 Beware user-uploaded content
Core principle: You can't recolor or crop user-uploaded images as freely as your own, but you can constrain their "container":
| Problem | Solution |
|---|---|
| Inconsistent image sizes make the page messy | Place them in fixed-size display boxes, centered; use background-size: cover |
| Image color is too close to the page background, making edges hard to see | Don't add a border; use a subtle inner shadow— natural enough that many people won't notice it; or use a thin semi-transparent border |
8. Finishing Touches
Theme: These are the last mile from "usable" to "good-looking", and most require no artistic talent at all.
8.1 Use fewer borders
Core principle: When you want to separate two elements,don't immediately add a border— too many borders look messy. Three softer alternatives:
| Alternative | Explanation |
|---|---|
| Use box-shadow | Softer than borders, especially good when the element and background are different colors |
| Use two background colors | You can distinguish two blocks by giving them slightly different background colors;If you already use different background colors, remove the borders |
| Increase spacing | The simplest approach — pull elements apart with empty space; it looks clear and clean |
8.2 Supercharge the defaults
Don’t add new things, just upgrade existing elements:
- List bullets → replace with small icons(checkmarks, arrows, or icons that match the content, such as a small lock for security features).
- Quotation marks in user testimonials → enlarge them and change their color, and use them as visual elements.
- Links → change color + make bold, or add a bright underline that slightly overlaps the text.
- Forms → replace default checkboxes/radio buttons with custom styles, using the brand color for the selected state; it instantly looks polished.
8.3 Add color with accent borders
Core idea: A near-zero-effort trick to raise perceived quality — on ordinary blocks,add a colored border line: top of a card / current navigation item / side of an alert message / top of the entire page (such as a 6px colored bar). No design experience needed; one line instantly makes the interface feel refined.
8.4 Decorate your backgrounds
When layout and typography are good but the page still feels flat, decorate the background simply:
- Change the background color: The easiest option; it can highlight focal points or separate content areas.
- Gradients: Choosing two similar colors gives the best result.
- Repeating patterns(such as Hero Patterns): You don’t need to cover the whole area;place a little in the corners and it looks good; the pattern color should be close to the background so it doesn’t overpower the text.
- Simple shapes/illustrations: Place one or two circles/squares in empty space, or a faint world map;all shape colors must be light so they don’t interfere with reading.
8.5 Don't overlook empty states
Core idea:An empty state is what new users see the first time they encounter a feature; don’t just leave a blank slab to get by. Why: During development you built a pretty demo with real data, but new users arrive with nothing there.
- Give the empty state an appealing image + a line of guiding copy that tells users what to do next.
- When there is no content yet, hide those filter/tag action buttons first — clicking them does nothing right now and only adds clutter.
8.6 Think outside the box
Core idea: Don’t get trapped by the “standard look” of components; there is room outside the rules:
- Dropdown menus don’t have to be a single column of shadowed white links — they can be categorized, arranged in multiple columns, and include explanatory text and colored icons.
- Tables don’t need one data item per column — for content that doesn’t require sorting, you can combine related columns into clearer hierarchy, add images, and use color to highlight key points.
- Radio buttons don’t have to be circles — they can be made into card-style selections.
Nine, Leveling Up
Two habits for getting steadily better:
- Identify decisions that “you wouldn’t have done that way”: When you see a design you like, ask “What clever detail here didn’t occur to me?” (for example, a date picker using an unusual background color, tucking a button inside an input, or using two text colors for a heading) — these unconventional choices are great ideas worth stealing.
- Rebuild interfaces you like: Hands-on replication of work you admire is the best way to understand “why experts do it this way.” Keep studying + practicing, and your design skills will keep improving.
—— Adam Wathan & Steve Schoger
Ten, Three Practical Teardowns (Before → After)
The first nine chapters are the parts; these three cases are about putting the parts together. Each starts as an ordinary default Bootstrap page,without changing the structure, only adjusting typography/hierarchy/color, and it becomes professional.
10.1 Content page (a conference landing page)
Key points walkthrough:
- Readability: Line length 45–75 characters, container 20–35em; body line height 1.4–1.7 (larger text gets smaller line height, smaller text gets larger line height); use three tiers of color for hierarchy (primary = dark / secondary = medium gray / auxiliary legal text = light gray).
- Typography: Use a display font for headings (light weight looks elegant), and switch body copy to a more distinctive font (steal ideas from others using developer tools).
- Proximity: “Time and location” sits tight against the title; the “Who should attend” heading sits tight against its list.
- Lists: Set item spacing to2 times the font size; replace bullets with relevant small icons.
- Quotes: Switch to a serif font (Georgia) to feel trustworthy, add italics for a conversational tone; enlarge quotation marks and color them as visual elements; bold the name + add an avatar + use the brand color.
- Input field: It is the only action on the whole page, so make it larger; change the lower half background to light gray to highlight it; replace the border with a shadow (with vertical offset to simulate a light source from above).
- Gray tones: Mix a little blue into grays (darker grays get bluer, lighter grays preserve contrast) to feel cool and modern.
- Zero-art-skill texture boost: Add a 6px colored bar at the top.
- Mobile: Don’t scale font sizes proportionally (don’t make headings too big); stack inputs and buttons vertically.
10.2 Complex form (SaaS settings page)
Key points walkthrough:
- Readability: Change the background to light gray so white input fields pop; group the fields group (account/profile/plan & payment/notifications), and add a short description to each group; don’t make it too wide — use two columns (description on the left, input on the right).
- Input fields: Raise height to 48px for a more comfortable feel; replace the dropdown arrow icon; increase spacing between fields to prevent confusion.
- Three levels of buttons: primary (Save, most prominent) / secondary (Change avatar, outlined) / auxiliary (Cancel subscription, text link).
- Plan selection: Change radio buttons to card style — use large text to highlight key points (storage space), use lighter tones to de-emphasize repeated information, and add a border + checkmark on hover/selected state.
- Payment area: Build hierarchy (card number large and black, expiration date small and light); use an inline container to wrap this section as a whole so the “Update” button doesn’t feel isolated.
- Notifications area: Make explanatory text smaller and lighter; replace checkboxes with the site-wide rounded-corner style, using the primary color for selected state.
- Bottom actions: Add a divider above to mark “the end of the whole form”; right-align buttons, place the primary action rightmost (like turning pages left to right).
- Mobile: Switch two columns to one column; stack plan cards vertically and move prices to the right; make the submit button full width, with the primary action on top and secondary below.
10.3 Data dashboard (invoice dashboard)
Key points walkthrough:
- Overview area: Change the title bar background to white, change the overview area background to dark blue, reverse text to white with a subtle gradient; reduce spacing between the overview and title so they feel like one unit.
- Labels vs values: Values are the focus — make labels small uppercase + lighter; for secondary text on dark backgrounds,don’t use gray directly, instead “lighten” from the background color (when contrast is insufficient you can also shift the hue slightly toward cyan).
- Buttons: Don’t steal the show from the data — switch to small semi-transparent black buttons, fully rounded, add arrow icons, and keep the style consistent.
- Recent invoice cards: Save labels by relying on context (adding a currency symbol makes it clear it’s an amount); use relative dates like “3 days ago”; highlight amounts with font size/color; use color for status (yellow = pending / red = overdue / green = paid); make the whole card clickable, and extend the light button background to the bottom of the card.
- Table: Wrap it in a rounded container to match the cards; left-align content, align amounts by the decimal point; increase row spacing for breathing room;use fewer borders, switch to zebra striping (alternating row colors); use small light text for table headers so they don’t dominate; make secondary content small and light, and use relative dates like “in 3 days”.
- Global: Fewer borders (switch to light gray background + shadows); use vertically offset shadows (simulating a top light source) for a more natural look; mix blue into grays; abandon system fonts (inconsistent across systems) and switch to popular sans-serifs from Google Fonts (such as Proxima Nova), filtering for those with “8 weights”.
- Mobile: Change the 12-column grid to vertical stacking; collapse navigation into a hamburger menu; make tables horizontally scrollable (with a truncation hint) or keep only three columns: “customer name + amount + status”.
Appendix: Quick Reference (resource pages included with the notes)
The source material also includes three “open and use” resource pages; this article does not reproduce them image by image, and only records their structure for looking back to the original files when needed:
| Resource page | What it is | How to use it |
|---|---|---|
| Color Palettes | A large number of ready-made color palettes, divided into Primary / Neutrals / Supporting three categories (corresponding to the 60-30-10 approach in Chapter 4) | Primary = most eye-catching (buttons/links/navigation/accent borders); Neutrals = main body of the interface (text/background/borders/secondary buttons); Supporting = use sparingly (semantic colors: errors/positive trends) |
| Font Recommendations | By Headlines / Articles / Application UI three scenario categories, it provides font pairing example diagrams | Pick font combinations + weight/size pairings by following the examples for different scenarios |
| UI Components Glossary | A complete Chinese-English glossary of UI components + interaction states + motion terminology (buttons/inputs/navigation/containers/feedback/data display/layout/forms/gestures/easing…) | Align jargon when talking with engineers/AI: primary button, skeleton screen, ease-in-out, empty state… |
These three accompanying pages are official Refactoring UI resources (the color palettes, font recommendations, and component library screenshots included with the original book); the original images are kept in sources and are not embedded in this article.
Sourced from will-design-notes / Refactoring UI (Adam Wathan & Steve Schoger, complete mixed Chinese-English notes). Read alongside NNGroup Visual Design Principles · Gestalt Grouping · Visual Hierarchy · Typography · Color · Imagery (19 articles · Five Visual Principles / Gestalt Proximity-Similarity-Closure-Common Region / Visual Hierarchy-Grid-Golden Ratio / Font Terminology-Pairing-Reading Typefaces / Color 60-30-10 / Picture Superiority Effect-Photos-Imagery / Aesthetics-Usability Effect / Glossary): this article = concrete techniques you can follow directly; that article = the cognitive science principles behind them. A large number of before/after visual comparison images and official resource screenshots (color palettes/font recommendations/component library) are kept in sources, and are not embedded in this wiki because the paths contain spaces and are already gitignored.
Sources and related materials
- NNGroup Visual Design Principles · Gestalt Grouping · Visual Hierarchy · Typography · Color · Imagery (19 articles · Five Visual Principles / Gestalt Proximity-Similarity-Closure-Common Region / Visual Hierarchy-Grid-Golden Ratio / Font Terminology-Pairing-Reading Typefaces / Color 60-30-10 / Picture Superiority Effect-Photos-Imagery / Aesthetics-Usability Effect / Glossary)
- NNGroup Design Systems · Icons · Visual Style · Motion · Visual Testing (19 articles · Design Systems vs Style Guides · 4 Icon Usability Criteria/Recognition vs Interpretation · Skeuomorphism/Glassmorphism/Flat/Neumorphism · Clickable Element Recognition + Banner Blindness · 6 Uses of Animation/Motion · Visual Testing Attitude vs Behavior/Desirability Toolkit/Mood Boards)