Index / Design / Reference

Reference

What exists, named and shown. 13 sections, 319 pictures. Pick a section; click a picture to see it full size.

10

Images

30 finished renders of 1 subject, each in a different technique.

Low-poly facet — Low-poly facet

Generative field — Generative field

Two-ink overprint — Two-ink overprint

Ghosted cutaway — Ghosted cutaway

Halftone montage — Halftone montage

Airbrushed gradient — Airbrushed gradient

Ink wash — Ink wash

Modelled and lit — Modelled and lit

Single-source chiaroscuro — Single-source chiaroscuro

Channel offset — Channel offset

Studio render — Studio render

Stipple — Stipple

Atmospheric depth — Atmospheric depth

Layered glaze — Layered glaze

Bas-relief — Bas-relief

Engraved hatch — Engraved hatch

Reduction linocut — Reduction linocut

Photogram — Photogram

Ligne claire — Ligne claire

The typographic image — The typographic image

Reversed-out blueprint — Reversed-out blueprint

Contoured elevation — Contoured elevation

Axonometric solid — Axonometric solid

Cel shade, inked contour — Cel shade, inked contour

Off-register flat, drawn line — Off-register flat, drawn line

Dithered pixel grid — Dithered pixel grid

Cut silhouette — Cut silhouette

Opaque flat, no line — Opaque flat, no line

Point cloud — Point cloud

Traced and boiling — Traced and boiling

11

Image styles

40 specimens: how it was made, what the surface does, and what it is a picture of.

Rendering styles

Cel shade, inked contour — Cel shade, inked contourContour

Two-ink overprint — Two-ink overprintPrint process

Engraved hatch — Engraved hatchLine density

Ghosted cutaway — Ghosted cutawayExplanation

Axonometric solid — Axonometric solidProjection

Off-register flat, drawn line — Off-register flat, drawn lineMass and line

Halftone montage — Halftone montageCut and paste

Airbrushed gradient — Airbrushed gradientRisk · light

Dithered pixel grid — Dithered pixel gridRisk · resolution

Cut silhouette — Cut silhouetteOne value

More rendering styles

Reduction linocut — Reduction linocutTechnique

Ligne claire — Ligne claireStyle

Ink wash — Ink washTechnique

Stipple — StippleTechnique

Reversed-out blueprint — Reversed-out blueprintStyle

Low-poly facet — Low-poly facetTechnique

Modelled and lit — Modelled and litTechnique

Traced and boiling — Traced and boilingTechnique

Opaque flat, no line — Opaque flat, no lineTechnique

The typographic image — The typographic imageStyle

Surface and depth

Single-source chiaroscuro — Single-source chiaroscuroLight

Atmospheric depth — Atmospheric depthDistance

Layered glaze — Layered glazeAccumulation

Point cloud — Point cloudMeasured surface

Contoured elevation — Contoured elevationDiagram as picture

Bas-relief — Bas-reliefShallow depth

Photogram — PhotogramContact · no drawing

Channel offset — Channel offsetStereo depth

Generative field — Generative fieldRisk · the rule draws it

Studio render — Studio renderRisk · the excluded default

Subject and metaphor

The object — The objectLiteral

The instrument — The instrumentDisplacement

The diagram — The diagramMechanism

The data — The dataEvidence

Pure abstraction — Pure abstractionNon-objective

The trace — The traceRecord

The map — The mapTerritory

The container — The containerAllocation

The mechanism — The mechanismWorkings

Human absence — Human absenceImplication · risk

12

Art language

The shape vocabulary underneath the pictures: what a form is allowed to be, and 12 ways of drawing 1 arc.

Shape language

Hard geometric — Hard geometricControl

Rounded terminal — Rounded terminalTerminal

Chamfered — ChamferedCorner

Tapered — TaperedModulation

Stepped — SteppedQuantisation

Organic — OrganicCurvature · risk

