A FIELD GUIDE FOR YOUR EYES

Good design.
Learn the basics.

Small principles. Big difference. Learn to see what works — and make it work yourself.

40 visual principles14 hands-on exercisesEN / RU
01 / ALIGNMENTSEE THE DIFFERENCE

Same elements. A little more order.

BUILD YOUR DESIGN INSTINCT

The fundamentals

40 ideas to explore

40 rules found

Open studioIdeas. Art. People.Saturday · 18:0001 Try it

Visual hierarchy

Make importance visible.

One clear emphasis02

Focal point

Give the composition a clear entry point.

Size changes weight03

Visual weight

Notice what feels heavy, not only what measures large.

Weight on both sides04 Try it

Balance

Distribute attention deliberately across the frame.

05

Symmetry & asymmetry

Choose a structure that matches the tone.

Open studio06 Try it

Negative space

Treat empty space as part of the composition.

07

Rhythm

Repeat a pattern, then vary it with purpose.

08 Try it

Rule of thirds

Use thirds as a starting point for off-center placement.

Group AGroup B09 Try it

Proximity

Put related things closer together.

10

Similarity

Give things with the same role a shared appearance.

11

Common region

Use a boundary to show a meaningful group.

12

Connectedness

Connect elements only when there is a real relationship.

13

Continuation

Use a clear path to guide the eye.

14

Figure & ground

Make the subject distinguishable from its background.

15 Try it

Alignment

Give elements a shared edge or axis.

16

Column grid

Use columns to coordinate widths and positions.

17

Margins & gutters

Separate the page edge from the gaps inside it.

18 Try it

Spacing system

Choose gaps from a small reusable scale.

WhenSaturday · 18:00WhereNeighbourhood studio19

Inner & outer spacing

Make the gaps express the nesting.

“A new ideastarts here.20

Optical alignment

Check perceived edges as well as measured edges.

Open studioIdeas. Art. People.Saturday · 18:0021

Choosing a typeface

Choose for the text and its context.

Open studioIdeas. Art. People.An evening of new ideas22

Font pairing

Give each typeface a distinct job.

Open studioIdeas. Art. People.Come join usSaturday · 18:0023

Type scale

Use a few distinct sizes for distinct roles.

Open studioIdeas. Art. People.Saturday · 18:0024

Font weight

Use weight to emphasize selectively.

≈ 60 characters25 Try it

Line length

Keep paragraphs comfortably narrow.

Space helps us read the words.Each line needs room to breathe.Space helps us read the words.Each line needs room to breathe.Space helps us read the words.26 Try it

Line height

Give lines enough separation to read as lines.

AVOptical spacing27 Try it

Letter spacing & kerning

Separate overall spacing from individual letter-pair spacing.

Good designhelps us readand notice what matters.28

Text alignment

Give continuous text a predictable starting edge.

Choose a colour relationship29

Color relationships

Explore how hues relate, then test their roles.

30

Limited palette

Use fewer colors with clearer jobs.

Open studioStartDetails31

Accent color

Spend the strongest color on the strongest priority.

32

Lightness & saturation

Change more than hue when building contrast.

Open studioIdeas. Art. People.Contrast ≥ 4.5:133 Try it

Text contrast

Measure text contrast against its actual background.

✓ Ready… Waiting! Error34 Try it

Meaning beyond color

Do not make color the only carrier of information.

35 Try it

Cropping

Keep the part of the image that tells the story.

36

Aspect ratio

Resize without stretching the subject.

37

Image & icon consistency

Make related visuals feel like a family.

Open studioIdeas. Art. People.38

Text over images

Give overlaid text a reliable reading surface.

39 Try it

Responsive composition

Recompose for the space instead of shrinking everything.

12340

Reading order

Keep the meaningful sequence intact across presentations.

SEE IT. TRY IT. USE IT.

Your next idea deserves
a little good design.

Start with proximity ↗