Sketching and wireframing

0:00 Sketching and wireframing

Have you ever sat in a meeting where everyone argued about the color of a button, on a page whose structure was completely wrong? It happens all the time. And it's expensive, because by the time someone notices the structure problem, the page is already designed, built and paid for. Wireframes prevent that. In this lecture, you'll learn what wireframes are, the fidelity levels and when to use each, how to start from a content priority list, why mobile comes first, how to annotate behavior, and how to build a clean wireframe in Figma in about twenty minutes.

0:43 What a wireframe is

A wireframe is a simplified layout that shows structure, content priority and function, without final colors, images or polished typography. Why bother? Because wireframes let you agree on what goes where, and why, before anyone spends time on visuals or code. Here's an analogy. Before building a house, an architect draws a floor plan. Nobody chooses curtains from a floor plan. You decide where the kitchen goes, whether the bedrooms get light, and whether the front door leads somewhere sensible. A wireframe is your page's floor plan.

1:21 Four fidelity levels

There are four fidelity levels. Sketches on paper or a whiteboard, boxes and scribbles, perfect for exploring many ideas in minutes. Low-fidelity wireframes, gray boxes with basic labels, for agreeing structure. Mid-fidelity wireframes with real headlines, real form fields and a grid, for testing flows and content. And high-fidelity mockups with final visuals, for approval and handoff. Here's the key idea. Moving to high fidelity too early makes people comment on photos and colors instead of structure. Start low, and only increase fidelity when the question you're answering needs it.

2:00 Content first

Wireframes work best with real content. Lorem ipsum hides problems. A headline that looks fine as placeholder text might be twice as long in reality, or a testimonial might not exist yet. So before you draw a single box, write a content priority list. For an online course page, it might be: the headline with the core promise, a subheadline on who it's for, the primary call to action, proof like testimonials, what you'll learn, the curriculum, the instructor, pricing, the FAQ, and a final call to action. That order reflects what visitors need to decide, not what the company wants to say first.

2:45 Mobile first

Now, mobile first. Start with the phone-sized wireframe. A narrow screen has one column, so it forces you to decide what comes first. There's no room for everything above the fold side by side. Once the mobile version works, expand to tablet and desktop, where content can sit next to each other. On mobile, check three things. Is the main message and call to action visible without scrolling far? Are tap targets large and well spaced? And does every section earn its place? If a section doesn't help someone decide, it goes.

3:25 Worked example 1: three sketches in ten minutes

Worked example one, simple. A creator selling a video editing course sketches three mobile layouts in ten minutes. Version A leads with a hero video. Version B leads with student results. Version C leads with the price and a short curriculum. She shows them to two past students and asks which would make them keep reading. Both pick B, because proof of results answers their biggest worry: will this actually work for someone like me? She turns B into a low-fidelity wireframe with real copy and annotations, and only then starts visual design.

4:05 Worked example 2: Dubai cleaning company (illustrative)

Worked example two, a business scenario with illustrative details. A cleaning company in Dubai wants a new homepage. Research shows customers want four things: a price estimate, availability, trust that staff are vetted, and easy booking, often through WhatsApp. So the content priority list starts with a headline and an instant price estimator, then book now and chat on WhatsApp buttons, trust signals like vetting, insurance and reviews, services, a three-step how it works, areas covered, and an FAQ. The owner reviews a low-fidelity version focused only on structure. Then a mid-fidelity version with real copy goes into usability testing.

4:48 Watch me do it: Figma wireframe

Watch me do it in Figma. I press F for the frame tool and pick a phone preset. I name it landing, mobile, version one. I add a layout grid: four columns with sixteen pixel margins and gutters. Then I draw one rectangle per item on my content list, select them all, and press shift and A to wrap them in a vertical auto layout frame, with twenty-four pixels between sections. Now reordering is just dragging, and the spacing stays consistent. I paste in real copy, mark images with a box and an X, and label every button.

5:31 Annotate and compare

Next, annotations. I add numbered notes. One: headline, maximum ten words. Two: the call to action scrolls to pricing. Three: testimonials become a carousel on mobile and three columns on desktop, real customers only. Four: the form has name and email with inline validation, and a success message replaces the form. Five: a sticky call to action bar appears after half the page is scrolled. Then I duplicate the frame twice to make variants with different section orders, and compare them side by side. In the review, I ask structure questions only, and I park any comments about colors or photos for later.

6:16 AI-generated wireframes

A note on AI. Figma's AI features and standalone prompt-to-UI tools can generate a first wireframe from a text description in seconds. That's genuinely useful for exploring layouts. But generated layouts tend to be generic. They don't know your research, your customers' worries or your content priority. So start from your own content list, and treat a generated wireframe as one more variant to compare, never as the answer. We'll go deeper into these tools in the next lessons.

6:50 Run a structure-only review

How do you run a wireframe review without it turning into a debate about taste? Use five structure questions. What do you think this page offers, and who is it for? What's the one action we want, and is it visible without much scrolling? Which objection is still unanswered before we ask for that action? Which section could we remove without losing anything? And is anything here only because a competitor has it? Keep a parking lot for comments about colors, fonts and photos, and promise to revisit them at the visual design stage. That keeps the meeting short and the decisions about structure.

7:35 Common mistakes and measures

Common mistakes. Jumping straight into high-fidelity visuals. Using placeholder text that hides content problems. Designing desktop first and cramming everything onto mobile. Leaving wireframes unannotated, so developers and copywriters have to guess the behavior. And letting stakeholders debate photos during a structure review. How do you know wireframing is working? Stakeholders agree on structure before visual design begins, later usability tests find few structural problems, and the number of structural changes requested after high-fidelity design starts goes down over time.

8:10 Recap and try this now

Let's recap. Wireframe structure before style. Start with a content priority list and real copy. Design mobile first. Use the lowest fidelity that answers your question. Annotate behavior. And run reviews that focus on structure. Try this now. Write a content priority list for one landing page you own. Then sketch three different mobile layouts in fifteen minutes. Pick the best, turn it into an annotated low-fidelity wireframe in Figma or on paper, and show it to one person who matches your audience.