Design Fundamentals

The elements and principles of design, with real interfaces as examples. Balance, contrast, emphasis, hierarchy, white space, Gestalt and more.

Prefer to read these in order? Take the fundamentals path

Design fundamentals are the elements you work with and the principles that govern how you arrange them. This series takes them one at a time: the seven elements (point, line, shape, space, form, color and texture), the eleven principles from repetition to unity, and the seven Gestalt principles of perception. Start with the two overview articles, then read the individual principles you need.

45 articles

Eight dots spaced in pairs, with lines joining each dot to its neighbor in the next pair, so the joined dots read as the groups instead of the spaced pairs.

Design Fundamentals

Uniform Connectedness: Why a Line Can Group Things Better Than Space

Uniform connectedness says elements joined by a line or shared area read as one group. See how it beats spacing, where interfaces use it, and the research.

7 min read

The word Typeface on the left, with an arrow to the letters Ag in five weights from light to extra bold, each labelled as a separate font.

Design Fundamentals

Typeface vs Font: What Is the Difference, and Does It Still Matter?

A typeface is the design, like Helvetica. A font is one weight and style of it, like Helvetica Bold. See the difference, its origin, and why it matters.

7 min read

Four small page sketches side by side, each with pale guides and dark content blocks: a manuscript grid with one text block, a column grid with three columns, a modular grid of nine boxes, and a hierarchical grid with areas of different sizes.

Design Fundamentals

Types of Grids in Design: Manuscript, Column, Modular, Hierarchical and Baseline

The five types of grids in design: manuscript, column, modular, hierarchical and baseline. See when to use each, why 12 columns is popular, and how grids adapt.

8 min read

A seesaw on a fulcrum, balanced, with a large pale square near the middle on the left and a small dark square at the far end on the right.

Design Fundamentals

Visual Weight in Design: What Makes One Thing Feel Heavier Than Another

Visual weight is how strongly an element pulls the eye. See what adds weight, how it balances a layout like a seesaw, and which parts of it have been tested.

7 min read

Two examples. On the left, a light blue and a dark blue side by side, close in hue but different in lightness, labelled close hues, rated more harmonious. On the right, an orange circle on a blue panel, labelled opposites, best for making one thing stand out.

Design Fundamentals

Color Harmony in Design: What the Color Wheel Says, and What People Prefer

Color harmony is how well colors look together. See the classic color wheel schemes, what experiments found people prefer, and how to build a UI palette.

8 min read

Three panels. Kerning: the letters T and A, with the A tucked under the arm of the T and the gap between them shaded. Tracking: the word SPACE with even gaps between all its letters. Leading: three lines of text with the distance between two of them marked.

Design Fundamentals

Kerning vs Tracking vs Leading: The Three Kinds of Space in Type

Kerning sets the space between two letters, tracking the space across a word, and leading the space between lines. See each one and what the research says.

8 min read

Design Fundamentals

F-Pattern vs Z-Pattern: How People Scan Pages, and Which to Design For

The F-pattern is how people scan pages of plain text; the Z-pattern is layout advice for sparse pages. See the eye-tracking evidence and which to design for.

8 min read

A small app screen with a pale neutral background and white cards, a deep blue top bar and sidebar, and orange on only the active menu item, a progress bar and the Save button. Beside it a bar split 60, 30 and 10 in the same three colors.

Design Fundamentals

The 60-30-10 Rule in UI Design: How to Split Your Colors

The 60-30-10 rule splits a design into 60% base color, 30% secondary and 10% accent. See how it works on a screen, why the accent matters most, and its limits.

7 min read

Two lines of decision time against the number of options, from 1 to 32. The black line, for options people know, rises slowly and flattens. The coral line, for a list people have to read, rises steeply and straight.

User Experience

Hick's Law in UX: Why More Choices Take Longer

Hick's law says the time to choose grows with the number of options, but only by a little. See where it holds, where it breaks, and how to design menus with it.

7 min read

A pointer on the left and three targets 400 pixels away, 12, 40 and 120 pixels wide, with predicted times of 865, 619 and 417 milliseconds from Fitts's law.

User Experience

Fitts's Law in UX: Why Big, Close Targets Are Faster to Hit

Fitts's law says the time to hit a target depends on its distance and its size. See the formula live, why screen edges are fast, and how to size buttons.

7 min read

Two overlapping circle outlines on the left, labelled what you see: two circles. On the right the same lines pulled apart into the three shapes they enclose, two crescents and a green lens, labelled what is drawn: three shapes.

