Faragiri
English

Choose a language 2

Learn Design

An eye at arm's length, a stranger trying to finish a task, and a tolerance that fits or does not. Three judges, and they cut this pillar into seven.

6Sections
10Min read
1Depth

The division

One screen, five of the seven topics, and two that are not on it

The booking screen of a bike workshop, and every part of it was decided in a different topic of this pillar. The person using it sees one thing.

rueda.example/book
  1. 01Rueda
  2. 02Repairs, servicing, wheel builds
  3. 03A bicycle drawn with one wheel off
  4. 04Which bike, when, and your name
  5. 05Payment was asked for here, and was moved to the shop
  1. 01The wordmarkGraphic design, and it has to hold on the workshop door as well as here
  2. 02The sizes and the gapsFoundations. Every measurement on the screen came out of one number
  3. 03The pictureIllustration, and it is here because no photograph of this workshop existed
  4. 04The fields and the buttonInterface design. The component a change enters through
  5. 05The order of the questionsUX. Which question comes first, and which one is not asked at all

CAD and Tools are not on it. Nothing on a screen was ever machined, and the program this was drawn in leaves no mark a reader can see, which is the argument for Tools being one topic rather than the top of the map.

A logo is finished when it still reads at 12 mm, embroidered on the front of a cap. A booking screen is finished when a stranger books a slot without asking anyone what a word on it means. A bracket is finished when it comes off the machine and its holes line up with the part it was drawn against. Three finishes, three judges, and not one of them is taste.

That is the line this pillar is cut along. Seven topics, and what separates them is who gets to say the work is done, which is also why the software sits inside one topic here rather than at the top of the map.

Seven topics, and only one of them is a program

Four of the seven make something you can hold or open: marks and printed things, images drawn by hand, the surface of a screen, and drawings that get manufactured. A fifth makes nothing at all and decides what should exist before any of the other four starts, which is the whole of UX. A sixth is what all five share, and it is the only one whose material is a rule rather than an object: the principles that hold whatever you are designing. The seventh is the software, and the parts of it actually used, and it sits at this level because that is how the question gets typed, not because a program is a kind of design.

The usual division is the career one. Graphic design on one side, UX and UI on the other, illustration off the edge as a hobby that sometimes pays, and technical drawing not on the map at all. That divides by job title, which holds until somebody has to do two of them in a week, and most weeks are that. Leaving CAD out is the costly part: a person drawing a shopfront, a gearbox housing or a stair detail is making the same kind of decision as the person laying out a poster, in front of a judge who measures. Of the eight pillars under knowledge has a shape, this is the one whose divisions are arguments about who checks the work.

Placing yourself in it takes one question. After you hand the work over, who finds the mistake? If it is you, looking at it again in the morning, you are in illustration or graphic design and the difficulty is knowing when to stop. If it is a stranger who cannot finish a task, you are in UX and interface design and the difficulty is that nobody will write to tell you. If it is a tolerance, you are in CAD, where being wrong is at least measurable. That question decides the method, because it decides how early you have to be wrong in front of somebody.

Spacing before colour, and the program last

The order almost everybody takes is the program first, because a three hour tutorial exists for the program and none exists for judgement. At the end of it you can operate the software and have nothing to put in it. The tell is a portfolio of screens that are all good looking, all for a product nobody asked for, and all impossible to change.

Inside the foundations there is a second wrong order and it is quieter. Colour gets learned first, because colour is the part that looks like design, and spacing gets left until nobody notices it was skipped. Take them the other way round. A page set in one grey with the gaps right beats a palette on a page with the gaps wrong, and a client who says a layout looks cheap is almost always looking at spacing. Spacing before colour is the order, and the palette gets easier afterwards because there is less left for it to rescue.

Then the world the work is actually for, because a poster and a booking flow stop resembling each other within a week. Then the tool, learned in the shape of the work instead of the shape of its menus. Nobody needs all of Figma; the part of it used daily is a short list, and somebody who knows it can hand you that list in an afternoon.

Before reading

What the eye settles on before anybody has read a word

The pull is size first, then contrast, then the space around a thing. Position is fourth, and colour is last.

First look
  • Size difference39 against 16 on the same card, and the eye never considers the alternative
  • ContrastBlack on white lands before grey on white, whatever the grey is doing
  • IsolationThe space around a thing, which is why a gap is a decision and not a leftover
  • PositionTop and leading edge, and only once the three above it are level
  • ColourMoves the eye least, and gets learned first

The order is argued here rather than measured, and it holds for a page of ordinary text. One loud photograph rearranges all five.

Everybody learns the canvas and stops before the system

This is where people in this pillar stop making progress without noticing they have stopped. In Figma the two names are auto layout and components, and somebody who skips them can build any single screen and cannot change one.

Nadia is four weeks into the booking flow for Rueda, a bike workshop in Valencia, and she has 23 screens. The Dutch version arrives, every field label wraps onto a second line, and the gap between a label and its field has to go from 8 to 12. Built on the canvas that is 23 files opened, about sixty fields dragged by hand, and two of them left at 8 because it was late. Built as a component it is one number, typed once, and 23 screens redraw. Same change, same designer, and the difference is not the speed of her hands.

What people conclude at that point is that they are slow. They are not slow. They built the version that cannot be changed, and then a change arrived, which is the one thing changes reliably do.

It is not a Figma problem. The same stall in InDesign is paragraph styles: setting type by selecting it and changing it works until page 60 of a catalogue, when the client moves the body down one step and there is nowhere to move it from. Older software, identical shape.

The stall

