Phase 01 · Stages 1–15 · Foundation

Graphic
Design.

The skill that starts everything. Most hireable, most versatile, most transferable. Every lesson in layout, colour, and type compounds into every tool you'll ever learn.

15stg
Duration
5–8
Portfolio pieces
6
Core tools
$150+
First project rate
💡

Design alone can get you your first client or job. Don't wait for all 4 skills. Start today and add skills as you go.

Stage by Stage

Fifteen stages,
one clear path.

Every stage has a daily focus, a pro tip, and a cheatsheet. Click any stage to expand it.

Daily Focus
📌 5 Core Design PrinciplesLearn the 5 principles every designer lives by: alignment (elements line up intentionally), repetition (consistent visual patterns), contrast (making things stand out), proximity (grouping related items), and balance (visual weight distribution). Find one real example of each from brands you already love.
Watch on YouTube
📌 Typography BasicsUnderstand the vocabulary of type: serif vs sans-serif (personality), weight (thin to bold), leading (line spacing), and kerning (space between letters). Create 3 type specimens in Canva — a headline layout, a pull quote, and a business card. This builds your eye before your software skills.
Watch on YouTube
📌 Visual Analysis & Critical EyeAnalyse 20 real logos on Behance. For each one write one sentence: what makes it work or fail? Focus on scale, simplicity, and whether it communicates the brand instantly. You're training your critical eye — this is what separates designers who improve fast from those who don't.
Watch on YouTube
📌 Typographic HierarchyDesign a poster using only typography — no images. Practice the three-level system: large headline → medium subheadline → small body text. Use one font family, three sizes. Hierarchy tells the reader where to look first, second, third — without it, everything competes for attention.
Watch on YouTube
📌 Composition & Visual WeightArrange 5 simple shapes on a blank canvas 10 different ways. Learn how size, density, and placement create visual weight — some arrangements will feel balanced, others tense or chaotic. Sketch on paper first. Understanding composition before software makes every future design decision faster.
Watch on YouTube
📌 Negative SpaceNegative space is the empty area around your subject — and it's as active as the subject itself. Designers use it to create breathing room, direct attention, and even embed hidden meaning (FedEx arrow, WWF panda). Sketch 3 compositions where the negative space is the most interesting part. Empty space is a design decision, not a default.
Watch on YouTube
📌 Design History & Visual MovementsYour design taste is built on what you've seen. Study 5 major movements: Bauhaus (form follows function, 1919), Swiss/International (grids, Helvetica, 1950s), Push Pin/Psychedelic (1960s illustration), Postmodern (rule-breaking, 1980s), and Flat/Material Design (digital era). Knowing history lets you borrow intentionally, not accidentally.
Watch on YouTube
⚡ Stage 1 Cheatsheet — Visual Foundations
Alignment
Every element lines up with another — never place anything arbitrarily
Contrast
Make the most important thing the most visually different thing
Proximity
Group related items together; separate unrelated ones
Repetition
Repeat colours, fonts, shapes to create visual consistency
Balance
Distribute visual weight evenly — symmetrical or asymmetrical
Hierarchy Rule
Headline → Sub → Body: 3 sizes minimum, 1 font family
Canva Shortcut
T = text, R = rectangle, C = circle, Delete = remove
First Deliverable
A3 typographic poster, 3 hierarchy levels, saved as PDF
Negative Space
Empty area around a subject — active, not passive. Always intentional.
Design Movements
Bauhaus · Swiss · Psychedelic · Postmodern · Flat — know all 5
✦ Pro Tip

Don't open Figma yet. Use Canva this stage so you focus purely on design decisions, not software. You'll move to Figma in Stage 3 once you understand what you're actually building.

Daily Focus
📌 Colour Wheel & HarmoniesLearn the colour wheel relationships: complementary (opposite colours, high contrast), analogous (neighbouring colours, harmonious), triadic (3 evenly spaced, vibrant), and split-complementary (safer contrast). Build 5 palettes on Coolors.co and explain why each creates a specific mood.
Watch on YouTube
📌 Colour PsychologyMap emotions to colours: reds and yellows feel energetic, urgent, warm; blues and greens feel calm, trustworthy, cool. Design the same layout twice — once in warm tones, once in cool. This single exercise teaches more about colour mood than hours of reading theory.
Watch on YouTube
📌 Contrast & WCAG AccessibilityLearn the WCAG AA accessibility standard: text must have a minimum 4.5:1 contrast ratio against its background. Check all your Stage 1 work using WebAIM's contrast checker. Accessibility isn't optional — it's a professional requirement and will come up in every client project.
Watch on YouTube
📌 Extracting Palettes from PhotographyUse Adobe Color to pull a 5-colour palette from a photograph you love. Then rebuild a simple layout using only those extracted colours. Constrained palettes create instant visual harmony because nature already chose the ratios — you're borrowing its logic.
Watch on YouTube
📌 Brand Mood Boards & Colour DirectionsCreate a brand mood board for a fictional client with 3 colour directions, each targeting a different emotional register (e.g. bold/energetic, calm/premium, playful/friendly). Label each with 3 adjectives. This is the exact deliverable used in real client discovery meetings.
Watch on YouTube
📌 Tints, Shades & TonesTint = colour + white (lighter). Shade = colour + black (darker). Tone = colour + grey (more muted). Most professional colour systems use 9-step scales: 50/100/200/300/400/500/600/700/800/900 — like Tailwind CSS. Build a 9-step scale from your café's primary colour. This is how real design systems handle colour depth.
Watch on YouTube
📌 Dark Mode Colour SystemsDark mode isn't just 'invert everything' — it requires a completely rethought palette. Background layers use dark greys (not pure black), text uses off-white (not pure white), and accent colours often need to be lighter/more saturated to maintain contrast. Redesign your café palette for dark mode. This is now a required deliverable on most digital design briefs.
Watch on YouTube
⚡ Stage 2 Cheatsheet — Colour Theory
60/30/10 Rule
60% dominant · 30% secondary · 10% accent — always
Complementary
Opposite on wheel → high contrast, energetic, use sparingly
Analogous
Neighbours on wheel → calm, harmonious, natural
Triadic
3 equally spaced hues → vibrant, balanced, hard to misuse
WCAG AA
Normal text needs 4.5:1 contrast ratio — check WebAIM
Colour Temp
Warm (red/yellow) = energy · Cool (blue/green) = trust/calm
Adobe Color
Extract palettes from photos — nature's ratios are always harmonious
Deliverable
3 café palettes, 5 swatches each, rationale sentence per palette
Tint/Shade/Tone
Tint = +white · Shade = +black · Tone = +grey
Colour Scale
9 steps: 50/100/200/300/400/500/600/700/800/900
Dark Mode BG
Use #121212 or #1A1A1A — never pure black (#000000)
✦ Pro Tip

Start with 60/30/10 — 60% dominant colour, 30% secondary, 10% accent. Almost every great design follows this ratio. Violate it deliberately only once you truly understand why it works.

