A free, no-fluff learning roadmap for new designers.
Built by a UK-based, award-winning brand designer with 10+ years in the industry.
Adapt or Die. 🚀
This repo is for anyone starting their journey in design — whether you've just picked up Figma for the first time, you're switching careers, or you're a developer who wants to level up their design eye.
No paywalls. No gatekeeping. Just the real stuff.
Follow the stages in order. Each one builds on the last.
Before you touch any tool, understand the basics. These are the principles every great designer works from.
Core concepts to learn:
- The Elements of Design — line, shape, form, space, texture, value, colour
- The Principles of Design — balance, contrast, emphasis, rhythm, unity, hierarchy
- Colour theory — hue, saturation, value, warm/cool, colour harmony
- Typography basics — typefaces, font pairing, hierarchy, spacing, readability
- Grid systems — columns, gutters, baselines
Recommended free resources:
- Canva Design School — beginner-friendly fundamentals
- Google Fonts Knowledge — the best free typography resource online
- Laws of UX — psychology-backed UX principles, beautifully presented
Pick your tools. Learn them properly. Don't chase every new app.
Design:
- Figma (free tier available) — industry standard for UI/UX and web design
- Adobe Express (free tier) — quick brand and social content
- Penpot (free, open source) — great Figma alternative
Prototyping & Wireframing:
- Figma (built-in prototyping)
- Whimsical — fast wireframing and flowcharts
Asset Creation:
Colour:
- Coolors — colour palette generator
- Realtime Colors — preview palettes on a live UI
Typography:
- Google Fonts — free, high quality typefaces
- Font Pair — curated font combinations
Brand is more than a logo. It's a system.
What to learn:
- Logo design — mark, wordmark, combination marks
- Brand guidelines — colour systems, typography rules, tone of voice
- Visual consistency across touchpoints
- Designing for print vs digital
Practice exercises:
- Design a logo for a fictional coffee shop
- Build a one-page brand guidelines document
- Create three versions of a logo (dark, light, icon-only)
Resources:
- Brand New — industry brand identity reviews and case studies
- Logology Blog — logo design deep dives
- Fonts In Use — real-world typography inspiration
Good-looking design that doesn't work is just decoration.
What to learn:
- UX fundamentals — user research, personas, user journeys, wireframing
- UI fundamentals — components, design systems, spacing, alignment
- Accessibility — contrast ratios, font sizes, touch targets, screen readers
- Responsive design — mobile-first thinking, breakpoints
- Interaction design — micro-interactions, transitions, feedback states
Practice exercises:
- Redesign an app screen you find frustrating
- Map a user journey for a simple checkout flow
- Build a component library in Figma (buttons, inputs, cards)
Resources:
- Nielsen Norman Group — the gold standard in UX research and articles
- UX Collective — practical UX/UI writing and case studies
- Refactoring UI — UI design tips from the makers of Tailwind CSS
- Mobbin — real app UI pattern library for inspiration
Understanding how your designs actually get built makes you a better designer.
What to learn:
- HTML & CSS basics — enough to speak the same language as developers
- Web typography — web-safe fonts, variable fonts, rem/em units
- Layout principles — flexbox, grid, spacing systems
- Performance basics — image formats, file sizes, lazy loading
- Design handoff — how to prepare files for developers
Practice exercises:
- Build a simple landing page in HTML & CSS from your own design
- Recreate a website layout pixel-perfectly in Figma from a live site
- Export and optimise assets for the web from a Figma file
Resources:
- Kevin Powell on YouTube — the best CSS teacher on the internet
- CSS Tricks — deep dives into web layout and styling
- web.dev — Google's resource for modern web best practices
Movement adds life. But less is almost always more.
What to learn:
- Principles of animation — easing, timing, anticipation, follow-through
- Micro-interactions — hover states, loading indicators, transitions
- When NOT to animate — respecting reduced motion preferences
- Tools — Figma Smart Animate, CSS transitions, Rive, After Effects
Practice exercises:
- Animate a button hover and active state in Figma
- Create a simple logo reveal animation
- Design a loading screen animation for an app
Resources:
- Rive — interactive animation for apps and web
- Motion Design School — structured motion courses (paid, worth it)
- UI Movement — daily UI animation inspiration
Design skills get you in the room. Everything else keeps you there.
What to learn:
- Building a portfolio — quality over quantity, show your process
- Case studies — how to write them, what clients and employers look for
- Pricing your work — don't undersell, know your worth
- Client communication — briefs, feedback rounds, contracts
- Continuous learning — design never stops evolving
Tips from the field:
- Your first three portfolio pieces will be your worst. Make them anyway.
- Learn to take feedback without ego. It's about the work, not you.
- Specialise eventually, but stay curious about everything.
- The best designers are also great communicators.
- Adapt or Die. 🚀
Resources:
- Read.cv — clean portfolio profiles for creatives
- Dribbble — portfolio and design inspiration community
- Behance — showcase work and get discovered
- The Futur — business of design, pricing, and client work
| Category | Tool | Free? |
|---|---|---|
| UI/UX Design | Figma | ✅ Free tier |
| Vector Design | Inkscape | ✅ Fully free |
| Image Editing | GIMP | ✅ Fully free |
| Open Source Design | Penpot | ✅ Fully free |
| Colour Palettes | Coolors | ✅ Free tier |
| Typography | Google Fonts | ✅ Fully free |
| Wireframing | Whimsical | ✅ Free tier |
| Animation | Rive | ✅ Free tier |
| Inspiration | Mobbin | ✅ Free tier |
| Portfolio | Behance | ✅ Fully free |
Got a resource that genuinely helped you when you were starting out? Open a PR.
Keep it free, keep it beginner-friendly, keep it real.
Built and maintained by a UK-based award-winning brand designer.
10+ years working with SMEs and global clients across brand, UX/UI, web and DevOps.
"Adapt or Die."
If this helped you, drop a ⭐ — it helps other new designers find it.