Design Fundamentals

Law of Prägnanz: Why the Eye Takes the Simplest Reading

The law of Prägnanz says we see the simplest shape that fits what is in front of us. See it in rings, cubes and cards, and how to use it to simplify a design.

6 min read

A golden rectangle divided into a shrinking series of squares, the first shaded green, with a coral spiral of quarter circles running through them. Beside it the ratio 1 to 1.618, and the note that each Fibonacci step gets closer to it.

Design Fundamentals

The Golden Ratio in Design: What It Is, and Where It Actually Helps

The golden ratio is about 1.618 to 1. See how it splits a layout, which famous examples hold up, and when a type scale or grid on 1.618 helps your design.

7 min read

Two rows of four identical dots in the same positions. In the first the dots read as two tight pairs; in the second an outline drawn across the middle gap encloses the two inner dots.

Design Fundamentals

Gestalt Principle: Common Region (Grouping by a shared boundary)

The law of common region: a shared boundary groups whatever it encloses. Why it beats proximity, what counts as a boundary, and what every boundary costs.

7 min read

Four color wheels of twelve hues showing the complementary, analogous, triadic and split complementary harmonies, each with its selected hues joined by a line.

Design Fundamentals

Color Theory in Design

How colors combine: additive RGB and subtractive CMYK, the wheel, the harmonies, tint and tone, simultaneous contrast, palettes and the contrast floor.

16 min read

The same page layout twice: on the left the header, columns and footer are inked, on the right only the gaps between them are inked.

Design Fundamentals

Negative Space vs White Space

White space and negative space name the same empty area. The difference is the job it does: one separates elements, the other forms a shape of its own.

5 min read

Three rows of nine dots: scattered with uneven gaps, emerging with gaps evening out, and a pattern with every gap equal.

Design Fundamentals

Pattern in Design

A pattern is repetition regular enough to predict. What pattern means in composition, how it differs from repetition and rhythm, and where it fails.

6 min read

Three panels showing one identical green circle beside a person, a phone and a single dot, so the same circle reads small, medium and large.

Design Fundamentals

Scale in Design

Scale is the size of an element measured against a reference. What scale means, how it differs from proportion, and how to use it to build hierarchy.

6 min read

Four cards in a row sharing the same layout of a green circle, a dark title bar and two grey lines; the third card has a green rectangle instead of the circle and stands out.

Design Fundamentals

Repetition Principle of Design

Repetition is reusing an element so a design reads as one piece. Learn what to repeat, how it builds consistency and recognition, and when it turns dull.

5 min read

Three rows of green and black bars: equal heights and gaps labelled Regular, growing heights and gaps labelled Progressive, and heights rising and falling in a wave labelled Flowing.

Design Fundamentals

Rhythm Principle of Design

Rhythm is repetition at intervals that sets a pace for the eye. Learn the five types, from regular to progressive, with examples from real interfaces.

6 min read

A page drawn as bars twice: on the left six equal grey bars, on the right one heavy headline bar, a lighter subhead and four thin body lines.

Design Fundamentals

Hierarchy Principle of Design

Hierarchy is the order in which a design is read. Learn how size, weight, color, position and space set that order, with examples from real interfaces.

6 min read

The letters Aa on white at three greys with their measured ratios: 1.9:1 fails, 4.7:1 passes AA, 16.9:1 passes AAA.

Design Fundamentals

Contrast Principle of Design

Contrast is the difference between two elements that makes each one easier to see. Learn the six types, with examples, and how much contrast is enough.

6 min read

Design Fundamentals

White space in Design

White space (negative space) is the empty area between elements. What it does for hierarchy, readability and focus, with Squarespace and Apple examples.

5 min read

Design Fundamentals

Emphasis Principle of Design

Emphasis is how you pull the eye to one part of a composition. Learn the techniques (contrast, isolation, placement, scale) with real UI and poster examples.

5 min read

Design Fundamentals

Movement Principle of Design

Movement guides the viewer's eye along a path through a composition. Learn the techniques, from lines and repetition to actual motion, with examples.

6 min read

Design Fundamentals

Balance Principle of Design [Infographics Included]

Symmetrical and asymmetrical balance explained. How visual weight works and how to check whether a design feels balanced, with an infographic.

6 min read

Design Fundamentals

Variety Principle of Design

Variety breaks monotony and creates visual interest. What it means, how it balances against unity, and how to add it with shape, color, size and texture.

4 min read

Design Fundamentals

