How does a wireframe differ from a mockup and a prototype?
A wireframe plans where things go on a page, a mockup shows how the page will look, and a prototype lets you tap through linked screens before anything is coded.
A website wireframe is a plain, usually grey, plan of one page: boxes for the headline, the menu, the photos, the enquiry button, in the order they will appear. A website mockup is the same page with real colours, fonts, images and near-final text, so you can judge how it will look. A prototype links those screens together so you can tap through them like a real site before anything is coded.
Each stage answers a different question, and mixing them up is the most common reason approvals drag on. At the wireframe stage you decide what goes where. At the mockup stage you decide whether it looks right for your brand and your customers. At the prototype stage, if you need one, you check whether the steps make sense in sequence. Commenting on colours during wireframes, or asking to move whole sections during mockups, costs time and often a revision round.
This guide is for owners and managers who will be sent these files and asked to approve them. It turns the designer's vocabulary into a checklist you can use, with the checks that matter for a Thai and English audience browsing mostly on phones.
Wireframes
Low and high fidelity
A low-fidelity wireframe can be a sketch on paper or a few labelled rectangles. It is quick to make and quick to change, which is its whole point. A high-fidelity wireframe is drawn to scale in a design tool, with real headings, realistic amounts of text and the actual number of menu items. Most small business sites move from a rough version for the homepage to high-fidelity versions of each page type: home, service, about, contact, and product or booking pages where relevant. Which page types you need comes from planning your website structure first.
What to check in a wireframe
- Order of content. Does the page answer the visitor's first question near the top? A hotel guest wants rooms and location; a clinic patient wants the treatment, the price range and how to book.
- Calls to action. Where are the WhatsApp, LINE, call or enquiry buttons? Is there one near the top and one after the main content?
- Navigation. Can a visitor reach every important page in one or two taps? Are menu labels words your customers use, not internal jargon?
- Missing content. Every box needs someone to supply it. If a wireframe shows a gallery, who is providing the photos?
Ignore colours and fonts at this stage, even if placeholders look odd. If you are replacing an existing site, bring notes on what currently works; a website redesign guide helps you gather them before the first wireframe is drawn.
Mockups
Once the layout is agreed, the designer produces mockups: static images of each page type with your logo, colours, typography, photography and close-to-final copy, so the text should already follow good website copywriting practice. Designers commonly work in tools such as Figma or Sketch and share a link where you can view and comment on the screens.
What to check in a mockup
- Brand fit. Does it look like your business? A family restaurant in Ari and a law firm on Wireless Road should not feel the same.
- Readability. Is body text large enough on a phone? Is there enough contrast between text and background, including over photos?
- Thai typography. Thai script has tone marks and vowels above and below the line. Check that Thai headings are not clipped, that line spacing is generous, and that the Thai font matches the tone of the English one.
- Images. Are these your real photos or placeholders? Stock images of people who are clearly not in Bangkok undermine trust quickly.
- Buttons and forms. Do they look tappable? Is it obvious which button sends the enquiry?
If the mockups are part of a brand change, run them against a rebrand website checklist so logos, colours and messages match across every page, not only the homepage.
Do you need a prototype?
A prototype connects the mockups so that tapping a button opens the next screen. Nothing is stored or sent; it is a simulation. For a five-page company site it is rarely worth the extra time, because the flow is simply "read, then contact". It earns its cost when the path has several steps and a wrong turn loses the customer:
- a booking or enquiry flow with dates, options and a confirmation step;
- an online store checkout, where you want to see how PromptPay, card and cash on delivery choices appear before the build;
- a bilingual site where switching language mid-flow must keep the visitor on the same step.
When you test a prototype, hand your phone to a colleague or a regular customer and watch without helping. Where they hesitate is where the design needs work. If you are building a brand new business site and want to keep the budget tight, skip the prototype and spend that time on content instead; the steps to create a website for a startup explain where early money is best spent.
Mobile and bilingual checks
Review the phone version first
Ask for mobile wireframes and mockups, not only desktop ones, and review them first. Most of your visitors are likely to arrive on a phone from a search, a map listing or a link shared in a chat. On a small screen, check that the menu opens cleanly, that the contact button stays within thumb reach, and that long tables or price lists do not force sideways scrolling.
Thai and English text length
The same message can take noticeably more or less space in Thai than in English, and Thai has no spaces between words, so line breaks behave differently. A heading that fits on one line in English may wrap to three in Thai, pushing a button below the fold. Ask the designer to show at least one page type in both languages with real text, not placeholder Latin. Also check:
- where the language switcher sits and whether it is visible on mobile;
- that menu labels fit in both languages without shrinking the font;
- that forms show Thai labels and accept Thai names and addresses;
- that the PDPA consent text and cookie banner appear in both languages.
If the new site replaces one that already ranks, wireframes should also keep the pages and headings that bring in traffic; our guide to keeping rankings through a redesign lists what to protect.
How do you give feedback that helps?
Revision rounds are the agreed number of times you can send consolidated changes. Our Business package, from THB 30,000, includes two revision rounds; other suppliers set their own limits, so read the quote. Rounds run out fastest when feedback arrives in pieces from different people. A few habits keep them productive:
- Collect comments from everyone first. Agree internally, then send one list. Owners, managers and marketing staff often disagree, and the designer cannot resolve that for you.
- Describe the problem, not the fix. "Customers will not find the price" is more useful than "make the font red". The designer may have a better solution.
- Refer to specific places. Comment directly on the screen, or name the page and section.
- Separate must-have from preference. Mark each note so the important changes are done first.
- Sign off clearly. Once you approve wireframes, the next stage builds on them; reopening layout during mockups usually costs extra.
It also helps to agree the review process before the project starts. If you are collecting quotes, a website redesign request for proposal lets you ask each supplier how many rounds they include and what counts as one. You can read how wireframes and mockups fit into our design process, compare packages on our pricing page, or send your questions by WhatsApp or call on +66 93 004 4098.
Keep reading
Builds and ranks the websites: the systems behind the 17 client sites whose Search Console numbers we publish. This guide was written by the Website Development Bangkok team. More about us