UI/UX design in two sentences
UI design (user interface) is the visible, touchable layer of a website or app: the type, colours, buttons, form fields, icons and how each responds when you tap it. UX design (user experience) is the wider job of making sure people can reach what they came for, easily and without confusion, from the first search result to the confirmation message.
Put simply, UI is what you see and touch; UX is how the whole journey feels and whether it works. The Nielsen Norman Group, a long-standing usability research firm, defines user experience broadly as every part of a person's interaction with a company, its services and its products, which is a useful reminder that UX reaches beyond the screen. This guide teaches the basics clearly and then shows what they mean for a business site. For related reading, see our collection on web design and UX.
UI and UX side by side
The two overlap, and on small projects the same person often does both. The table shows where each one's attention goes.
| UI design | UX design | |
|---|---|---|
| Main question | How does it look and respond? | Can people reach their goal easily? |
| Works on | Type, colour, spacing, buttons, icons, states | Structure, navigation, content order, flows, forms |
| Typical output | Visual mockups, component library | Research notes, site map, wireframes, prototypes |
| Measured by | Clarity, consistency, readability | Task success, drop-off, enquiries, complaints |
| Fails when | Text is hard to read or buttons look disabled | People get lost, give up or contact you confused |
An everyday example
Think of booking a table at a restaurant on your phone. The UI is the date picker, the colour of the "Confirm" button and the clarity of the text. The UX is everything around it: whether you could find the booking page at all, whether it asked for five fields or fifteen, whether you could switch to Thai, and whether you got a confirmation you trust. A beautiful date picker cannot rescue a booking flow that hides behind three menus.
What does a UX process look like?
Most UX work follows the same broad stages, whether the project is a five-page clinic site or a large store. On a small business site each stage can be short; skipping them entirely is what causes trouble. The research stage in particular does not need a big budget, as our guide to UX research on a budget shows.
- Step 1
Research
Learn who the visitors are, what they want to do and what stops them. Talk to staff who answer customer questions.
- Step 2
Information architecture
Decide the pages, how they are grouped and what the menu says, in the words customers use.
- Step 3
Wireframes
Sketch each key page as simple boxes to agree content order before any visual design.
- Step 4
Prototypes
Build a clickable version, often in a design tool, to try the main journeys.
- Step 5
Testing
Watch a few real people try tasks such as booking or finding a price, then fix what trips them up.
- Step 6
UI design and build
Apply the visual design to the tested structure, then build and check it on real phones.
The principles good interfaces follow
Jakob Nielsen's ten usability heuristics, published by the Nielsen Norman Group, are the best-known checklist for judging an interface. Here they are in plain terms, with what each means on a business website:
- Show what is happening. After a form is sent, say so clearly.
- Speak the user's language. "Book a table", not "Submit reservation request".
- Let people undo. Easy ways back, easy ways to edit a cart.
- Be consistent. Buttons that look alike should do alike things on every page.
- Prevent errors. Date pickers that block closed days beat error messages afterwards.
- Recognition over recall. Show options instead of making people remember them.
- Flexibility. Shortcuts for returning visitors, such as a quick reorder.
- Minimalist design. Every extra element competes with the main action.
- Helpful error messages. "Phone number needs 10 digits", not "Invalid input".
- Help when needed. A short FAQ or a chat button near the point of doubt.
Thai-context details
Bilingual labels should be written, not machine translated, and the language switch should keep people on the same page. Thai text needs fonts with full Thai support and extra line height so tone marks are not clipped, and buttons sized for longer Thai labels. Many Thai customers prefer to ask on LINE before filling a form, so a visible LINE or WhatsApp button often counts as good UX in itself.
Tools and deliverables
Figma is one of the most widely used design tools for UI and UX work today: designers draw wireframes, build high-fidelity mockups and link screens into clickable prototypes, all in the browser, and clients can comment directly on the designs. Alternatives include Sketch and Penpot (Adobe XD is in maintenance mode, with no new features planned), and many teams still start on paper or a whiteboard, which is often the fastest way to agree structure.
What you should expect to receive as a client depends on the size of the project, but typically:
- a site map showing every page and how they connect;
- wireframes or rough layouts of the key pages;
- visual designs for desktop and mobile;
- a clickable prototype for the main journey, on larger projects;
- a set of reusable components and styles, such as buttons, forms and colours.
That last item is what keeps a site consistent as it grows. When it is documented properly it becomes a website design system, which saves time every time a new page is added.
How UI/UX shows up in your enquiries
For a business owner, UI and UX are not abstract. They show up in whether the phone rings.
Enquiries
Every extra step, unclear label or hidden button loses some visitors. A clinic whose appointment form asks for an ID number before explaining why will lose people who were ready to book, one reason our notes on clinic and medical website design keep booking forms short. A shop that hides delivery costs until the last screen will see abandoned carts. Most of these fixes are small once someone notices them.
Trust
Visitors judge credibility quickly, and they judge it on the interface: tidy type, consistent buttons, real photos and a clear address. Rough UI makes a solid business look careless.
Accessibility
Good contrast, readable text sizes, labelled form fields and keyboard access help older visitors, people with poor eyesight and anyone reading in Bangkok sunshine on a phone. It is also simply more people able to use your site.
The first screen carries most of this weight, which is why we cover it separately in our guide to homepage design. For real-world sites that get these details right, see our guide to website design examples by industry, which looks at other companies' sites, not our own client work.
If you are learning UI/UX
Many people reading this want to work in the field rather than hire someone. The core skills are easier to name than to master: observing people and asking good questions, organising information, sketching layouts, visual basics such as type, spacing and colour, working in a tool like Figma, and explaining your decisions to people who are not designers.
People usually start by redesigning real sites they find frustrating, documenting what they changed and why, and collecting those write-ups into a small portfolio. Free courses and books cover the theory; practice on real problems is what makes it stick. It also helps to know how a design gets built, which our introduction to web development explains in plain terms. If you live in Thailand, designing for bilingual Thai and English users is a genuinely useful specialism, because many sites still handle it poorly.
How do you check the UX of your own site?
You can spot most serious problems in about 15 minutes with a phone and a colleague who does not know the site well. Ask them to complete each task below while you watch without helping, and note where they hesitate.
Styles come and go, as our overview of web design trends shows, but these basics do not. We treat UI and UX as part of every custom website design project rather than a separate service; if your check turns up more than a few problems, see what each package includes to judge whether a redesign makes sense.
- Say what you doFrom the home page, can they explain what you offer and where, within ten seconds?
- Find a priceCan they find a price, a range or at least how pricing works?
- Contact youCan they call, message on LINE or WhatsApp, or send a form in two taps?
- Switch languageDoes the Thai or English switch keep them on the same page?
- Read comfortablyIs text readable without zooming, and does Thai render cleanly?
- Complete the main taskCan they book, request a quote or buy without getting stuck?
- Recover from a mistakeIf they enter something wrong in a form, does the message tell them how to fix it?
- Trust what they seeAre there real photos, a real address and no broken links or placeholder text?
More on web design and UX
Sources
- Nielsen Norman Group: The definition of user experience (UX)
- Nielsen Norman Group: 10 usability heuristics for user interface design
- Google Search Central: Understanding page experience in Google Search results
- Adobe Help: Adobe XD support and status
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