Unity Principle of Design [Infographics Included]

Unity ties every element of a composition together. Learn the methods that create it (proximity, repetition, alignment, continuation) with examples and a free infographic.

4 min read

Design Fundamentals

Proportion Principle of Design

What proportion means in design, how size and visual weight relate, and how to use scale to guide attention. Clear examples from apps, posters and architecture.

7 min read

Design Fundamentals

Point in design

The point is the first element of design. What a point is, how points create focus, lines and patterns, and examples from typography, layout and art.

4 min read

Design Fundamentals

Texture In Design: Types & Importance [Infographics Included]

The types of texture in design (tactile and visual, real and implied) with examples from print and digital work, and how texture changes how a design feels.

4 min read

Design Fundamentals

Line in Design: Types & Examples [Infographics Included]

The types of line in design (horizontal, vertical, diagonal, curved, implied) and what each communicates, with examples from art, logos and interfaces.

5 min read

Design Fundamentals

Gestalt Principle: Closure (how our brains fill in the missing visual gaps & how to use Closure in designs)

The law of closure: why the brain completes missing shapes. Examples from famous logos and interfaces, and how to use closure deliberately in your designs.

4 min read

Design Fundamentals

Gestalt Principle: Continuation (Visual Perception of Continuous Flows & Paths)

The law of continuation explains why the eye follows lines, curves and paths. What it is, how it differs from similarity, and how designers use it in layouts.

2 min read

Design Fundamentals

Gestalt Principle: Similarity (Associating relatedness from shape, size, color & orientation)

The law of similarity: elements that share shape, size, color or orientation are seen as related. How it differs from proximity, with examples.

2 min read

Cheat sheet of the 11 Gestalt principles of design: symmetry, proximity, common fate, figure-ground, similarity, continuation, closure, common region, uniform connectedness, focal point and Pragnanz, each with a one line definition and a small diagram

Design Fundamentals

11 Gestalt Principles of Design [Infographics Included]

All 11 Gestalt principles with interface examples and interactive diagrams, from proximity and closure to common region and Pragnanz. Free cheat sheet PDF.

7 min read

Design Fundamentals

Gestalt Principle: Symmetry (How we bring balance to Compositions)

The Gestalt law of symmetry explains why balanced compositions feel stable. What it is, how symmetry and asymmetry create balance, plus web examples.

6 min read

Design Fundamentals

Wabi-sabi: Exploring the Design Principle of Imperfection

Wabi-sabi is the Japanese philosophy of finding beauty in imperfection. What the term means, examples in design and how the lifestyle shapes interiors.

5 min read

Design Fundamentals

Gestalt Principle: Figure-ground Relationship (Differentiating Elements by Perception of Subject & Background)

Figure-ground is how we separate a subject from its background. What it is, ambiguous examples like Rubin's vase, and how designers use it in logos and UI.

4 min read

Design Fundamentals

Gestalt Principle: Proximity (Associating relatedness through placement)

The law of proximity: things placed close together are read as a group. Proximity vs similarity, and how spacing alone can organise a layout. Examples included.

3 min read

Design Fundamentals

Legibility vs Readability: What distinguishes them?

Legibility is whether you can recognise letters. Readability is whether you want to keep reading. What each means, what affects it, and how to improve both.

7 min read

Design Fundamentals

Gestalt Principle: Common Fate (Using Coordinated Motion in Design to Associate Relations)

The law of common fate says elements moving together are perceived as a group. What it is and how motion, animation and interaction design put it to work.

4 min read

Design Fundamentals

Alignment Principle in Design: Importance & Examples [Infographics]

Alignment is the simplest principle of good layout. The types of alignment, why edge alignment beats centering, real interface examples and a free PDF.

8 min read

Cheat sheet of the seven elements of design: point, line, shape, space, form, color and texture, each with a small diagram and a one line definition.

Design Fundamentals

The 7 Elements of Design and Art [Infographics Included]

The 7 elements of design are point, line, shape, form, space, color and texture. Each one explained with real interfaces, plus a free printable infographic PDF.

7 min read

Design Fundamentals

Rule of Thirds: What is it and how to use it?

The rule of thirds divides a composition into a 3 by 3 grid and places key elements on the lines or intersections. Why it works and how to use it.

4 min read

Design Fundamentals

The 11 Principles of Design and Art [Infographics Included]

Repetition, rhythm, movement, balance, proportion, white space, contrast, emphasis, hierarchy, variety and unity, explained with examples and a free PDF.

16 min read