Lesson 12 · Logo and visual identity¶

What a logo is (and is not)¶

A logo does not explain what the organisation does. It is not an illustration, not a story, and it does not have to contain a brilliant metaphor.

A logo is an identification mark: something you recognise quickly, at any size, in any context. A transport company's logo does not need to contain a truck; it only needs to be recognised as belonging to that company.

The types of logo¶

The five criteria of a good logo¶

Step 1 — The identity brief¶

Before any sketch, answer in writing:

1. Who are we? — one sentence.
2. For whom? — the real audience.
3. Three words describing the tone you want.
4. Three words describing what you do not want to look like.
5. Where will the logo appear? — list every concrete place.
6. What similar logos exist? — so you do not resemble them.

Step 2 — Sketches¶

On paper, not in Figma. A pencil draws ten times faster than a mouse, and at this stage quantity matters more than quality.

The rule: 20 small sketches (4 × 4 cm each), in 30 minutes. Do not evaluate while drawing. Only at the end do you pick three.

Starting ideas for the computer science club¶

Step 3 — The vector construction¶

Pick a direction and build it properly, in Figma.

The construction grid¶

1. A 240 × 240 px frame, named logo/construction.
2. Layout grid: Grid, size 24 — so 10 × 10 modules.
3. A second layout grid: Grid, size 8, in a more discreet colour — for fine detail.

Draw using only coordinates that land on the grid. A logo built on a grid looks deliberate; one drawn by eye looks approximate.

The construction rules¶

Typography inside the logo¶

If the logo contains text:

1. Pick a font that matches the tone (lesson 04).
2. Adjust the spacing between letters by hand. A logo never uses default kerning.
3. At the end, convert the text to vector: right-click → Outline stroke for strokes, or Flatten (Ctrl+E) for text.

Step 4 — The variants¶

A logo is not a file. It is a set.

The reduction test¶

Put the mark variant at 16 px. What happens?

• If the details melt into a blob → simplify. Remove the small elements.
• If the interior gaps close up → enlarge them or thin the lines.
• If it is still recognisable → the logo passes.

Step 5 — Clear space and minimum size¶

Clear space¶

The minimum empty space around the logo, which nothing may enter — no text, no other logos, not the page edge.

It is defined relatively, not in millimetres, so it works at any size:

Clear space = the height of the letter "C" in the logo, on all four sides.

Or, for a logo with no text: half the width of the mark.

Minimum size¶

The smallest size at which the logo is still legible. It is established by testing, not by calculation:

Print them at these sizes and look at them. If something is lost, raise the minimum.

Step 6 — The usage rules¶

One page, with visual examples. This is the document that makes the difference between a logo and a visual identity.

What it contains¶

1. The variants — all five, with their file names.
2. Clear space — drawn, with the measuring unit marked.
3. Minimum sizes — for each variant.
4. The colours — HEX, RGB, and the CMYK equivalent if it goes to print.
5. Which backgrounds — examples: on white, on the brand colour, on a photo, on black.
6. What not to do — the most useful chapter.

The "what not to do" list¶

Draw each mistake, with a red X over it:

• Do not stretch it non-proportionally
• Do not rotate it
• Do not change the colours
• Do not add shadows or effects
• Do not rearrange the elements
• Do not place it on backgrounds with insufficient contrast
• Do not put it in a box that is not part of the logo
• Do not change the font

Exercises¶

Exercise 1 — 20 sketches¶

On paper, in 30 minutes, draw 20 logo sketches for the computer science club. Do not evaluate while drawing. At the end, pick three and justify each choice in one sentence.

Exercise 2 — Construction on a grid¶

Take one of the three sketches and build it as a vector on a 10 × 10 module grid. Every coordinate must land on the grid.

Exercise 3 — The variant set¶

Generate all five variants from the logo built in exercise 2 and test them on five different backgrounds.

Mini-project: your club's visual identity¶

Build the complete set for your computer science club (or another real organisation at your school): the logo with all its variants, a palette, fonts and a page of usage rules.

logo/
  logo-primary.svg
  logo-horizontal.svg
  logo-mark.svg
  logo-black.svg
  logo-white.svg
  logo-mark-32.png      (favicon)
  logo-mark-512.png     (social media avatar)
guidelines.pdf

Summary¶

• A logo is an identification mark, not an explanation and not an illustration.
• Five types: wordmark, lettermark, mark, combination (the most practical), emblem.
• Five criteria: simple, memorable, timeless, versatile, appropriate.
• You start with an identity brief, then 20 sketches on paper, then three directions.
• You build on a grid, with identical weights and angles from the 0/45/90 set.
• Optical correction is allowed and necessary — document it.
• Logo text gets converted to vector on delivery.
• A logo is a set of 5 variants, not one file.
• Clear space is defined relative to the logo, not in millimetres.
• The "what not to do" chapter is the most-read part of the whole guide.

Next step: → Lesson 13: Social media post