Design → The Basics

The Basics: Screens, Objects, and Visual Hierarchy

This lesson defines screens and objects in UI design and explains core object properties and visual hierarchy. The goal is practical: use these concepts to make interfaces clearer and easier to scan.

Key takeaways

  • Screens are frames for tasks; use presets and responsive layouts to scale designs.
  • Objects are the building blocks (text, shapes, icons, images); components group objects for reuse.
  • Object properties (size, position, spacing, fill, border, radius, elevation, states) control perception and behavior.
  • Visual hierarchy helps users scan and complete tasks through size, contrast, position, proximity, and alignment.
  • Improving size, spacing, and alignment yields large clarity gains without changing color or branding.

Core concepts

1) Screens

A screen is a framed view where a user completes a task. Designers use screen presets (mobile, tablet, desktop) and responsive patterns so layouts adapt to available space. Presets speed decisions; responsive rules ensure elements reflow predictably across sizes.

2) Objects

Objects are elemental UI items: text blocks, shapes, icons, and images. Components are groups of objects that solve a small task (e.g., a form field, card, or button group). Treat components as reusable units to maintain consistency.

3) Object properties

Understand these properties in practical terms:

  • Size: Width and height determine visual weight and readable line length.
  • Position: The object’s placement (x/y) affects reading order and attention.
  • Spacing: Padding and margins control grouping and breathing room.
  • Fill: Background color, gradient, or image used to separate areas or emphasize content.
  • Stroke/Border: Outlines that define edges and separate objects from neighbors.
  • Radius: Corner rounding that affects perceived friendliness and weight.
  • Elevation cues: Shadows or borders that suggest depth; use blur sparingly and for subtle separation.
  • States: Default, hover, active, and disabled states show interactivity and feedback.

4) Visual hierarchy

Visual hierarchy arranges elements so users scan efficiently and complete tasks. Key techniques:

  • Size: Larger elements attract attention first.
  • Contrast/Color: Brighter or higher-contrast items stand out.
  • Position: In many left-to-right reading cultures, top-left areas receive early attention; adjust for other reading directions when needed.
  • Proximity: Group related items to show relationships and reduce scanning time.
  • Alignment: Consistent edges create predictable reading paths.
  • Common region: Cards and panels form visual groups and prioritize content areas.
  • Figure–ground: Separate foreground elements from background to reduce ambiguity.

Good vs Bad

Two scenarios show observable differences. The layout and inline styles below are preserved from the course templates.

❌ BAD DESIGN — CHECKOUT

Example 1: Checkout — cluttered priority

Primary payment action is visually lost among similarly weighted buttons and dense form fields, increasing friction and uncertainty about the final action.

Example 2: Checkout — weak grouping

Related controls (summary, coupon, place order) are separated inconsistently, causing extra scanning and mistakes during final confirmation.

✓ GOOD DESIGN — CHECKOUT

Example 1: Checkout — clear primary action

Primary payment action is larger and isolated with consistent spacing, making the final confirmation obvious and reducing decision time.

Good checkout example

Example 2: Checkout — grouped summary

Order summary and checkout controls are grouped in a single card with clear spacing and alignment, improving scanability.

❌ BAD DESIGN — SETTINGS

Example 1: Settings — poor grouping

Related toggles and labels are scattered without clear containers, forcing users to scan multiple areas to find related settings.

Example 2: Settings — inconsistent labels

Label lengths and alignment vary; controls are misaligned, creating ambiguity about which label applies to which control.

✓ GOOD DESIGN — SETTINGS

Example 1: Settings — grouped sections

Controls are organized into labeled sections with consistent spacing and clear headings, reducing search time for related settings.

Good settings example

Example 2: Settings — aligned labels

Labels and controls are left-aligned with fixed spacing, making relationships between labels and controls predictable.

Mini exercise

Task: Take a messy checkout or settings screen and improve clarity using only size, spacing, and alignment.

  1. Increase the primary action size and isolate it with consistent surrounding space.
  2. Group related controls into cards or sections using consistent padding.
  3. Align labels and inputs to a single grid to make relationships predictable.

Checklist

  • Primary action is visible and isolated.
  • Text is readable at expected sizes and line lengths.
  • Spacing is consistent across similar components.
  • Related items are grouped and labeled.
  • Controls and labels are aligned to a grid or consistent edge.
  • Interactive states exist and are distinguishable (hover, active, disabled).