Comprehensive UX/UI Design Course Outline

1. Web & Mobile Design Principles vs. Web Development

Design focuses on user experience, aesthetics and usability, whereas development builds the
underlying code and functionality. Designers plan interface layouts, typography, colors and
interactions; developers implement these designs with code (HTML/CSS/JS for front-end,
databases for back-end). Key design principles include usability (easy navigation), accessibility
(inclusive for all users), consistency (uniform elements) and responsiveness (adapting to screen
size). By contrast, developers focus on code quality, performance and technical constraints.
Effective collaboration ensures the design’s vision is fully realized in the working website or app.

 Design (UX/UI): Centers on the user – planning user flows, wireframes, and visual
elements (buttons, forms, images) to make the product intuitive.

 Development: Focuses on implementation – writing code to create interactive pages or

apps, handling data, and ensuring the product works across browsers/devices.

 Key takeaway: A web/mobile product succeeds when designers and developers work
together, aligning user-centered design with solid technical execution.

2. Getting Started – Sketching, Inspiration & Structure

Sketching

Sketching is a quick, freehand way to capture interface ideas on paper before moving to a
computer. It helps generate new concepts and visualize layouts rapidly. By making hand-drawn
wireframes and user flows, designers can explore multiple options and spot problems early.
Best practices: do multiple sketches of each screen; focus on layout and user tasks (not
colors/typography yet); share sketches with team members for feedback. Sketching encourages
collaboration (team members can sketch ideas too) and saves time by revealing issues before
high-fidelity work.

 Benefits: Sketching is cost-effective and flexible. It lets you iterate ideas quickly and
avoid committing to a design too early.

 Tips: Use basic shapes and annotations; sketch flows (series of screens) to map a user’s
journey; keep sketches rough to invite critique and improvements.

Inspiration

Finding inspiration keeps your designs fresh. Browse galleries like Dribbble and Behance, or use
Figma’s Community for UI kits and templates. Study competitor products and everyday
experiences (signage, apps, packaging) to spark ideas. Collect screenshots, photos, and sketches
in mood boards. Learning from varied sources prevents design fatigue and can lead to creative
solutions.

 Stay inspired: Follow design blogs, social media, and design challenges. Use tools like
Pinterest or Instagram to save appealing layouts.

 Online inspiration: Explore pattern libraries and Figma community files (pre-built UI
elements) to see how others solve design problems.

Figma Basics

Figma is a browser-based design tool that supports real-time collaboration. It offers a free tier
and runs on any platform. Its interface includes: Toolbar (top, with shapes, text, prototype
tools), Layers/Assets pane (left, managing pages, components), and Properties pane (right,
editing styles). Frames in Figma serve as canvases for screens. Components let you reuse UI
elements (buttons, icons) with variants (states). Auto Layout helps create responsive frames
(e.g. buttons that grow with text) and apply consistent spacing. Explore Figma’s Community for
free UI kits and plugins (icon sets, image assets) to speed up work.

 Setup: Sign up for a free Figma account; no installation needed. Files are saved to the
cloud.

 Key features: Frames (screen layouts), Components (reusable elements with variants),
Auto Layout (dynamic spacing), and interactive Prototyping mode.

 Resources: Use Figma’s free Community files and plugins for inspiration, icons, and
images.

User Flows

User flows are diagrams mapping the steps a user takes to accomplish a task (e.g. onboarding or
checkout). They act as blueprints for UX strategy, showing each decision point and screen. Good
flows highlight where users might get stuck and help the team plan screens accordingly.
Creating flows ensures the team thinks from the user’s perspective: “What does the user do
next?” Draw flows before wireframing to align on scope.

 Do’s: Map flows early, identify all possible paths (including errors or alternate routes).

 Don’ts: Avoid making flows overly detailed; focus on major steps. Keep them clear and
easy to follow.

 Example: For a search flow, diagram steps like “Search input → View results → Apply
filter → Select item → Add to cart,” noting screen changes at each step.
Sitemaps

A sitemap is a hierarchical diagram of a site’s pages (a tree of nodes). It visualizes the

organization of content and navigation. Sitemaps are planning tools for information architecture
– they show how sections link together and where content belongs. Use sitemaps to ensure all
desired content is included and logically grouped. In Figma, you might start with a “top layer”
showing main pages (Home, Shop, Profile, etc.) and add subpages underneath.

 Creating a sitemap: Begin with main sections (top-level pages) and branch out subpages
