Design serves comprehension

Visual design is not decoration. Its job is to help users understand what a screen is, what matters on it, and what to do next.

Once wireframes settle a screen's structure, visual design brings in size, weight, color, and space. Treating this stage as "making it pretty" is a trap — a gorgeous screen that confuses people has failed at its one job.

Every visual choice you make should answer a user's question faster: What is this? What's important? What can I do here? If a gradient, shadow, or illustration doesn't help answer one of those questions, it's a candidate for removal.

    keywords
  • #VisualDesign
  • #Comprehension
  • #Clarity

The working principles

The five principles below overlap and reinforce each other — and you will use them on every single screen.

Hierarchy

Visual hierarchy determines what the eye reads first, second, and third. You control it with three main levers: size (bigger reads first), weight (bolder reads first), and position (top and left read first in left-to-right languages).

Think of a checkout screen. The order total should hit the eye before the promo code field, and the "Pay now" button should outrank "Return to cart." If everything on a screen shouts, nothing gets heard — hierarchy means deliberately making some things quieter so the important things stand out.

Contrast

Contrast is difference, and difference creates meaning. When two elements look different — in size, weight, color, or shape — users assume they behave differently. A filled button next to an outlined one signals a primary action next to a secondary one.

Contrast also carries a legibility duty. Text needs enough difference from its background to be readable by everyone, including people with low vision. Light gray text on a white background isn't minimalist — it's unreadable. Accessibility guidelines define minimum contrast ratios; meeting them is the floor, not the ceiling.

Spacing and white space

Space is not emptiness waiting to be filled. It groups, separates, and gives content room to breathe. A product card works because the image, title, and price sit tightly together — and the next card sits noticeably further away.

Beginners often fear white space and cram screens full, producing a wall of content where nothing is findable. Generous spacing doesn't waste room — it buys comprehension.

Alignment and grids

Alignment is invisible order. When elements share edges — left edges lined up, baselines matched — the screen feels calm and intentional even if users never consciously notice why. Misalign elements by a few pixels and users feel something is off without being able to name it.

A grid makes alignment systematic instead of accidental: a set of invisible columns and gutters your content snaps to. A consistent left margin and a fixed spacing unit — multiples of 8 pixels, say — already remove most alignment errors.

Consistency

The same thing should look the same everywhere. If your primary button is a filled rectangle on one screen, it shouldn't become a rounded outline on the next. Consistency lets users learn your interface once and reuse that knowledge on every screen.

Consistency also applies to meaning: if red signals an error in one place, don't use it for a sale badge elsewhere. Every inconsistency forces users to relearn your interface, and relearning is friction.

    keywords
  • #Hierarchy
  • #Contrast
  • #WhiteSpace
  • #Alignment
  • #Consistency

Gestalt basics

Gestalt principles describe how human brains automatically group visual elements into wholes, before we consciously read anything.

You don't need the full psychology course — three principles cover most interface work:

Proximity. Things that are close together are perceived as belonging together. A label placed near its input field reads as "this describes this field." Put it equidistant between two fields and users can't tell which one it belongs to.

Similarity. Things that look alike are perceived as the same kind of thing. If all your links are blue and underlined, users assume anything blue and underlined is a link — so don't style a heading that way.

Closure. Brains complete incomplete shapes. A carousel that shows a sliver of the next card tells users "there's more to swipe" without a word of instruction.

    keywords
  • #Gestalt
  • #Proximity
  • #Similarity
  • #Closure

Color with restraint

Color is the most tempting tool to overuse. A useful starting heuristic is 60-30-10: roughly 60 percent of the screen in a dominant neutral (usually your background), 30 percent in a secondary tone, and 10 percent in an accent color. It's a guideline, not a law, but it keeps beginners from painting every element a different hue.

Give your accent color one job — usually marking the primary action — and don't let it moonlight as decoration. When the accent appears only on the button users should press, it becomes a signal. When it also colors icons, borders, and headings, it becomes noise.

One more rule: never rely on color alone to convey meaning — pair it with an icon or label so colorblind users aren't excluded.

    keywords
  • #Color
  • #SixtyThirtyTen
  • #AccentColor

Typography basics

Most of an interface is text, so typography carries most of your visual design. Three fundamentals cover it:

Use a type scale. Instead of inventing a new font size for every element, define a small set of steps — one size for body text, a larger one for section headings, a still larger one for page titles. A scale makes hierarchy automatic and consistency effortless.

Two type families, maximum. One family is usually enough; a second can distinguish headings from body text. Beyond two, screens start to feel like ransom notes. Varying weight and size within one family gives you plenty of variety.

Watch your line length. Lines that run too wide are exhausting to read, because the eye loses its place traveling back to the next line. Somewhere between 45 and 75 characters per line is comfortable, which means constraining the text column on wide screens.

    keywords
  • #Typography
  • #TypeScale
  • #LineLength

The squint test and other self-checks

You don't need a critique panel to catch most visual problems — a few cheap self-checks go a long way:

The squint test. Squint at your screen until the details blur. What still stands out? That's your real hierarchy, whether you intended it or not. If the cookie banner outshines the primary button, you have work to do.

The five-second look. Show the screen to someone for five seconds, then ask what it was about and what they would tap. If they can't answer, the design isn't communicating.

The grayscale check. View the screen without color. Hierarchy and grouping should survive; if they collapse, you were leaning on color to do structure's job.

Run these checks before showing work to anyone — they catch problems that are hardest to see after hours of staring at a design.

    keywords
  • #SquintTest
  • #SelfReview
  • #DesignCritique

Common beginner mistakes

Nearly every new designer makes the same handful of mistakes:

Everything is important. Five bold headlines, three accent colors, four button styles on one screen. Choose one hero per screen and demote everything else.

Fear of white space. Filling every gap because empty space "looks unfinished." Space is structure — let it work.

Low-contrast text. Faint gray body copy that fails basic legibility. If you have to lean in to read it, so does everyone else.

Decorating instead of designing. Adding shadows, gradients, and illustrations to a screen whose structure is still unclear. Polish amplifies whatever is underneath — including confusion.

Inconsistent components. Slightly different buttons, cards, and spacing on every screen because each was designed in isolation. Define your patterns once and reuse them.

Master hierarchy, contrast, spacing, alignment, and consistency first. Style is what you add after a screen already explains itself.

    keywords
  • #BeginnerMistakes
  • #DesignFundamentals
  • #LessIsMore