Wireframing

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.