or sections.

 Reusable assets: Use consistent shapes or labels for pages (e.g. rectangles for pages,
arrows for links). Reuse these symbols to keep the map neat.

 Tips: Think about user navigation paths. Name nodes clearly. Review with stakeholders
to find missing pages or redundant links.

3. Explore and Iterate – Wireframes, Prototyping, and Feedback

Wireframes

Wireframes are simple, low-fidelity layouts that show the basic structure of each screen. They
use placeholders (boxes, lines, “lorem ipsum” text) instead of finalized graphics. The goal is to
focus on functionality and content hierarchy, not visuals. According to Figma’s guidelines, low-fi
wireframes help teams identify gaps and get quick feedback. In Figma you can use wireframe
component kits (pre-made buttons, forms, icons) to speed up creation and ensure consistency
across screens.

 How to create: Sketch or quickly draw each screen’s layout: header, main content blocks,
buttons. Use single-column layouts for clarity (especially on mobile).

 Figma check-in: Build basic components (buttons, input fields) with variants (hover,
disabled states) to reuse. This turns into a quick “Wireframe kit.”

 Examples: Wireframe the Home screen (logo, search bar, featured items), Cart (list of
items, total, checkout button), and Profile (avatar, settings list) to cover key app flows.
Prototyping

Prototyping in Figma means linking frames to simulate user interactions. You set starting points
and then draw connections between elements (e.g., clicking a button goes to another frame).
You can add interactions (on click, on drag, hover) and simple animations (smart animate,
instant, dissolve). For example, make a button highlight on press or a screen slide left on
navigation. Prototype Settings in Figma: define the first screen (e.g. login page), then connect
“Submit” to the home screen. Adjust Prototype Settings (device frame, animation speed) and
present the prototype for review.

 Flows: In Figma, define flows (e.g. “Login Flow” vs “Search Flow”) by grouping related
frames.

 Interactions: Use Figma’s interactive components (buttons that can be clicked or

toggled) for repetitive elements.

 Animations: Experiment with Figma’s Smart Animate for smooth transitions (e.g. a
sliding menu).

 Projects: Practice by prototyping a navigation menu, removing an item from a wishlist,

or searching for a product through connected frames.

Getting Feedback

Feedback is vital to refine designs. Research shows that well-designed forms have twice the
first-try success rate. Encourage constructive feedback: viewers should comment on usability
and clarity, not aesthetics alone. When gathering feedback, be specific: ask testers to “describe
what they expect when they see this screen.” Use comments in Figma or collaborative tools for
inline notes.

 Why feedback matters: It uncovers issues early, saving time later.

 Best practices: Keep an open mind. Ask colleagues or test users to “think aloud.” Look
for recurring pain points (e.g., confusing button labels).

 Constructive feedback tips: Phrase feedback with actionable suggestions. For example,
instead of “This looks wrong,” say “I expected the Submit button to say ‘Register’ on this
form.”

4. Visual Design – Design Theory & Accessibility

Spacing and Grids

Grids provide structure and balance. Use a responsive grid (commonly 12 columns) so content
reflows on different screens. For example, on desktop you might use a 12-column grid with 16px
gutters; on mobile collapse to 4 columns. In Figma, apply layout grids to frames (fixed or fluid)
and adjust at breakpoints. Consistent spacing (margins and padding) ensures alignment; follow
a spacing system (e.g. 8pt increments) for margins between elements.

 Grid basics: Define columns, gutters (space between columns), and margins. Many
frameworks (like Material Design) use a 12-column grid.

 Breakpoints: Set grid changes at widths (e.g. mobile, tablet, desktop). This ensures your
design adapts.

 Rules: Align text and images to the grid. Keep equal spacing between elements. Use
Figma’s layout grid to preview how the UI shifts with container width.

Typography

Typography is critical because most content is text. Choose typefaces that are readable and
match the brand. Often one serif and one sans-serif are paired: for example, a serif for headings
(more elegant) and a sans-serif for body (clean on screens). Use text styles in Figma to
standardize fonts, sizes, weights, and line spacing (leading). Create a hierarchy: big bold
headlines, medium subheads, regular body text, and smaller captions or labels.

 Font selection: Limit to 2–3 typefaces. Consider accessibility: sans-serifs often read
better on low-res screens.

 Figma check-in: Set up Text Styles (e.g. H1, H2, Body, Caption) so updates apply globally.

 Exercise: Experiment by matching font families (e.g. a playful script vs a clean modern
font) and test readability. Use Google Fonts for a wide, free selection.

