This set of notes answers one question:Why do some interfaces feel instantly "right", while others are so messy you want to close them immediately? The answer is not mysticism. Visual design follows a set of explainable principles, summed up in one core sentence:Visual design is not just about looking good — it directly determines how well a product works—— scale guides attention, Gestalt determines which elements are perceived as "a group", and contrast makes the things that should stand out stand out.
The full text is divided into eight sections, following the flow "master framework → grouping → hierarchy implementation → typography → color → imagery → psychological effect → glossary": 1.Master framework: The five visual design principles(Scale/Hierarchy/Balance/Contrast/Gestalt) — the backbone for all content that follows. 2.The four Gestalt grouping principles(Proximity / Similarity / Closure / Common Region) — how the human brain automatically "groups" elements, and how designers can leverage this. 3.How to implement visual hierarchy(Color contrast / Scale / Grouping / Squint Test / Grids / Golden ratio) — making sure "the important things are seen first". 4.Typography and typesetting(Glossary / Typeface pairing / Reading typefaces). 5.Color(Color wheel / Harmony / 60-30-10 rule / Color meanings). 6.Imagery and visual representation(Picture superiority effect / Photographs / Imagery types / Visual signifiers for lists). 7.Aesthetic-usability effect(Why attractive things "seem" to work better, and the pitfalls of this effect). 8.Index for two glossaries(Visual design / Typography).
This set complements NNGroup Usability Testing and the Ten Usability Heuristics (full list of 10 heuristics · application to complex applications · user pleasure hierarchy · testing methods: 5-user rule/recruitment/remote testing/task scenarios/step-by-step tasks/attitude vs behavior/4-step analysis/small-sample bias/competitive evaluation): that piece covers "ease of use" (interaction logic), while this piece covers "looking good and working well" (the visual surface). Heuristic 8, "Aesthetic and minimalist design", is the seam connecting the two.
1. Master framework: The 5 Principles of Visual Design
We can often tell at a glance whether a design "looks good" or not, but cannot explain why. These five principles break that intuition down into actionable language.They do not exist in isolation — every subsequent chapter (hierarchy, grids, color, imagery) is an elaboration of these five.
| Principle (EN / CN) | Core rule in one sentence | How to implement / Key numbers | Counterexample |
|---|---|---|---|
| Scale | Use the relative size of elements to signal importance; the largest element is seen first | Use no more than 3 distinct size levels within a single design(to maintain consistency and hierarchy); make the most important element the largest | —— |
| Visual Hierarchy | Guide the eye to browse in order of importance, achieved through size/color/spacing/position | Decrease font size from heading → subheading → body text, so users instantly understand the information architecture | Dropbox App: There is little distinction between files, forcing users to parse line by line to find the file they want |
| Balance | Elements are distributed reasonably across the page to create an overall sense of stability (measured by the "visual weight" on either side of the central axis) | Three types:Symmetrical(Hub Style, stable)/ Asymmetrical(Nike, dynamic and energetic; more text on the left is balanced by large text on the right to match visual weight)/ Radial(Brathwait watches, weight distributed evenly around a central point) | Editorial-style layouts: Elements are unevenly distributed across the central axis, creating imbalance |
| Contrast | Use visually distinct elements to communicate "these two things are different" | Usually achieved with color; in iOS Reminders, "Delete" uses high-contrast red | Greenhouse Juice: Bottle text color changes with the juice flavor; labels on light-colored juice are nearly illegible (insufficient contrast) |
| Gestalt Principles | The human brain automatically organizes multiple elements into "a unified whole", rather than perceiving them as isolated individuals | Includes sub-principles of similarity, continuation, closure, proximity, common region, etc.;Proximity is especially critical for UX(see Section 2 for details) | 2017 US tax form: Insufficient spacing between fields made it hard for users to tell which fields belonged to the filer and which belonged to their spouse |
Why these principles matter (it is not just about looking good):
- Improve usability: Good layouts are easier to use — for example, the golden ratio can optimize the relationship between font size, line height, and line width to make text more readable.
- Evoke emotion and delight: Good looks trigger positive emotions, making users more forgiving of minor usability flaws (this is the "aesthetic-usability effect" covered in Section 7).
- Strengthen brand recognition: A strong visual system builds trust and interest, and effectively communicates brand identity.
Gestalt = German for "whole". Its core insight: the whole is not equal to the sum of its parts — you "see" a peacock in the negative space of the NBC logo even though no peacock is drawn there; you "see" two people kissing in the fragmented lines of a Picasso drawing, because the brain actively fills in the gaps. Designers leverage this instinct to communicate more with fewer elements.
2. The four Gestalt grouping principles (Proximity · Similarity · Closure · Common Region)
All four principles answer the same question:How do users judge "which things belong to a group"? This is the foundation of interface readability — when grouping is correct, users understand the structure at a glance; when grouping is wrong, the design feels messy no matter how attractive it is.The four principles have a strength hierarchy: Common Region ≳ Proximity ≳ Similarity(Empirical counterexamples are provided below).
2.1 Proximity — The strongest and most commonly used grouping cue
Core principle:Elements placed close together are perceived as a group; elements placed far apart are perceived as separate groups. Proximity often overrides other cues such as color and shape, making it one of the most important grouping principles.Why:Saves users' parsing effort — users can discern structure from spacing alone, without reading text.
| Use cases | How to apply | Positive examples / Counterexamples |
|---|---|---|
| Group related elements together | Cluster related elements close together, and separate unrelated elements with more space | Positive: Wellington City Council adds white space between the search button and the navigation bar to indicate their different functions; on small screens, it moves search above the navigation bar to prevent misidentification |
| Text grouping | Use vertical white space between paragraphs to group sentences; place headings close to the content they describe | Positive: Even without reading the text, users can see paragraph and section groupings from white space alone, which supports scanning |
| Form sectioning | Split large forms into small groups; place labels close to their corresponding input fields | Positive:A large form with 12 fields split into 3 groups of 4 fields appears easier to complete; reduce the spacing between "label ↔ input field" to indicate they are related |
| Do not place unrelated elements too close together | Separate buttons with different functions with adequate space | Counterexample: California EDD crowds the "Add Employer" button together with "Next / Save Draft / Cancel", so users cannot distinguish their functions |
| Do not isolate critical elements too far away | Do not relegate important actions to far corners | Counterexample: Kayak places "Skip" in the top-left corner of the screen, far from the main action, making it easy to overlook; Hulu (Apple TV) places "View Details" in the bottom-right corner, leading users to think there is no available action |
Responsive design challenges:Smaller screen sizes change the proximity relationships between elements. Counterexample: The desktop version of the Transport for London website places "Ultra Low Emission Zone" and "Low Emission Zone" close together for easy comparison, but on mobile they are separated, so users may miss one of them.Solution:Recheck whether grouping still holds when switching breakpoints.
2.2 Similarity — Grouping by "looking alike"
Core principle:Elements that share visual features (color/shape/size/typeface/orientation/animation) are perceived as a group. Why:This is the underlying mechanism that makes conventions such as "clickable = blue" work.
| Features | How to apply | Counterexamples (misleading similarity) |
|---|---|---|
| Color (most salient) | Use a consistent color for links so users can instantly recognize clickable items | Icons and buttons share the same color but icons are not clickable → users mistakenly think icons are also clickable; at Credit Union Bank, "Submit" and "Cancel/Add Attachment" share the same color → the primary action is drowned out among secondary actions |
| Shape | Asos uses rounded rectangles for navigation buttons and squares for filters to distinguish their purposes | Icons from different categories have shapes that are too similar → users mistakenly think they are related; Etsy uses differently colored rounded rectangles plus special icons to distinguish "Free Shipping" and "Bestseller"; if they shared the same color, their shared shape would make them look too similar and slow users down |
| Size | Uniformly sized product cards indicate the same category; larger-sized promotional items indicate different category content | Videos in the right column on Martha Stewart resemble surrounding ads in size and shape → they are mistaken for ads and ignored |
| Other | Consistent font weight/italics indicate related text; consistent alignment direction and consistent animation convey similar function | —— |
Note:Elements with different functions will cause confusion if their visual features are too similar; use size/color/shape to build clear hierarchy; always verify comprehension with user testing.
2.3 Closure — Mentally filling in missing parts
Core principle:When a stimulus matches only part of an object, people automatically fill in the gaps and perceive a complete object(looking at an incomplete circle, people will "see" a full circle). This process is automatic.Why:It allows designs to be simplified with less visual weight, and can also imply that "there is more content off-screen".
| Applications | How to apply | Positive examples / Counterexamples |
|---|---|---|
| Logo design | Omit details and let the brain fill them in | PBS uses positive and negative space to depict three heads; MLB uses simple graphics to imply a swinging baseball player |
| Interface icons | Use incomplete shapes to convey function | Shape icons in Google Slides remain recognizable even though they are incomplete —but icons must be tested; no matter how beautiful they are, they are useless if users cannot understand them |
| Imply "there is more" | Show only part of content to imply that more is visible after swiping | Positive: Lucid shows partially unexpanded elements to encourage horizontal swiping |
| Avoid the "illusion of completeness" | Do not make a page look "already complete" | Counterexample: The Headspace sleep page appears complete, so users miss options below |
| Provide sufficient context | Truncated elements must show enough of themselves | Counterexample: The HelloFresh carousel truncates too little of the next item, so it is ignored; Positive:The Target App cuts off about 40% of the third button, successfully conveying that "there is more" while remaining easy to understand |
2.4 Common Region — Containers / Borders / Background Color
Core Principle:Elements located within the same boundary (frame / background color / container) are perceived as a group. Why: This is the strongest grouping method among the four principles —it can override proximity and similarity.
| Usage | How to apply | Positive examples / Counterexamples |
|---|---|---|
| Build structure | Use background color / borders to enclose regions | The Windows print dialog uses borders to divide content into 3 groups; Slack uses a dark background to group UI controls, then uses lines to separate search / workspace / channels; Synchrony Bank uses colored regions to separate the header and footer from the main content |
| Containers convey relationships | Place images + captions within the same boundary; display labels / accordion menus in the same region | The Athleta app accordion places subcategories and top-level headings in the same container, creating clear hierarchy |
| Override other principles | When whitespace is insufficient for grouping, use containers to compensate | Positive example: An early version of Food Network had overly large spacing between recipe information, making grouping difficult; this was resolved by switching to a card style (image + title + details within the same boundary) |
| Do not overuse borders | When whitespace alone is sufficient for grouping, borders are redundant | Counterexample: Backcountry's mobile filters added borders to every category, when proximity alone would have sufficed and borders could be removed; comparison tables only need "zebra stripes" (alternating background colors) to separate rows |
| Beware of "false bottoms" | Full-width borders / background colors may make users think they have reached the end of the page and stop scrolling | Counterexample: Full-width background color dividers on the Better Homes and Gardens homepage were mistaken for the end of content |
Mnemonic for the four principles:Frame > Proximity > Similarity(Common Region > Proximity > Similarity). But "stronger" does not mean "should be used" — if whitespace works, do not add frames; overusing borders and background colors equals visual clutter.
III. How to Implement Visual Hierarchy (Hierarchy · Grids · Golden Ratio)
Section 1 explained what "visual hierarchy" is; this section explains how to create it. Visual hierarchy = guiding users to browse in the priority order intended by the design. Without it, users do not know where to start looking. Counterexample: Williams-Sonoma mobile — elements are similar in size and color, all uppercase, lacking whitespace; there is no focal point except the maroon "Cyber Monday" block, and users are unwilling to parse the visual chaos.
3.1 Three Tools for Establishing Hierarchy
| Tool | How to use | Best practices (key numbers) |
|---|---|---|
| Color & Contrast | Use bright / high-saturation colors to highlight key points, low-saturation colors to de-emphasize secondary content | 2 primary colors + 2 secondary colors; in complex designs no more than 3 levels of contrast variation;Do not rely on color alone(colorblind users cannot distinguish differences; pair with other cues) |
| Scale | Use size to distinguish headings / subheadings / body text | 3 size tiers (small / medium / large); the most important element is the largest;no more than 2 large elements to maintain clear hierarchy |
| Grouping | Implicit grouping via proximity (spacing and whitespace) + explicit grouping via common region (borders / background color) | Let key points "breathe" (add surrounding whitespace), but control intra-group spacing to maintain coherence; only add containers when whitespace is insufficient, do not overuse |
Positive examples: MoMA uses green links against black text for emphasis; The Noun Project's white search box pops against a black background; Hipcamp uses large bold headings to grab attention; Spotify uses large inter-group spacing + small intra-group spacing for grouping; Shopify's checkout form reduces the spacing between "fields ↔ labels" and increases spacing between form blocks.
3.2 Squint Test — Verify Whether Hierarchy Works
Core Principle: Squint (or blur the page) to reduce detail resolution, and only observe the overall composition and hierarchy.Why: It can quickly reveal whether "hierarchy is actually communicated". Positive example: After blurring Spotify, text becomes unreadable, but the "Recently Played" area still pops out due to strong color contrast, proving the grouping is effective.Additional reminder: Do not only test templates; also pay attention to the impact of real populated content — overly vivid news images may accidentally dominate the page, and need to be handled during editing.
3.3 Grids — Structured Layout
Core Principle: A grid = a visual structure composed of Columns + Gutters + Margins that defines the page layout.Why: For designers = quickly create aligned interfaces; for users = predictable and easy to scan; for responsive design = adapt to different screens via breakpoints.
Three core elements:
- Columns: The main content area, commonly using percentage widths for adaptability. 4 columns on mobile / 12 columns on desktop.
- Gutters: The space between columns, using fixed values adjusted by breakpoint (smaller gutters on small screens, larger gutters on large screens).
- Margins: The outer space on the left and right of the screen; content is not placed within margins.
Three grid types:
| Type | What it is | Suitable scenarios | Example |
|---|---|---|---|
| Column Grid | The page is divided into vertical columns, with elements aligned to columns | General purpose | Ritual.com uses a four-column grid, with products aligned to columns and clear gutters |
| Modular Grid | Column grid + horizontal rows = modules | E-commerce / lists / galleries and other repeated content with variable height | Behance uses 4 modules per row, with different horizontal and vertical gutter sizes |
| Hierarchical Grid | Allocates space according to importance, with important content occupying larger areas | Online news and other scenarios emphasizing a single key point | The New York Times uses a two-column hierarchical grid, with the headline occupying the largest area on the left |
Practical specifications:
- Standard web grid:1128px width, 12 columns, 72px column width, 24px gutter width(72 column width / 24 gutter / 12 columns).
- Product / card layouts: A 3–4 column wide grid is more stable.
- Content-focused layouts (blogs / articles): 12 columns, narrow center with margins on both sides, to guarantee the main reading area.
- Place content within columns, not in gutters(to avoid visual clutter).
- Consider the 8px grid system: Most device screen pixels are multiples of 8; using multiples of 8px for component values simplifies scaling and implementation.
- Alignment is the first rule: The human eye immediately notices misaligned design. Moderately "breaking the grid" (such as Shrine) can draw attention, but it must have a clear reason, otherwise it is just visual clutter.
3.4 Golden Ratio φ ≈ 1.618
Core Principle: The golden ratio (φ, also known as the golden mean / golden section / divine proportion) is an irrational number ≈ 1.618033...(1/0.618 ≈ 1.618). Two quantities a>b satisfy the golden ratio when a:b = (a+b):a(a+b)/a = a/b ≈ 1.618, i.e., the ratio of the sum of the two quantities to the larger quantity equals the ratio of the larger quantity to the smaller quantity.Why: Historically (Pyramids of Giza, Parthenon, *Mona Lisa*), it has been considered to create organic, balanced, pleasing compositions; a study (Rizzolatti & Di Dio) found that human statues conforming to the golden ratio activate specific brain cells, while distorted versions do not, suggesting that aesthetic perception may be partially innate.It dates back to 500 BCE(Phidias / Plato / Euclid); Leonardo da Vinci called it the "divine proportion".
Golden rectangle and spiral: A rectangle with side ratio φ; after cutting off a square, the remaining smaller rectangle is still a golden rectangle — this can be repeated infinitely, and connecting the diagonal points of each square produces the golden spiral (it appears in natural plant growth, hurricanes, etc.).
Four applications in UI design:
| Application | How to use |
|---|---|
| Text Sizes | When body text is 16px, set headings to multiples of the golden ratio; scale font sizes by φ to build hierarchy |
| Line-height | Adjust line-height (text height + inter-line whitespace) by φ as well; increasing line-height makes reading easier;as line length increases, line-height must be increased accordingly to maintain readability |
| Image cropping | Place the golden spiral on the focal point of the image and crop accordingly, to quickly produce a dynamic composition |
| Web page layout | The division of the golden rectangle naturally forms a two-column layout of "main content area + sidebar", giving the interface a sense of balance |
Pragmatic reminder: The golden ratio is a "reference", not an "iron rule" — it is difficult to perfectly adapt to all viewport sizes; use it to optimize on some screen sizes. It is a parallel tool to the 12-column grid and 8px system described above; there is no need to dogmatically mix them.
IV. Fonts and Typography (Terminology · Typeface Pairing · Reading Fonts)
4.1 Typeface Pairing: 6 Classifications + Pairing Principles
When choosing fonts, first recognize their classifications to quickly narrow down options and reduce trial and error. Typefaces determine the tone and personality of the entire site, and directly affect readability.
| Classification (EN / CN) | Characteristics | Typical uses |
|---|---|---|
| Serif | Has "feet" at the ends of strokes, with obvious thick-thin variation | Traditional, formal occasions |
| Sans-serif | No "feet", relatively thin strokes, large X-height | Digital screens, modern and concise |
| Slab-serif | Thick block-shaped serifs, consistent with stroke thickness; suitable for bold, impactful uses | —— |
| Script (handwritten) | Has flourished decoration, resembles handwriting | Headings / decoration |
| Display | Distinct decorative qualities | Large-size display headings |
| Monospaced | All characters have equal width | Code, tables |
Pairing principles (Dos & Don'ts):
- Multilingual support: Even if you only build for one language, users may use third-party translation — choose fonts compatible with multiple languages to improve brand recognition; check for garbled text or layout breakage when translated into Japanese / Nepali, etc.
- Evaluate character similarity: In some sans-serif fonts, the number "1", uppercase "I", and lowercase "l" look too similar.Finance / government / healthcare and other scenarios requiring precise data (verification codes, account numbers), choose fonts with clearly distinguishable characters.
- Pair decorative fonts with neutral fonts: Decorative fonts should only be used for secondary elements such as headings / illustrations; pair body text with neutral sans-serif or serif fonts. Counterexample: Using decorative fonts for all headings makes reading harder; the combination of serif body text + decorative headings is the hardest to browse.
- Use contrasting font weights to distinguish components:Using multiple weights of a single typeface (Light / Regular / Bold / Italic / Bold Italic) guides the eye better than relying only on font size. Positive example: Proxima Nova uses extra-bold main headings + bold comment titles + light-colored labels + regular body text; weight differences guide the eye; relying only on font size results in flat, poorly defined hierarchy.
- Assign a clear role to each typeface: One typeface for headings, another for body text; do not mix multiple typefaces in body text; standardize fonts via design systems / front-end style guides.
4.2 The Best Font for Online Reading: No Single Answer
Core Principle:There is no universal "best font" suitable for all users — different fonts have significant effects on reading speed, but effects vary from person to person.Why: This overturns the fantasy of "finding one perfect font once and for all", and forces designers to optimize for their target audience.
Study scale and data:
- 352 participants, tested 16 fonts; each passage was 300–500 words, at 8th-grade reading difficulty; included classic (Times / Helvetica), digital-native (Calibri / Arial), and high-readability (Noto Sans / Montserrat) fonts.
- Collected metrics: user preference (subjective), reading speed (WPM, words per minute), reading comprehension (accuracy near 90%, no significant difference).
- The fastest font averaged 314 WPM, 35% faster than the slowest font.
Three key conclusions:
- No universal best: Garamond had the best overall average speed, but was only optimal for 48% of users; Franklin Gothic was better for more users (59%), but its average speed was lower than Garamond. This may be because Garamond stands out for stronger readers, while Franklin Gothic is friendlier to average readers.
- Users cannot select the best option for themselves: Users rarely change default settings; and subjective preference is not always optimal —the fastest font was 14% faster than users' preferred font.
- Age has a significant effect:Reading speed decreases by 1.5 WPM per year; a roughly 11% drop over 20 years. Garamond / Montserrat / Poynter Gothic are friendlier to older users;designers are typically younger (<35 years old), and their preferences may not suit older users.
Design recommendations: Take font selection seriously (differences between high-readability fonts are still significant); avoid low-readability fonts (ensure high contrast + appropriate font size, do not use overly small text);for users over 50, reduce content length by 11%(because reading speed declines with age); first understand the age of your target audience. Theoretically, systems could automatically optimize fonts based on users' actual reading speed (random starting font → measure speed → select optimal → retest periodically), but dynamically changing fonts causes discomfort, and is currently more of an "April Fools' idea".
4.3 Typography Terms Glossary — Quick Reference for 30+ Terms
Grouped by theme, effectively alphabetical entries.Usage: Align on jargon when communicating about typography with designers / front-end developers.
| Theme | Term (EN / CN) | Definition |
|---|---|---|
| Glyph structure | Baseline | The imaginary horizontal line on which the bottom of letters rests (descenders extend below it) |
| Glyph structure | X-Height | The height of the lowercase letter "x", excluding ascenders/descenders; describes typeface proportions and readability |
| Glyph structure | Cap Height | The height of a capital letter measured from the baseline to its top |
| Glyph structure | Ascender | The portion that rises above the x-height (e.g., in b/d/k/t) |
| Glyph structure | Descender | The portion that falls below the x-height (e.g., in g/p/y) |
| Glyph structure | Aperture | The partially enclosed negative space inside a letter (e.g., the inside of C, the bottom of e);Wide apertures are more readable than narrow apertures |
| Glyph structure | Stroke | A straight or curved line that forms part of a letter |
| Glyph structure | Foot | The part of a letter that rests on the baseline (common in serif typefaces) |
| Glyph structure | Serif | The small hook-shaped stroke at the end of a main stroke |
| Spacing | Kerning | Horizontal negative spacing between consecutive characters, adjusted for visual balance for specific letter pairs |
| Spacing | Letter Spacing | Spacing between the widest points of characters (applied to whole words/lines/paragraphs, distinct from kerning) |
| Spacing | Leading | Vertical negative spacing between consecutive lines of text, measured from baseline to baseline |
| Type concept | Typeface | A set of letter characters designed as a unified family |
| Type concept | Font | A specific style set within a typeface family (including size/style/weight) |
| Type concept | Font Weight | The thickness of strokes (ultra-thin/light/regular/medium/semi-bold/bold/extra-bold) |
| Type concept | Font Style | A specific visual variant within a typeface family |
| Type concept | Font Decoration | Overline/underline/strikethrough |
| Style | Bold | Thicker, darker strokes that attract attention |
| Style | Italic | Characters slanted to the right, used to attract attention or mark proper nouns |
| Style | Small Caps | Uppercase characters designed to match the height of lowercase letters, used for subheadings/emphasis |
| Style | Ligature | Two or more letters joined into a single character |
| Style | Text Shadow | Adds a 3D effect to text |
| Paragraph | Paragraph Alignment | Left/right/centered/justified;Left alignment is usually more readable |
| Paragraph | Hanging Indent | The first line extends further left than the left margin, facilitating list scanning |
| Paragraph | Line Break | The end of one line and the start of the next (soft return) |
| Paragraph | Paragraph Break | The end of one paragraph and the start of the next; the vertical space between paragraphs is larger than the leading |
| Paragraph | Orphan | The final line of a paragraph containing only one word, appearing isolated |
| Unit | Em | A relative unit equal to the current font size (at 12pt, 1em = 12pt), scaling automatically with font size |
| Unit | Point | A font size unit, equal to 1/12 of a pica |
| Unit | Pica | A font size unit, equal to 1/6 of an inch |
| Unit | Point Size | The space occupied by a character (including the character itself and the surrounding space) |
| Punctuation | Em-Dash | "—", as wide as the letter m, used to indicate interruption/a jump in thought |
| Punctuation | En-Dash | "–", as wide as the letter n, used to indicate ranges/connections |
| Format | OpenType (OT) | OpenType: A flexible font format that works across Mac/Windows, the new standard for digital fonts |
| Type category | Serif / Sans-Serif Font | See classification table in Section 4.1 |
| Type category | Monospaced | Every character has equal width (e.g., Courier New), used for programming/tables |
Practical parameter supplement(From the article "Good Visual Design", bilingual Chinese-English; Chinese characters have higher stroke density so line length is shorter and leading is larger):
| Item | English | Chinese | UX Explanation |
|---|---|---|---|
| Optimal Characters per Line | 45–75 characters | 35–45 characters | The most comfortable reading range, avoiding line-skipping/excessive line breaks |
| Acceptable line length | 40–90 characters | 25–50 characters | Reading stress increases noticeably beyond this range |
| Body text Line-height: English 1.3–1.6× font size; Chinese 1.5–1.8× font size | 1.4–1.6 | 1.5–1.75 | Chinese requires larger leading |
| Small text leading: English 1.4–1.6× font size; Chinese 1.6–1.8× font size | 1.3–1.4 | 1.4–1.6 | Insufficient leading for small text causes characters to "blur together" |
| Large headline leading: English 1.1–1.3× font size; Chinese 1.2–1.4× font size | 1.1–1.25 | 1.2–1.35 | Large text should stay compact and steady |
| Standard column width: 60–80px per column for most 12-column systems; common values are 72/80/96px | 72–96px | 72–96px | Used in most 12-column systems; common values are 72/80/96 |
| Recommended Gutter | 16–24px | 20–32px | Chinese text has higher density, so gutters should be slightly larger |
| Content area width | 1100–1200px | 1100–1200px | Optimal reading width |
| Text hierarchy | H1 32–40px / Body 16–18px / Caption 12–14px;Maximum 3 levels | Same | Build hierarchy with font size, not forced color/weight; don’t use 5/6/7 different font sizes |
| Maximum body text width | 600–720px | Same | Coordinate with line length |
V. Using Color
Color can set brand tone, shape image, capture attention, modulate emotion, and improve usability, but effective color pairing requires foundational knowledge.
Color Wheel(Proposed by Newton in 1666, three categories of color groups):
- Primary colors: yellow, red, blue (innermost ring of the color wheel).
- Secondary colors: orange, purple, green (mixed from primaries, middle ring).
- Tertiary colors: yellow-orange, red-orange, red-purple, etc. (mixed from primary and secondary colors, outermost ring).
5 Forms of Color Harmony——Rules for combining a set of colors in a visually pleasing way:
| Harmony method | What it is | Contrast |
|---|---|---|
| Analogous | Colors adjacent to each other on the color wheel | Low contrast |
| Complementary | Colors opposite each other on the color wheel | High contrast |
| Split-Complementary | One color paired with the two colors adjacent to its complement | Softer contrast |
| Triadic | Three colors equally spaced (120° apart) on the color wheel | —— |
| Monochromatic | Different lightness and darkness values of the same hue | —— |
The meaning of colors is not globally universal: Research shows that the emotional impact of color is not universal——Red symbolizes good luck in China, but may mean warning in the United States. When conveying a specific meaning: ① It may not apply globally; ② User testing is required to ensure interpretation matches expectations. Cultural differences and color blindness both alter interpretation.
Creating and applying color schemes:
- Creation: Select one harmony method and iterate (beginners should start with monochromatic);Limit the number of colors——recommend using 3 colors to simplify hierarchy; prioritize following brand color guidelines. Positive example: Nike uses a black/white/gray monochromatic scheme to focus attention on products and images.
- Application——The 60-30-10 rule:60% primary color for main areas, 30% secondary color for supporting areas, 10% accent color for the most important attention-grabbing elements. Maintain consistency (if blue is used for primary buttons, use it consistently throughout; if red indicates warning, do not use it for other meanings elsewhere). Positive example: Apple News uses white + light gray as primary and secondary colors, with pink as accent, following 60-30-10.
- Testing: Gray buttons may be misinterpreted as unavailable; test text/background contrast and colorblind-friendliness (tools such as accessible-colors.com). Counterexample: Although UberEats follows 60-30-10, its green logo is hard to distinguish on an orange background; counterexample: Greenhouse Juice’s light-colored juice labels are unreadable (see contrast principle in Section 1).
Interface with the "aesthetic-usability effect": The fewer colors used, the more premium the design appears and the more content stands out (Section 4 "Strategic Use of Color" also confirms: 1–2 primary colors + very few auxiliary colors + 4–6 levels of gray can cover all UI; primary color = CTA, gray = content hierarchy; do not "paint walls" with primary color for large backgrounds).
VI. Images and Imagery (Picture Superiority Effect · Photos · Imagery Types · Visual List Markers)
6.1 Picture-Superiority Effect
Core principle:People remember images more easily than text. Why(Allan Paivio’s dual-coding theory): Images have two memory stores(the image itself + the words describing it), while text has only one; although the brain can generate images for text, this requires extra cognitive effort.
Why images matter for UX: Concept explanation (visually convey complex concepts), brand presentation (help remember products/brands), user choice (users choose a brand because images are intuitive——one study participant said "simple images make it easier for me to remember you, rather than relying on text").
4 factors that affect the strength of the effect:① Discoverability(users must have enough time to see them); ② Clarity(concrete, intuitive images are more memorable than abstract ones); ③ Familiarity;④ Uniqueness(the more unique, the more memorable).
3 application methods:
- Place visuals in areas where users linger: Put important images on the homepage and the upper portion of pages;Avoid fast carousels——Counterexample: Garmin’s homepage carousel rotates about every 4 seconds per slide, leaving some users no time to process it.
- Choose concrete rather than abstract images: Counterexample: Adobe Podcast AI’s "microphone check" illustration is too abstract and hard to understand and remember; positive example: ChatGPT’s homepage uses two product screenshots that are realistic, intuitive, and aid understanding.
- Use unique images: Uniqueness attracts attention and improves memorability, but images must align with the overall design. Counterexample: Google Cloud service icons have low recognizability because their shapes and color arrangements are too similar; counterexample: Notably.ai and Dovetail.com have extremely similar visual elements, reducing memorability for both.
Should images replace text?——No, text remains indispensable: Text labels provide redundancy for images, enhancing comprehension and memory; text ensures icons are correctly understood and increases click target area.
6.2 Photos as Web Content
Core principle:Users only pay attention to images that carry information and are relevant to tasks, ignoring purely decorative images. Even with fast internet and fast loading, users still prefer websites with directly useful content.
| Image type | User reaction | Example |
|---|---|---|
| Real people photos | Attract attention; associating the company with real people improves online image | Positive: FreshBooks displays photos of all employees; users spend most of their time looking at team photos rather than biographies (even though bios occupy more space)——gaining an overall impression of the team through photos |
| Generic stock photos | Ignored, regarded as "filler" | Counterexample: Even though Yale’s admissions page used photos of "real students", they had no clear connection to the content and failed to attract attention |
| Product detail photos | Critical, directly influence decisions | Positive: Pottery Barn’s bookshelf page provides detailed product close-ups, attracting significant attention; counterexample: Amazon’s TV page shows content unrelated to the product (soccer/boating scenes), and users only read the text descriptions |
| Large zoomed images | Extremely high attention when actively requested | Users often click links to view zoomed images;Zoomed images should be at least 2 times larger than the original; ExtremeTech’s close-up of a panel attracted 12 fixations(displayed at 50% of the original 714×868 pixels) |
Conclusion: Professional photography that improves photo quality can greatly increase commercial value; images designed purely for decoration not only fail to attract attention but also distract.
6.3 Using Imagery in Design
4 common image types:① Photographs(show products/environments/people, adding dimension, texture, realism); ② Illustrations(digitally created, artistic/simplified representations of processes/concepts, often paired with text in infographics); ③ Iconography(simplified recognizable symbols, for navigation/interaction cues); ④ Data Visualizations(transform complex data into easy-to-understand visuals).
7 usage tips:
- Select images with similar characteristics: When using multiple images, ensure consistent exposure/brightness/contrast; for illustrations, maintain similar palettes/detail/style. Positive example: Todoist’s template illustrations all use circular shapes, earth tones, and the same sketch style.
- Match icon stroke weight to text font weight: Unify icon sets in stroke thickness/height/width/corners/fill; icon stroke thickness should match the stroke thickness of the font.
- Balance file size and image quality: Optimize size without sacrificing quality, test across multiple devices.
- Prioritize information-carrying images over decorative images: Product photos/infographics that aid decision-making and learning should take priority; decorative images (generic stock photos) have limited value and may be ignored.
- Balance images and text: Pair text-heavy content with detail-rich images; when emphasizing whitespace, use minimalist images; consider whether the emotion of images aligns with the overall style. Positive example: The shadows/multiple colors/textures of Mint.com’s images give it texture, appearing symmetrical and balanced when paired with the complex content on the left.
- Avoid unnecessary graphic elements in infographics/data visualizations: Highlight data, avoid decoration (grid lines/textured backgrounds/3D effects),improve the data-ink ratio. Counterexample: When the same data is presented with grid lines + outlined bars + textured backgrounds, all decorations weaken the impact of the data.
- Provide Alt Text: Describe image content instead of duplicating headings, improve accessibility, do not do this solely for SEO.
6.4 Visual Indicators for List Items: Color + Icons (Visual Indicators)
Core Insight: When locating items in a list,visual indicators that use both color and icons are approximately 37% faster than plain text; when only one method can be used,icons with clear informational meaning > color alone. Why: Mobile screens have limited space and users have divided attention; these indicators are "useful redundancy" and should not be removed arbitrarily just to save space.
Research Method: 4 mobile pages (e-commerce lists + stock data tables), each with two types of items requiring indicators (e.g., stock "up/down"); 4 indicator designs (text only / color only / icon only / color + icon);96 users, each viewed one design and completed search tasks; metrics = time to first click / time to first correct click / task completion time / success rate.
Results:
- Text only performed worst: completion time was slower than "color + icon" by 37%57%; time to first correct click was slower by 21%56%;lowest success rate at only 76%(compared to "color + icon" at 92%)85%).
- Icons vs. color: In some tests (stock tables), icons alone slightly outperformed color alone — because icons (such as up/down arrows) better match expectations, while color requires users to infer meaning (red = down, green = up), which takes more time.
- Color + icons performed best: achieved the best overall results across time and success rate metrics, increased noticeability, and improved speed and accuracy.
Design Recommendations: ① Prioritize color + icons; ② Prefer icons over color; ③ Avoid text-only indicators; ④ Ensure indicator information is unambiguous (up = green arrow, down = red arrow). Measured 37% faster on mobile; desktop results are expected to be similar or even more pronounced.
Three shared conclusions from the imagery chapters: Information carrying > decoration. Whether it is the picture superiority effect, photos, imagery, or list indicators, users pay attention to visuals that are useful for the current task and carry information, and ignore purely decorative elements. This is fully consistent with the eighth usability heuristic, "Aesthetic and minimalist design" — visual elements must convey information, not merely decorate.
VII. Aesthetic-Usability Effect
Core Insight:Users tend to perceive products with attractive visual appearance as easier to use, even if they are not actually more efficient— "What looks good works better."Why: Positive emotional responses to visual design make users more tolerant of minor usability issues. Apple is a classic example of combining aesthetics and functionality.
Origins (key figures):In 1995, Masaaki Kurosu and Kaori Kashimura of the Hitachi Design Center tested 26 ATM interface designs, and found that users rated aesthetically pleasing designs significantly higher for "ease of use" than their actual functional performance warranted.Don Norman further explored this in his 2004 book *Emotional Design*, demonstrating that user judgments are not based solely on actual functionality.
Limitation — Aesthetics cannot rescue severe flaws: It can mask minor problems, but cannot compensate for major usability defects. Counterexample: the Arcadis website — first-time visitors were impressed by the large colorful background images, but after failing to find information across multiple tasks, they began to feel the large images hindered use.Lesson: Form and function must complement each other; sacrificing functionality will eventually exhaust user patience.
Interference with usability testing (a double-edged sword):
- Problem: The aesthetic-usability effect makes problems harder to detect in research — users encounter difficulties, but their final feedback focuses on the interface's attractiveness, and positive emotions obscure usability issues. Counterexample: the FitBit website — users encountered navigation problems during shopping tasks, but still praised the colors and images highly without mentioning actual difficulties, making it hard for researchers to identify core problems.
- Why positive comments are more common:Comment pressure(users feel they must say something, and visuals are easiest to comment on) + Acquiescence bias(wanting to please the researcher, especially when they believe the researcher participated in the design).
- Coping Strategies:
- Reduce comment pressure: Create a relaxed atmosphere; frequently encourage users (explain that behavior is valuable even without detailed comments); ask open-ended questions without forcing expression.
- Reduce acquiescence bias: Clarify the researcher's distance from the product (state that you are not the designer when possible); if you are the designer, emphasize the importance of negative comments and avoid influencing users with facial expressions or body language.
- Guide feedback beyond the visual level: Ask questions such as "How easy or difficult was it to find information?" "What problems did you encounter while reading?" "If you could change one thing about this app, what would it be?"; review user behavior on specific pages and ask them to describe challenges they faced.
VIII. Two Glossary Indexes
This subset contains two alphabetical glossaries for quick reference; they are not expanded in the main text but retain core definitions.
Visual Design Glossary Key entries:
- Aesthetic-usability effect (see Section VII), Change Blindness (failing to notice scene changes outside the focus of attention), Clutter (too many elements make it hard to focus), Signal-to-Noise Ratio, Density (number of elements per unit area; high = crowded, low = minimalist).
- Full Gestalt set: Closure / Common Region / Common Fate (items moving in sync are perceived as a group) / Connectedness (items connected by lines are perceived as related) / Continuation (the eye automatically follows lines/curves) / Figure-Ground (separating foreground and background, focusing on the foreground) / Proximity / Similarity.
- Color-related: Brightness / Saturation / Monochrome / Color Palette / Contrast / Dark Mode (light text on dark background, also known as negative contrast polarity).
- Layout/Principles: Scale / Visual Balance (symmetrical/asymmetrical/radial) / Visual Weight (perceived importance) / Visual Hierarchy / Grid / Golden Ratio / Whitespace.
- Consistency: Consistency / Internal / External (industry conventions) / Design Principles (value statements guiding tradeoffs) / Design System.
- Styles/Methods: Minimalism / Flat Design / Skeuomorphism (introducing real-world elements to enhance familiarity) / Squint Test / Fitts's Law (the time to move a pointer to a target depends on target size and distance).
- Imagery/Prototyping: Data Visualization / Infographic / Iconography / Raster Image (composed of pixels, distorts when enlarged) / Vector Image (mathematically calculated, scalable) / Responsive Design / Prototype / Wireframe.
Typography Terms Glossary: 30+ entries are fully covered in Section 4.3.
Sourced from NNGroup Topics / Visual Design — Visual Design (visual principles subset, 19 articles). Interfaces with NNGroup Usability Testing and the 10 Usability Heuristics (full list of 10 heuristics · complex application implementation · user pleasure hierarchy · testing methods: 5-user rule/recruitment/remote testing/task scenarios/step-by-step tasks/attitude vs. behavior/4-step analysis/small-sample error/competitive evaluation)'s "Aesthetic and minimalist design" heuristic; for visual style implementation reference, see Apple HIG Interaction Patterns (25 flow patterns · onboarding/input/feedback/media/system integration). Images/original files (including screenshots from Medium/Nike/Uber/Slack/The New York Times/Spotify and others, Garmin carousel video) are retained in sources.
Sources and Related Materials
- NNGroup Usability Testing and the 10 Usability Heuristics (full list of 10 heuristics · complex application implementation · user pleasure hierarchy · testing methods: 5-user rule/recruitment/remote testing/task scenarios/step-by-step tasks/attitude vs. behavior/4-step analysis/small-sample error/competitive evaluation)
- Apple HIG Interaction Patterns (25 flow patterns · onboarding/input/feedback/media/system integration)