07
Chapter seven

Zero to portfolio in twelve months.

An hour or two a day, six phases, 36 milestones. Tick them as you go: your progress is saved in this browser, so you can close the tab and come back any time.

0%
0 milestones done
Watch first · the year at a glance

Twelve months, one path

Explainer 07 · zero → portfolio
Weeks 1–4
Open your eyes
Eye
Hands
Portfolio
  1. Weeks 1–4 · Open your eyesSwipe file, Figma basics, 30 real-world photos. Your eye wakes up first.
  2. Months 2–3 · FoundationsColour, type, layout. Copy 10 great designs pixel by pixel.
  3. Months 4–5 · Tools & craftPen tool, auto layout, a 30-day challenge. Your hands catch up.
  4. Months 6–8 · Real projectsA brand, a poster series, an app redesign, each with real research.
  5. Months 9–10 · Pick a laneBrand, UI, motion, packaging: go deep in one.
  6. Months 11–12 · Go proPortfolio site, 30 applications, your first paid project.
The daily rhythm

Every day, about 70 minutes

20min

Look

Add to your swipe file. Dissect one piece: what, how, why.

40min

Make

Copy, remix or create. Always finish something, however small.

10min

Share

Post it, ask one question, give feedback to someone else.

01
Weeks 1–4

Open your eyes

Goal: start seeing design everywhere and get comfortable in Figma. Read chapters 01–02.

You'll haveA trained eye, a swipe file, and Figma basics: frames, shapes, text, colour.
02
Months 2–3

The foundations

Goal: understand colour, type and layout deeply. Read chapters 03–05. Copy a lot.

You'll haveReal control over colour, type and layout, plus your first before/after redesign.
03
Months 4–5

Tools & craft

Goal: get fast and clean in your tools. Tools don't make designers, but slow tools hold them back.

You'll haveSpeed, clean vectors, a visible streak of public work, and a growing audience.
04
Months 6–8

Real projects

Goal: three portfolio-grade projects, each with research, process and final work. Read chapter 06.

You'll haveThree case studies that prove you can think, not just decorate.
05
Months 9–10

Pick your lane

Goal: go deeper in one specialisation. Generalists get you started; a speciality gets you hired.

You'll haveA clear "I'm a ___ designer" sentence and work that backs it up.
06
Months 11–12

Go pro

Goal: package the work, show it to the world and land your first paid work.

You'll haveA portfolio, a public presence, and your first income from design.
The library

Eight books that made designers

Read in this order. Number one is the most important design book for a beginner.

01 · Layout basics

The Non-Designer's Design Book

Robin Williams
02 · Typography

Thinking with Type

Ellen Lupton
03 · UI, practical

Refactoring UI

Wathan & Schoger
04 · Psychology

The Design of Everyday Things

Don Norman
05 · Colour

Interaction of Color

Josef Albers
06 · Grids

Grid Systems in Graphic Design

Josef Müller-Brockmann
07 · Branding

Logo Design Love

David Airey
08 · Mindset

Steal Like an Artist

Austin Kleon
The toolkit

Tools, mostly free

JobStart with (free)Industry standard
Layout, UI, everythingFigma (free plan)Figma
Vector & logosFigma, Inkscape, Affinity (now free from Canva)Adobe Illustrator
Photo editingPhotopea (runs in the browser)Adobe Photoshop
Print & editorialAffinity, ScribusAdobe InDesign
MotionFigma Smart Animate, Rive (free tier), JitterAfter Effects
ColourCoolors, Adobe Color, Realtime Colors, the WebAIM contrast checkerSame, plus Pantone guides for print
TypeGoogle Fonts, Fontshare, Fonts In UseAdobe Fonts, independent foundries
InspirationAre.na, Savee, Cosmos, Behance, MobbinSame, plus books and the real world
Learning (video)Figma's YouTube, The Futur, Flux Academy, Satori Graphics, CalArts Graphic Design on Coursera (financial aid available)—
Glossary

Speak designer

Hierarchy
The order in which the eye notices things. Biggest and boldest first.
Whitespace
Empty space around and between things. Not necessarily white.
Grid
Invisible columns and rows that things align to.
Kerning
Space between two specific letters.
Tracking
Even spacing across a whole word or line.
Leading
Space between lines of text (line-height).
Hue / Saturation / Value
Which colour, how intense, how light or dark.
Contrast ratio
How different text and background are in lightness. 4.5:1 minimum for body text.
Vector
Graphics made of maths (paths), so they scale to any size. Logos are always vectors.
Raster
Graphics made of pixels (photos). They go blurry when enlarged.
Moodboard
A collage that captures the feeling of a project before designing.
Brief
A one-page agreement on the problem, goal, audience and deliverables.
Brand guidelines
The rulebook for how a brand looks: logo use, colours, type, tone.
Bleed
Extra image beyond the trim edge in print, so nothing white peeks out after cutting.
Mockup
Your design placed on a realistic object (phone, bag, billboard).
Wireframe
A rough black-and-white layout sketch, all structure and no style.
Design system
Reusable components and rules so a big product stays consistent.
Case study
A portfolio story: problem → process → solution → result.

You don't need talent to start. You need to start to get the talent.

— the whole idea of this guide

Back to the start ↺