Before you invest time in polish, you need to know whether the idea works. Wireframes are simple, low-detail drawings of a screen that show what goes where, without colour, imagery or finished type. Because they are quick and cheap to change, they are the best place to explore options and catch problems early.
You'll start on paper with sketching and the Crazy 8s exercise, which pushes you to produce many different ideas fast. Then you'll move to low-fidelity digital wireframes, learn how grids keep a layout organised, and build a wireframe step by step in Figma.
Treat the videos as a reference and come back to them when you start your own screens. When you're done, continue on to Prototyping in Figma.
What a wireframe is, how it works as a low-fidelity visualization of a future interface on paper or in a digital tool, and what it is for.
A simple solo or team sketching exercise for when you feel stuck: how to use Crazy Eights to produce lots of ideas quickly.
Why low-fidelity digital wireframes are such an important early step in the UX design process, and how to make them.
How to use grids in website and UI design, including what columns and gutters are in a grid system.
A beginner-friendly tutorial on creating a wireframe for a UX app in Figma.