Faceted — FacetedApproximation

Hairline — HairlineWeight

Blunt — BluntWeight

Torn — TornIrregularity · risk

Arcs twelve ways

The control — The control

Centred origin — Centred origin

Origin off-frame — Origin off-frame

Geometric step — Geometric step

Tight count — Tight count

Two rings only — Two rings only

Weight progression — Weight progression

Weight inverted — Weight inverted

Alternating colour — Alternating colour

Filled inner — Filled inner

Band across the origin — Band across the origin

Two bands — Two bands

13

Copy styles

The structures writing can take, the tones it can carry, and the ways a thing can be named.

Page structures

Sidenote rail — Sidenote railGloss

Outline numbering — Outline numberingAddress

Question and answer — Question and answerCatechism

Stepped procedure — Stepped procedureSequence

Table first — Table firstComparison

Definition list — Definition listTerms

Summary first — Summary firstDescending detail

The glossed page — The glossed pageCommentary

Annotated artifact — Annotated artifactObject as index

Progressive disclosure — Progressive disclosureRisk · screen only

Tone of voice

Plain — PlainDirect

Technical — TechnicalPrecise

Institutional — InstitutionalFormal

Conversational — ConversationalSecond person

Telegraphic — TelegraphicTerse

Editorial — EditorialEssayistic

Instructional — InstructionalProcedural

Legal-adjacent — Legal-adjacentDisclosed

Understated — UnderstatedDry

Warm — WarmReassuring · risk

Naming

Descriptive — DescriptiveSays what it is

Functional compound — Functional compoundTwo words joined

Latinate — LatinateBorrowed from Latin

Borrowed object — Borrowed objectA real thing

Verb — VerbAn action

Initialism — InitialismReduced to letters

Numeric — NumericA number as the name

Place — PlaceA location

Coined — CoinedInvented word

Metaphor — MetaphorA figure of speech · risk

14

Information architecture

How a product organises itself before a single screen is designed. 25 structures and 1 worked example.

Structures

Flat — FlatNo hierarchy

Hub and spoke — Hub and spokeCentre

Hierarchy — HierarchyTree

Faceted — FacetedFilters

Timeline — TimelineChronology

Dashboard first — Dashboard firstOverview

Search first — Search firstQuery

Wizard — WizardLinear

Tabs — TabsParallel

Single scroll — Single scrollOne page · risk

More structures

Matrix — MatrixTwo axes

Portal — PortalGateways

Feed and detail — Feed and detailStream

Progressive hierarchy — Progressive hierarchyEarned depth

Cross-linked — Cross-linkedWiki

Workspace — WorkspacePersistent state

Inbox — InboxTriage

Calendar first — Calendar firstDated

Map first — Map firstSpatial

Command driven — Command drivenQuery · risk

The ledger architecture

The map — The map

The page inventory — The page inventory

The taxonomy — The taxonomy

The rules — The rules

What is deliberately absent — What is deliberately absent

15

Depth and crop

How a picture claims space, and what survives the frame.

Depth model

Flat — FlatControl

Layered — LayeredOverlap

Cast shadow — Cast shadowLight

Offset plates — Offset platesProcess

Isometric — IsometricProjection

One-point perspective — One-point perspectiveStation point

Atmospheric — AtmosphericContrast

Cut paper — Cut paperMaterial

Bas-relief — Bas-reliefSurface

Volumetric — VolumetricModelling · risk

Scale and crop

Establishing — EstablishingWhole

Full subject — Full subjectFill

Three-quarter — Three-quarterBleed one edge

Half — HalfCut

Detail — DetailOne element

Macro — MacroTexture

Fragment — FragmentCorner

Small in a field — Small in a fieldNegative space

Off-centre tight — Off-centre tightTwo edges

Extreme wide — Extreme wideNearly lost · risk

16

Layout

20 architectures. Layout is a compatibility question, not a style one: several constructions come apart in a narrow column.

