UX / UI Design Mastery - From Zero To Live Website

Discover why the design brief matters for every project, learn how to structure one, and use the provided free template to start your client work.

Start every project with a design brief to clarify client needs, goals, budget, and scope. Use an editable, printable template to guide early discussions and set the course.

Create reusable design briefs in Adobe XD using a comprehensive template that covers company profile, project overview, goals, audience, assets and budget.

Learn design brief essentials in Figma, with templates and differences to Adobe XD, and master text styles, colors, auto layout, and components for fast reuse.

Use the provided template to create a design brief with imaginary client details to practice and prepare for real projects, and explore free or online templates.

Learn how to craft clear project proposals that break down pricing, explain design steps, and reveal timelines and costs, with a reusable template to boost credibility.

Explain your design proposal to justify price and scope, detailing what’s included in a UI/UX project—from website or app design to branding elements—and tailor it to any design niche.

Send proposals after discovery calls or emails, detailing services, time spent, and clear pricing, while collecting client needs with questions and outlining deliverables like design brief and Adobe XD work.

Create your project proposal in Adobe XD by exploring essential client questions and services, then design, prototype, and share polished, vector-based proposals with customizable components.

Explore how to craft a proposal cover with organized project details, from exact project and company names to personalized backgrounds and master components with a 12-column grid updating across pages.

Define and customize project details for a UI/UX proposal, including pages to design, responsive design, project timeline, and pricing, with real-time icon updates and component-based templates.

Learn how to present project pricing and options within a design proposal, detailing project fees, research, design brief, inspiration, your time, wireframes, site map and flowcharts, and flexible payment options.

Define terms and conditions for a UX/UI design project by detailing project resources, pricing, revisions, file formats, usage rights, and cancellation policies to avoid client confusion.

Develop a compelling about me page by featuring a strong image and showcased projects to build client confidence, while telling your story and detailing your education and experience.

Explore creating a UI/UX design project proposal in Figma, comparing auto layout and stacks with XD, using components and shared styles to build a reusable, real-time updating template.

Apply the project proposal template to craft a personalized client plan, detailing provided and unavailable services, then customize colors, icons, and typography to practice for real clients.

Explore user research and personas to humanize data by creating UI/UX personas that represent real users, using diverse methodologies to inform design decisions.

Define a precise user persona through real user research to target a specific audience, using a fictional name attached to real data such as age, job status, gender, and location.

Select research methods based on project size and goals, starting small with 5–10 users to identify your target audience and user persona, then scale.

Learn to choose between qualitative and quantitative user research, leveraging surveys and data to distill insights, then apply attitudinal and behavioral findings to inform design decisions.

Choose the right participants for your user research by selecting an existing audience or new participants, deciding in-person or online methods, and pricing UX and UI research accordingly.

Visualize your data by organizing survey responses with free templates in Excel or Google Sheets, then present visuals to clients to inform user personas and Google Analytics insights.

Use an Adobe XD user persona template to define a character, with sections like about, needs, frustrations, social media, and favorite brands, then export as PDF or image for sharing.

Explore user persona templates in Figma and compare them with Adobe XD templates, learning how to reuse designs across tools and apply consistent auto layout, colors, and image workflows.

Complete the section 4 assignment by filling the provided template with your information, creating a user persona, and customizing images, colors, topography, and logos to practice templates.

Conduct competitive analysis to identify your competition, learn from their strengths and mistakes, and apply insights by examining product details, pages, and mobile app screens and the language they use.

Conduct competitive analysis at the start of the design process to understand goals, targets, and how your product stacks up against the competition, and uncover market gaps.

Explore the two competitive analysis types—complete analysis and future analysis—and learn to set goals, define your product and target audience, and compare direct and indirect competitors to highlight differentiating factors.

Conduct a complete competitive analysis of two car-brand websites, comparing navigation, search, hero banners, product ranges, price lists, dealer info, and external links, then synthesize a blended approach.

Analyzes a car configurator feature across two brands, comparing flow, options, and price visibility. Compares openness and detail in Citroen and Kia to guide design decisions for future projects.

Explore tools for competitive analysis and learn that the key is choosing a tool that does the job—whether Adobe XD, Google Sheets, Google Slides, or a whiteboard—using templates effectively.

Focus your competitor analysis on goals and the client's core offering, choosing to differentiate or beat the competition on price or volume, and do things with a purpose.

Compare two brands side by side to analyze header, hero, typography, copy, and images, focusing on site structure and messaging to understand what communicates with users.

Map how users move through pages and apps, identify the shortest routes to complete goals, and create task flows branching from the overall user flow for each task.

Map user flows and flowcharts from entry to end goals, including email, social campaigns, and app installs, and optimize screens and paths to minimize clicks and boost conversions.

Explore three main user flow types—task flows, wire flows, and user flows—and learn how each supports different project stages, from single-task optimization to multi-path mapping.

User flows guide early project planning after research and personas, determine screen count and logical order, and map how users move through pages to optimize design and conversions.

Learn to design basic task flow templates in Adobe XD, using entry points, actions, processes, decisions, and arrows, and customize colors and layout for collaboration with remote teams.