A change entered at the bottom reaches every screen, or it gets made 23 times by hand

Nothing here is a step and nothing is numbered. Each slab is held up by the one under it, and the slab a change enters at is what the change costs.

  1. 23 screensWhat the client looks at, and the only layer most people ever build23 edits
  2. The booking formAssembled from the component rather than drawn beside it
  3. The field and its labelThe component, and the slab a canvas file never has
  4. gap 8 and padding 16Two numbers with names, kept in one placeone edit

It says nothing about how long the bottom slab takes to build, which is the fair objection to it: the first screen is slower this way and the last of the 23 is not.

What to open in 2026

Figma has been the default for interface design since roughly 2019, when it took the seat from Sketch by running in a browser and letting more than one person into the same file. The free tier is real and it is enough to learn all of this on. Auto layout is not an advanced feature in it: it is the reason the program differs from the one it replaced.

Print did not move. InDesign still sets long documents and Illustrator still draws vectors, and InDesign took that seat from QuarkXPress in the middle of the 2000s with nothing taking it since. There is no free path there, only a trial. Affinity Designer and Publisher are what people buy instead when a subscription is impossible, and print shops accept the files, which is the only test that matters. Serif, who made them, was bought by Canva in 2024 and the terms have moved since, so check the price on the day rather than a tutorial's screenshot. Penpot is the other honest answer: open source, self-hostable, and the one to reach for when the files are not allowed to live on somebody else's server.

AutoCAD has been the drafting standard since 1982, when it replaced the drawing board, and the file format is why it is still there: everyone you send a drawing to can open a DWG. It is a subscription, free for students, and FreeCAD is the open source route for everybody else.

Generative tools produce many options quickly, which is a real saving on the first afternoon of a project. They do not hold a system and do not remember a decision: asked for a logo forty times they hand back forty logos rather than one logo forty times. Use them where variation is the product, which is making images, video, audio and text with a model, and not where consistency is.

The signal is that you can say why every size is the size it is

Open a file you made a month ago and count the distinct type sizes in it. A beginner's file has eleven or twelve, each chosen by dragging a handle until it looked right. A file made by somebody who has learned the foundations has five or six, related by a number that can be said out loud.

A worked one. An A5 card for a repair cafe in Porto, set from a 16 pt body: multiply by 1.25 and round at each step, and above it come 20, 25, 31 and 39; divide once and 13 sits below it for the address line. So the card is set in a type scale of 16, 20, 25, 31 and 39, with 13 for the small print and 31 left unused, because a scale is a set to choose from rather than a set to spend. Two sizes off one scale look chosen, and two sizes picked by eye look like two accidents.

Gaps work the same way. Take one unit and multiply it: a 4 gives gap 8 and padding 16, and every measurement on Nadia's booking screen is then one of 4, 8, 16, 24 or 32. The numbers themselves are not sacred. What matters is that a screen built from five gap values looks composed and one built from nineteen looks unwell, and nobody, including you, can say which of the nineteen was wrong.

Two more need no opinion at all. Body text runs 60 to 75 characters a line, counted rather than felt, and a 110 character line is the commonest reason a page nobody complained about goes unread. And contrast is arithmetic: grey #767676 on white passes 4.5 to 1, and #999999 does not, which is the difference between text a reader gets through and text that vanishes on a phone in daylight.

So the signal at three months is not that the work looks better. It is that somebody else can open your file and change the accent colour in under a minute, and that you can say why each size is the size it is without the answer being that it looked right.

The scale

Six sizes out of one number, and the steps grow with them

The step from 31 to 39 is bigger than the step from 13 to 16, which is why a set built by multiplying looks even when its differences are not.

Point sizes on one A5 card for a repair cafe in Porto, drawn from a zero baseline.

  1. 13address
  2. 16body
  3. 20what to bring
  4. 25headings
  5. 31unused
  6. 39the name

It leaves out line height, which is the other half of a scale and is set as a ratio rather than as a size.

Where to go in

Whichever of the other six brought you here, the foundations come first, and the door into them is the craft that decides whether words get read, because most of what a client calls a layout problem is a type problem in a coat. The least obvious page in the pillar is the skill under all the others, and how it is trained, and it changes the most: seeing is trained by rebuilding work you admire at full size and measuring where yours went differently, and it is the same skill that light, a lens, and deciding what to leave out trains through a viewfinder.

Take understanding what people need before designing anything ahead of the surface people touch when the thing is used rather than looked at, and go in through research rather than wireframes, because the wireframe is the cheap part. Enter interface design through components only after building the same thing twice by hand; as a first lesson a kit is a filing cabinet with nothing in it. A screen is also finished in a browser and not in the file, which makes everything between a browser and a server a shorter detour than most designers expect.

Marks, layouts and printed things is the topic to open when the work will be printed, because print is where a mistake stops being editable, and drawing, painting and building images by hand is the one where the stall is finishing rather than starting. Drawing things that get built or manufactured is the topic most design maps drop, and its drawings have to be read by somebody you will never meet, in a workshop, at speed. Interface design, and the file everyone is in at once is where to go once you know what you are making and want the program out of the way.

What none of the seven answers between them is the question underneath the split: who is going to tell you the work is wrong, and how long that takes to arrive. On a screen it can be an afternoon, and whether people can actually use it is the page about buying that afternoon on purpose. On a print run it is the morning the boxes arrive. On a machined part it is the moment two pieces refuse to meet. Choose the topic whose feedback you can stand to wait for, and if that sounds like a question about temperament rather than about design, it is one, and it settles more careers in this pillar than talent does.

Alongside this

Above this