Google UX Certificate / Visual Design · Design Systems · Responsive Design

After wireframes build out the "skeleton", this course "dresses" that skeleton — with color, typography, iconography, and layout — to produce Mockups (static high-fidelity design comps) and high-fidelity prototypes, then uses design systems to ensure consistency, and finally scales the design to responsive websites. It also covers a topic PMs often overlook: design ethics.

Significance for PMs:① A design system is the same thing as the "component library / design specifications" you use in product work; understanding its structure (elements → components → modules → templates) helps you judge whether your team should build one and how to maintain it. ② The 60-30-10 color rule + WCAG contrast ratio of 4.5:1 are hard standards you can apply directly when reviewing UI drafts. ③ The section on attention economy + dark patterns directly maps to the ethical boundary between "retention" and "manipulation" when you work on growth.

1. Foundational Elements of Visual Design

Four foundational elements + supplementary elements:

Element	Purpose	Key Points
Typography	Establishes hierarchy, improves readability, conveys style	Typeface/font size/weight/line height
Color	Conveys information, evokes emotion, directs attention	Use the color wheel to find harmonious combinations; note cultural differences + accessibility
Iconography	Saves space, guides actions	Simple, easily recognizable, matches expectations
Lines	Separate/connect/emphasize	Add a horizontal line under headings to increase attention
Size	Visual weight, interaction effect	Buttons that are too small cause accidental taps (especially on mobile)
Shape	Functional language	Circle with "+" = expand; circle with "X" = close
Image	Conveys emotion, tells a story	Highly relevant to content + add alt text

2. Color

Three core functions + the 60-30-10 rule

