A study
Elements of seeing.
A small grammar for making things clear.
One relationship changes at a time.
Kandinsky’s Point and Line to Plane (1926), Itten’s colour and material studies, and Dieter Rams’s ten principles are three lenses. They are not one Bauhaus doctrine. The sentences in this essay are ours.
01 · 01
A point holds attention. A line gives it direction. A plane gives it territory.
Isolation
A small point, left alone, can hold the field more firmly than a larger one. Here the larger point is given company. Its size does not change, and the small point does not grow.
Isolation is a relationship in the picture. It is not a measure of importance outside it.
01 · 02
Centre and edge
A point in the centre belongs to the whole field. Moved toward the edge, the same point — the same size — takes up a relation with the frame.
Position is a spatial relation, not a universal emotion.
01 · 03
Two points
One point is a place. A second point makes an interval, and the eye supplies a connection across it. Nothing is drawn in that interval yet.
01 · 04
Rhythm
Equal intervals turn points into a pace. The rhythm is the spacing, not a new kind of mark.
01 · 05
Direction
The stroke turns from horizontal to diagonal. Only the angle changes. A diagonal is another path through the field — an artistic possibility, not a universal psychological law.
The stroke is returned to horizontal before spacing or weight is allowed to change.
01 · 06
Spacing
Ten equal strokes, then one wider gap. The pause is made of interval. Angle and weight stay put. The line has been reset to horizontal so this change can be seen on its own.
01 · 07
Weight
The stroke thickens from 2 units to 6. Direction and spacing do not take part.
01 · 08
Line into plane
The line widens until it keeps a territory. What was direction becomes a surface. This is the passage from line to plane.
01 · 09
A family, then an exception
Three equal squares state a rule. One of them grows. The exception is legible because the family was established first.
02 · 01
What you leave out gives the rest its shape.
The opening
An opening cut inside a shape still belongs to the shape. A gap in the boundary lets that interior join the field outside. The thing that changes is absence.
02 · 02
Grouping
Three equal marks, spaced alike, read as one row. Bring two of them together by changing only the gaps. Nothing is resized. Nearness makes the group.
02 · 03
Balance
Two equal dark squares, placed symmetrically, agree by matching. A small dark square can counterweight a larger, quieter rectangle. Compare the two arrangements.
An optical judgement to compare. Not a formula that guarantees balance.
03 · 01
Colour is a relationship, not a swatch.
Hue
Different hues can distinguish neighbours. Variety alone does not make a hierarchy. Geometry and area stay fixed while two squares change hue.
Blue #467cc0, red #b75b53, yellow #d1b64a. Blue and red sit close in lightness and chroma. Yellow is lighter, so it still reads as yellow. Illustrative swatches, not measured samples.
Names sit under the colours. Hue is never the only signal.
03 · 02
Light–dark
Hierarchy can come from lightness alone. Three equal squares begin as the same grey. One moves toward near-black. The other two do not change.
Shared grey #868686. The changed square moves toward #242424. Hue is not involved.
03 · 03
Warm–cool
Temperature is relational. Two equal neutrals move apart, one toward orange and one toward blue. Area and geometry stay. Lightness and chroma are kept approximately level.
Start #a29e96. Orange #d38b59. Blue #67a3e0. The pair is matched approximately in lightness and chroma.
Warm does not universally mean nearer. This is relative temperature.
03 · 04
Complementary
Opposing hues differentiate strongly. Two equal blue squares: one stays, the other becomes orange — the opposite of blue on Itten’s painter’s wheel.
Blue #467cc0. Orange #d38b59. Itten’s wheel, not a rule about mixing light on a screen. The change is a crossfade, so the square does not pass through an accidental intermediate hue.
03 · 05
Simultaneous contrast
The surroundings can change what a colour seems to be, without changing the colour. Two identical centres sit on identical neutral fields. The fields then become orange and blue.
Both centres are exactly #808080 in every frame. Same grey places them back on one shared neutral field so the identity can be checked. Whether you see a shift depends on you and on the screen. We do not recolour the centres to manufacture one.
Centre #808080. Neutral field #d4d1c8. Orange field #de844f. Blue field #5aa3ec.
Some people will see little or no difference. Lightness, treated in the previous lesson, is a separate comparison. These swatches are illustrative, not a laboratory match.
03 · 06
Saturation
Intensity is a resource. Two muted blues share a hue, an area and an approximate lightness. One of them becomes more vivid. Chroma is the variable.
Muted #6b7c92. Vivid #337bd0. Hue and area stay. Lightness is held approximately.
03 · 07
Extension
How much of a colour you use matters as much as which colour. Yellow and violet begin equal. Their shared boundary moves until yellow is one quarter and violet three quarters. The hues do not change.
Yellow #e7c952. Violet #755b93. Only the boundary moves.
An area comparison. Not a universal ratio for harmony.
04 · 01
Let the material tell you what it can do.
Paper folding study
A flat sheet, a crease, then a standing ridge. It is the same sheet. The crease is the thing that lets it stand.
Paper folding study: a schematic of behaviour, not evidence of structural strength. Rough against smooth, or rigid against flexible, would need a real sample. They are left out.
05
Clarity is not the end. It must also be useful.
Dieter Rams set out ten principles of good design. Vitsœ publishes them with the headings below. The headings are his. The notes are how those principles constrained this essay — our applications, not his words.
Good design is innovative
The line turns in place, so a relationship becomes visible. Novelty is not the aim.
Good design makes a product useful
Every scene teaches one relationship and keeps a before and an after you can compare.
Good design is aesthetic
Proportion, alignment and a quiet hierarchy make looking pleasurable. They do not compete with the lesson.
Good design makes a product understandable
The variable that changes is named. The squares, the controls and the words stay recognisable.
Good design is unobtrusive
Chrome stays at the edges. Nothing idles, and there is no cursor trick. Motion can be turned off.
Good design is honest
The fold does not pretend to prove strength. Swatches are not sold as measurements. A diagonal is not treated as a universal feeling. In simultaneous contrast the centres stay #808080.
Good design is long-lasting
The hierarchy and the geometry still read when nothing moves. Fashionable effects were declined.
Good design is thorough down to the last detail
The lesson can be read forwards, backwards, from the keyboard, on a small screen, and with motion reduced. The identical grey can be checked.
Good design is environmentally-friendly
One schematic stands in for a heavier simulation: no video, no 3D engine, no work while a scene is offscreen. A smaller file is not, by itself, proof of sustainability.
Good design is as little design as possible
What does not help seeing is left out. The essay ends on a point, a line and a plane, and a way back.
Editorial close
Less is not the absence of decisions. It is the result of better ones.
Our closing line for this essay. It is not a quotation from Dieter Rams.
Opening
A point in a clear field.