2024-12-20 · Products & systems

Focal Sketches

Arrangement of elements in a two-dimensional space: Fat marker sketch at large scale = Fine marker sketch at small scale. These annotated focal sketches can be arranged along a flow or be more targeted to a specific page/screen/place (on a lightweight annotated affordance map). This tool is critical when we need to communicate an idea when words can’t, since words can be too abstract, and we do not want to waste time on wireframes or unnecessary fidelity. This also helps you avoid the weight of a Figma spec while providing direction for developers and designers to implement together.

When you draw something, you are forced to be specific, at least with what needs to be obvious and what doesn’t—the key centers of the action space.

I recommend getting an iPad Pro and Apple Pencil Pro.

Discussion

**2D Arrangement (Fat Marker Sketches)**

**Key Idea:** Create rapid spatial layouts (big marker drawings, focal sketches) to clarify essential elements and their placement.

- **Decomposition:**

- Segments the design surface into distinct regions (header, footer, sidebars, focal zones).
- Forces you to decide *what* belongs *where* in broad strokes.
- **Abstraction:**

- Large-scale sketches avoid detail; they capture the *essence* of placement rather than exact UI design.
- Keeps your attention on main structures and user flow, not pixel-level tweaks (what needs to be obvious).
- **Pattern Recognition:**

- Lining up multiple targeted sketches regarding one screen side by side helps you *see repeated layout patterns* or common user interface “hotspots.”
- Shared visual structures become clearer (e.g., a consistent top menu across sketches).
- **Algorithm/Procedure:**

- While not a code-like algorithm, these sketches **inform** user flow or design steps.
- They can evolve into a *sequence of screens* or states once you clarify how elements interact.