UI/UX Design
Design interfaces people enjoy using.
The principles, tools and references for designing clear, accessible products.
107 resourcesSuggest a resource
Learning path
Work through these in order. Each step builds on the last.
Step 3: Visual design
Everything in UI/UX Design
Laws of UX
The psychology principles behind good interfaces, one card at a time.
lawsofux.com
10 Usability Heuristics
Nielsen Norman Group's classic rules of thumb for usable design.
nngroup.com
Figma on YouTube
Official tutorials, from your first frame to auto layout and prototyping.
youtube.com
Refactoring UI
Practical tactics for designing good-looking interfaces without a design background.
refactoringui.com
Practical Typography
Matthew Butterick's free online book on making text look good.
practicaltypography.com
Coolors
Generate and explore colour palettes in seconds.
coolors.co
WebAIM Contrast Checker
Check that your text colours are readable for everyone.
webaim.org
Inclusive Components
How to build common UI patterns so they work for everyone.
inclusive-components.design
Mobbin
A library of real app screens and flows for reference. Free tier available.
mobbin.com
Dribbble
Where designers share work. Good for inspiration and feedback.
dribbble.com
UX Design Roadmap
The skills a UX designer learns, in order.
roadmap.sh
Material Design 3
Google's open design system with guidelines, components and theming for every platform.
m3.material.io
Apple Human Interface Guidelines
Apple's official guidance for designing apps on iPhone, iPad, Mac, Watch and Vision Pro.
developer.apple.com
Fluent 2 Design System
Microsoft's design language, with principles, tokens and components for Windows and the web.
fluent2.microsoft.design
Carbon Design System
IBM's open-source design system, known for clear docs on components, patterns and accessibility.
carbondesignsystem.com
Shopify Polaris
Shopify's design system, a good example of components, content guidelines and tokens done well.
shopify.dev
Atlassian Design System
The foundations, components and content rules behind Jira, Confluence and Trello.
atlassian.design
GOV.UK Design System
Battle-tested, accessible patterns from the UK government, backed by real user research.
design-system.service.gov.uk
The Component Gallery
Compare how dozens of design systems build the same UI component, from buttons to tabs.
component.gallery
Atomic Design
Brad Frost's free book on building interfaces from atoms up to full pages, the basis of modern design systems.
atomicdesign.bradfrost.com
Figma Help Center
Official Figma docs and beginner courses covering frames, auto layout, components and prototyping.
help.figma.com
Figma Design Basics
Figma's free articles on core design concepts like hierarchy, layout and colour.
figma.com
Figma Community
Thousands of free UI kits, templates, icon sets and plugins to remix and learn from.
figma.com
Figma Forum
Ask Figma questions and get help from other designers and Figma staff.
forum.figma.com
Penpot
A free, open-source design and prototyping tool that runs in the browser and can be self-hosted.
penpot.app
Google UX Design Certificate
Google's beginner UX program on Coursera, free to audit, covering research, wireframes and Figma.
coursera.org
Interaction Design Foundation Literature
A huge free library of articles and an encyclopedia covering UX, HCI and interaction design.
ixdf.org
Gestalt Principles
How people perceive grouping, proximity and similarity, and how to use it in layouts.
ixdf.org
Nielsen Norman Group Articles
Research-backed articles on usability, UX research and interaction design from the field's leading firm.
nngroup.com
NN/g on YouTube
Short, practical videos on UX principles and research methods from Nielsen Norman Group.
youtube.com
When to Use Which UX Research Methods
A map of 20 research methods and when each one actually helps.
nngroup.com
The Design of Everyday Things
Don Norman's classic on affordances, feedback and why everyday objects confuse us.
jnd.org
Don't Make Me Think
Steve Krug's short, funny classic on web usability and simple usability testing.
sensible.com
The Elements of User Experience
Jesse James Garrett's model of the five planes of UX, from strategy to surface.
jjg.net
The Design Sprint
Google Ventures' five-day process for prototyping and testing ideas with real users.
gv.com
UX Myths
Common UX misconceptions debunked with research, like the three-click rule.
uxmyths.com
Growth.Design Case Studies
Comic-style breakdowns of real product UX and the psychology behind it.
growth.design
UI Patterns
A catalogue of common UI design patterns with the problem each one solves.
ui-patterns.com
Checklist Design
Checklists of what every page, component and flow should include.
checklist.design
Hack Design
A free, curated design course of lessons from working designers.
hackdesign.org
UX Tools
Practical UX lessons, challenges and an annual survey of the tools designers use.
uxtools.co
UX Peak
Daily design challenges and a gallery of UI concepts to practise on.
uxpeak.com
Smashing Magazine
Long-running magazine with in-depth articles on UX, UI, accessibility and front-end.
smashingmagazine.com
UX Collective
One of the largest UX publications, with essays, case studies and a weekly newsletter.
uxdesign.cc
Sidebar
The five best design links of the day, curated by Sacha Greif.
sidebar.io
99% Invisible
A beloved podcast about the hidden design of everyday objects, buildings and systems.
99percentinvisible.org
Web Typography
Richard Rutter's free book on choosing, setting and pairing type for the web.
book.webtypography.net
Google Fonts
Over 1,500 free, open-source font families ready for web and print.
fonts.google.com
Fontshare
High-quality free fonts from Indian Type Foundry for personal and commercial use.
fontshare.com
Typewolf
Font recommendations, pairings and real-world examples of type in use.
typewolf.com
Type Scale
Preview and generate a harmonious set of font sizes for your design.
typescale.com
Fontjoy
Generate font pairings with machine learning and preview them instantly.
fontjoy.com
Adobe Color
Build palettes from colour harmony rules or images, with built-in accessibility checks.
color.adobe.com
Realtime Colors
Preview your palette and fonts on a real website layout as you tweak them.
realtimecolors.com
Color Hunt
A free, community-curated collection of thousands of colour palettes.
colorhunt.co
Happy Hues
Curated palettes shown applied to a full page, so you see how colours work together.
happyhues.co
Radix Colors
An open-source colour system with accessible scales for light and dark mode.
radix-ui.com
Leonardo
Adobe's open-source tool for generating colour scales based on target contrast ratios.
leonardocolor.io
WCAG Quick Reference
The official, filterable checklist of Web Content Accessibility Guidelines.
w3.org
The A11Y Project
A community resource with a checklist and plain-language guides to digital accessibility.
a11yproject.com
WebAIM
Long-standing articles and tools on making the web accessible, from screen readers to forms.
webaim.org
Who Can Use
See how a colour pair looks to people with different kinds of vision.
whocanuse.com
Learn Accessibility
Google's free web.dev course on designing and building accessible websites.
web.dev
Inclusive Design Principles
Seven short principles for designing products that work for as many people as possible.
inclusivedesignprinciples.info
Microsoft Inclusive Design
Microsoft's free toolkit and methods for designing with people who are excluded.
inclusive.microsoft.design
Material Motion
Google's guidance on easing, duration and transitions that make interfaces feel natural.
m3.material.io
Rive
Design interactive animations and state machines that run in apps, games and websites.
rive.app
LottieFiles
Free lightweight animations you can drop into apps and sites, plus tools to make your own.
lottiefiles.com
Framer
Design and publish interactive websites with real animations, no code needed.
framer.com
Excalidraw
A free hand-drawn style whiteboard, great for wireframes and user flows.
excalidraw.com
Storybook
The standard tool for building and documenting UI components in isolation.
storybook.js.org
Behance
Adobe's platform for full design case studies and portfolios.
behance.net
Awwwards
Award-winning websites, judged daily on design, usability and creativity.
awwwards.com
Land-book
A large gallery of landing pages and websites sorted by style and industry.
land-book.com
Lapa Ninja
Thousands of landing page examples to study layout and copy.
lapa.ninja
Page Flows
Recorded user flows from real apps, like onboarding and checkout.
pageflows.com
Refero
A searchable library of real web and mobile UI screens for reference.
refero.design
Collect UI
Daily UI inspiration sorted into categories like login, pricing and settings.
collectui.com
Siteinspire
A hand-picked showcase of well-designed websites.
siteinspire.com
Lucide
A clean, consistent open-source icon set with packages for every framework.
lucide.dev
Heroicons
Free, hand-crafted SVG icons from the makers of Tailwind CSS.
heroicons.com
Phosphor Icons
A flexible icon family with six weights and thousands of icons.
phosphoricons.com
Material Symbols
Google's free icon library with adjustable weight, fill and size.
fonts.google.com
Feather Icons
Simple, beautiful open-source icons on a 24px grid.
feathericons.com
Tabler Icons
Over 5,000 free MIT-licensed SVG icons with Figma support.
tabler.io
Iconify
Search over 200,000 icons from 150+ open-source icon sets in one place.
icon-sets.iconify.design
Font Awesome
The classic icon library with a large free tier.
fontawesome.com
Remix Icon
Open-source neutral-style icons in line and fill variants.
remixicon.com
unDraw
Free, open-licence illustrations you can recolour to match your brand.
undraw.co
Humaaans
Mix-and-match illustrations of people by Pablo Stanley.
humaaans.com
Open Peeps
A free hand-drawn illustration library of people you can combine.
openpeeps.com
Storyset
Free customizable and animatable illustrations from Freepik.
storyset.com
DrawKit
Hand-drawn vector illustrations and icons, many of them free.
drawkit.com
Unsplash
Free high-resolution photos for mockups and real projects.
unsplash.com
Pexels
Free stock photos and videos shared by creators.
pexels.com
DesignCourse
Gary Simon's channel on UI/UX design, Figma and front-end development.
youtube.com
The Futur
Lessons on design, branding, typography and the business of being a designer.
youtube.com
Flux Academy
Web design tutorials, critiques and career advice for aspiring designers.
youtube.com
AJ&Smart
UX process, design sprints and workshop facilitation from a product design studio.
youtube.com
Kole Jain
Practical UI design tips and redesigns of real apps.
youtube.com
Mizko
Product design lessons, Figma workflows and design career advice.
youtube.com
Jesse Showalter
UI/UX tutorials, livestreams and portfolio advice.
youtube.com
Juxtopposed
Engaging videos on UI design, web design and creative interfaces.
youtube.com
Charli Marie
A designer's take on web design, Figma workflows and life in the industry.
youtube.com
r/UXDesign
A large community for UX questions, portfolio reviews and career talk.
reddit.com
ADPList
Book free mentorship calls with designers from companies around the world.
adplist.org
Uxcel
Bite-sized interactive UX and UI lessons and skill tests, with a free tier.
uxcel.com
Nothing here matches those filters.