What should a homepage do?
A good homepage does three jobs, in this order: it orients, it routes and it converts. Every homepage design best practice below serves one of those three jobs, and any section that serves none of them should go.
Orienting means that in a few seconds a visitor knows what you do, who it is for and where you are. Routing means people find the service, room, product or page they came for without hunting. Converting means the ones who are ready can contact you straight away, by WhatsApp, LINE, phone or a form.
For a Bangkok service business, the homepage also has to work for two audiences at once, Thai and English speakers, and for people who mostly arrive on a phone. That shapes the language switcher, the contact buttons and the order in which sections stack on a small screen.
Styles move on every year, and it is worth glancing at this year's web design trends for ideas. The structure below changes much more slowly, because it follows what visitors need rather than what looks new.
The blueprint at a glance
- First screen: headline, subhead, main action, one visual
- Services overview that routes to service pages
- How you work and what it roughly costs
- Proof you can stand behind
- The people behind the business
- Short FAQ
- Contact block with address and hours
- Footer as a second navigation
The first screen
The part of the homepage visible before scrolling carries the most weight. Four elements, nothing more.
Headline
Say what you do and for whom, in plain words. "Dental clinic in Sukhumvit for families and expats" beats "Your smile, our passion". If a visitor cannot repeat back what you do after reading it, rewrite it.
Subhead
One or two lines that add the detail the headline could not hold: area served, languages, the main reason to choose you. Keep claims to things you can prove.
One primary action
A single clear button for the most common next step: book, get a quote, message on WhatsApp. A second, quieter link can sit beside it. Five equal buttons mean none of them stands out.
One honest visual
A real photo of your place, product or people, with room for the text. No slider.
Make it fast
The hero image is usually the largest element on the first screen, which makes it the element Google's Largest Contentful Paint metric measures. Google's web.dev guidance treats 2.5 seconds or less as a good LCP. In practice that means a properly sized, compressed hero image, loaded early and not lazy-loaded, no autoplay video behind the headline, and web fonts that do not block the text from appearing. Test on a mid-range phone over mobile data, which is how many visitors in Bangkok will see it.
Navigation and routing
Most visitors do not want to stay on the homepage. They want to get to the right page quickly, so the homepage acts as a signpost.
The menu
Keep the top menu short, name items the way customers talk ("Rooms", "Treatments", "Prices") rather than internal jargon, and put the contact action in the header on every screen size. On phones, a sticky WhatsApp or call button often gets more use than the menu itself. Our full guide to website navigation covers menu structure in depth; here the point is only that the homepage and the menu must agree.
The language switcher
- Place it top right in the header, where people expect it, and keep it visible on mobile.
- Label languages in their own script: "ไทย" and "English", not flags. Flags represent countries, not languages.
- Switching should land on the same page in the other language, not back on the homepage.
Routing blocks
Below the first screen, give each main audience or need a clear path. A hotel website might route to rooms, dining and meetings; a clinic website to its main treatment groups; a B2B firm to its service lines. Each block gets a short description and a link that says where it goes.
Services, process and price signals
Once visitors know what you do, the next questions are practical: what exactly do you offer, how does it work, and roughly what will it cost?
Services overview
Show your main services as cards, three to six of them, each with a one-line benefit and a link to its own page. The homepage summarises; the service page sells. Do not try to fit every detail here.
Process
Three to five steps showing what happens after someone gets in touch. For a clinic: consultation, plan, treatment, follow-up. For a contractor: site visit, quote, schedule, handover. A short process strip lowers the anxiety of making the first contact.
Price signals
Many businesses hide prices, and visitors notice. You do not have to publish a full price list, but a "from" price, a typical range or a clear statement of what affects the price filters out mismatched enquiries and reassures the right ones. On our own homepage we list indicative starting prices for each package and link to a pricing page where visitors can see what each package includes, with the final figure set in a written quote.
Proof you can stand behind
Proof is where many homepages cut corners, and where visitors are most sceptical. Our rule is strict: show only what is real and what you could defend if a customer asked.
What counts as real proof
- Reviews from your Google Business Profile or another public platform, once you have them, shown with the source.
- Specifics you can back up: licences you actually hold, the languages your staff speak, your actual opening hours, the areas you deliver to.
- Real photos of your premises, work and team.
- Named people with their real roles.
What to leave out
- Invented or paraphrased reviews, or reviews with stock photos beside them.
- Client logos you have no permission to use, or a wall of logos from companies you worked with once.
- Big round figures with nothing behind them.
- Badges or seals you cannot link to a real issuer.
If you are new and have no reviews yet, say so honestly or leave the section out. A plain note such as "Google reviews will appear here once our profile has them" costs you nothing and avoids the damage of being caught with fake proof.
People, FAQ and contact
The people
A short section with a real photo and a few lines about the founder or the key people makes a service business feel accountable. For clinics, law firms and consultancies this block often matters more than any design choice. Use real names and roles only; skip the section rather than fill it with stock faces.
A short FAQ
Four to six questions that stop people from contacting you: do you speak English, do you take walk-ins, which areas do you deliver to, how do payments work. Keep answers short and link to the full FAQ or service page for detail.
The contact block
Near the bottom, repeat the contact options in one place:
- WhatsApp, LINE and phone buttons that open the app directly on mobile.
- Your full street address, written the same way as on your Google Business Profile, in Thai and English.
- Opening hours, including weekends and public holidays if they differ.
- A short form for people who prefer to write, with a consent line for PDPA.
Keep the form to the fields you need; our notes on contact form best practices explain which fields cost you enquiries.
The footer as a second navigation
People who scroll to the bottom are looking for something specific. Give the footer your main service links, contact details, hours, the privacy notice and the language switch again.
Homepage mistakes to avoid
- Auto-rotating sliders. Nielsen Norman Group's research on auto-forwarding carousels found they annoy users and reduce the visibility of the content. Each slide is on screen only part of the time, and many visitors skip rotating panels as if they were adverts, so pick one message and one image.
- Vague headlines. "Welcome to our website" or a slogan with no service in it wastes the most valuable space you have.
- Autoplay video with sound, or heavy video backgrounds. They slow the first screen on mobile data and push the text further down.
- Walls of logos. Twenty small logos with no context read as filler, and unapproved ones create legal risk.
- Everything on one page. A homepage that tries to explain every service in full becomes a long scroll nobody finishes.
- Pop-ups on arrival. A newsletter pop-up on top of the cookie banner on a phone screen is a quick way to lose a visitor.
- Thai as an afterthought. A Thai homepage that is a rough translation, with English buttons left behind, tells Thai customers they are secondary.
Mobile order of sections
On a phone, sections stack in a single column, so the order matters even more. Keep the headline and main action on the first screen, move the contact button into a sticky bar, and make sure side-by-side desktop blocks stack in a sensible order rather than image first, text far below.
Looking at real web design examples helps you see these choices in context, and the basics of UI UX design explain why some layouts feel easy and others do not.
A homepage checklist
Run through this list before you approve a homepage design. Better still, watch three or four real customers try to find something on it; our guide to UX research on a budget shows how to do that without a lab. If you want the structure built for you, our web design service plans the homepage section by section with you, starting from the Starter package at THB 10,000 or the bilingual Business package at THB 30,000, both indicative one-time prices confirmed in a written quote.
- Clear headlineStates what you do, for whom and where, without a slogan.
- One main actionA single primary button on the first screen, repeated in a sticky bar on mobile.
- Fast first screenSized and compressed hero image, no autoplay video, tested on a phone over mobile data.
- Language switcherTop right, labelled in each language's own script, landing on the matching page.
- Routing to servicesThree to six service cards, each linking to its own page.
- Process and price signalA short process strip and a from price or honest range.
- Real proof onlyGenuine reviews with a source, real photos, named people, nothing invented.
- Contact blockWhatsApp, LINE, phone, address, hours and a short PDPA-consented form.
- Useful footerService links, contact details, privacy notice and language switch.
More on web design
Sources
- Nielsen Norman Group: Top 10 guidelines for homepage usability
- Nielsen Norman Group: Auto-forwarding carousels and accordions annoy users and reduce visibility
- web.dev: Largest Contentful Paint (LCP)
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