Free course · Lesson 5 of 5
UI/UX Design Basics
In this lesson you will
- Distinguish wireframes and mockups
- Use grids, spacing and touch targets
UI (User Interface) design focuses on how a product looks. UX (User Experience) design focuses on how it works. Together they ensure digital products are both beautiful and easy to use. Whether you are designing a mobile app in Figma or a website in Canva, start with a wireframe — a structural blueprint without colors or images.
- Wireframe vs Mockup: A wireframe is a low-fidelity layout showing structure (boxes, lines, placeholder text). A high-fidelity mockup adds real colors, images, fonts, and spacing — it looks like the final product.
- 8px Grid System: Space elements in multiples of 8px (8, 16, 24, 32, 40, etc.). This creates visual rhythm and makes layouts feel cohesive. All professional tools (Figma, Sketch, Adobe XD) use this standard.
- Touch targets: Buttons and interactive elements should be at least 48px x 48px (or 44px minimum) so they are easy to tap on mobile. Space clickable items at least 8px apart to prevent accidental taps.
- Figma is the industry standard for UI/UX design in 2026 (free tier available). Canva is great for quick mockups but lacks advanced prototyping features like interactive transitions.
Practical Skill: In Figma (free), create a new file and draw a 375px-wide mobile frame. Use the 8px grid to build a simple card component — an image at the top, a title, a short description, and a button. Export as a PNG to share with stakeholders.
=== MOBILE APP CARD COMPONENT (375px mobile frame) === Tool: Figma (free) or Canva Frame: 375px wide x 812px tall (iPhone standard) Grid: 8px increments — all spacing in multiples of 8 +--------------------------------------------------+ | ┌──────────────────────────────────────────┐ | | │ │ | | │ IMAGE / HERO AREA │ | | │ (375px wide x 200px tall) │ | | │ Border-radius: 12px (top only) │ | | │ │ | | └──────────────────────────────────────────┘ | | ↑ | | rounded top | | | | Padding: 16px around entire card content | | | | ┌─ 24px ───────────────────────────────────┐ | | │ Title (18pt Bold, #111827) │ | | │ │ | | │ 8px gap │ | | │ │ | | │ Category tag │ | | │ Background: #F2C035 (accent gold) │ | | │ Text: 12pt Bold, #111827 │ | | │ Padding: 6px top/bottom, 12px left/right│ | | │ Border-radius: 999px (pill shape) │ | | │ │ | | │ 12px gap │ | | │ │ | | │ Description text (14pt Regular, #4B5563)│ | | │ Max 2 lines, line-height: 1.5 │ | | │ │ | | │ 16px gap │ | | │ │ | | │ [ View Details ] — Button │ | | │ Full width (343px), 48px tall │ | | │ Background: #1D448A (primary blue) │ | | │ Text: White, 16pt Semibold, centered │ | | │ Border-radius: 8px │ | | └──────────────────────────────────────────┘ | | | | Card total height: ~420px | | Card shadow: 0px 4px 12px rgba(0,0,0,0.08) | | Card background: white, 12px corner radius | | | +--------------------------------------------------+ --- 8PX GRID COMPLIANCE CHECK --- • Padding inside card: 16px ✓ • Gap between title and tag: 8px ✓ • Gap between tag and description: 12px ✓ (8+4 — 12 is 8x1.5, acceptable) • Gap before button: 16px ✓ • Button height: 48px ✓ (6 x 8px) • Corner radius: 12px and 8px — both divisible by 4 (standard for UI) --- INTERACTION RULES --- • Button hover: darken background to #143166 • Card on press: subtle scale to 0.98 (Figma Smart Animate) • Touch target (button): 48px minimum height ✓Practice exercise
Sketch a wireframe for a business's mobile page around three user tasks and mark spacing in multiples of 8.
Key takeaways
- Plan structure before style
- Use consistent spacing
- Make touch targets about 44–48 px
Free self-study lesson — no certificate. For the full instructor-led program, see registration options.