End to End UI/UX Design for Beginners

Explore the basics of UI, UX, and design, defining design as color and shape to create appealing, usable interfaces, and understand that interfaces evolve through the design process and Figma.

Explore key UI/UX terminologies like A/B testing, MVP, information architecture, CTA, KPI, and design thinking to understand product evaluation and user flows.

Explore design thinking as an empathetic, iterative process that centers user needs through the empathize, define, ideate, prototype, and test phases, delivering a final product as your minimum viable product.

Emphasize the empathize phase with surveys, questionnaires, and user observations to uncover pain points for healthcare payment solutions. Learn to craft open-ended questions and follow-ups for meaningful user insights.

Learn how to create user personas by translating survey and interview findings into fictitious characters like Fumi and Emeka, highlighting pain points, goals, and saving needs for a medical app.

Explore user flow design for a medical finance app, outlining onboarding, bank linking, QR code payments, virtual cards, peer-to-peer transfers, and transaction history as core minimum viable product features.

Learn information architecture for end-to-end product design across landing pages, web apps, and mobile apps, detailing home, wallet, pay, and profile flows for seamless payments, transfers, and security.

Sign up for a Figma account, verify your email, and apply for the Figma education plan as a student. Download the desktop app and start designing with Figma and FigJam.

Design responsive websites and apps that adapt to desktop and mobile screens, and prioritize accessibility with features like text to speech and colorblind-friendly guides.

Explore FigJam to create wireframes and information architecture using templates, user personas, and quick prototyping. Learn to sketch layouts with shapes, text, connectors, and sticky notes for clear design workflows.

Create a user persona in figjam for a health care savings app, detailing Fumi's profile with name, location, age, profession, hobbies, pain points, and goals.

Explore the information architecture of a mobile app, detailing how information flows, how elements connect, and how users move through the app's structure.

Demonstrate end-to-end app information architecture from splash to home to wallets, scan, pay, accounts, and settings, with quick 3-5 step onboarding and qr-based payments using virtual cards.

Explore the provider web app information architecture from landing page to dashboard, covering sign up, login, forgot password, and core features like pos, services, products, accounts.

Map your app's information architecture from the home page to product, about us, contact, frequently asked questions, careers, and customer sections on platforms with privacy policy and terms of use.

Learn to create wireframes for mobile apps and websites using low and high fidelity approaches, from pencil and paper to Figma, identifying elements like buttons, icons, images, and input fields.

Design a mobile wireframe by sketching a splash screen and login screen in a low-fidelity, stroke-only style, placing email and password fields, a visibility icon, and forgot password text.

Demonstrates a low-fidelity wireframe mapping login, OTP password reset, account creation, onboarding, and home-screen flow, with balance, transactions, and a floating action button for QR code payments.

Design end-to-end ui/ux wireframes for a mobile app and web platform, covering login, onboarding, password reset, wallet flows (receive, transfer, scan qr), and a providers dashboard with accounts and settings.

Master the UI part by transforming low fidelity designs into high fidelity, adding color and polish, and applying auto layout to create responsive, faster design workflows.

Create a color guide in Figma by building a colors frame, generating tints and shades with the color designer, and producing 13 primary color styles for a cohesive dark mode.

Use a four-point grid system in Figma to align and space content with consistent columns, margins, and gutters for mobile and desktop layouts, and create grid styles for reuse.

Create buttons in Figma using auto layout and a four point system, with precise padding, color, and corner radius for accessibility. Develop variations such as default, disabled, clicked, and hover.

Learn iconography by sourcing icons in Figma's community or resources tab, ensure consistency with a unified icon set, and build component-based buttons with hover, active, and disabled states.

Learn to design input fields in Figma using auto layout, strokes, padding, and icons, covering default, hover, focus, and disabled states with and without icons.

Transform your low fidelity designs into high fidelity prototypes for beginners using Figma, covering splash screens, onboarding, components, grid systems, auto layout, typography, color styles, and image handling.

Turn a low fidelity create account design into a high fidelity prototype in Figma by duplicating screens, applying autolayout, using design-system input fields, and aligning to the grid.

Turn a low fidelity dashboard into a high fidelity design by building a left sidebar, header, and content area in a desktop frame using autolayout and design system styles.

Design a header and sidebar, align the logo and page title within a 48px container, and set up a column grid with zero gaps to organize cards and tables.