UI Design Principles

Why Google's homepage won

In the late 1990s, Yahoo, AltaVista, and Lycos dominated search. Their homepages were packed — links, ads, news, stock tickers, weather, horoscopes, chat rooms. They looked like the front page of a newspaper having a panic attack.

Then Google arrived with a nearly empty white page, a logo, a search box, and two buttons. That was it.

Users loved it. Not because it was "clean" or "minimalist" as design buzzwords. They loved it because it told them exactly what to do. There was only one action available: type what you are looking for. No decisions to make. No visual noise competing for attention.

Google's homepage was not just good design — it was a masterclass in visual hierarchy, the single most important principle in UI design. Every element on the page served one purpose: directing your eyes and your cursor to the search box.

What you will build in this module

By the end, you will be able to audit any product's color palette against the 60-30-10 rule, run a 5-point accessibility check on any website, and classify Gestalt principles in real interfaces. Usability testing (Module 6) confirmed that your layout works and users can complete tasks. Now it is time to make it look and feel professional.

Visual hierarchy — the foundation of UI design

Visual hierarchy is the arrangement of elements so that users see the most important thing first, the second most important thing second, and so on. It guides the eye through the page in the order you intend.

You control hierarchy with five tools:

Typography — 95% of design is type

Oliver Reichenstein of iA famously said that 95% of the information on the web is written language. If that is true, then 95% of web design is typography.

Type scale — the sizes that work

A type scale is a set of predefined font sizes used throughout your product. Instead of picking random sizes (13px here, 17px there, 22px somewhere else), you use a mathematical scale.

Font pairing rules

• Two fonts maximum. One for headings, one for body. More than two creates visual chaos.
• Contrast pairing. A serif heading (Georgia, Playfair Display) with a sans-serif body (Inter, Open Sans) creates natural hierarchy.
• Safe defaults. If in doubt: Inter for everything. It was designed specifically for screens and works at every size.

There Are No Dumb Questions

"Why 16px for body text? That seems big."

Because users read on screens at arm's length, not book distance. Print designers used 10-12pt for body copy because books are held 12 inches from your face. Screens are 20-30 inches away. Below 16px, most users unconsciously squint or lean forward. Google, Apple, and most major platforms use 16px as the minimum for body text. It is also the default browser font size, which means your design works with user-configured text scaling.

Color theory — communicate, do not decorate

Color in UI design is not about aesthetics — it is about communication. Every color choice should serve a purpose.

The functional color system

The 60-30-10 rule

• 60% dominant color (usually your background — white or light gray)
• 30% secondary color (cards, sections, supporting elements)
• 10% accent color (CTAs, links, icons — your primary brand color)

This ratio ensures visual calm. A page that is 60% bright blue would be overwhelming. A page that is 60% white with 10% blue accents for buttons and links feels clean and intentional.

Spacing — the invisible design element

Whitespace (also called negative space) is not empty space — it is a design element. It separates groups, creates hierarchy, and gives the eye room to rest.

The 8px grid system

Most design systems use an 8px grid: all spacing values are multiples of 8. This creates consistent, harmonious rhythm throughout the interface.

Gestalt principles — how humans see patterns

Gestalt psychology explains how the human brain organizes visual information. These principles are the foundation of layout design.

There Are No Dumb Questions

"Are Gestalt principles a real science thing or a design thing?"

Real science. Gestalt psychology was developed by German psychologists in the 1920s (Wertheimer, Koffka, Kohler) to explain how humans perceive visual stimuli. UI designers adopted these principles because they describe how every human brain processes visual information — not just designers' brains. When you group related form fields together (proximity) or dim the background behind a modal (figure-ground), you are leveraging 100 years of perceptual psychology.

Accessibility — designing for everyone

Accessible design is not charity — it is good design. When you design for users with disabilities, you improve the experience for everyone.

The numbers

WCAG — the accessibility standard

The Web Content Accessibility Guidelines (WCAG) are the global standard. The most important rules for UI designers:

Design systems — scaling design across products

A design system is a collection of reusable components, patterns, and guidelines that ensure visual and functional consistency across an entire product (or portfolio of products).

A design system typically includes:

• Tokens: The atomic values — colors, spacing, typography, border radius, shadows
• Components: Buttons, inputs, cards, modals, tables, navigation — all reusable
• Patterns: How components combine for common tasks (form layout, data table filtering, error handling)
• Guidelines: When to use which component, accessibility rules, tone of voice

Remember Google's nearly empty homepage? In the late 1990s, the conventional wisdom was that a homepage should show users everything available — the more links, the more valuable the page. Google proved the opposite. By giving the search box enormous whitespace, a single primary action, and zero visual distractions, they demonstrated every principle you learned in this module: hierarchy (the search box dominates), typography (minimal, clear), color (white background, two simple buttons), spacing (maximum breathing room), and Gestalt (figure-ground — the search box is the only figure). Twenty-five years later, the homepage still looks almost exactly the same.

You now have the full UX toolkit — from research and wireframing to prototyping, testing, and visual polish. In the final module, you will learn how to package everything you have built into a portfolio that gets you hired.

Key takeaways

• Visual hierarchy guides the eye through the page using size, color, position, spacing, and weight — squint test it
• Typography is 95% of web design — use a type scale, limit to 2 fonts, never go below 16px for body text
• Color is communication — use the 60-30-10 ratio; reserve red for errors, green for success; never rely on color alone
• Spacing on an 8px grid creates consistent rhythm — use proximity to show relationships, whitespace to separate groups
• Gestalt principles (proximity, similarity, closure, continuity, figure-ground, common region) explain how humans perceive visual groupings
• Accessibility is not optional — WCAG 4.5:1 contrast, 44x44px touch targets, keyboard navigation, alt text, no color-only information
• Design systems (Material Design, HIG, Polaris) scale visual consistency across products and teams