Explore Adobe XD flowchart templates, including the premium Flowy set with 108 screens, 128 elements, and printable US and A4 papers, to accelerate UX design and prototyping.

Share your user flows clearly with clients and developers by using print-ready PDFs, XD prototype links, and in-browser comments, enabling precise feedback and project scoping.

Use the provided template to build your own user flow, practicing design decisions for an imaginary client and customizing colors, typography, order, and arrows to learn the process.

Use paper wireframes to quickly capture ideas, test concepts, and speed up the design process, then select two or three ideas to refine in your design software with your team.

explore paper wireframes as a cheap, quick way to translate ideas to paper, explore layouts, gather feedback from clients and teammates, and form layouts before moving to software.

Identify the four core paper wireframe elements—images, text, buttons, and forms—and learn how their combination guides user journeys from storytelling to actions like purchases or bookings.

Explore paper wireframe styles to quickly translate ideas into layouts while balancing time and budget. Compare plain box sketches with detailed text and color emphasis to communicate designs to clients.

Identify upgradeable equipment for paper wireframes—from A4 paper and pencils to dot-grid paper and jelly-roll pens - and learn when to invest as you earn, sharing work via scanner.

Translate a mental layout into a plain paper wireframe, using clear navigation, a hero image, and contextual product and image blocks to tell the story with effective calls to action.

Explore drawing wireframe layouts on black dot grid paper and white paper, compare differences, and use dot guides and ruler to craft navigation, logo, buttons, and a UI layout.

Speed up wireframing with printable device templates for phones, tablets, watches, and browsers, offering free PDFs and Photoshop files to show clients quickly.

Learn practical ways to share paper wireframes with clients or teammates, by taking photos with your phone, scanning papers, or sending a zip file via email to communicate layout progress.

Practice creating a paper wireframe for a website, a mobile app, or a dashboard using boxes and various styles to speed your design process.

Designers rely on common layouts and grids to organize content across breakpoints and screen sizes, using proven methodologies rather than reinventing the wheel.

Explore how layout defines the organization and structure of elements on pages and screens, covering grids, guides, and layout decisions for mobile, tablet, and desktop.

grid systems organize content, align elements, and improve viewer experience, while enabling developers to code with fixed or flexible containers for responsive design.

Learn to set up grids in Adobe XD using layout and square options, adjust gutter width, column width, and margins, and save defaults for reuse with bootstrap workflows.

Harness bootstrap five to build fast, responsive sites with a 12-column grid, left and right gutters, and predesigned components from UI kits.

Apply the eight point grid system in Adobe XD to create content within eight-pixel grids, enforce horizontal and vertical rhythm, and scale elements by eight for consistent spacing.

Explore horizontal rhythm in Adobe XD by using stacks to create consistent spacings, grids, and layouts with horizontal and vertical stacks, ensuring coherent design and easy handoff to developers.

Experiment with responsive grids across desktop, tablet, and phone layouts by varying column counts, column widths, and gutter widths, and test column colors to discover what works for your design.

Explore typography and font pairing to tell a visual story in ux design. Learn how to pair fonts effectively using different fonts to enhance images and user impact.

Explain that typefaces are font families and fonts are their variations, using Roboto and Roboto Slab as examples, and show when to use a full family or a single variation.

Explore the differences between serif and sans serif fonts, and learn when to use each in web and app design, focusing on readability, accessibility, and design direction.

Learn to balance font weights to guide attention across hero text and CTAs using Open Sans and Playfair Display. Use contrast in size and color to emphasize features and quotes.

Choose fonts by evaluating existing fonts, the project theme, then explore accentuating the font family with color, readability, and contrast. Test readability across desktop and mobile devices.

Master font pairing for ux ui design by choosing readable body fonts and glanceable headings, using tools like type operation, font pair, font joy, and Google Fonts for contrast.

Create a consistent font scale for web and mobile typography, defining h1-h6 sizes and weights, and documenting them in a style guide with color swatches for developers.

Experiment with font pairings, colors, and sizes using the shown tools to determine what works for headings and paragraphs, and understand the impact on viewers.

Learn how iconography enhances design assets by telling a story with icons, replacing text, and choosing styles. Explore pairing icons and where to find icons in this section.

Explore how icons act as graphic elements, simple or complex, to clarify text and images in sparing placements, and explain actions when images or video aren't available.

Explore the different icon types, including outline, filled, two-tone, and colored icons, and learn when each suits a project’s needs, with SVG assets and Adobe XD workflows.

Explore icon libraries and packs, weigh premium versus free options, and learn to use vector SVG icons for scalable, high-quality web, app, and print projects.

Discover how free vs premium icons impact variety, consistency, and licensing, with Envato Elements offering hundreds of choices and future-proof commercial licenses to elevate your designs.

Differentiate your designs with unique icons from Envato elements, ensure they make sense and stay on brand. Use moderation and consistency with text explainers, and have fun while improving usability.

Select an example team, such as luxury cars, and curate eight to ten icons with a consistent style, identical sizes, line thickness, border radius, and background colors to test cohesion.