Wireframe

What's the difference between a wireframe and a design draft?

A wireframe decides "what goes where," and a design draft decides "how it looks." A wireframe has only gray boxes and placeholders for text, while a design draft adds colors, photos and fonts.

The two steps are kept separate because changes cost very different amounts at each stage. Reordering boxes takes a few minutes, but reordering after the design draft is done means re-fitting photo sizes and spacing too.

It's normal for a wireframe to feel a bit empty to you because there's no color. At this stage, look only at the order and size of the boxes and save talk about mood for the design draft. Your feedback will come out much cleaner that way.

Some agencies skip a separate wireframe step. In that case the first design draft doubles as the wireframe, so when you get it, check the order before the colors.

What goes into a wireframe?

A wireframe includes the list of pages, the order of sections on each page, where the buttons go, and how pages link to each other. You don't need drawing skills. Boxes labeled "Main photo" or "Price list" are enough.

For booking or ordering flows that span several screens, it helps to draw arrows between the screens. A drawing that shows both the screens and the flow is sometimes called a "wireflow."

It helps to roughly match each text placeholder to the length of the real text. If a five-line introduction lands in a one-line slot, the layout gets thrown off again at the design draft stage.

Wireframes are useful even for a single-scroll landing website. Even on one page, the top-to-bottom order is the path your customers follow.

• Page list: which pages there are and how many, such as Home, About, Menu and Directions
• Section order: what appears from top to bottom on each page
• Action buttons: where the call, booking and contact buttons appear, and how many times
• Navigation paths: which screen each button leads to
• Phone layout: how columns placed side by side on a computer stack up, and in what order, on a phone

How do I sketch a wireframe myself?

With a sheet of paper and a pen, you can make a first draft in under 30 minutes. Once the order is settled, your first consultation with the developer gets much shorter.

The drawing doesn't have to be neat. A developer reads "what comes first" and "what absolutely has to be there," not your drawing skills. If you prefer a computer, you can place boxes in a presentation program, or just take a photo of what you drew on paper.

1. 01Write down the 5 questions customers ask most often by phone or message.
2. 02Make a list of pages that will hold the answers. For a small business, one page is often enough.
3. 03Draw a tall rectangle the size of a phone screen and fill it from the top with boxes for the answers, most important first.
4. 04Decide the final action you want customers to take (book, call or get directions) and draw a button box for it.
5. 05Take screenshots of other businesses' websites you like and attach notes such as "I like the order of this part."
6. 06Photograph your drawing, send it to the developer, and check together that no information is missing.

How does the first-screen layout differ by type of business?

The first-screen order depends less on your industry and more on "what customers want to know first when they arrive." Even two hair salons need different orders if one mostly gets booked customers and the other mostly gets walk-ins.

The examples below are only a starting point. In practice, adjust them based on the questions your business gets most often.

If the order is hard to decide, jot down the calls you get for just one week. If "How late are you open?" comes up most, move your opening hours near the first screen; if "Is there parking?" is common, move the parking information up.

• Hair salon: signature style photos → stylist profiles → prices by service → booking button → location and parking
• Craft studio: featured work photos → class types and schedule → class fees → sign-up button → student reviews
• Restaurant: signature dish photos → opening hours and days closed → menu → group booking inquiries → map
• Pilates and yoga: class atmosphere photos → class types → timetable → trial class sign-up → instructor profiles

Do I need to review a separate mobile wireframe?

Yes, it's best to check the phone layout order separately. Columns that sit side by side on a computer stack vertically on a phone, and which one comes first completely changes the order in which customers see things.

Google says it mainly uses the mobile version of a page when building its search index. So it's safest to design for phones from the start so important content isn't missing or hidden on the phone screen.

On a phone wireframe, check whether the booking and call buttons are easy to reach with your thumb, and whether customers have to scroll too long before prices appear.

On a phone wireframe, also check how much fits on the first screen without scrolling. Your business name and what you do should both be in that area, or customers may leave right away.

What are common mistakes at the wireframe stage?

The most common mistake is rushing through the wireframe and then reordering things in the design draft. That increases both the number of revisions and the timeline.

Another is putting everything you want to say on the first screen. The first screen is where customers decide "Is this the right place?", so cutting it down to 3–4 pieces of information actually makes it easier to read.

The opposite, splitting content into too many small pages, is also a common mistake. For a small business, when information is scattered across several pages, customers tend to leave while clicking back and forth through the menu. Gathering it on one page with shortcut buttons at the top often works better.

What should I ask the agency at the wireframe stage?

Ask these four questions before signing or at your first meeting, and the number of revisions and the timeline will be clear.

• Whether there is a separate wireframe step, or it goes straight to the design draft
• Whether changes at the wireframe stage count toward the total number of revisions
• Whether they show the phone layout as well
• How it's handled if you change the order after the wireframe is approved