NN/g UX articles (opens in a new tab)
Find evidence-informed explanations before deciding which UX method to use.
Module 01nngroup.com
UXCharan / Designer's resource library
A useful starting point
for every design task.
110 resources for students and working designers. Find a research method, a Figma workflow, an accessible pattern, or the right tool for your next project.
110 resources17 categoriesOrganised around your course
All resources
110 resources
Laws of UX (opens in a new tab)
Connect interface decisions to attention, memory, and human behaviour.
Module 01lawsofux.com
IDEO Design Kit (opens in a new tab)
Choose a human-centred design activity for discovery or ideation.
Module 01designkit.org
Smashing Magazine UX (opens in a new tab)
Read practitioner perspectives on interaction and product design problems.
Module 01smashingmagazine.com
Research method selection (opens in a new tab)
Match a research question to an appropriate qualitative or quantitative method.
Module 02nngroup.com
GOV.UK user research (opens in a new tab)
Plan studies, recruit participants, and make research useful to the team.
Module 02gov.uk
User Interviews 101 (opens in a new tab)
Prepare an interview that explores behaviour without leading participants.
Module 02nngroup.com
Dovetail (opens in a new tab)
Organise observations and connect findings to supporting evidence.
Module 02dovetail.com
Optimal Workshop (opens in a new tab)
Explore research tools for navigation, information architecture, and testing.
Module 03optimalworkshop.com
Journey Mapping 101 (opens in a new tab)
Map a person's experience across a task rather than only individual screens.
Module 02nngroup.com
Service blueprints (opens in a new tab)
Connect customer-facing actions to the processes that support a service.
Module 03nngroup.com
Condens (opens in a new tab)
Analyse interviews and build a searchable research repository with tagging and highlight reels.
Module 02condens.io
Marvin (opens in a new tab)
Record, transcribe and tag research sessions with AI-assisted summaries and a shared insights repository.
Module 02heymarvin.com
FigJam (opens in a new tab)
Collaborate on affinity maps, workshop boards, and early user flows.
Module 03figma.com
Miro (opens in a new tab)
Facilitate a remote workshop and organise a shared visual workspace.
Module 03miro.com
Excalidraw (opens in a new tab)
Sketch task flows with a deliberately low-fidelity visual style.
Module 03excalidraw.com
tldraw (opens in a new tab)
Quickly communicate a flow or idea on an online whiteboard.
Module 03tldraw.com
draw.io (opens in a new tab)
Document sitemaps, decision paths, and system relationships.
Module 03drawio.com
Figma Design (opens in a new tab)
Build screens, reusable components, and clickable product prototypes.
Module 05figma.com
Figma Resource Library (opens in a new tab)
Learn design concepts and practical workflows before applying them in Figma.
Module 05figma.com
Penpot (opens in a new tab)
Explore an open-source interface design and prototyping workflow.
Module 05penpot.app
Balsamiq (opens in a new tab)
Explore screen structure without getting distracted by visual polish.
Module 04balsamiq.com
ProtoPie (opens in a new tab)
Prototype interactions that need richer behaviour than simple screen links.
Module 04protopie.io
Figma Config 2026 recap (opens in a new tab)
Figma’s own summary of Figma Motion, code layers, Weave AI workflows and the updated design agent.
Module 05figma.com
Config 2026 Playground (opens in a new tab)
Hands-on Figma Community file for trying the Config 2026 features, such as motion and code layers, in a sandbox.
Module 05figma.com
Mobbin (opens in a new tab)
Compare real product screens and flows when studying interaction patterns.
Module 04mobbin.com
Behance (opens in a new tab)
Study how designers present projects and explain their creative work.
Module 08behance.net
One Page Love (opens in a new tab)
Compare hierarchy and storytelling in single-page websites.
Module 05onepagelove.com
Collect UI (opens in a new tab)
Explore visual approaches to common interface elements and screens.
Module 05collectui.com
UXArchive (opens in a new tab)
Study mobile journeys and the sequence of screens within a task.
Module 04uxarchive.com
Checklist Design (opens in a new tab)
Review common interface details and states before presenting a flow.
Module 04checklist.design
Growth.Design case studies (opens in a new tab)
Study product decisions through visual case studies and behavioural analysis.
Module 01growth.design
Refero (opens in a new tab)
Search a large library of real product screens and flows by pattern, such as onboarding, pricing and dashboards.
Module 05refero.design
Page Flows (opens in a new tab)
Watch recorded end-to-end user journeys from real products to study complete flows, not just single screens.
Module 03pageflows.com
Land-book (opens in a new tab)
Browse curated landing page designs for layout, typography and section ideas.
Module 05land-book.com
Lapa Ninja (opens in a new tab)
Explore landing page examples by category, with free design resources and learning links.
Module 05lapa.ninja
Awwwards (opens in a new tab)
Study award-winning websites for bold visual direction, interaction and motion ideas.
Module 05awwwards.com
Material Design (opens in a new tab)
Reference component behaviour and foundations when designing familiar interfaces.
Module 06m3.material.io
Apple Human Interface Guidelines (opens in a new tab)
Check platform conventions before designing for Apple devices.
Module 06developer.apple.com
IBM Carbon (opens in a new tab)
Study enterprise components, guidance, and system foundations.
Module 06carbondesignsystem.com
GOV.UK Design System (opens in a new tab)
Reference service patterns, accessible forms, and clear interaction guidance.
Module 06design-system.service.gov.uk
Atlassian Design System (opens in a new tab)
Study foundations and components used in collaborative software.
Module 06atlassian.design
Shopify Polaris (opens in a new tab)
Explore the current Polaris guidance for Shopify app interfaces.
Module 06shopify.dev
Microsoft Fluent 2 (opens in a new tab)
Compare system foundations and cross-platform component guidance.
Module 06fluent2.microsoft.design
Tokens Studio (opens in a new tab)
Manage design tokens beyond Figma variables, with theming and sync to code repositories.
Module 06tokens.studio
Supernova (opens in a new tab)
Document a design system and deliver tokens and components from design to code.
Module 06supernova.io
zeroheight (opens in a new tab)
Create living design system documentation that combines Figma components, code and usage guidelines.
Module 06zeroheight.com
Storybook (opens in a new tab)
See how developers build, test and document UI components in isolation — useful for design–dev handoff.
Module 06storybook.js.org
Design Tokens Community Group (opens in a new tab)
Follow the W3C community standard format for design tokens that most token tools now support.
Module 06designtokens.org
Google Fonts (opens in a new tab)
Choose typefaces and compare families for a readable interface.
Module 05fonts.google.com
Typewolf (opens in a new tab)
Study type combinations in the context of finished websites.
Module 05typewolf.com
Fontshare (opens in a new tab)
Explore font families before choosing a project type system.
Module 05fontshare.com
Fontpair (opens in a new tab)
Explore complementary typefaces for headings and body text.
Module 05fontpair.co
Typescale (opens in a new tab)
Build a deliberate hierarchy of type sizes for your interface.
Module 05typescale.com
Adobe Color (opens in a new tab)
Explore colour relationships and create a starting palette.
Module 05color.adobe.com
Realtime Colors (opens in a new tab)
Preview text, surface, and accent colours in an interface context.
Module 05realtimecolors.com
Happy Hues (opens in a new tab)
See how a palette can be distributed across a complete page.
Module 05happyhues.co
uiGradients (opens in a new tab)
Explore gradient combinations when a project calls for a coloured surface.
Module 05uigradients.com
Coolors (opens in a new tab)
Generate, adjust and save colour palettes quickly, with contrast checking.
Module 05coolors.co
Radix Colors (opens in a new tab)
Use a well-tested colour scale system designed for accessible UI states, light and dark modes.
Module 06radix-ui.com
Lucide (opens in a new tab)
Use a consistent stroke icon family rather than mixing unrelated styles.
Module 05lucide.dev
Heroicons (opens in a new tab)
Find interface icons for actions, navigation, and status indicators.
Module 05heroicons.com
Phosphor Icons (opens in a new tab)
Explore an icon family with several visual weights.
Module 05phosphoricons.com
Bootstrap Icons (opens in a new tab)
Choose SVG icons for a product prototype or implementation.
Module 05icons.getbootstrap.com
SVG Repo (opens in a new tab)
Find SVG assets and check the licence of each chosen item.
Module 05svgrepo.com
Tabler Icons (opens in a new tab)
Thousands of free, consistent outline icons available as SVG and in Figma.
Module 05tabler.io
Material Symbols (opens in a new tab)
Google’s variable icon set with adjustable weight, fill and grade for consistent UI icons.
Module 05fonts.google.com
unDraw (opens in a new tab)
Find illustrations for onboarding or empty states when they clarify meaning.
Module 05undraw.co
Storyset (opens in a new tab)
Explore editable illustration styles for a consistent project visual language.
Module 05storyset.com
Unsplash (opens in a new tab)
Find photography for realistic interface content and case-study presentation.
Module 05unsplash.com
Pexels (opens in a new tab)
Source photos and video references for a prototype's content needs.
Module 05pexels.com
LottieFiles (opens in a new tab)
Explore lightweight animations for feedback and interface motion.
Module 04lottiefiles.com
Rive (opens in a new tab)
Create interactive animation and explore state-driven motion.
Module 04rive.app
Spline (opens in a new tab)
Explore browser-based 3D when it supports your product concept.
Module 05spline.design
Jitter (opens in a new tab)
Create UI animations and motion mockups in the browser and export them for presentations or handoff.
Module 05jitter.video
W3C Web Accessibility Initiative (opens in a new tab)
Use authoritative guidance to understand inclusive web experiences.
Module 06w3.org
WebAIM Contrast Checker (opens in a new tab)
Check foreground and background colours before approving text styles.
Module 06webaim.org
WAVE (opens in a new tab)
Inspect a published page for potential accessibility issues; follow up manually.
Module 07wave.webaim.org
The A11Y Project checklist (opens in a new tab)
Review keyboard access, content, media, and interface basics.
Module 06a11yproject.com
Stark (opens in a new tab)
Add accessibility checks to design and review workflows.
Module 06getstark.co
web.dev Learn Accessibility (opens in a new tab)
Learn how semantic structure and interaction affect access to a website.
Module 06web.dev
axe for Designers (opens in a new tab)
Free Figma plugin that checks colour contrast, target size and headings while you design.
Module 06deque.com
axe DevTools (opens in a new tab)
Browser extension that scans built pages for accessibility issues — pair it with manual testing.
Module 06deque.com
Maze (opens in a new tab)
Collect feedback on a prototype and investigate task completion.
Module 07maze.co
Lyssna (opens in a new tab)
Explore research and usability methods for validating design choices.
Module 07lyssna.com
Usability Testing 101 (opens in a new tab)
Plan a study around realistic participant tasks and observed behaviour.
Module 07nngroup.com
Ten usability heuristics (opens in a new tab)
Review an interface for familiar usability problems before user testing.
Module 07nngroup.com
Microsoft Clarity (opens in a new tab)
Explore heatmaps and session recordings for a live product, with appropriate consent.
Module 07clarity.microsoft.com
UXtweak (opens in a new tab)
Run usability tests, card sorts, tree tests, first-click tests and surveys in one research platform.
Module 07uxtweak.com
Hotjar (opens in a new tab)
See heatmaps, session recordings and on-page feedback to spot where real users struggle.
Module 07hotjar.com
Content Design London (opens in a new tab)
Learn to shape content around the information people need to act.
Module 04contentdesign.london
GOV.UK writing guidance (opens in a new tab)
Review plain-language principles before writing instructions and interface copy.
Module 04guidance.publishing.service.gov.uk
Hemingway Editor (opens in a new tab)
Check readability and simplify long sentences in UI copy, help text and case studies.
Module 04hemingwayapp.com
UXfolio (opens in a new tab)
Structure a design portfolio around case studies and project reasoning.
Module 08uxfol.io
ADPList (opens in a new tab)
Explore mentoring conversations for portfolio and career development.
Module 08adplist.org
Framer (opens in a new tab)
Build and publish a personal portfolio with visual web design tools.
Module 08framer.com
Webflow (opens in a new tab)
Create a responsive portfolio and explore structured web publishing.
Module 08webflow.com
Notion templates (opens in a new tab)
Find starting points for project documentation and career planning.
Module 08notion.com
Bestfolios (opens in a new tab)
Browse designer portfolios and resumes for ideas on structure and storytelling.
Module 08bestfolios.com
MDN Learn Web Development (opens in a new tab)
Understand HTML, CSS, and web behaviour to communicate with developers.
Module 06developer.mozilla.org
Zeplin (opens in a new tab)
Organise approved screens, specs and assets for developers, with versioned handoff.
Module 06zeplin.io
AI for UX study guide (opens in a new tab)
Explore AI use in UX while keeping human judgement and real research central.
Module 01nngroup.com
Figma Make (opens in a new tab)
Turn a prompt into an interactive prototype using your existing Figma designs and components as context, then keep editing.
Module 05figma.com
Google Stitch (opens in a new tab)
Generate UI layouts and visual variations from a prompt or sketch, then export to Figma or front-end code to refine.
Module 05stitch.withgoogle.com
UX Pilot (opens in a new tab)
Generate wireframes and flows from a brief, and get AI predicted heatmaps and design reviews as a starting point.
Module 04uxpilot.ai
Uizard (opens in a new tab)
Turn hand-drawn sketches or screenshots into editable wireframes for quick early-stage concepts. Now part of Miro.
Module 04uizard.io
Relume (opens in a new tab)
Draft website sitemaps and wireframes from a short brief, then refine the structure before visual design.
Module 03relume.io
UXCharan AI prompt library
Copy-ready prompts for research, flows, UI critique, accessibility, handoff and interview preparation, updated regularly.
Module 01uxcharan.com
Claude Design (opens in a new tab)
Anthropic’s AI design tool for prototypes, slides and one-pagers that can follow your design system; refine by chat, comments and direct edits.
Module 05support.claude.com
v0 by Vercel (opens in a new tab)
Generate working React UI from a prompt, then fine-tune copy, type, layout and colour visually in Design Mode.
Module 05v0.app
No matching resources
Try a broader search or reset the category, module, and type filters.
Links lead to independent providers. Some tools require an account or paid plan; check current access and asset licences before using them in a project. Resource research: October 2026.
Directory browsing inspiration: Undesign ↗. Descriptions and course groupings are curated for UXCharan learners.
Become a UX/UI designer. Join a free live demo class — online, no experience needed, limited seats per batch.