Free Design learning guide
Learn UI/UX Design with Figma – Complete Guide
Learn UI/UX Design with Figma – Complete Guide — a free intermediate-level guide covering learn ui/ux design from scratch with figma. Learn with clear...
What you will learn
- 1. Foundations of UI/UX and Design Thinking
- 2. Visual Design Basics: Color, Typography, Layout
- 3. Getting Started with Figma: Interface & Core Tools
- 4. Wireframing & Low‑Fidelity Prototyping in Figma
- 5. Designing High‑Fidelity UI Components & Design Systems
- 6. Interaction Design & Advanced Prototyping
- 7. User Research & Usability Testing Basics
- 8. Accessibility & Inclusive Design Principles
- 9. Handoff & Collaboration: From Design to Development
- 10. Building a Portfolio & Real‑World Project Workflow
1. 1. Foundations of UI/UX and Design Thinking
UI vs. UX: What They Are and Why They Matter Imagine you’ve just downloaded a new budgeting app. The moment you open it, a sleek splash screen greets you, the icons are perfectly aligned, and the color palette feels modern. You tap “Add Expense,” and the form slides into view with a smooth animation. After a few minutes you realize you can’t locate the “Export” button you need, and the error messages are cryptic. You love the look, but you’re frustrated trying to accomplish a simple task. That split feeling is the classic UI‑UX tension. User Interface (UI) is everything the user sees on the screen—layout, colors, typography, icons, and interactive elements. User Experience (UX) is the broader journey: how the product satisfies a need, how easy it is to accomplish goals, and how the user feels before, during, and after interaction. | Aspect | UI | UX | |--------|----|----| | Focus | Visual and interactive details | End‑to‑end user journey | | Questions | What does it look like? Is the button placed intuitively? | Does the flow solve the user’s problem? Is the experience enjoyable and efficient? | | Deliverables | Style guides, UI kits, high‑fidelity mockups | User flows, wireframes, personas, journey maps, usability test reports | | Metrics | Visual consistency, click‑through rates, aesthetic ratings | Task success rate, time on task, Net Promoter Score (NPS), churn | Both disciplines are interdependent. A beautiful UI can’t rescue a broken UX, and a flawless UX can feel stale without thoughtful UI. In product development, UI and UX teams (or a single full‑stack designer) collaborate from concept through delivery, ensuring that the solution is both usable and desirable. Roles in the Product Lifecycle 1. Discovery & Research – UX leads with user interviews, surveys, and competitive analysis to uncover needs and pain points. UI contributes by gathering visual inspiration and assessing brand constraints. 2. Ideation & Concepting – UX sketches user flows and maps out the information architecture. UI begins exploring mood boards, color palettes, and component libraries. 3. Design & Prototyping – UX creates low‑fidelity wireframes that outline layout and interaction patterns. UI refines those wireframes into high‑fidelity screens, adding micro‑interactions and visual polish. 4. Validation – UX runs usability tests, measures task success, and iterates on flow. UI observes visual clarity, accessibility, and aesthetic feedback. 5. Implementation & Handoff – UX supplies documentation of user journeys and edge‑case handling. UI delivers a design system, component specs, and assets ready for developers. Understanding where UI ends and UX begins—and where they overlap—helps teams allocate effort efficiently and avoid the “pretty but unusable” trap. --- Design Thinking: A Human‑Centric Problem‑Solving Engine Design thinking is a repeatable, iterative framework …
2. 2. Visual Design Basics: Color, Typography, Layout
A Splash of Color, a Stroke of Type, a Grid of Order Imagine you’ve just finished a user‑research sprint and uncovered that “busy professionals need a dashboard they can glance at in under three seconds.” Your empathy map tells you they think “I don’t have time to hunt for numbers,” feel “frustrated by clutter,” and say “I want everything clear at a glance.” Your next step isn’t to wireframe the data hierarchy—that comes later. It’s to decide how the interface will look so that the information is instantly readable, emotionally appropriate, and structurally obvious. The visual design basics—color, typography, and layout—are the invisible scaffolding that turns raw data into a usable, desirable experience. Below we dive straight into the practical tools you’ll need to craft that “three‑second glance” UI, from selecting a harmonious palette to pairing typefaces, and finally arranging everything on a disciplined grid. Each concept is paired with a quick Figma workflow so you can apply it immediately. --- 1. Color Theory in Practice 1.1. The Three Core Dimensions | Dimension | What it controls | UI impact | |-----------|------------------|-----------| | Hue (the color itself) | Emotional tone & brand identity | Warm hues (red, orange) convey urgency; cool hues (blue, teal) suggest calm. | | Value (lightness vs. darkness) | Contrast, readability, focus | High‑value (light) elements on dark backgrounds boost legibility; low‑value accents can recede. | | Saturation (intensity) | Visual hierarchy & visual fatigue | Fully saturated colors draw attention; desaturated (muted) tones are ideal for background or secondary information. | When you map these dimensions onto a design, ask yourself: Which emotion do I want to trigger? Which elements need to stand out? How can I reduce visual noise? 1.2. Building Harmonious Palettes 1. Start with a Base Hue – Choose a primary hue that reflects the product’s brand or the emotion you identified (e.g., a teal for calm productivity). 2. Create a 5‑color palette using the “70‑15‑15” rule: 70 % dominant color (primary) 15 % secondary color (complement or analogous) 15 % accent color (high‑saturation for calls‑to‑action) 3. Add neutrals – Generate a grayscale from the same hue’s desaturated values (e.g., cool gray for a blue‑based scheme). Figma shortcut: Use the Color Styles panel → + → Create style from selection. Save each swatch as a named style (e.g., “Primary/Blue‑500”). This makes swapping the whole palette a single click later. 1.3. Color Accessibility Checklist - Contrast Ratio – Aim for ≥ 4.5:1 for normal text, ≥ 3:1 for large text. Use the built‑in Figma contrast checker or plugins like Stark. - Color‑Blind Safe – Verify that critical information isn’t conveyed solely by color. Add texture, icons, or labeling for redundancy. - Avoid “Vibrancy …
3. 3. Getting Started with Figma: Interface & Core Tools
Jump‑into‑Action: A Real‑World Prompt You’ve just been handed a brief to redesign the onboarding flow for a fintech app. The product manager has shared a sketch on a whiteboard, the stakeholder wants to see a pixel‑perfect mockup by the end of the day, and the development lead has asked for reusable components. Your only tool? Figma. Within minutes you’ll need to: 1. Set up a clean workspace that separates research, low‑fidelity concepts, and the final UI. 2. Translate the sketch into frames, shapes, and typography that respect the visual hierarchy you learned in Chapter 2. 3. Organize layers and create components so the handoff is smooth and the design system can grow. The following sections walk you through exactly how to do that—starting with the Figma interface itself and ending with a workflow you can replicate on any project. --- The Figma Workspace at a Glance Figma’s UI is deliberately minimal, letting the canvas dominate the experience. Think of it as a digital drafting table that folds out the tools you need, when you need them. | Area | What It Holds | Quick Access | |------|---------------|--------------| | Toolbar (top) | Primary creation tools, undo/redo, zoom, presentation mode | V, R, T, Shift + Z | | Layers Panel (left) | Pages, frames, groups, individual objects | Alt + 1 | | Properties Panel (right) | Context‑sensitive settings (size, fills, constraints) | Alt + 2 | | Canvas (center) | The design surface where you place frames, shapes, text | — | | Bottom Bar | Comments, version history, share link | Ctrl + / (or Cmd + /) | Tip: Hover over any icon for a tooltip that also shows its keyboard shortcut. This is the fastest way to internalize the most‑used commands. Navigating the Canvas Efficiently | Action | Shortcut | When to Use | |--------|----------|-------------| | Pan | Hold Space + drag | Moving around large screens | | Zoom In/Out | Ctrl + Mouse Wheel (Win) / Cmd + Mouse Wheel (Mac) | Focusing on detail vs. overview | | Fit to Screen | Shift + 1 | Resetting view after a deep zoom | | Show/Hide UI | Ctrl + \ (Win) / Cmd + \ (Mac) | Maximizing canvas real‑estate | | Select Multiple | Shift + Click or Drag Box | Grouping related layers quickly | | Duplicate | Ctrl + D (Win) / Cmd + D (Mac) | Creating variations of a component | These shortcuts become second nature with a few minutes of practice, dramatically cutting the “click‑hunt” time that slows many beginners. --- Core Creation Tools: Frames, Shapes, and Text 1. Frames – The Building Blocks of Layout Frames are …
4. 4. Wireframing & Low‑Fidelity Prototyping in Figma
A Real‑World Prompt: From Sketch to Clickable Flow in 30 Minutes Imagine you’ve just wrapped a short discovery sprint for a new mobile banking app. Your Empathy Map and How Might We statements have given you three core user tasks: Check balance, Transfer money, and Find nearby ATMs. Stakeholders are eager to see how the app will feel before any visual polish is added. With only a half‑day workshop, you need to: 1. Turn the task list into a visual flow that anyone can follow. 2. Validate the sequence with a quick sanity‑check from product, dev, and a handful of users. A low‑fidelity wireframe built in Figma can deliver both in under 30 minutes. The rest of this chapter shows you exactly how to do that—using only basic shapes, placeholders, and frame linking—so you can iterate fast, gather rapid feedback, and keep the design process moving. --- Setting Up a Clean Canvas for Wireframes Before you start drawing, give yourself a predictable workspace. 1. Create a new Figma file and name it Wireframes – [Project Name]. 2. Add a dedicated page called Wireframes (right‑click the pages panel → Add page). Keeping wireframes separate from later high‑fidelity work prevents accidental style bleed. 3. Enable Layout Grids that match your target platform: Mobile – 4‑column grid, 8 px gutter, 16 px margin. Desktop – 12‑column grid, 24 px gutter, 24 px margin. This gives you a structural backbone without committing to a visual style. Tip: Turn on Show UI → Outline strokes in the View menu. This makes every shape’s outline visible, a subtle reminder that you’re still in the “sketch” phase. --- Sketching Low‑Fidelity Wireframes with Basic Shapes Wireframes are about structure, hierarchy, and interaction intent, not pixel‑perfect aesthetics. Use the following toolbox: | Shape | Typical Use | Quick Shortcut | |-------|--------------|----------------| | Rectangle | Containers, cards, input fields | R | | Rounded rectangle | Buttons, tap targets | R (hold Shift for perfect corners) | | Ellipse | Avatar placeholders, radio buttons | O | | Line | Dividers, progress bars | L | | Text | Labels, headings, placeholder copy | T | Choosing the Right Shape Palette 1. Stick to grayscale (black, dark gray, light gray). This removes visual noise and keeps attention on layout. 2. Apply a uniform stroke weight (usually 1 px) to all shapes. Consistency reinforces the low‑fidelity feel. Using Grids & Auto‑Layout for Speed Auto‑Layout is a hidden gem for wireframes. It lets you define vertical or horizontal stacks that automatically adjust spacing when you add or remove elements. 1. Select a group of shapes (e.g., a header bar, a content block, a footer). 2. Right‑click → Add Auto‑Layout. Choose direction (vertical …
5. 5. Designing High‑Fidelity UI Components & Design Systems
A Real‑World Trigger: The “One‑Click Checkout” Dilemma Imagine you’ve just been handed a high‑stakes brief: design a one‑click checkout flow for a fast‑growing e‑commerce startup. The product manager insists the experience must feel instant and trustworthy. Your first instinct is to sketch a sleek button, a clean form, and a crisp navigation bar. But as the design expands—adding promotional banners, error handling, and responsive breakpoints—those isolated sketches quickly devolve into a patchwork of look‑alikes, mismatched typography, and inconsistent spacing. The moment you pause and ask, “How can I guarantee pixel‑perfect consistency across every screen while still allowing flexibility for future features?” you’ve entered the realm of high‑fidelity UI components and design systems. This chapter shows you how to turn that single button into a reusable, variant‑rich component that scales with the product, all within Figma’s collaborative environment. --- 1. From Pixels to Patterns: Why Component‑First Design Matters 1.1 The Hidden Cost of Manual Tweaks When you design each screen individually, every change—whether a brand‑color update or a tweak to corner radius—requires manual, error‑prone edits. In a fast‑moving product, this creates a hidden maintenance burden that slows iteration and erodes visual consistency. 1.2 Design Systems as the “Single Source of Truth” A design system bundles style definitions (text, color, effects) and component definitions (buttons, forms, navigation) into a reusable library. By anchoring every UI element to this library, you: - Guarantee pixel‑level consistency across all screens and devices. - Accelerate design handoff—developers receive a clear, versioned spec. - Empower non‑design teammates to assemble mockups without breaking visual language. The next sections walk you through building that system step by step. --- 2. Laying the Foundations: Text, Color, and Effect Styles Before any component takes shape, establish the core style palette. In Figma, these live in the Assets panel under Styles and can be shared across files. 2.1 Text Styles – From Heading to Caption 1. Create a text layer (e.g., “Heading 1”). 2. Apply the desired font family, weight, size, line height, and letter spacing. 3. With the layer selected, click “+” next to Text in the right‑hand Properties panel. 4. Name the style using a semantic convention: Heading / H1 / Light. Best practices - Use semantic names (e.g., Body / Small / Regular) rather than visual descriptors (16 pt gray). - Limit the number of typographic scales (3–5) to keep hierarchy clear. 2.2 Color Styles – Building a Scalable Palette 1. Select an object and set its fill (or stroke) to the intended hue. 2. Click the “+” next to Color in the Properties panel. 3. Name the style with a purpose‑first label: Brand / Primary / Default. Tips for scalability | Category | Example Tokens | |----------|----------------| | …
6. 6. Interaction Design & Advanced Prototyping
A Real‑World Prompt: The “Fit‑Now” Onboarding Flow Imagine you’ve just designed a sleek onboarding screen set for Fit‑Now, a fitness‑tracking app. The screens look great, but stakeholders keep asking, “Can we see how the user actually moves from step to step?” They want to experience the swipe gestures, the slide‑in menu, and the subtle check‑mark animation that confirms a successful input. This is where interaction design in Figma moves the project from static mock‑ups to a living prototype that can be tested on a phone or a laptop. Below is a step‑by‑step guide that takes you from plain frames to a fully‑interactive, motion‑rich prototype ready for validation. The techniques align with the Design & Prototyping phase of the iterative framework introduced earlier, and they will let you answer critical HMW questions such as “How might we make onboarding feel effortless?”. --- 1. Setting the Stage for Interaction Before adding any behavior, make sure your file is organized for rapid iteration. | Checklist | Why It Matters | |-----------|----------------| | Naming conventions – e.g., Onboarding / Step 1 – Welcome | Keeps the Prototype flow readable for teammates and testers. | | Separate pages for Desktop, Mobile, and Components | Mirrors the Empathize → Define → Ideate → Prototype → Test loop – you can test each device independently. | | Component variants for UI elements that will animate (buttons, toggles, progress dots) | Enables Smart Animate later without duplicating frames. | | Auto‑layout applied to containers that will resize (e.g., a card list) | Guarantees that motion respects responsive behavior. | Tip: If you already built a design system in Chapter 5, pull the relevant components into the current page via Assets → Team Library. This keeps the prototype consistent with the system you’ve established. --- 2. Hotspots & Basic Navigation 2.1 Creating Clickable Areas 1. Select the layer you want to be interactive (e.g., a “Next” button). 2. In the right‑hand panel, click Prototype. 3. Drag the blue node to the destination frame (e.g., Onboarding / Step 2 – Permissions). Figma automatically creates a hotspot – a transparent clickable region that triggers navigation. 2.2 Configuring Triggers | Trigger Type | Typical Use | |--------------|-------------| | On Click | Most button taps, menu selections. | | While Hover | Desktop hover states, tooltip reveals. | | After Delay | Auto‑advancing slides or splash screens. | | While Dragging | Swipable carousels or draggable cards. | For the Fit‑Now onboarding, use On Click for “Next” and While Dragging for the horizontal swipe between the “Goals” and “Preferences” screens. 2.3 Defining Destination Options - Navigate To – jumps straight to the target frame. - Open Overlay – shows a modal or dropdown …
7. 7. User Research & Usability Testing Basics
A Real‑World Wake‑Up Call Imagine you’ve just spent a week polishing a high‑fidelity onboarding flow in Figma for a fintech startup. The screens look sleek, the micro‑interactions are snappy, and the design system you built in the previous module is humming. The product manager is thrilled—until the first user clicks “Next” and the app crashes on the third screen. Suddenly the polished UI feels useless because the underlying flow isn’t intuitive. That moment is where User Research & Usability Testing become the safety net that turns a beautiful prototype into a usable product. In this chapter you’ll learn how to plan low‑cost tests, extract actionable insights, and iterate directly in Figma so that each design decision is backed by real user behavior. --- 1. Picking the Right Low‑Cost Research Method When budgets are tight and timelines are tight, you don’t need a full‑scale lab study. The goal is to surface the biggest usability problems quickly. Below are the most practical methods for an intermediate designer who already has a high‑fidelity prototype. | Method | When to Use It | Core Benefits | Typical Cost | |--------|----------------|---------------|--------------| | Guerrilla Testing | Public spaces, coffee shops, coworking areas | Immediate feedback, diverse participants | $0–$50 (snacks, incentives) | | Remote Unmoderated Test (e.g., Lookback, Maze) | Distributed audience, asynchronous schedule | Scalable, cheap, data automatically recorded | Free tier → $20–$100 per month | | Remote Moderated Test (Zoom + Figma share) | Complex tasks that need clarification | Real‑time probing, high‑quality qualitative data | Free‑tier video conferencing | | Think‑Aloud Protocol | Any setting where you can observe the user | Reveals mental model, uncovers hidden assumptions | No extra cost beyond participant incentive | | Post‑Task Survey / SUS | After any test | Quantifies perceived usability, easy to compare over time | Free (Google Forms, Typeform) | Tip: Start with a single method—often guerrilla testing or a remote unmoderated test—and expand only if you need deeper insight. --- 2. Planning a Usability Test A well‑structured test saves time, respects participants, and yields clean data. Follow this checklist before you hit “record.” 1. Define Clear Goals What do you want to learn? - Example: “Validate that new users can complete the onboarding flow in under 2 minutes without assistance.” 2. Select Representative Participants - Target the primary persona you created in the Empathy Map (e.g., “Busy Millennials who manage multiple financial accounts”). - Aim for 5‑7 participants; research shows this sample size uncovers ~85 % of major usability issues. 3. Create a Test Script - Intro: Brief context, consent, and a reminder to think aloud. - Tasks: Written as goal‑oriented statements, e.g., “Sign up for a new account and set …
8. 8. Accessibility & Inclusive Design Principles
A Real‑World Prompt: Designing a Dashboard for All Users Imagine you’re tasked with redesigning the home screen of a health‑tracking app that will be used by a diverse audience—busy professionals, seniors with declining vision, and users who rely on screen readers. The brief calls for a clean, data‑rich layout that feels modern, yet every user must be able to read the numbers, navigate with a keyboard, and understand the content through a screen reader. How do you turn this vision into a concrete, inclusive UI in Figma? The answer lies in weaving accessibility into every design decision, not tacking it on at the end. This chapter shows you how to embed WCAG contrast ratios, text‑size guidelines, keyboard‑first navigation, and screen‑reader friendliness directly into your Figma workflow, then validate those decisions with the right plugins and checklists. --- 1. Quick Primer on WCAG and Why It Matters The Web Content Accessibility Guidelines (WCAG) are the industry‑standard reference for making digital products perceivable, operable, understandable, and robust. For UI designers, the most immediately actionable WCAG success criteria are: | Principle | WCAG Success Criterion | What It Means for UI | |-----------|------------------------|----------------------| | Perceivable | 1.4.3 Contrast (Minimum) – Text and images of text must have a contrast ratio of ≥ 4.5:1 (AA) or ≥ 7:1 (AAA) | Choose foreground/background color pairs that meet the ratio. | | Perceivable | 1.4.4 Resize Text – Text must be resizable up to 200 % without loss of content or functionality | Use relative units (rem, em) and avoid fixed‑size containers that clip enlarged text. | | Operable | 2.1.1 Keyboard – All functionality must be operable through a keyboard interface | Ensure focus order, visible focus indicators, and avoid keyboard traps. | | Understandable | 2.4.6 Headings and Labels – Proper semantic headings aid screen‑reader navigation | Use clear hierarchy in component naming and layer organization. | These criteria map directly onto the objectives of this module. Throughout the chapter you’ll see concrete ways to satisfy them in Figma, turning abstract numbers into visual decisions you can see and test instantly. --- 2. Applying Contrast Ratios in Figma 2.1. Set Up a Contrast Palette 1. Create a “Color Tokens” page in your design system file (see Chapter 5 on Design Systems). 2. Add a Contrast Matrix component that lists primary, secondary, and neutral colors alongside their WCAG ratios when paired with background options (e.g., white, dark‑gray). 3. Use the Figma “Color Contrast Checker” plugin to automatically calculate ratios for any pair you input. Tip: Keep the matrix visible while you design. When you drag a new color onto a button or text layer, the plugin updates the ratio in real time, nudging you toward …
9. 9. Handoff & Collaboration: From Design to Development
A Real‑World Hand‑off: From Designer’s Canvas to Developer’s IDE Imagine Maya, a UI/UX designer at a fast‑growing SaaS startup. She has just finished a high‑fidelity screen set for a new dashboard, complete with interactive prototypes, accessibility annotations, and a component library built in Figma. The development team is eager to start coding, but when they open the file they find: Buttons labeled “Primary” instead of “btn-primary”. Icons exported at 1× resolution, causing blurry retina displays. Spacing values that don’t match the CSS grid defined in the style guide. The resulting back‑and‑forth in Slack stretches over days, and the launch timeline slips. This scenario is all too common when the bridge between design and development isn’t engineered deliberately. The good news? Figma provides everything needed to turn Maya’s design into a clean, developer‑ready package—if she knows how to use the inspection tools, comment workflow, version control, and integrations. The sections below walk through the best‑practice process that turns a polished UI into production‑ready specifications, while keeping the collaboration loop tight and transparent. --- 1. Preparing the Design for Handoff Before you ever click “Export”, treat the file as a living codebase. Clean, consistent, and well‑documented designs reduce friction downstream. 1.1. Layer & Component Hygiene | Action | Why it matters | |--------|----------------| | Rename layers – use clear, hierarchical names (e.g., Header / Logo, Card / Title). | Developers can instantly locate elements in the Inspect panel. | | Group related items – keep reusable UI blocks as Components. | Guarantees a single source of truth for styling and behavior. | | Delete unused frames & hidden layers | Prevents accidental export of dead assets. | Tip: Adopt the same naming convention you use in code (snakecase, kebab-case, etc.) to make the mental translation seamless. 1.2. Leverage Your Design System If you completed Chapter 5, you already have a component library and token set (colors, typography, spacing). For handoff: Reference tokens directly in component properties (e.g., set text color to Palette / Primary / 600). Avoid hard‑coded values like “FF5733” unless the token is truly unique. When developers inspect a layer, Figma will surface the token name, which can be exported as a CSS variable or JSON entry (see Section 4). 1.3. Embed Accessibility Annotations From Chapter 8 you know the importance of WCAG contrast ratios and focus states. Tag these directly in the design: Add a “Screen Reader Text” component for hidden labels. Mark focus outlines with a dedicated style (e.g., Focus / Outline). Developers can see these annotations in the Inspect panel, ensuring that the final code respects the accessibility requirements you defined earlier. --- 2. Generating Inspection Specs & Code Figma’s Inspect tab turns visual properties into ready‑to‑copy …
10. 10. Building a Portfolio & Real‑World Project Workflow
A Real‑World Scenario to Kick‑Start Your Portfolio You’ve just received an email from a small‑to‑medium e‑commerce startup that wants a redesign of their checkout flow. The brief is concise, the deadline is tight, and the client expects to see examples of work that proves you can balance usability with desirability—the classic UI‑UX tension you’ve wrestled with throughout the course. Your response will hinge on two things: 1. A case study that walks the client through your entire design process—from empathy maps to high‑fidelity prototypes—showing how you apply the frameworks introduced in earlier chapters. 2. A polished portfolio site built entirely in Figma, where the client can interact with your prototypes without leaving the browser. If you can deliver both convincingly, the client is far more likely to hand you the project. The rest of this chapter shows you how to assemble those assets, present them compellingly, and manage the end‑to‑end workflow that turns a brief into a shipped product. --- 1. Selecting & Presenting Case Studies That Showcase Your Process A portfolio is not a résumé of screenshots; it is a narrative that demonstrates how you solve problems. The goal is to make the hiring manager or client visualize you as a reliable partner who can navigate the full design lifecycle. 1.1. Choose Projects That Cover the Full Design Loop When deciding which projects to feature, ask yourself: - Does the project include every major phase? (Discovery & Research → Ideation & Concepting → Design & Prototyping → Validation → Implementation & Handoff) - Did you apply Interaction Design & Advanced Prototyping (Chapter 6) and Accessibility & Inclusive Design Principles (Chapter 8)? - Do you have quantifiable outcomes (conversion lift, task‑time reduction, NPS increase) that you can share? A well‑rounded portfolio might include: | Project | Core Challenge | Phases Covered | Notable Technique | |---------|----------------|----------------|-------------------| | Mobile banking app redesign | Reduce onboarding friction | Full loop | Adaptive UI for accessibility | | SaaS dashboard for data analysts | Communicate complex data clearly | Ideation → Prototyping → Validation | Advanced component states in Figma | | E‑commerce checkout flow (the scenario above) | Minimize cart abandonment | Full loop | Micro‑interactions & error handling | 1.2. Structure Each Case Study as a Story People retain stories better than lists. Use the classic Problem → Process → Result structure, but break the “Process” into the phases you’ve already internalized. 1.2.1. Problem (Brief & Business Goals) - Client brief excerpt (quote the most compelling line). - Business metrics you were asked to improve (e.g., “increase checkout completion by 12 %”). 1.2.2. Process (Design Journey) 1. Empathize & Define – Summarize the empathy maps, user interviews, or surveys you conducted …
Continue learning
- Learn UI/UX Design with Figma: From Basics to Pro ProjectsLearn UI/UX Design with Figma: From Basics to Pro Projects — a free intermediate-level guide covering learn ui/ux design from scratch with figma. Learn...
- Mastering UI/UX Design with Figma: A Complete GuideMastering UI/UX Design with Figma: A Complete Guide — a free intermediate-level guide covering learn ui/ux design from scratch with figma. Learn with...
- Mastering UI/UX Design with Figma: A Comprehensive GuideMastering UI/UX Design with Figma: A Comprehensive Guide — a free intermediate-level guide covering learn ui/ux design from scratch with figma. Learn...
- Mastering UI/UX Design with Figma: A Professional RoadmapMastering UI/UX Design with Figma: A Professional Roadmap — a free intermediate-level guide covering learn ui/ux design from scratch with figma. Learn...