Daily Focus
📌 Figma Interface & File SetupInstall Figma (free) and watch the official 'Figma for Beginners' 4-part series. Set up your first file with one page per project type. Learn the panels: Layers (left), Properties (right), and the toolbar. This is your primary tool for the entire course — invest this session properly.
Watch on YouTube
📌 Frames & ConstraintsLearn Frames (Figma's artboards with built-in responsive logic) and Constraints (rules for how elements scale when the frame resizes). Recreate a real website's hero section layout from scratch. Match it as closely as possible — precision forces you to observe spacing and proportion carefully.
Watch on YouTube
📌 Auto-Layout in FigmaAuto-layout is Figma's most powerful feature. It makes elements automatically resize and reposition like CSS flexbox. Build a button, a card, and a navigation bar using only auto-layout. These three patterns appear in almost every project — master them now and save hours later.
Watch on YouTube
📌 Components & VariantsComponents are reusable design elements. Variants let one component hold multiple states. Build a button set with 4 states: default, hover, active, disabled. Understanding variants is essential for building scalable design systems that real product teams use daily.
Watch on YouTube
📌 Design Tokens: Colour & Text StylesDesign tokens are named, reusable values — your colour library (8 colours) and text style library (6 sizes). Apply them to your Stage 2 café brand. When you change a token, every element using it updates automatically. This is your first taste of scalable, professional design workflow.
Watch on YouTube
📌 Figma Community & ResourcesFigma Community (figma.com/community) is a library of free UI kits, icon sets, mockups, and design systems built by the world's top designers. Duplicate 3 community files: a UI kit, a mockup pack, and a free design system. Study how professionals structure files, name layers, and organise components. Learning from real files is faster than any course.
Watch on YouTube
📌 Developer Handoff with Inspect ModeWhen you hand a design to a developer, they need exact values — not screenshots. Learn Figma's Inspect panel: click any element to see its CSS properties (font, size, colour as HEX, spacing, border-radius). Enable Dev Mode for the full handoff view. Export assets as SVG/PNG directly from Inspect. This skill makes you a designer developers want to work with.
Watch on YouTube
📌 Figma Variables — The New Token SystemFigma Variables (2024) replace manual styles with a true design token system: define a colour once as a variable (e.g. `color/brand/primary`) and it updates everywhere when you change it. Variables support modes — switch between light and dark with one click. Set up a variable collection for colour, spacing, and border-radius. This is how enterprise teams maintain consistency across hundreds of screens.
Watch on YouTube
⚡ Stage 3 Cheatsheet — Figma Essentials
Frame vs Group
Frame = artboard with constraints · Group = just grouping
Auto-Layout
Shift+A → makes elements stack/resize like CSS flexbox
Component
Cmd+Alt+K → create master; all instances update together
Variant
Add property to component for states: default/hover/active
Cmd+D
Duplicate selected element in place
Alt+Drag
Copy element while dragging
Styles
Right panel → fill icon → create style to save & reuse colours
Deliverable
Figma file: colour library + text styles + 3 components (public link)
Figma Community
figma.com/community — free UI kits, mockups, icon sets, systems
Inspect Panel
Click element → Inspect tab → copy CSS values for dev handoff
Layer Naming
Name every layer — developers and future-you will thank you
Variables
Define once → update everywhere · Supports light/dark modes
Variable Types
Colour · Number · String · Boolean — 4 types in Figma
✦ Pro Tip

Learn keyboard shortcuts from day one: Cmd+D (duplicate), Alt+drag (copy), Cmd+G (group), Cmd+R (rename). Designers who use shortcuts work 3× faster — clients and employers notice delivery speed.

Daily Focus
📌 8pt Spacing System & 12-Column GridThe 8pt grid system means every spacing value (margin, padding, gap) is a multiple of 8 (8, 16, 24, 32…). This creates instant visual rhythm. Set up a 12-column grid in Figma and redesign your Stage 1 poster inside it. You'll immediately notice how the grid makes decisions for you.
Watch on YouTube
📌 Editorial Layout DesignStudy magazine spreads from Vogue, Wired, and Bloomberg — pay attention to text columns, image placement, and white space use. Design two editorial layouts for a fictional travel article: one content-dense, one minimal. Both approaches are valid; the skill is choosing deliberately.
Watch on YouTube
📌 White Space as a Design ToolTake a busy design found online and create a simplified version by removing 40% of its elements. Notice what becomes clearer. White space isn't emptiness — it's breathing room that gives remaining elements more visual power. Most beginners over-fill; most professionals over-simplify.
Watch on YouTube
📌 Golden Ratio & Rule of ThirdsThe golden ratio (1:1.618) and rule of thirds are compositional frameworks found everywhere from photography to architecture. Design a hero section using each principle separately, then overlay the grid to see how it guided the eye. These aren't rules — they're starting points.
Watch on YouTube
📌 Responsive Design ThinkingDesign the same card layout at three breakpoints: mobile (375px), tablet (768px), and desktop (1440px). Document what changes at each — font size, column count, spacing, image crop. Responsive thinking is now a baseline expectation for all digital design work.
Watch on YouTube
📌 F-Pattern & Z-Pattern Reading FlowEye-tracking research shows two dominant reading patterns. F-pattern: users read across the top, then scan down the left edge — common on text-heavy pages. Z-pattern: eyes move top-left → top-right → diagonal → bottom-left → bottom-right — common on visual/landing pages. Design one layout for each pattern and place your most important content at each pattern's natural stopping points.
Watch on YouTube
📌 Visual Rhythm & RepetitionVisual rhythm is the deliberate repetition of elements at consistent intervals — like a heartbeat in design. Regular rhythm (equal spacing, predictable) feels professional and calm. Irregular rhythm (varied spacing, unexpected) feels dynamic and energetic. Design a page section using each rhythm type. Rhythm is what makes a layout feel intentional rather than assembled.
Watch on YouTube
⚡ Stage 4 Cheatsheet — Grids & Layout
8pt Grid
All spacing = multiples of 8: 8, 16, 24, 32, 40, 48…
12-Col Grid
Standard web grid: 12 cols, 24px gutter, 16px margin
White Space
If it feels too empty, it's probably right. Protect it.
Golden Ratio
1:1.618 — divide canvas at 61.8% for natural focal point
Rule of Thirds
3×3 grid overlay — place subjects at intersection points
Mobile (375px)
Single column, large tap targets, minimal text
Desktop (1440px)
Max content width 1120–1280px, centred
Deliverable
2 editorial layouts (dense + minimal), both on 8pt grid, on Behance
F-Pattern
Top scan → left edge scan — place key info top-left always
Z-Pattern
Top-left → top-right → diagonal → bottom — for visual pages
Visual Rhythm
Repeated spacing intervals = professional · Varied = dynamic
✦ Pro Tip

White space is not empty — it's active breathing room. When your layout feels "too empty," that's almost always right. Clients will try to fill it. Your job is to protect it. Space is what creates the feeling of quality.

Daily Focus
📌 5 Logo Types & ScalabilityLearn the 5 logo formats: wordmark (text-only, e.g. Google), lettermark (initials, e.g. IBM), brandmark (symbol only, e.g. Nike), combination mark (text + symbol), and emblem (enclosed design). For each, find 3 examples and ask: does it work at 16px favicon size?
Watch on YouTube
📌 Logo Sketching & IdeationSketch 20 logo concepts by hand for 'Atlas Coffee' — spend only 3 minutes per sketch. Volume of ideas beats quality of execution at this stage. Quantity forces you past obvious ideas into interesting territory. Never start on screen — paper removes the technical barrier and frees your thinking.
Watch on YouTube
📌 Vector Logos with Boolean OperationsVectorise your 3 best sketches in Figma using only rectangles, ellipses, and boolean operations: Union (combine), Subtract (cut a shape out), Intersect (keep overlap only), Exclude (remove overlap). No pen tool yet — working within constraints forces creative solutions.
Watch on YouTube
📌 Figma Pen Tool & Bezier CurvesThe pen tool creates custom vector paths using anchor points and bezier curves. Trace one of your logo sketches with precision. Then practice by tracing letterforms from a typeface you admire — this builds the muscle memory that makes logos feel refined and intentional.
Watch on YouTube
📌 Logo Suite: All VariationsA complete logo suite has at least 4 versions: primary horizontal (default use), stacked (compact vertical), icon-only mark (favicon/app icon), and reversed on dark. Test every version at 16px (favicon size) and 200px (signage size). If it fails at either extreme, redesign it.
Watch on YouTube
📌 Adobe Illustrator for LogosIllustrator is the professional standard for logos and vector work. While Figma covers 80% of needs, Illustrator's pen tool is more precise, its pathfinder panel is more powerful, and it exports cleaner SVGs. Learn: Artboards, the Pen tool, Pathfinder (Unite/Minus Front/Intersect), and export to SVG/EPS/PDF. Even knowing the basics makes you more hireable for print and identity work.
Watch on YouTube
📌 Logo Colour Application & MisuseA logo system includes rules for where and how colour can be used — and critically, how it cannot. Create a logo misuse page for Atlas Coffee showing 6 common mistakes: stretched, colour-changed, low contrast, drop-shadowed, outlined, and placed on a busy background. Clients do all of these. Your guidelines document is what prevents it.
Watch on YouTube
📌 Wordmark & Custom Lettering DesignA wordmark is a logo that IS the brand name, typographically crafted — Coca-Cola, Google, FedEx. Unlike a logotype (off-the-shelf font), a wordmark involves custom letterform modifications: adjusting kern pairs, modifying letterforms, adding ligatures, or drawing from scratch. Take a Google Font, convert to outlines, and customise at least 3 letterforms. This single skill dramatically increases logo project rates.
Watch on YouTube
⚡ Stage 5 Cheatsheet — Logo Design
5 Logo Types
Wordmark · Lettermark · Brandmark · Combination · Emblem
Boolean: Union
Merge shapes into one combined outline
Boolean: Subtract
Cut the top shape out of the bottom shape
Boolean: Intersect
Keep only where both shapes overlap
Pen Tool
P to activate · click = corner · click+drag = curve
Bezier Handle
Alt+drag handle to break symmetry on a curve point
Logo Tests
Check at 16px (favicon) AND 200px (print). Both must work.
Deliverable
Atlas Coffee suite: horizontal + stacked + icon + reversed (PNG + SVG)
Illustrator Export
Save As → SVG → Presentation Attributes · EPS for print vendors
Pathfinder
Unite (merge) · Minus Front (subtract) · Intersect · Exclude
Logo Misuse
Never stretch · Never recolour · Never add effects · Never low contrast
Wordmark
Custom-drawn or modified type — not an off-the-shelf font
Outline Text
Figma: Object → Outline Stroke · Illustrator: Type → Create Outlines
✦ Pro Tip

Great logos work at 16px as a favicon AND at 3 metres on a billboard. Test both extremes before you consider any logo finished. Simplicity isn't laziness — it's the hardest skill in design.

Daily Focus
📌 Platform Dimensions & Size LibraryEvery platform has exact pixel dimensions that affect how your design crops and renders. Learn them: Instagram feed (1080×1080 square, 1080×1350 portrait), Story/Reels (1080×1920), LinkedIn post (1200×628), Pinterest (1000×1500). Create a size preset library in Figma — you'll use it on every social project.
Watch on YouTube
📌 Carousel Design & Visual ContinuityA carousel is a series of slides that must feel like one connected visual story. Design a 5-slide educational carousel on a topic you know. Use consistent typography, colour, and a repeating layout system. The visual thread between slides is what keeps viewers swiping instead of scrolling past.
Watch on YouTube
📌 Story Template DesignStories have specific design constraints: 9:16 ratio, thumb zones to avoid, text-safe areas, and they display for only seconds. Create 3 Instagram story formats for Atlas Coffee — product announcement, customer quote, and behind-the-scenes. Each must be readable without reading — visuals carry the message first.
Watch on YouTube
📌 Scroll-Stopping Design PrinciplesThe single goal of social graphics: stop the thumb. The two reliable methods are high contrast (bold colour + strong type) and strong curiosity (incomplete information that makes you want to know more). Design two examples of each and compare — you're learning what interrupts automatic behaviour.
Watch on YouTube
📌 Template System DesignA template system is a set of designs sharing one colour palette, type style, and spacing framework. Build 10 social templates for Atlas Coffee (5 posts, 3 stories, 2 LinkedIn). Consistency across formats = brand recognition. This pack is also your first saleable product — it could sell for $25–$150 on Creative Market.
Watch on YouTube
📌 Paid Ad Design (Facebook, Google, Meta)Ad design is one of the most consistent freelance revenue streams. Key specs: Facebook/Instagram feed ad 1080×1080, story ad 1080×1920, Google Display 300×250 (leaderboard), 728×90 (banner), 160×600 (skyscraper). Design a 3-format ad set for Atlas Coffee — same campaign, 3 sizes. Clients running ads need this every month, making it a natural retainer service.
Watch on YouTube
📌 Reels & TikTok Cover DesignShort-form video is the highest-reach content format. Even if you're not editing video, designers are hired to create Reels covers, TikTok thumbnails, and channel branding. These use the same 9:16 format as stories but need to work as a static grid tile. Design 6 Reels covers for a fictional brand that form a cohesive grid pattern when viewed together on a profile.
Watch on YouTube
⚡ Stage 6 Cheatsheet — Social Media Design
Instagram Feed
1080×1080 (square) · 1080×1350 (portrait, more reach)
Story / Reels
1080×1920 · Keep text 250px from top & bottom edges
LinkedIn Post
1200×628 · Text must be readable at thumbnail size
Carousel Logic
Slide 1 = hook · Slides 2–4 = value · Slide 5 = CTA
Scroll-Stop
High contrast OR strong curiosity gap — not both at once
Template System
1 palette + 1 type scale = consistent brand across all formats
Creative Market
20-template packs sell for $25–$150 — yours is ready after this stage
Deliverable
10-template pack (5 posts + 3 stories + 2 LinkedIn), PNG, on Behance
FB Feed Ad
1080×1080 · Max 20% text rule (now advisory, not enforced)
Google Banner
300×250 · 728×90 · 160×600 — the 3 universal display sizes
Reels Cover
1080×1920 · Safe zone: centre 1080×1080 for grid thumbnail view
✦ Pro Tip

Template packs are your first passive income opportunity. A set of 20 branded social templates sells for $25–$150 on Creative Market. Build them well and you can sell the same work repeatedly.

Daily Focus
📌 Brand Strategy & Mood BoardsBefore any design, answer three questions for 'Form + Earth': who is it for, what does it stand for, and what makes it different? Build a mood board — a collection of images, textures, and colours that capture the feeling. Strategy prevents wasted design work. Brief before brush.
Watch on YouTube
📌 Logo & Colour System DesignDesign the logo and define the colour architecture: 2 primary colours (dominant), 1 accent (emphasis), 1 neutral (text/backgrounds). Write a short rationale justifying every colour choice before finalising anything. The rationale is what clients pay for — anyone can pick colours, but explaining why requires expertise.
Watch on YouTube
📌 Brand Typography PairingSelect two typefaces: one display font for personality (used for headlines, large type) and one body font for readability (used for paragraphs, small text). Apply both across three touchpoints: letterhead, business card, and website hero. See how the same brand changes feel across applications.
Watch on YouTube
📌 Photography Direction & IconographyDefine what the brand's photography looks and never looks like — lighting style, subject matter, colour grade, composition rules. Create do/don't visual reference pages. This is part of every real brand guidelines document and protects the brand when others create content for it.
Watch on YouTube
📌 Brand Guidelines PDFCompile all brand decisions into a brand guidelines document: logo rules (clear space, misuse examples), colour codes (HEX, RGB, CMYK), type hierarchy, spacing rules, photography guidelines. 8–12 pages. This is the deliverable that commands the highest fees in brand design.
Watch on YouTube
📌 Brand Voice & Tone of CopyA brand isn't only visual — it has a written personality. Voice is consistent (who you are), tone shifts by context (how you say it). Write a voice guide for Form + Earth: 3 personality traits, a vocabulary list (words they use vs words they never use), and one example sentence rewritten in their voice. Clients pay premium for this — most designers skip it entirely.
Watch on YouTube
📌 Brand Stationery SuiteA complete identity includes business card, letterhead, and envelope — the print touchpoints that signal premium quality. Design all three for Form + Earth using the brand system from your guidelines. Business card: 85×55mm, 3mm bleed. Letterhead: A4, correct margins. These complete your portfolio piece and teach print layout in a real-world context.
Watch on YouTube
📌 Competitive Analysis Before DesigningBefore designing a single element for a brand, map their competitive landscape. Audit 5–8 direct competitors: screenshot their logo, colours, typography, and photography style. Identify the visual clichés of the category (e.g. every fitness brand uses black/red/bold sans-serif). Your client's identity should feel like it belongs to the industry but is immediately distinguishable from every competitor. This research is what prevents you from accidentally designing something that already exists.
Watch on YouTube
⚡ Stage 7 Cheatsheet — Brand Identity
Brand Strategy
Who is it for? What does it stand for? What makes it different?
Colour Architecture
2 primary + 1 accent + 1 neutral = complete colour system
Colour Codes
Always provide HEX (web) + RGB (screen) + CMYK (print)
Type Pairing
Display font (personality) + Body font (readability) — max 2
Photography Do/Don't
Define what photography looks like AND what it never looks like
Logo Clear Space
Minimum clear space = height of the logo's cap-height "X"
Guidelines Length
8–12 pages: logo rules, colour, type, spacing, photography
Deliverable
Full Form+Earth identity: logo + colour + type + photo + guidelines PDF
Brand Voice
3 traits · words they use · words they never use · example copy
Business Card
85×55mm · 3mm bleed · 300dpi · keep text 5mm from edges
Letterhead
A4 · 25mm top margin · 20mm sides · logo top-left or top-centre
Competitor Audit
5–8 competitors · logo · colours · type · photography style
Category Trap
Identify the visual cliché — then deliberately differentiate from it
✦ Pro Tip

Brand guidelines aren't just a style reference — they're a decision-making tool for the client. Every rule should answer "why" as well as "what." Clients who understand their brand become better collaborators and pay more for the work.

Daily Focus
📌 YouTube Thumbnail DesignThumbnails compete at 120×90px in a grid of rivals — they must communicate in under a second. Analyse 20 top-performing thumbnails: most use face + bold text + high contrast + a curiosity gap (something unresolved that makes you click). Design 5 variations for a fictional video and compare which versions you'd click first.
Watch on YouTube
📌 Event Poster Design (Type-Only)Design an A2 concert poster using only typography — no photography allowed. This forces pure composition and hierarchy decisions. You must make type do everything: create mood, establish hierarchy, and attract attention. It's the hardest constraint in design and the most educational.
Watch on YouTube
📌 Print SpecificationsPrint design requires specific technical settings that digital design doesn't: 3mm bleed (extra edge that gets trimmed), safe zones (keep content 5mm from edges), CMYK colour mode (not RGB), and 300dpi resolution (not 72). Set up your poster file correctly and export a print-ready PDF.
Watch on YouTube
📌 Mockup PresentationMockups are photos or 3D renders with smart objects that let you place your design into a real-world context — a poster on a wall, a business card in a hand. Download free mockups from Figma Community or Freepik. Presentation is half the sale: mediocre work on a great mockup often outperforms brilliant work on a blank canvas.
Watch on YouTube
📌 Tri-fold Brochure LayoutA tri-fold has 6 panels across 2 sides — front cover, 3 inside panels, back cover, inside flap. Each panel must work alone and as part of the whole. Design a brochure for Atlas Coffee. This tests your ability to maintain layout consistency and information hierarchy across a complex multi-panel system.
Watch on YouTube
📌 Packaging Design BasicsPackaging is one of the most impactful and highest-paid design disciplines. A product package has 5 mandatory zones: front panel (hero), back panel (info), side panels (secondary content), top, and bottom (legal/barcode). Design a coffee bag for Atlas Coffee. Constraints: brand colours only, must communicate product type at a glance, must include a fictional nutrition panel on the back.
Watch on YouTube
📌 Business Card DesignDespite digital contact-sharing, business cards remain a powerful first impression tool and a constant client request. Standard size: 85×55mm (EU) / 3.5×2in (US). Both sides. Front: name, title, contact. Back: brand mark or a single bold design statement. Design 3 versions of your own card — minimal, bold, and typographic. Export print-ready at 300dpi with 3mm bleed.
Watch on YouTube
📌 Adobe InDesign for Multi-Page DocumentsInDesign is the industry standard for multi-page print documents — lookbooks, catalogues, annual reports, magazines. Figma cannot replicate its master pages, paragraph styles, or CMYK print output. Learn: Master Pages (consistent headers/footers/page numbers across all pages), Paragraph Styles (one-click text formatting), and correct PDF export with bleed marks. Design a 6-page lookbook for Atlas Coffee. Print clients expect InDesign files on delivery.
Watch on YouTube
⚡ Stage 8 Cheatsheet — Print & Thumbnails
Thumbnail Rule
Face + bold text + high contrast + curiosity gap = clicks
Print Bleed
3mm bleed on all 4 sides beyond the trim line
Safe Zone
Keep all text/logos 5mm inside the trim edge
CMYK
Use CMYK for print, never RGB — colours shift significantly
Resolution
300dpi minimum for print · 72dpi for screen only
PDF Export
Figma → Export → PDF, then check bleed in Acrobat preview
Mockup Sources
Figma Community · Freepik · Mockup World — all free tiers
Deliverable
A2 concert poster + 5 thumbnails, both presented on mockups
Packaging Zones
Front (hero) · Back (info) · Sides (secondary) · Top · Bottom (legal)
Business Card EU
85×55mm · 3mm bleed · 300dpi · CMYK · safe zone 5mm from trim
Business Card US
3.5×2in · same bleed/resolution rules as EU format
Master Pages
Apply repeating elements (headers, page numbers) to all pages at once
Para Styles
Name + define once → apply to all body/headline text instantly
InDesign Export
File → Export → PDF Print → Marks & Bleed → Use Document Bleed
✦ Pro Tip

Mockup presentation is half the job. A mediocre design on a beautiful mockup often outsells a brilliant design on a plain canvas. Invest 10 minutes on every piece before sharing it with anyone.

Daily Focus
📌 UI Design vs Graphic DesignUI (User Interface) design is graphic design applied to screens with one extra rule: everything must be interactive and usable. Learn the core differences — UI has states (hover, pressed, disabled), affordances (buttons look clickable), and flows (one screen leads to another). Study 5 apps you use daily and map every interactive element.
Watch on YouTube
📌 Landing Page AnatomyA landing page has a fixed structure: hero (headline + CTA) → social proof → features → objection handling → final CTA. Design a landing page for Atlas Coffee in Figma from scratch. Don't invent the structure — nail the standard one first. Every section must answer one question the visitor has at that moment.
Watch on YouTube
📌 UI Component LibraryBuild a complete UI kit in Figma: buttons (5 states), input fields (empty/filled/error/disabled), cards, badges, tooltips, navigation bar, and footer. Use auto-layout and variants for every component. This becomes your personal starter kit — you'll reuse it on every web project going forward.
Watch on YouTube
📌 Web Typography & Spacing SystemsWeb typography follows strict rules: body text 16–18px minimum, line-height 1.5–1.7, max line length 65–75 characters. Set up a type scale (12/14/16/20/24/32/48/64px) and a spacing scale (4/8/12/16/24/32/48/64px). Apply both to your landing page. Consistency here is what makes layouts feel polished.
Watch on YouTube
📌 Figma Prototyping & User FlowsPrototyping connects your screens with interactions — click a button, navigate to next screen. Link your landing page hero CTA to a sign-up modal. Then map a 3-screen user flow: landing → product page → checkout. Understanding flows makes you invaluable to any product team.
Watch on YouTube
📌 UX Wireframing & Information ArchitectureBefore designing the visuals, map the structure. A wireframe is a low-fidelity layout showing content placement without colour, fonts, or imagery — just boxes, lines, and placeholder text. Build a 5-screen wireframe for a fictional app in Figma using only grey rectangles. Wireframes expose structural problems before you've invested time in visual design. Every product team uses them.
Watch on YouTube
📌 Mobile-First Design ApproachMobile-first means designing the smallest, most constrained version first, then expanding to tablet and desktop. This forces ruthless prioritisation — if something doesn't fit on mobile, it probably isn't essential. Redesign your Atlas Coffee landing page at 375px first, then scale up to 768px and 1440px. Notice how the mobile version forced better content decisions.
Watch on YouTube
📌 Accessibility in UI DesignAccessible design isn't just ethical — it's a legal requirement in many countries and a professional standard. Learn: colour contrast (4.5:1 AA minimum for text), touch target size (minimum 44×44px), focus states (visible keyboard navigation), and alt text for images. Run your UI component library through a contrast checker and fix every failure. Accessibility is not optional.
Watch on YouTube
⚡ Stage 9 Cheatsheet — UI & Web Design
UI vs Graphic
UI adds states, affordances & flows to graphic design principles
Landing Structure
Hero → Social Proof → Features → Objection Handling → CTA
Body Text Min
16px minimum · 1.5–1.7 line-height · max 65–75 chars per line
Type Scale
12 / 14 / 16 / 20 / 24 / 32 / 48 / 64px — use these, nothing else
Spacing Scale
4 / 8 / 12 / 16 / 24 / 32 / 48 / 64px — all multiples of 4
Button States
Default · Hover · Active · Focused · Disabled — all 5 required
Prototype
Cmd+P to preview · Connect frames with interaction arrows in Figma
Figma Dev Mode
Inspect panel → Dev Mode → shows CSS values + export specs
Wireframe
Grey boxes only — structure first, visuals never before structure
Mobile-First
Design at 375px first · then 768px · then 1440px — in that order
Touch Target
Minimum 44×44px for all tappable elements on mobile
Focus State
Every interactive element needs a visible focus ring for keyboard nav
✦ Pro Tip

UI design is the highest-paid graphic design niche. A landing page in your portfolio is more compelling to clients than 5 brand identities — because they can immediately imagine paying you to build theirs.

Daily Focus
📌 Photoshop Interface & Non-Destructive EditingPhotoshop is the industry standard for photo work. Learn the core principle of non-destructive editing: always use adjustment layers (Curves, Hue/Saturation, Levels) instead of editing pixels directly. This means every change is reversible. Set up a file with a base photo + 3 adjustment layers and toggle them on/off.
Watch on YouTube
📌 Background Removal & CutoutsRemoving backgrounds cleanly is one of the most requested design skills. Learn 3 methods in order of precision: Remove Background (AI, fast), Select Subject + Refine Edge (for complex edges), and Pen Tool path (for hard geometric edges). Practice on a product photo, a portrait, and a complex subject like hair or foliage.
Watch on YouTube
📌 Colour Grading & MoodColour grading changes the emotional feel of an image without changing its content. Learn Curves (precise tonal control), Color Balance (shift shadows/midtones/highlights), and Camera Raw Filter (comprehensive adjustment panel). Grade one photo 3 different ways: cinematic teal/orange, warm editorial, and cold moody — same photo, completely different mood.
Watch on YouTube
📌 Photo CompositingCompositing means combining multiple images into one believable scene. Place a product onto a lifestyle background: match the light direction, add a shadow layer, colour-grade both layers identically, and blur the background slightly. Real client work — product photography, ad campaigns, hero images — all requires this skill.
Watch on YouTube
📌 Smart Objects & Linked AssetsSmart Objects let you place a Photoshop file inside Figma (or another Photoshop file) and have it update everywhere when the source changes. Learn to place logos as Smart Objects in mockups, edit the source, and see every instance update. This is the professional workflow for maintaining brand consistency across deliverables.
Watch on YouTube
📌 Portrait Retouching EssentialsBasic portrait retouching is a standard client request for headshots, team pages, and brand photography. Learn the non-destructive retouching stack: Spot Healing Brush (remove blemishes), Clone Stamp (replace texture), Frequency Separation (smooth skin while preserving texture), Dodge & Burn (sculpt light). The goal is always 'enhanced natural' — never 'plastic'.
Watch on YouTube
📌 Image Optimisation for WebA designer who delivers web-ready images saves developers hours. Learn: export JPEGs at 80% quality (unnoticeable compression, 60% smaller file), PNG for transparency, WebP for modern web (30% smaller than JPEG), and the rule that no hero image should exceed 300KB. Use Photoshop's 'Export As' (not Save For Web) for precise control. Slow websites kill conversions.
Watch on YouTube
⚡ Stage 10 Cheatsheet — Photo Editing
Non-Destructive
Always use Adjustment Layers — never edit pixels directly
Curves
S-curve = contrast · Pull midpoint up = brighten · Down = darken
Select Subject
Select menu → Subject → then Refine Edge for hair/fur
Remove Background
Properties panel → Quick Actions → Remove Background (AI)
Layer Blend Modes
Multiply (darken) · Screen (lighten) · Overlay (contrast)
Color Grading
Camera Raw Filter: Temp, Tint, Exposure, Contrast, HSL panel
Shadow
New layer → black ellipse → Gaussian Blur → reduce opacity to 30–40%
Smart Object
Right-click layer → Convert to Smart Object → double-click to edit
Spot Healing
J key · Content-Aware · click/drag over blemish — Photoshop fills it
Freq Separation
Separates texture from colour — retouch skin without losing pores
Web Export
JPEG 80% · PNG for transparency · WebP for modern browsers
File Size Rule
No hero image >300KB · Thumbnails <80KB · Icons as SVG always
✦ Pro Tip

Photoshop and Figma together cover 95% of all client requests. A designer who can retouch a photo AND lay out a brand identity is twice as hireable as one who can only do one. Spend 30 minutes a day for two weeks and you'll have a working command of both.

Daily Focus
📌 Flat Illustration StyleFlat illustration uses simple geometric shapes, limited colour palettes, and no gradients or shadows — it's the most in-demand illustration style for apps, websites, and brand communication. In Figma, build a scene using only rectangles, ellipses, and the pen tool. Limit yourself to 5 colours. Constraint drives consistency.
Watch on YouTube
📌 Custom Icon DesignIcons are micro-illustrations with one job: communicate one idea in 24×24px. Design a set of 10 icons for a single theme (e.g. coffee, travel, or finance) using a consistent stroke weight (2px), corner radius, and visual style. Export as SVG. Icon consistency is what separates amateur from professional UI work.
Watch on YouTube
📌 Midjourney for Visual ReferencesMidjourney generates photorealistic and illustrated images from text prompts. Use it for mood board creation, concept visualisation, and client presentation mockups — not to replace your design work, but to accelerate the ideation phase. Learn prompt structure: subject + style + lighting + aspect ratio + quality flags.
Watch on YouTube
📌 Adobe Firefly & AI Image EditingAdobe Firefly is integrated directly into Photoshop and Illustrator. Learn Generative Fill (extend backgrounds, remove objects, replace sky), Text to Image (generate assets within your design), and Generative Expand (extend cropped photos). These tools have replaced hours of manual compositing work.
Watch on YouTube
📌 Building an AI-Assisted WorkflowThe winning workflow combines AI speed with designer judgment: Midjourney for concepts → Figma for layout → Firefly for photo editing → manual refinement for brand consistency. Practice this full pipeline on one brief: generate a hero image in Midjourney, place it in a Figma landing page, then extend and grade it with Firefly.
Watch on YouTube
📌 Motion & Micro-Animations with Figma Smart AnimateMotion communicates state changes — a button press, a page transition, a loading state. Figma Smart Animate automatically interpolates between two frames if elements share the same name. Build 3 micro-interactions: a button press (scale down on click), a card hover (shadow increases + slight lift), and a toggle switch (circle slides across). These animations belong in every UI portfolio piece.
Watch on YouTube
📌 Texture, Grain & Modern Design AestheticsThe flat design era is evolving. Modern high-end design reintroduces grain (film noise overlaid at low opacity), texture (paper, fabric, concrete), and subtle gradients to add depth and tactility. In Figma: add a grain texture PNG at 5–15% opacity over a flat background. In Photoshop: use Add Noise filter (Gaussian, 2–4%). These micro-details are what make work feel premium.
Watch on YouTube
⚡ Stage 11 Cheatsheet — Illustration & AI Tools
Flat Illustration
Geometric shapes + max 5 colours + no gradients = flat style
Icon Grid
24×24px base · 2px stroke · 2px corner radius · 2px padding
Icon Export
SVG for web/UI · PNG @2x for print · Keep to 24px grid
MJ Prompt
[subject], [style], [lighting], [camera], --ar 16:9 --q 2
MJ Styles
--style raw (realistic) · --niji (anime) · --v 6 (latest)
Firefly Gen Fill
Select area in Photoshop → Generative Fill → type what to add
Firefly Expand
Crop tool → drag beyond image edge → Generative Expand
AI Rule
AI accelerates ideation — your design judgment is still the product
Smart Animate
Name layers identically in 2 frames → Figma interpolates automatically
Easing
Ease Out = natural deceleration · Ease In-Out = smooth both ends
Grain Overlay
PNG noise texture · Blend Mode: Overlay or Soft Light · 5–15% opacity
Gradient Trend
Subtle 2-colour mesh gradients · avoid rainbow/rainbow gradients
✦ Pro Tip

Designers who ignore AI tools are losing work to designers who use them. But AI without design knowledge produces generic output. Your edge is using AI to go 10× faster while applying taste, brand logic, and hierarchy that the AI cannot supply on its own.

Daily Focus
📌 Building a Framer Portfolio SiteFramer lets you build a professional designer portfolio site without writing any code. Choose a minimal template, customise it with your brand colours and typefaces from Stage 3, and register yourname.com. A live URL is your most important professional asset — it's the first thing clients and employers look for.
Watch on YouTube
📌 Writing Design Case StudiesCase studies answer the client's real question: can you solve problems like mine? Structure each in 80–120 words: Problem (what needed solving) → Approach (how you thought about it) → Solution (what you designed) → Result (what happened). Clarity beats length — nobody reads long case studies.
Watch on YouTube
📌 Portfolio Mockup ConsistencyRe-export and re-mockup your top 5 pieces to a consistent visual standard — same mockup style, same background colour, same presentation format. Consistency across your portfolio reads as more professional than any single standout piece. It signals you understand brand, not just execution.
Watch on YouTube
📌 About Page Bio WritingWrite your bio in 100 words using this formula: who you design for + what you specialise in + your angle. 'I design brand identities for food and hospitality businesses' is 10× better than 'I'm a passionate creative who loves design.' Specificity signals expertise; vagueness signals uncertainty.
Watch on YouTube
📌 Publishing & Getting FeedbackPublish your site and send the URL to 5 people. Ask one question: 'Is it immediately clear what I do and who I do it for?' If 3 out of 5 hesitate, your positioning needs clarifying. Share on LinkedIn with a short post about what you built and what you learned — this begins your public design presence.
Watch on YouTube
📌 LinkedIn Content Strategy for DesignersLinkedIn is the highest-conversion platform for design clients and employers — but only with consistent content. Post 3 types: process posts (behind-the-scenes of a project), insight posts (one thing you learned this stage), and case study posts (problem → solution in 5 lines + images). Post twice a week minimum. The algorithm rewards consistency far more than quality of any single post.
Watch on YouTube
📌 Behance SEO & DiscoveryBehance is indexed by Google and browsed by recruiters — but only if your projects are findable. Optimise every project: keyword-rich title (e.g. 'Brand Identity Design for Sustainable Architecture Studio'), tags (logo design, brand identity, Figma, typography), project description with your process, and tools used. A well-optimised Behance project ranks on Google within 2–4 weeks.
Watch on YouTube
⚡ Stage 9 Cheatsheet — Portfolio & Case Studies
Case Study Formula
Problem → Approach → Solution → Result (80–120 words)
Framer Setup
Minimal template + your colours + your type + custom domain
Bio Formula
"I design [what] for [who]" — specific beats passionate every time
Portfolio Rule
5 curated pieces beats 20 average pieces — always
Consistency
Same mockup style across all pieces = perceived professionalism
Contact Page
Email link + LinkedIn + portfolio on every page footer
Feedback Question
"Is it immediately clear what I do and who I do it for?"
Deliverable
Live URL: 5 projects, 3 case studies, bio, contact — share on LinkedIn
LinkedIn Posts
Process · Insight · Case Study — rotate 3 types, post 2×/week
Behance Title
Include keywords: 'Brand Identity Design for [niche] — [tool]'
Behance Tags
Max 20 tags: mix broad (logo) + specific (café branding Figma 2024)
Build in Public
Document your learning — followers become your first clients
✦ Pro Tip

5 curated pieces with great case studies will always outperform 20 pieces with no context. Clients don't have time to guess what you were trying to achieve. Tell them clearly and they'll hire you faster.

Daily Focus
📌 Freelance Pricing ResearchReview 10 Fiverr and Upwork profiles in your niche to understand the market. Then set your own starting rates: logo from $150, social pack from $80, full brand identity from $400. Pricing too low signals low quality. Write these down as your formal price sheet — not an estimate, a document you own.
Watch on YouTube
📌 Proposal WritingA proposal is a one-page document covering: scope → deliverables → timeline → price → revision rounds → payment terms. Write a reusable template now. One page maximum — brevity signals professionalism. A signed proposal protects you legally and sets clear expectations before work begins.
Watch on YouTube
📌 Upwork & Fiverr Profile SetupCreate profiles on both platforms with a specific headline, focused bio, and 3 gig offerings using your portfolio as proof. The headline is the most-read element — be specific: 'Brand Identity Designer for Hospitality & Food Businesses' outperforms 'Creative Graphic Designer' in search and conversion.
Watch on YouTube
📌 LinkedIn Presence for DesignersUpdate your LinkedIn headline ('Graphic Designer — Brand Identity & Social Media'), add your portfolio URL, and write 3 posts this stage about your design learning process. LinkedIn drives inbound leads from businesses — clients trust platforms where they can verify your background and see social proof.
Watch on YouTube
📌 Cold Outreach StrategySend 10 messages to local businesses with dated or weak branding. The key: offer a free 5-minute brand audit, not a sales pitch. Spend 20 minutes making a before/after mockup for one real business and send it unsolicited. Demonstrating value before asking for anything converts 3–5× better than pitching.
Watch on YouTube
📌 Value-Based Pricing vs HourlyHourly pricing punishes you for getting faster. Value-based pricing charges based on the outcome's worth to the client — not the time it took you. A logo that earns a client $50,000/year is worth $2,000, not 10 hours at $50/hr. To quote value-based: ask 'what is this worth to your business if it works?' then price at 5–10% of that. This one mindset shift doubles average project value.
Watch on YouTube
📌 Passive Income Streams for DesignersYour skills can earn while you sleep. Three proven streams: 1) Template packs on Creative Market or Gumroad ($25–$150 per sale, sell forever), 2) Notion/Figma UI kits for other designers ($15–$80), 3) Digital courses or tutorials on Gumroad or Teachable. Start with templates — one well-designed pack built in Stage 6 can cover a month's expenses passively within 6 months.
Watch on YouTube
📌 The Retainer Model — Monthly Recurring RevenueA retainer is a fixed monthly fee for an agreed scope of ongoing work — the most stable income model in freelancing. Typical design retainer: 8 social graphics + 1 monthly email template + minor brand updates = $400–$800/month. Structure it as: fixed deliverables + defined revision rounds + monthly invoice on the 1st. One strong retainer client eliminates the feast-or-famine cycle that kills most freelance careers.
Watch on YouTube
⚡ Stage 10 Cheatsheet — Pricing & Finding Clients
Starter Rates
Logo from $150 · Social pack from $80 · Full brand from $400
Proposal Structure
Scope → Deliverables → Timeline → Price → Revisions → Payment
Revision Limit
Always state "2 rounds of revisions included" upfront
Upwork Headline
Be specific: "Brand Identity Designer for Hospitality" not "Creative"
Cold Outreach
Offer free brand audit — not a pitch. Value first, ask second.
Before/After
Spend 20 mins making a before/after mockup for a real business
Follow-Up
Follow up once after 5 days. No response after that = move on.
Deliverable
Active Upwork + Fiverr + LinkedIn profiles. 10 outreach messages sent.
Value Pricing
Ask: what's this worth to them? Price at 5–10% of that outcome
Hourly Trap
Never charge hourly for strategy or concepts — only for revisions
Creative Market
Upload templates · set price · collect royalties — no client needed
Gumroad
Sell direct: templates, kits, guides — 10% fee, instant payout
Retainer Formula
Fixed deliverables + revision limit + monthly invoice on the 1st
Retainer Range
$400–$800/mo starter · $1,500–$3,000/mo for full brand management
✦ Pro Tip