Emphasis: Use color to highlight key actions (buttons).60-30-10 rule — 60% primary color (white/light gray, background), 30% secondary color (gray, supporting information), 10% accent color (orange/bright color, action buttons).
Branding: Brand colors are part of recognition (Google's red, yellow, blue, green); keep them consistent across the product and follow brand guidelines.
Accessibility: Contrast directly affects users with low vision.

Color psychology: Red = warning/appetite (McDonald's, Coca-Cola); Blue = calm/trust/professionalism; Green = confirmation/success.Note cultural differences — the same color carries different meanings in different regions.

Color accessibility (WCAG)

W3C's WCAG(Web Content Accessibility Guidelines) is the hard standard:

A contrast ratio of 4.5:1 is the minimum standard for text (luminance contrast ratio). 2:1 is hard to read; 4.5:1 remains readable for light text; 16:1 is prominent; 21:1 is the extreme of white text on black background. Tools: WebAIM Contrast Checker, Color Safe, Figma's Stark plugin.
Color blindness(red-green/blue-yellow/total color blindness):Dual-encode with color + icons/patterns(don't mark errors only with red text; add a red exclamation mark icon; use stripes/dots to distinguish chart segments); avoid placing hard-to-distinguish color pairs side by side (red-green, green-brown, blue-purple, etc.).
Low contrast sensitivity / photosensitivity: Provide light mode + dark mode versions.

3. Typography and Iconography

3 values of typography: ① Typographic Hierarchy (use font size/weight to distinguish content structure and guide attention) ② Legibility (individual letters are clear) + Readability (whole passages are easy to read) — clear sans-serif typefaces are commonly chosen (e.g., Oswald/Roboto) ③ Align with brand guidelines.

Iconography = a system of graphic symbols. Two categories of use:Convey actions(arrow = direction, sun = brightness), Provide supplementary information(battery = power level). Key points:

Universal icons(house = home) work across languages, but be mindful of culture(an American football icon is not universal; use a soccer ball for internationalization).
Add a text label to every icon — screen readers cannot interpret icons on their own; adding the word "Home" aids recognition and supports accessibility.
Icon style and color palette carry brand identity; after onboarding, companies usually have Iconography Guidelines.

4. Layout and Visual Principles

Layout = the positional distribution of elements on a page; its functions: emphasize key information, guide the eye, improve readability and operability.Layouts are reusable(the core logic of homepages/login pages/checkout pages is consistent). Three major components:Grids(invisible skeleton, neat alignment), Containment(group related information into visual blocks), Space (white space)(creates hierarchy, reduces cognitive load, directs attention).

Visual design principles(checklist for reviewing Mockups):

Principle	Meaning
Emphasis	Make the most important element stand out the most (contrasting color/size)
Hierarchy	Use visual weight to express the order of information importance
Scale & Proportion	Use size relationships to organize content and guide the eye
Unity & Variety	Overall harmony (unity) with focused variation (avoid monotony)
Gestalt	Similarity/proximity/common region/closure/continuity/symmetry (see Google UX Certificate / Ideation · Wireframes · Low-Fidelity Prototypes)

UI element details: Hyperlinks (blue with underline matches user expectations; write clear link text like "View reservation" instead of "Click here"), Buttons (shape/color/size should be recognizable at a glance, consistent in style, with surrounding white space to prevent accidental taps), Input fields (provide placeholder hint text; group by content when there are more than 6 fields).

5. Mockups and High-Fidelity Prototypes

Mockup = static high-fidelity design comps that show the final product's visual appearance(colors/images/icons/shadows/typography/real content), but are not interactive. When moving from low-fidelity to high-fidelity: fill in real content (do not use placeholders), allow layout rearrangement (do not rigidly stick to wireframes), and use grids/containers/white space.

Hi-Fi Prototype = Mockup + interactive connections (link pages in Figma just like low-fidelity prototypes, but with production-grade visuals). Instructor Chikezie's reminder: high-fidelity is not just about looking good; it is above all a communication tool — it tells engineering teams exactly what to build, and helps product teams confirm whether this is the desired solution.

6. Design System

A set of reusable elements + design guidelines that enables teams to design and develop consistently and in a standardized way. It integrates brand specifications, components, and color palettes on a single platform.

4 major components + 4 levels of UI patterns

4 components: ① Visual styles (typography/color/iconography) ② Usage guidelines (design principles/editorial rules) ③ UI patterns ④ Development code support (component code snippets).

UI patterns progress by level(important; key to understanding component reuse):

graph LR
  E["元素 Elements<br/>文字/颜色/图标"] --> C["组件 Components<br/>按钮/表单标签"] --> M["模块 Modules<br/>导航栏/页眉"] --> T["模板 Templates<br/>完整页面结构"]

5 major benefits + Sticker Sheet + Figma components

5 benefits: Improves consistency, strengthens branding, is extensible (reuse directly as teams/features grow), saves time and cost, and facilitates design-development collaboration (includes code specifications).

Sticker Sheet (design kit): Gather commonly used elements + components (including different states, e.g., selected/unselected icons) in one place, so they can be copied and pasted like stickers. Used together with the Figma component/instance mechanism — when the main component is edited, all instances update automatically (if a button changes from orange to blue, it changes automatically across the entire product).

Mainstream design systems(available for reference and reuse):

System	Vendor	Characteristics
Material Design	Google	Open source, cross-platform across Android/iOS/Web; grid + typography + components + motion; Material 3 dynamic color theming
Polaris	Shopify	E-commerce/back-office; 4 parts (content/design/components/experience); rich tables/filters/pagination
Human Interface Guidelines	Apple	iOS/macOS; simple and consistent; focuses on content and user control
Fluent	Microsoft	Cross-platform; light, shadow, depth, and motion; complex desktop system hierarchy
USWDS	United States government	Strictly adheres to WCAG, mobile-first; a model for learning accessibility standardization

Instructor Shabi (Google design system designer) emphasized:Accessibility must be considered from the very start of design, not patched in before launch — many teams rush to add it only to meet regulations, which is not truly acting for users.

7. Responsive Web

Responsive design: Pages automatically adjust their layout according to the device screen.Responsive Web App vs dedicated mobile application (native App):

	Native App	Responsive Web
Access	Download from an app store, install locally	Access via browser, no installation needed
Pros	Works offline, can access native features such as camera/location, high interaction freedom	Fast and low-cost to develop, takes up no storage space, one set adapts to all devices
Cons	Expensive to develop, requires multi-platform adaptation, app store review, takes up storage space	Requires internet connection, hard to discover (cannot be listed in app stores), complex compatibility maintenance

Common responsive elements(same content transforms across devices):

Element	Desktop	Mobile
Hamburger menu	Top horizontal navigation bar	Three-line icon; tap to expand collapsed navigation
Cards	4–5 columns	1–2 columns
Carousel	Multiple images / screen-filling	One image at a time, more compact
CTA button	Compact but prominent	Larger, easier to tap with a finger

Decision tips: If navigation needs to be hidden → hamburger menu; multi-topic content → cards; visual focus/image recommendations → carousel; guiding clicks → CTA. Planning a responsive website likewise starts from Sitemap + information architecture(see Google UX Certificate / Ideation · Wireframes · Low-Fidelity Prototypes §5); common website structures include single-column, multi-column, grid, etc.

8. Design Ethics (required reading for PMs)

Attention Economy

Proposed by Nobel laureate Herbert Simon:"A wealth of information creates a poverty of attention". Products compete for limited attention; over-designing to "grab attention" can cause user depression/anxiety/FOMO/compulsive scrolling.Responsible design Positive examples: Google Digital Wellbeing (manages usage time), Apple Driving Focus (blocks notifications while driving) — technology should make life better, not control it.

UX designers' responsibilities: ① Do not deceive users (be honest and transparent) ② Understand company goals but judge whether they benefit users ③ Use your influence to push for good design decisions.Dark Pattern (misleading users by exploiting psychological weaknesses) is a red line.

Ethical design: care for marginalized and vulnerable groups

Mainstream culture trap: Designing only for the majority excludes other groups.
Marginalized groups(people with disabilities, limited network/devices, non-mainstream languages) → mobile-first, usable on low bandwidth.
Underrepresented groups(non-mainstream gender/sexual orientation, ethnic minorities, non-traditional families) → do not default to "family = two parents".
Edge Cases: Usage scenarios the product did not anticipate; proactively anticipate them + provide a path to "get back on track".
Implementation: build inclusive user personas(don't target only "average" users), expand the scope of "stakeholders" (everyone affected), and collaborate more with diverse groups.Universal design(one design usable by everyone) vs pluralistic design(different people use it in different ways on an equal basis).

Key Terms Quick Reference (Glossary)

English	Chinese	One-sentence explanation
60-30-10 Rule	60-30-10 Rule	Proportion of primary color / secondary color / accent color
WCAG / Contrast Ratio	Accessibility guidelines / contrast ratio	Minimum text contrast ratio of 4.5:1
Typographic Hierarchy	Typography hierarchy	Using font size and weight to distinguish content structure
Legibility / Readability	Legibility / readability	Clear individual characters / easy-to-read paragraphs
Mockup	High-fidelity mockup	Static, final-visual-quality, non-interactive
Hi-Fi Prototype	High-fidelity prototype	Mockup + interactive connections
Design System	Design system	Reusable elements + guidelines
Sticker Sheet	Design kit	Sticker sheet of elements/components
Component / Instance	Component / instance	When the main component is modified, instances update automatically
Elements→Components→Modules→Templates	4 levels of UI patterns	Progressive structure of reuse
Responsive Web vs Native App	Responsive web / native app	Browser-adapted / downloaded from an app store
Hamburger Menu / Card / Carousel / CTA	Hamburger menu / card / carousel / call-to-action button	Common responsive elements
Attention Economy / Dark Pattern	Attention economy / dark patterns	Scarce attention / manipulative design (red line)
Edge Case	Edge case	Unanticipated usage scenario