StretchLearn Course

Design the structure of a screen before the paint, so people critique your thinking, not your colors

A complete beginner workflow for low- and mid-fidelity wireframes, information hierarchy, annotation, and clickable lo-fi prototyping

Preview Curriculum Back to Catalog

Beginner9 hr 50 minSelf PacedRegistered

Course Overview

What this course is designed to develop

This course teaches the planning craft that sits between a vague idea and a polished mockup, the stage where you decide what goes on each screen, in what order, and why, without getting distracted by color, type, or imagery. You will learn the fidelity ladder (sketch, low-fidelity, mid-fidelity, high-fidelity) and exactly when each one earns its keep, then apply concrete layout frameworks such as the F-pattern and Z-pattern reading paths, visual hierarchy, Gestalt grouping, and the 8-point spacing grid to arrange content so the most important thing is obvious. You will work in the tools professionals actually reach for, Balsamiq for deliberately rough lo-fi, Figma and FigJam for scalable mid-fidelity and components, Whimsical and Excalidraw for fast structure, and learn the grayscale discipline that keeps a wireframe a wireframe. You will master annotation conventions so a wireframe communicates behavior, states, and logic on its own, build a clickable lo-fi prototype to test a flow before a line of code is written, and run a lightweight critique. By the end you can take a feature from a blank canvas to a hierarchy-correct, fully annotated, clickable wireframe set that a designer or developer can build from with confidence.

Learning Outcomes

What the learner should be able to understand, build, or execute.

Choose the right wireframe fidelity (sketch, low, mid) for the decision you are trying to make and the stage you are in

Structure screens with information hierarchy using the F-pattern, Z-pattern, visual weight, and Gestalt grouping

Apply an 8-point spacing grid and a column layout so wireframes have real, consistent structure rather than eyeballed gaps

Keep wireframes in grayscale and free of visual noise so feedback targets structure, not surface styling

Annotate wireframes with standard conventions for states, behavior, content, and logic so they communicate without you in the room

Build a clickable low-fidelity prototype in Figma or Balsamiq and run a quick critique to validate a flow before high-fidelity design

Curriculum Preview

Inside the curriculum: a structured path from fundamentals to execution.

Preview the course structure, see how the modules build on one another, and understand the path this program is designed to take you through.

Module 1

Module 1: What Wireframing Is and the Fidelity Ladder

Understand why wireframing exists as its own step, where it sits between the idea and the polished mockup, and how to pick the right fidelity for the moment. Get the fidelity ladder and the grayscale rule right and every later decision becomes cheaper, because you will always be solving structure with the lightest tool that answers the question.

3 lessons

Why wireframe at all: thinking made cheapContent · 45 min

Preview Enabled

The fidelity ladder: sketch, low, mid, highContent · 50 min

LMS Access

The grayscale rule and the cost of visual noiseContent · 45 min

LMS Access

Module 2

Module 2: Information Hierarchy and Layout Structure

Turn a list of content into a screen people can read at a glance. Master how the eye actually moves across an interface, the principles that group and rank elements, and the grid and spacing system that gives a wireframe real, consistent structure instead of eyeballed gaps.

3 lessons

How the eye moves: F-pattern, Z-pattern, and visual weightContent · 50 min

LMS Access

Gestalt principles: grouping and structureContent · 50 min

LMS Access

Grids, columns, and the 8-point spacing systemContent · 50 min

LMS Access

Module 3

Module 3: Building Wireframes in the Tools

Move from theory to a real file. Choose the right tool for the fidelity you need, build reusable wireframe components so screens stay consistent, and assemble common UI patterns and screen states the right way, so producing a screen becomes fast and repeatable.

3 lessons

Choosing your tool: Balsamiq, Figma, Whimsical, ExcalidrawContent · 45 min

LMS Access

Wireframe components and reusable patternsContent · 50 min

LMS Access

Common UI patterns and designing every stateContent · 50 min

LMS Access

Module 4

Module 4: Annotation, Lo-Fi Prototyping, and Critique

Make a wireframe communicate without you in the room. Add the annotations that explain behavior and logic, connect frames into a clickable lo-fi prototype that tests a flow before any code, and run a focused critique so your wireframes get better, not just prettier.

3 lessons

Annotation conventions: making intent explicitContent · 50 min

LMS Access

Lo-fi prototyping: testing a flow before codeContent · 50 min

LMS Access

Running a critique and handing offContent · 55 min

LMS Access

Built for Application

A complete learning path, not a one-off inspiration hit.

This program is designed around progression: focused lessons, structured modules, applied resources, assessments, and a course rhythm that turns information into usable capability.

wireframingux designui designinformation architecturelow fidelity prototypingfigmabalsamiqdesign process