Core layouts

Long copy — Long copy

Poster — Poster

Split — Split

Grid of many — Grid of many

Full bleed with caption — Full bleed with caption

Rule-driven — Rule-driven

Sequence — Sequence

Testimonial — Testimonial

Annotated — Annotated

Two column with drop cap — Two column with drop cap

More architectures

Corner bite — Corner biteFull bleed family

Vertical split — Vertical splitSplit family

Off-centre column — Off-centre columnFull bleed family

Margin caption — Margin captionSplit family

Bleed both ends — Bleed both endsFull bleed family

Skyline — SkylineLong copy family

The stack — The stackBreaks: two images

Quarter panel — Quarter panelBreaks: type in an L

Overhang — OverhangBreaks: the edge

Ghost — GhostBreaks: no card

17

Interface, motion and easing

How a thing behaves when touched, how it moves, and the curves that govern the moving.

Interface behaviour

Instant — InstantNo feedback

Optimistic — OptimisticAssumed

Skeleton — SkeletonPlaceholder

Progressive — ProgressiveStaged data

Staged reveal — Staged revealSequence

Inline validation — Inline validationCorrection

Undo first — Undo firstReversible

Confirm first — Confirm firstGate

Ambient — AmbientPassive

No feedback at all — No feedback at allRefusal · risk

Easing

None — NoneCut

Linear — LinearConstant

Ease out — Ease outDeceleration

Ease in — Ease inAcceleration

Ease in-out — Ease in-outSymmetry

Anticipation — AnticipationWind-up

Overshoot — OvershootElastic

Spring — SpringPhysical

Stepped — SteppedQuantised

Hold and snap — Hold and snapDuration · risk

Beat grid

Beat grid — Beat gridframe — it moves

Beat grid — Beat gridframe — it moves

Beat grid — Beat gridframe — it moves

Night run

Night run at 129 — Night run at 129frame — it moves

Night run at 129 — Night run at 129frame — it moves

Night run at 129 — Night run at 129frame — it moves

18

Type

10 pairings and 10 wordmark candidates.

Font pairings

Vollkorn over Gabarito — Vollkorn over GabaritoYour current control

Newsreader over Familjen Grotesk — Newsreader over Familjen GroteskThe most complete

Alegreya over Fira Sans — Alegreya over Fira SansThe reading pair

Besley over Onest — Besley over OnestClarendon and neutral

Prata over Sofia Sans Extra Condensed — Prata over Sofia Sans Extra CondensedDisplay stack

Inknut Antiqua over Commissioner — Inknut Antiqua over CommissionerHeavy and tunable

Sorts Mill Goudy over Fira Sans — Sorts Mill Goudy over Fira SansOld and useful

Andada Pro over Epilogue — Andada Pro over EpilogueThe workhorse

Grenze Gotisch over Onest — Grenze Gotisch over OnestCostume and clerk

Big Shoulders Display over Golos Text — Big Shoulders Display over Golos TextSignage and text

Wordmarks

Marcellus — Marcelluswordmark test

Prata — Pratawordmark test

Young Serif — Young Serifwordmark test

Ibarra Real Nova — Ibarra Real Novawordmark test

Sofia Sans Extra Condensed — Sofia Sans Extra Condensedwordmark test

Big Shoulders Display — Big Shoulders Displaywordmark test

Geologica — Geologicawordmark test

Epilogue — Epiloguewordmark test

Grenze Gotisch — Grenze Gotischwordmark test

Texturina — Texturinawordmark test

19

Colour

10 colour logics: what decides a palette before any hex is chosen.

Colour logic

Ground and one accent — Ground and one accentHouse default

Monochrome ramp — Monochrome rampOne hue

Analogous — AnalogousNeighbours

Complementary — ComplementaryOpposites

Split-complement — Split-complementSoftened opposite

Triad — TriadThree equal

