25

    Common Web Design Patterns

    By Nitin Khatri (Senior UI/UX Designer & Educator)
    Reviewed by Sarah Miller (Principal Product Designer (Reviewer))
    Updated
    Video Lesson: 11:30
    Level: Advanced
    Official References:
    Figma Help CenterFigma YouTube Channel

    Don't reinvent the wheel. This lesson explores established web design patterns for navigation, search, and content discovery that provide a familiar user experience.

    Complete tasks and quiz to finish this lesson.
    Tasks
    Quiz

    Lesson Video

    Lesson Content

    Learning Objectives

    • •Identify and implement standard patterns like the Hero Section, F-Pattern, and Z-Pattern
    • •Structure effective global navigation and footer systems
    • •Design common UI components: cards, accordions, and tabs
    • •Apply psychological principles like proximity and similarity to layouts

    What You'll Learn

    1. Overview of standard web layout structures
    2. Designing for scanning vs. reading (F and Z patterns)
    3. Creating effective calls-to-action (CTAs) and conversion points
    4. Using whitespace to guide the user's eye

    Key Concepts

    Design Patterns
    Scanning Patterns
    Information Architecture
    Calls to Action

    Key Takeaways

    • ✓Standard patterns help users navigate your site with less cognitive effort.
    • ✓Visual hierarchy tells the user what information is most important.
    • ✓Well-placed CTAs are critical for meeting business and user goals.
    • ✓Consistency in patterns builds trust and improves accessibility.

    Practice Tasks

    Hero Section Construction

    Build a high-conversion hero section using proven layout patterns.

    • Create a 'Z-Pattern' layout with a logo top-left and CTA top-right
    • Add a primary value proposition (H1) and supporting subheadline
    • Include a primary and secondary CTA button pair
    • Use a background image that doesn't compete with text legibility

    Form and Search Discovery

    Design an intuitive search and filtering system for content discovery.

    • Design a global search bar with a clear placeholder and icon
    • Create a 'Filter' sidebar with checkboxes and radio buttons
    • Implement 'Breadcrumbs' for deep navigation paths
    • Ensure the search results follow a consistent card pattern

    Knowledge Check

    Pass with 75% or higher

    1. Which visual pattern describes how users typically scan a text-heavy website?

    2. What is the primary function of a 'Hero Section' on a website?

    3. What is a 'Call to Action' (CTA)?

    4. What is the purpose of using 'Whitespace' (Negative Space) in a layout?

    Lesson FAQ

    Q: How can I practice what I learned in this lesson?

    We highly recommend opening your own Figma workspace in a side window and repeating the steps shown in the video. Utilize the tasks checklist above for specific practice targets.

    Q: What should I do if my layout behaves differently from the walkthrough?

    Double-check parent-child constraints and resizing values (e.g. Hug vs Fill). Ensure Auto Layout direction is correct and check the related guidebooks below for step-by-step visual references.

    Lesson Resources & Connections

    Prerequisites

    No prerequisites required. This is a foundational starter lesson.

    Related Guidebook

    How to create responsive layouts in Figma using Auto Layout

    Read Guidebook →

    How to use Auto Layout for cards and lists in Figma

    Read Guidebook →

    Relevant Design Tool

    Image Compressor

    Reduce asset size before export.

    Open Companion Tool →

    Next Lesson

    Collaborating with Teams in Figma