Color
Color sets the mood and reinforces branding. Research shows people form an opinion about a
product’s visual appeal within 90 seconds, and up to 90% of that is based on color. Use color
theory: pick a primary brand color and then create a palette (neutrals and accents) that
harmonize. Employ one or more of the classic schemes (complementary, analogous, etc.) to
ensure balance. Always check accessibility: text should have sufficient contrast (WCAG requires
~4.5:1 for normal text).

 Palette creation: Often 6 colors: a dominant brand color, 4 accent/support colors, and 1
neutral (for text).

 WCAG contrast: Use tools (e.g. WebAIM Contrast Checker) to verify contrast ratios meet
guidelines.

 Figma check-in: Define Color Styles (primary, secondary, accent, background, text) so
they can be updated globally. Apply consistent color usage (e.g. link blue only for links).

Imagery and Iconography: Use images and icons to convey information quickly. Photographs or
illustrations can highlight real-world contexts, while icons (simple symbols) represent actions or
objects. Ensure all visuals have a consistent look: for example, keep illustrations in a similar
color palette and level of detail. Icons should share the same stroke weight and style (filled vs
outline). Always optimize image files for the web (balance file size vs quality).

 Choosing images: Select photos/illustrations that match brand tone and content. Avoid
decorative images that don’t add meaning.

 Icons: Use a single icon set across the UI. In Figma, install icon plugins or import SVGs.
Match icon thickness to font weight for unity.

 Figma check-in: Use Figma plugins (like Unsplash or Iconify) to pull royalty-free images
and icon libraries quickly.

Forms & UI Elements

Forms collect user input and must be clear and easy. Follow usability guidelines: keep forms as
short as possible – each extra field can reduce completion rates. Group related fields (e.g.
address fields together) and label them clearly. Use a single-column layout (one question per
row) so users scroll naturally. For buttons and inputs, use Figma Components: create a Button
component with variants (default, hover, pressed, disabled) and an Input component (with
states). This ensures consistency and speeds design changes.

 Best practices: Label inputs right above fields (especially on mobile) and mark required
fields clearly.

 Buttons: Make primary actions (e.g. “Submit”) stand out with color. Don’t use
ambiguous labels – “Submit” or “Save” are clearer than “Go” or “Okay.”

 Figma check-in: Utilize Component Properties. For example, a Button component can
have a “style” property (primary/secondary) and a “state” (normal/hover), allowing you
to change variants via props.

Accessibility

Accessibility means designing for all users, including those with disabilities. Follow WCAG
principles: perceive, operate, understand, robust. Practically, ensure text has high contrast (at
least 4.5:1), images have alt text, and interactive elements (links/buttons) are identifiable by
screen readers. Use clear, simple language and logical layout. Design with keyboard-only
navigation in mind: every button should be focusable and triggered by Enter/Space. Tools like
browser dev tools or contrast checkers help verify compliance.

 Visual patterns: Include focus indicators on interactive elements (a visible outline or

color change). Avoid color alone to convey meaning (e.g. underlines for links).

 Assistive tech: Structure your design so it can be coded with semantic HTML (headings,
lists, labels). This way screen readers and magnifiers work properly.

 Evaluation tools: Run automated checks (WebAIM, WAVE) and manual tests (e.g. try
tabbing through or simulating color-blindness) before finalizing.

5. Design Exploration – Application Design & Design Systems

Design Patterns
Design patterns are proven UI solutions for common problems. Examples include card layouts
for displaying items, tab bars for section switching, or forms with inline validation. Use patterns
to guide users (they subconsciously recognize these solutions). Analyze popular apps: for
instance, a bottom navigation bar on mobile or a search icon always at top-right. When
choosing patterns, consider the context: a carousel might show featured content, whereas a
simple list suits browsing. Document the patterns you use so that team members can apply
them consistently across screens.

 Why valuable: Patterns speed up design by reusing known solutions. They improve
usability by meeting user expectations (e.g. placing a shopping cart icon top-right in an
e-commerce app).

 Applying patterns: Tailor a pattern to your style – for example, use your brand colors in a
tab bar. Test patterns with real users to ensure they work in your flow.

Mobile Design

