Wireframing

The napkin that became Instagram

In 2010, Kevin Systrom and Mike Krieger were building a check-in app called Burbn. It did everything — check-ins, social networking, photo sharing, event planning. Users were confused. They ignored most features.

Then Systrom noticed something in the analytics: people were using exactly one feature obsessively — photo sharing. Everything else was noise.

He sat down with a pen and sketched the entire new app on paper. Three screens. Take a photo. Apply a filter. Share it. No check-ins. No event planning. No social networking beyond a feed.

That napkin sketch became Instagram. It launched in October 2010 and hit 25,000 users on day one, 1 million in two months, and was acquired by Facebook for $1 billion in 2012.

Instagram started as a wireframe — boxes and lines on paper that answered one question: what goes on the screen, and what do we remove?

What you will build in this module

By the end, you will be able to wireframe a login screen with proper visual hierarchy, design a responsive product page at three breakpoints, and classify UI patterns by content type. In Module 3, you built the site map — the blueprint of your product's structure. Now you will sketch the screens that bring that blueprint to life.

What is a wireframe?

A wireframe is a low-fidelity blueprint of a screen. It shows layout, content hierarchy, and functionality — without color, images, or visual polish.

Think of it as the architectural floor plan of a room. The floor plan tells you where the walls, doors, and windows go. It does not tell you what color to paint the walls or what furniture to buy. That comes later.

Fidelity levels — low, mid, and high

Not all wireframes are the same. The level of detail depends on where you are in the process.

There Are No Dumb Questions

"Can I skip straight to Figma? I am faster on the computer."

You can, but you should not — at least not for the first round. Pen and paper has one massive advantage: it is disposable. When you spend 5 minutes sketching on paper, you feel zero attachment to the result. You will throw it away and try a completely different layout. When you spend 45 minutes building a Figma wireframe, you become attached. You start tweaking instead of rethinking. Paper sketches first, Figma second.

"How many wireframe variations should I create?"

For a key screen (homepage, checkout, dashboard), sketch at least 3-5 different layouts before committing to one. This is called "exploring the solution space." Your first idea is almost never your best idea — it is the most obvious idea. The good ideas emerge after you exhaust the obvious ones.

Figma basics — your wireframing home

Figma is the industry-standard design tool. It is free for individuals, runs in the browser, and is collaborative. Here is what you need to know for wireframing:

The essential Figma toolkit for wireframes

Wireframe in Figma in 10 minutes

Component thinking — design once, reuse everywhere

Professional UX designers do not wireframe individual screens in isolation. They think in components — reusable building blocks that combine to form complete interfaces.

Responsive wireframing — designing for every screen

Your wireframe must work on desktop (1440px), tablet (768px), and mobile (375px). This is not an afterthought — it is a core part of wireframing.

Mobile-first approach

Start by designing the mobile version first. Why? Because mobile forces constraint. When you have 375 pixels of width, you must decide what truly matters. You cannot cram 12 navigation items, a hero image, three columns of content, and a sidebar into a mobile screen.

Once the mobile version works, expanding to tablet and desktop is easier — you add space and optional elements. Going the other direction (desktop first, then squishing into mobile) always results in a mobile experience that feels like an afterthought.

There Are No Dumb Questions

"Why mobile first? Most of our users are on desktop."

Even if desktop is your primary platform, mobile-first wireframing is a design discipline, not just a platform strategy. Starting small forces you to prioritize ruthlessly. You will create a cleaner, more focused experience at every screen size. Luke Wroblewski coined "Mobile First" in 2009, and it remains the industry best practice.

Common UI patterns every wireframe uses

You do not need to invent new layouts. Most interfaces are built from a small set of proven patterns:

Remember that napkin sketch that became Instagram? Kevin Systrom's key insight was not adding features — it was removing them. Burbn had check-ins, event planning, social networking, and photo sharing. The wireframe reduced it to three screens. That ruthless simplification — knowing what to leave out — is the hardest and most valuable skill in wireframing. Every gray box you draw is a decision about what matters most.

Your wireframes are static right now — a picture of what the screen looks like at one moment. In the next module, you will make them move. You will learn how to build clickable prototypes in Figma, design micro-interactions, and test ideas before writing a single line of code.

Key takeaways

• Wireframes are blueprints — they show layout, hierarchy, and flow without visual design, so you can validate structure before investing in polish
• Start low-fidelity (paper sketches), then move to mid-fidelity (Figma wireframes), then high-fidelity (polished mockups) — never skip ahead
• Sketch 3-5 variations of key screens before committing — your first idea is rarely your best
• Figma is the industry standard — learn Frames, Auto Layout, and Components; these three features handle 90% of wireframing
• Think in components (buttons, cards, navigation bars) not individual screens — Atomic Design provides the framework
• Design mobile first — constraints force clarity; expanding to desktop is easier than shrinking from it
• Use proven UI patterns (F-pattern, card grid, master-detail, wizard) — Jakob's Law says users prefer familiarity