DesignDojo
1.3-composition · 01-layout-patterns

Estimated time: 8 min

Sidebar + contentTop nav + gridHero + featuresDashboardSettings form
Five composition patterns at a glance

Pattern 1: Sidebar + Content

Use this for settings, admin, and deep app areas where local navigation stays visible.

Pattern 2: Top Nav + Grid

Use this when top-level wayfinding stays simple and content blocks are repeatable.

Pattern 3: Hero + Features

Use this for landing and release pages where one message leads and supporting benefits follow.

Pattern 4: Dashboard

Use this when users must monitor stats, trends, and actions in one glance-heavy workspace.

Pattern 5: Settings Form

Use this when sections are task-oriented and save actions should remain easy to locate.

When Pattern Choice Goes Wrong

Choose the pattern that matches navigation depth and content density before styling details.

Mini Practice

Exercise

Pick a pattern before drawing components:

  1. SaaS settings with 12 subsections.
  2. Landing page with one CTA and feature proof.
  3. Ops dashboard with KPI cards and alerts.
Layout Pattern

A reusable page blueprint that defines where navigation, content blocks, and actions belong.

Progress saves locally on this device.

Learning Loop

Lock this lesson in with a fast cycle: quiz the module, drill flashcards, then run the daily challenge.

Take Module QuizPractice FlashcardsRun Daily Challenge

Next Lesson

Spacing System