Warm and cool split — Warm and cool splitTemperature

Two-ink overprint — Two-ink overprintThird colour

Neutral plus one saturated — Neutral plus one saturatedReserve

High key — High keyLow contrast · risk

20

Data

Data as image, grid tables, forms with a job, and line forms.

Data as image

Column field — Column fieldReadable

Hero number — Hero numberReadable

Ranked bars — Ranked barsReadable

Sequential band — Sequential bandReadable

Small multiples — Small multiplesReadable

Table as image — Table as imageReadable

Nested proportion — Nested proportionForm

Woven months — Woven monthsForm

Radial year — Radial yearForm

Dot density — Dot densityForm

Grid tables

Point-and-figure — Point-and-figure

Reorderable matrix — Reorderable matrix

Karnaugh map — Karnaugh map

Marimekko — Marimekko

Chernoff faces — Chernoff faces

Sparkline table — Sparkline table

T-account — T-account

Calendar heatmap — Calendar heatmap

Waffle grid — Waffle grid

Correlation matrix — Correlation matrix

Bump table — Bump table

Truth table — Truth table

Forms with a job

Marimekko — MarimekkoCool

Sparkline table — Sparkline tableCool

Reorderable matrix — Reorderable matrixSeemed busy

Truth table — Truth tableOkay

Bump table — Bump tableDidn't know what to do with it

Waffle grid — Waffle grid

Line forms

Step chart · Running balance — Step chart · Running balance

Slopegraph · Two dates, two numbers — Slopegraph · Two dates, two numbers

Bandline · Sparkline with the normal range behind it — Bandline · Sparkline with the normal range behind it

Dumbbell · Before and after, per category — Dumbbell · Before and after, per category

Bullet · Actual against target, in one bar — Bullet · Actual against target, in one bar

Win/loss · Twelve months, up or down — Win/loss · Twelve months, up or down

Horizon · Twelve categories in the space of four — Horizon · Twelve categories in the space of four

Burn-down · Spend against the month — Burn-down · Spend against the month

21

Icon, photography and print

3 domains that decide how the work meets the physical world, or stands in for it.

Iconography

Solid glyph — Solid glyphMass

Hairline outline — Hairline outlineWeight

Constant stroke — Constant strokeLine

Two weights — Two weightsHierarchy

Rounded stroke — Rounded strokeTerminal

Constructed on a grid — Constructed on a gridMethod

Isometric — IsometricProjection

Duotone — DuotoneTwo colours

Signage weight — Signage weightDistance

Hand-drawn — Hand-drawnIrregularity · risk

Photography direction

Product on seamless — Product on seamlessShot

Still life with props — Still life with propsStyling

Documentary — DocumentaryReportage

Portrait, direct — Portrait, directCasting

Portrait, candid — Portrait, candidCasting

Environment — EnvironmentShot

Macro detail — Macro detailShot

Overhead — OverheadShot

Motion — MotionShot

Staged conceptual — Staged conceptualDirection · risk

Print finish

Uncoated — UncoatedStock

Coated gloss — Coated glossStock

Foil block — Foil blockInk

Blind emboss — Blind embossFinish

Deboss — DebossFinish

Spot varnish — Spot varnishFinish

Letterpress bite — Letterpress biteInk

Edge painting — Edge paintingBinding

Die cut — Die cutFinish

Newsprint — NewsprintStock · risk

22

Sonic

10 sonic identities. The one domain you can't judge from a picture; these are its notation.

Sonic identity

Single tone — Single tonePitch

Two-note fall — Two-note fallInterval

Two-note rise — Two-note riseInterval

Struck object — Struck objectTexture

Low pulse — Low pulseTempo

Noise sweep — Noise sweepTransition

Speech fragment — Speech fragmentVoice

Silence, framed — Silence, framedAbsence

Full phrase — Full phraseTrack

Interface tick — Interface tickFeedback · risk