"Free audit" outreach converts 3–5× better than pitching. Spend 20 minutes making a before/after mockup for a real business and send it unsolicited. You're proving your value before asking for anything — this is how first clients are won.

Daily Focus
📌 Client Onboarding & BriefSend your first client a written brief questionnaire with 8 questions: who is the audience, who are the competitors, what is the tone, what examples do they love, what is the deadline? A written brief prevents misunderstandings and makes you look like a professional, not a freelancer doing favours.
Watch on YouTube
📌 Presenting Concepts (Not Finals)Present 2–3 initial directions — not finished designs. Show strategic options: 'Direction A is bold and modern, Direction B is warm and approachable — which feels closer to your vision?' Asking clients to choose between directions is far more productive than asking them to approve a finished piece.
Watch on YouTube
📌 Incorporating Feedback & RevisionsFeedback is not criticism — it's information about what the client needs. Don't defend your design; ask 'what feeling does this miss for you?' or 'what does the approved direction need more of?' Every real project includes revisions. The designers who thrive are the ones who use feedback to improve, not resist.
Watch on YouTube
📌 File Delivery & InvoicingDeliver a complete file package: PNG at multiple sizes, SVG (scalable), PDF (print-ready), and a one-page usage guide explaining which file to use where. Send an invoice via Wave or PayPal with clear payment terms (due within 7 days). Professional packaging justifies premium pricing.
Watch on YouTube
📌 Testimonials & Client RetentionWithin 3 days of delivery, ask for a written testimonial — make it easy by providing a prompt: 'How would you describe working with me and the result?' Add the project to your live portfolio with their permission. Follow up in 2 stages. This one habit converts one-time clients into repeat revenue.
Watch on YouTube
📌 Scope Creep & How to Stop ItScope creep is when clients add requests beyond the original agreement — 'can you just also do the website?' is the classic example. Prevention: define scope in writing before starting, state what is NOT included, and respond to additions with 'that's outside our current scope — here's what it would cost to add'. Every designer loses money to scope creep until they set this system up. Set it up before your first paid project.
Watch on YouTube
📌 Contracts & IP OwnershipWithout a contract, you have no legal protection. Three clauses every design contract must include: 1) Kill fee (client pays 25–50% if they cancel mid-project), 2) IP transfer (copyright only transfers on full payment), 3) Approval sign-off (written approval freezes scope). Use HelloSign or DocuSign for free e-signatures. A one-page contract drafted today protects every project from now on.
Watch on YouTube
📌 Client Red Flags — When to Walk AwayThe clients who waste the most of your time are identifiable before you start. Walk away from: 'I'll know it when I see it' (no brief), 'I have a tiny budget but huge potential' (pays in exposure), requesting spec work before hiring, pushing on your pricing without discussion, wanting to own copyright before paying, and anyone who has fired 3 previous designers. Saying no to one bad client frees up time for two good ones. Your hourly rate for difficult clients is always negative.
Watch on YouTube
⚡ Stage 11 Cheatsheet — First Client Project
Brief Questions
Audience · Competitors · Tone · Examples they love · Deadline
Present Directions
Show 2–3 strategic directions, not 1 finished design
Feedback Response
"What feeling does this miss for you?" — not "Do you like it?"
Revision Mindset
Feedback = information. It refines the work, not your ego.
File Package
PNG (all sizes) + SVG + PDF + 1-page usage guide + invoice
Invoice Terms
Due within 7 days. Use Wave (free) or PayPal invoicing.
Testimonial Ask
Ask within 3 days of delivery — response rate drops after a week
Deliverable
Delivered + invoiced project · Written testimonial · Live on portfolio
Scope Response
'That's outside scope — I can add it for $X with Y extra days'
Kill Fee
25–50% of project fee owed if client cancels after work begins
IP Transfer
Copyright stays with designer until final payment clears — always
E-Signature
HelloSign (free 3/mo) · DocuSign · PandaDoc — all legally binding
Red Flag List
'I'll know it when I see it' · spec work · exposure pay · fired 3 designers
The Rule
One bad client costs you 2 good ones in time and energy — decline early
✦ Pro Tip