Mobile-first design is critical. Use fluid grids and media queries: start designing for the smallest
screens and scale up. On phones, prioritize content: show only what’s essential (hide or collapse
less important info). Make touch targets big (at least 44×44px) and place navigation in thumb-
friendly areas (bottom of screen). Employ responsive techniques: use relative units (%, em) for
widths so layouts adapt. Test breakpoints in Figma’s Prototype settings or by resizing frames.

 Breakpoints: Define layouts for mobile, tablet, desktop. For example, a 12-col grid on
desktop might become 4-col on phone.

 Mobile-specific: Use simplified navigation (a hamburger or bottom tab) and touch-

friendly UI (larger buttons, spacing).

 Best practices: Minimize text input (use dropdowns or toggles when possible), leverage
device features (camera, location), and keep UI clean (avoid clutter on small screens).

Visual Style and Exploration

Now refine the visual fidelity. Develop high-fidelity mockups of key screens: Home, Product
Page, Profile, etc. Apply effect styles (shadows, blurs) sparingly to add depth. Ensure
consistency: use the same card style for product lists, the same button shape across screens,
and a uniform header/nav bar. Experiment with variations (alternative color accents, different
header layouts) and pick the one that best serves usability and brand. Review typography and
spacing one more time at full fidelity to catch any misalignments.
  Examples: Design a polished Home Screen with banner image, feature highlights, and
feed of products. Then a Product Detail Screen with large product image, details, and a
sticky “Add to Cart” button.

 Detail work: Fine-tune alignment, ensure all text is legible on background images, and
check that touch targets meet size guidelines.

 Figma check-in: Create final “Components” for all UI elements to lock in the style (e.g.,
make the header, footer, and card a component).

Motion and Microinteractions

Small animations make the product feel alive. Microinteractions are tiny UX details (like a
loading spinner or a button changing color when clicked) that communicate status and delight
users. For instance, showing a toast message after a form submission or animating a “like”
heart. In Figma, use Smart Animate to prototype these: design two states (button at rest and
when clicked) and Figma will interpolate between them. Common examples: loading spinners,
pull-to-refresh animations, or hover effects on desktop.

 Importance: Microinteractions provide feedback (system status, confirmations) and can

even reinforce branding (e.g. a playful icon motion). They make experiences engaging
rather than flat.

 Implementation: Only animate when it adds value. Overuse can distract or slow down.

 Practice: Create a Smart Animate prototype of a button press or a modal opening. For
example, when an email is sent, have a paper-plane icon fly, then show a “Sent!”
message.

6. Putting It All Together – Design System & Hi-Fi Prototyping

Design Systems

A design system is a comprehensive set of reusable components and guidelines for a product. It
ensures consistent design at scale. It typically includes:

 Foundation styles: Color palette, typography styles, spacing rules.

 Components: Buttons, inputs, cards, headers, lists, navigation bars – each with
documented variants (size, state). For example, a Button component might have
Primary/Secondary types and states (normal, hover, disabled).

 Patterns: Combined components (like a header pattern that uses a logo, nav, search
field).
  Resources: A Figma library file where all these styles and components live, plus assets
(logos, icons, illustrations).

The system acts as a “single source of truth.” Designers and developers can both use it:
designers by dragging Figma components onto screens, and developers by copying standardized
code. This avoids duplication and inconsistency. Maintain the system by assigning someone to
update it as new needs arise (e.g. adding a new “card” style or adjusting button color).

Execution

Finally, apply the design system to build the final screens and interactions. Assemble each
screen (e.g. Onboarding, Home, Profile, Cart) using the components from your library. At this
stage, everything should be polished and pixel-perfect. Create hi-fi prototypes in Figma that
include realistic content, images, and any animation (using tools like Lottie Files for advanced
motion if desired). Test these prototypes end-to-end:

 Registration & Onboarding: Link together the Welcome, Sign-up, and Onboarding
screens. Ensure form validation and success messages work in the flow.

 Shopping Flow: Prototype adding products to cart and checking out. Animate feedback
(e.g. a checkmark on successful payment).

 Search/Filters: If applicable, prototype a search bar filtering product, and show how
results load.

Always review these final prototypes on actual devices and solicit final feedback. This “Putting It
All Together” phase ensures that the course content leads to a cohesive, high-fidelity
application mockup demonstrating all learned principles and practices.

Sources: Authoritative UX/UI guides and articles have been cited throughout (e.g. Nielsen
Norman Group, Interaction Design Foundation, Figma resources) to ground this content in
current best practices. These form the basis of each topic covered.