State revision rounds upfront: "This project includes 2 rounds of revisions." Most clients won't use them — but the limit protects you from the 10% who revise endlessly. Boundaries make you look experienced, not difficult.

Daily Focus
📌 Portfolio AuditView your portfolio as a stranger would — remove anything you wouldn't want to be hired for, even if it took you a long time to make. 6 great pieces outperforms 12 mediocre ones every time. Your weakest piece sets the floor of what clients expect from you. Ruthless curation is a professional skill.
Watch on YouTube
📌 Design Skills Self-AssessmentRate yourself honestly 1–5 on six skills: typography, colour, layout, logo design, Figma proficiency, and client communication. Find your weakest area (usually the one you've been avoiding) and spend 2 focused hours on it today. Self-assessment without action is just self-awareness — convert it into deliberate practice.
Watch on YouTube
📌 Applying for Jobs & GigsApply for 10 junior designer jobs on LinkedIn or post 3 new gigs on Upwork/Fiverr. Apply before you feel ready — the gap between 'not ready' and 'ready' is never filled by more learning, only by real feedback from applications. A 10% response rate at this stage is positive data, not rejection.
Watch on YouTube
📌 Daily Design Practice HabitBlock 30 minutes every morning for deliberate practice before client work or job applications. Use Daily UI prompts, recreate designs you admire, or study one designer on Dribbble. Skill compounds daily — 30 minutes every day for 90 days creates a transformation that bingeing tutorials never does.
Watch on YouTube
📌 Introduction to Phase 2: Video EditingResearch CapCut (beginner-friendly, mobile) or DaVinci Resolve (professional, free desktop). Watch one intro video editing tutorial and notice how your design eye transfers immediately — colour grading uses the same principles as brand colour, composition in frames uses the same rules as layout. Your head start is real.
Watch on YouTube
📌 Niche Specialisation StrategyGeneralists compete on price. Specialists command premium rates. Choose a niche by the intersection of what you're good at + what clients pay most for + what you enjoy. Top niches: SaaS UI design, food & hospitality branding, health & wellness identity, fintech UI, and luxury brand design. Pick one and reframe your portfolio, bio, and outreach around it. A specialist with 5 relevant pieces earns more than a generalist with 20.
Watch on YouTube
📌 Building Your Personal Brand as a DesignerYour personal brand is the sum of what people think of when they hear your name. Build it through: a consistent visual identity across all platforms (same profile photo, colours, type), a content niche (post about one thing consistently — brand design, logo process, AI tools), and a point of view (you don't need to be controversial, but you need a perspective). Designers with personal brands attract inbound clients — they don't chase work.
Watch on YouTube
📌 Design Communities & Finding a MentorThe fastest designers improve through feedback from people better than them, not more tutorials. Join: Dribbble (post work, get seen by recruiters), Figma Community (study how pros structure files), Design Twitter/X (follow 20 working designers, engage genuinely), and Discord servers (Dribbble, Figma, brand.wtf). Find one person 2–3 years ahead of you and ask one specific question per month. Mentorship is not formal — it's consistent exposure to better thinking.
Watch on YouTube
⚡ Stage 12 Cheatsheet — Review & Phase 2 Prep
Portfolio Cull
Remove anything you wouldn't want to be hired for. 6 > 12.
Self-Rate
Score 1–5: typography · colour · layout · logo · Figma · client comms
Apply Early
Apply before you feel ready — feedback > self-study always
Daily Practice
30 min every morning before client work — block it for 90 days
Daily UI
100 design prompts by email — one per day, 30–60 mins each
Dribbble Habit
20 mins daily: ask "what's the grid? why does this feel premium?"
Phase 2 Tools
CapCut (mobile beginner) · DaVinci Resolve (free, professional)
You're a Designer
Portfolio live · 1 paid project · Profiles active · Phase 2 begins
Niche Formula
What you're good at + what pays most + what you enjoy = niche
Top Niches
SaaS UI · F&B Branding · Health Identity · Fintech · Luxury Brand
Personal Brand
Consistent visuals + content niche + clear point of view = inbound
Inbound Funnel
Post → Follow → DM → Brief — takes 3–6 months to activate
Communities
Dribbble · Figma Community · Design Twitter · brand.wtf Discord
Mentor Ask
One specific question/month to someone 2–3 years ahead — not 'review my work'
✦ Pro Tip

You don't need all 4 skills to earn. Design supports a full freelance income on its own. But adding video editing in Phase 2 will increase your average project value by 40–60%. The skills stack on purpose — each multiplies the last.

Your Stack

Six tools,
one clear order.

Start with Canva in Stage 1, move to Figma in Stage 3. Layer in everything else only when you need it.

Stages 1–2 · Start Here
Canva
Drag-and-drop interface that lets you focus on design decisions without software friction. Learn layout, colour, and type here — then move to Figma once you understand what you're building.
Free · Graduate after Stage 2
Stage 3+ · Master This
Figma
The industry standard. UI, brand identity, social — it handles everything. Auto-layout and components make your work scalable. The free tier is more than enough for a full design practice.
Free · Never stop learning this
Stage 5+ · Advanced Vector
Illustrator
Adobe's vector tool for logos, illustrations, and print work. The pen tool is more precise than Figma's. Learn this after you're comfortable in Figma — it unlocks premium logo and print projects.
Paid · Optional but valuable
Stage 2+ · Post Everything
Behance
Adobe's portfolio platform — indexed by Google, browsed by clients and recruiters. Post every piece as you complete it. The progression across 12 stages is itself a compelling story.
Free · Start posting Stage 2
Stage 9 · Your Sales Asset
Framer
Build a beautiful portfolio site without code. A live URL with real work and written case studies converts more clients than any CV or PDF portfolio ever will.
Free tier available · Worth investing in
Daily · Train Your Eye
Dribbble
20 minutes every morning studying top designers. Ask for every piece: what is the grid? What is the hierarchy? Why does this feel expensive? This trains your eye faster than any course.
Free to browse · Make it a daily habit
Phase Milestones

Four things to prove
before Phase Two.

Don't rush to Video Editing until these are done. Each is a proof point — for clients, employers, and yourself.

💰
Land Your First Paid Project
Even $50 counts. A logo for a friend, a social pack for a local café, a poster for an event. Real money from real work is the milestone — not the amount. Once paid once, the barrier is gone forever.
🌐
Publish a Live Portfolio
A Framer site or Behance page with 5 pieces, each with a 3-sentence case study: Brief → Approach → Result. A live URL you can share immediately when someone asks. Without this, you don't exist as a designer.
Master Figma Fundamentals
Components, auto-layout, design tokens, variants. You should be able to take any brief and build it in Figma without Googling every step. Speed and confidence in your primary tool is non-negotiable.
🖊️
Apply to 10 Jobs or Gigs
LinkedIn, Upwork, Fiverr. Apply before you feel ready — real feedback improves you faster than more tutorials. A 10% response rate is normal and positive at this stage. Rejection is data, not failure.
Free Resources

Everything you need
costs nothing.

The highest-signal free resources for each part of the curriculum. Use one at a time — not all at once.

YouTube · Stages 1–10
Design Course
Gary Simon covers real UI and graphic design projects from brief to final file. Practical and project-based — far more useful than theory-only content.
Free
YouTube · Stages 3–15
Figma's Official Channel
Team-produced tutorials — the clearest and most current. Start with "Figma for Beginners" series of four parts, then continue learning components, layouts, and prototyping.
Free
YouTube · Stages 5–15
Flux Academy
Ran Segall covers freelance design business alongside the craft — pricing, clients, positioning. A rare combination of skill and business thinking.
Free
Tool · Ongoing
Coolors.co
Instant palette generator. Press spacebar to cycle. Lock colours to keep. Has contrast checking and export tools built in. Your daily colour companion.
Free
Practice · Stages 3–15
Daily UI Challenge
100 design prompts sent by email. Perfect for building Figma speed and filling your portfolio with varied work. One prompt a day, 30–60 minutes of focused practice.
Free
Reference · Stages 1–5
Google Fonts
1,400+ free fonts with category filters and pairing suggestions. Essential reference for every typography decision you'll make across all 12 stages.
Free
Earnings Reality

What design
actually pays.

Conservative freelance estimates at each stage. Assumes part-time effort (2–3 hrs/day). Full-time accelerates every number.

Stages 1–5
$0–$300
per month
Building proof. First project. Focus on portfolio, not profit.
Stages 6–10
$200–$800
per month
Portfolio live, social presence growing, first paying clients.
Stages 11–15
$500–$2k
per month
Repeat clients, referrals, applying for roles in parallel.
Post Phase 1
$2k–$5k
per month
Design + Video bundle unlocked. Retainer clients. You're a professional.
Up Next · Phase 02
Video Editing.

Your design eye is the unfair advantage. Knowing how to compose a frame, grade colour, and build hierarchy transfers directly into video. Short-form content is the highest-demand creative skill right now — and you already think visually.

Phase 2 →