What is UI/UX Design? A Beginner’s Introduction

TL;DR: What You Will Learn

• UX (User Experience) is about how a product feels and works: the flow, the logic, whether people can actually get things done.
• UI (User Interface) is about how a product looks: the colours, buttons, typography, and visual polish you see on screen.
• The two are separate skill sets, but UI and UX designers collaborate closely and often overlap, which is why you see them bundled together.
• You do not have to pick a lane today. This guide helps you understand both first.

Defining UX Design and What It Really Covers

Ask most beginners about UI UX design, and they picture pretty screens. But UX, or User Experience design, is really the discipline of making a product useful, usable, and satisfying from the very first tap to the final confirmation screen.

According to Nielsen Norman Group, the research firm founded by Don Norman and Jakob Nielsen, user experience covers every aspect of a person’s interaction with a company, its services and its products, not just the screens.

Here is the part most beginners miss: UX starts long before any visuals exist. It is about behaviour and outcomes, not decoration, and I will unpack what that actually covers.

Think about the Singpass app. Millions of Singaporeans rely on it to log in to government services, and the whole experience lives or dies on whether people can complete a task without frustration, not on how polished the buttons look.

Research and Understanding Users

Good UX begins with understanding real people, not assumptions. Before designing anything, I want to know who the users are, what they are trying to achieve, and where they currently get stuck.

Take the LTA MyTransport journey planner. A tourist unfamiliar with our MRT lines has very different needs from a daily commuter who just wants the fastest route home during a downpour.

Research means interviewing users, observing them, and mapping their goals. This might look like sitting with an elderly resident as they try to book a polyclinic appointment, watching where they hesitate, and noting the words they use.

Information Architecture and Flows

Once you know your users, you organise the product so information sits where people expect to find it. This is information architecture, and it is invisible when it works and infuriating when it does not.

Flows are the step-by-step paths a person takes to finish a task. For a Singpass login, a logical flow means: open the app, scan your face, land exactly where you intended, done.

When flows are messy, users bail out. Checkout design has a measurable cost. Baymard Institute’s benchmark puts the average documented cart abandonment rate at 70.22% (last updated September 2025), and its research lists a long or complicated checkout as one documented, fixable cause.

A useful way to picture this is to sketch the journey as a numbered sequence:

1. The user arrives with a clear goal in mind.
2. Each screen presents only what is needed for that step.
3. The next action is always obvious.
4. The user reaches the outcome without backtracking.

Usability and Problem-Solving

Usability is where UX proves itself. It asks a blunt question: can someone actually do the thing, quickly and without confusion?

This is problem-solving work. If commuters keep tapping the wrong button on the MyTransport planner, the UX designer diagnoses why and reshapes the interaction, rather than blaming the user.

None of this is decoration, and that distinction matters when you compare it with the visual layer, which I cover in UI vs UX: what’s the difference?

UX, in short, is about making sure the outcome happens. Get the behaviour right first, and the visuals have something worthwhile to dress up.

Defining UI Design and Where It Fits

When people ask me what UI UX design is, they usually mean two crafts stitched together. Let me start with the half you can actually see and tap.

UI, or User Interface design, is the visual and interactive layer users see and touch: the buttons, colour, typography, spacing, iconography, and states on every screen.

Think about the last time you paid a friend with DBS PayLah! or booked a ride on Grab. The reason those transactions feel effortless is quiet, deliberate UI work.

The UI designer takes the intent that UX has already defined and translates it into a polished, on-brand screen. A good UI is often invisible: you notice it only when it is bad.

Visual Hierarchy and Layout

Visual hierarchy is how you guide the eye to the thing that matters most. On the PayLah! home screen, the “Scan” or “Pay” action sits large and high-contrast, so your thumb finds it without thinking.

I create a hierarchy with size, weight, colour, and spacing. A generous margin around a primary button signals importance, while muted grey text pushes secondary details into the background.

Layout is the underlying grid that keeps everything aligned. When columns and spacing follow a consistent rhythm, a screen feels calm even when it holds a lot of information.

Design Systems and Consistency

Consistency is what makes an app feel trustworthy. Grab uses the same button shapes, the same green, the same card style whether you are ordering food, a ride, or paying a bill.

That is a design system at work: a shared library of reusable components, colour tokens and type styles that every screen pulls from. It means a “Confirm” button behaves and looks the same everywhere, so you never have to relearn the interface.

For a growing Singapore product team, a design system also speeds delivery. Designers assemble screens from tested parts instead of redrawing buttons, and developers build faster because the rules are already agreed.

If you want to build these components yourself, start with the Figma design basics every beginner should master, since that is where most teams here assemble their libraries.

Interaction and Feedback

Every element has states, and the UI covers all of them. A button looks one way at rest, another when you hover or press, and another again when it is disabled.

Feedback tells you the system heard you. When your PayLah! transfer succeeds, you get a clear confirmation and a tick, not a silent, uncertain screen that leaves you wondering if the money moved.

I always design the loading, empty, and error states too, not just the happy path. Those small touches, a spinner while a payment processes or a friendly error when a network drops, are the difference between an app people trust and one they abandon.

How UI and UX Overlap and Work Together

The biggest mistake I see beginners make is treating UI and UX as two separate departments that never talk. In reality, they are two halves of the same conversation, passing work back and forth constantly.

Here is the simplest way I explain it. UX defines what problem to solve and why, while UI decides how it looks and responds. One is about logic and flow, the other about surface and feel, and neither works alone.

The House Analogy

Think of building a house. UX is the layout and the plumbing: where the rooms sit, how you walk from the front door to the kitchen, whether the pipes actually carry water where you need it.

UI is the interior design: the paint colours, the lighting, the finish on the door handles. A gorgeous living room means nothing if you have to walk through the bathroom to reach it, and a smart floor plan feels miserable if every wall is bare concrete.

That constant back and forth is the point. The UX designer sketches the flow, the UI designer makes it tangible, and then they revise together when something does not feel right in real use.

A Singapore Hawker Payment Scenario

Imagine a team redesigning the e-payment flow at a hawker centre, the kind of QR code system many stalls now use for cashless orders. This is where the two disciplines either save each other or sink each other.

The UX work is deciding the steps: scan the code, confirm the dish, pay, done. If that logic is wrong, say the user has to key in the stall number manually before every order, no amount of pretty design will fix the frustration.

Now suppose the flow is perfect, but the UI is cluttered, with tiny buttons, low contrast, and a “Pay” button hidden below the fold. An uncle in a rush at lunch hour will give up and reach for cash. A great idea fails behind a bad interface, and a beautiful screen fails behind an illogical flow.

Where the Two Blur

In practice, the line is fuzzy. Deciding button placement, error messages, loading states, and how a form behaves when you tap it all sit in the overlap where UX thinking and UI craft meet.

This is exactly why, in my experience, many Singapore SMEs, from a local e-commerce shop to a small clinic booking system, hire one person to do both. When budgets are tight, a single hybrid designer who can map the flow and design the screens is far more practical than two specialists.

That hybrid demand shapes how you should present yourself too. If you understand why most UX designer job applications get rejected, you will see that many candidates fail because they show only research or only visuals, never the connection between them. Employers here want someone who can hold both halves of the house at once.

A Day in the Life of UX and UI Designers

The clearest way to answer what is ui ux design is to sit next to the people doing it and watch how their days actually run.

Here are two composite days. They are illustrative, not accounts of any specific company or person.

The UX Designer's Day

Our UX designer starts the morning talking to people, not pushing pixels.

She might run a remote user interview with a hawker stall owner who struggles to top up their seller’s wallet, listening for the exact moment frustration creeps in.

By mid-morning she is turning those notes into a user flow, mapping every screen a delivery rider taps through to accept a job, then flagging where drop-off happens.

After lunch she facilitates a usability test with five participants, watching them attempt to renew a licence on a government portal while she quietly counts how many get stuck.

Her afternoon closes with a synthesis session, writing up findings and sharing them with the product manager so the team can decide what to fix in the next sprint.

If you are curious about how employers probe this kind of thinking, it is worth reading through these UX designer interview questions hiring managers ask before your next application.

The UI Designer's Day

Our UI designer, meanwhile, spends the morning inside Figma building and refining the actual interface.

He is polishing a component library so every button, input field, and toggle looks consistent across the checkout flow and the seller dashboard.

Around midday, he refines individual screens, adjusting spacing, colour contrast for accessibility, and how the confirmation screen animates after a successful PayNow payment.

In the afternoon, he prepares developer handoff, annotating each screen with exact colour tokens, font sizes, and interaction states so the engineers do not have to guess.

His last hour is a working session with a front-end developer, walking through why a card needs a specific hover state on desktop but a different tap behaviour on mobile.

When One Person Wears Both Hats

In a large fintech or agency, these are two distinct people with a clear split.

But in the smaller startups I see across Singapore, one designer switches between both roles in a single afternoon.

You might run a quick user test at 2 pm, redraw the flow at 3 pm, then jump into Figma to build the polished screen by 5 pm.

Across both roles, the constant is collaboration: designers are never working alone; they are in daily conversation with product managers who set priorities and developers who bring the designs to life.

That back and forth is exactly what makes the work feel real rather than theoretical.

The Tools UI and UX Designers Use

When you are starting, the sheer number of tools can feel overwhelming. The good news is that most teams rely on a small, predictable set, and you only need to learn one core tool well to begin.

The single most important thing to know is that Figma has become the industry standard, and it spans both UI and UX work. In the UX Tools Spring 2026 survey, 82.6% of designers said they use Figma every week.

Design and Prototyping Tools

This is where you draw screens, arrange layouts, and build clickable prototypes that behave like real apps.

Figma dominates here because it runs in the browser, has a free Starter plan, and lets multiple people edit the same file at once. If you want to understand what Figma is used for in design teams and real projects, it covers everything from wireframes to polished visual designs and interactive flows.

Many product teams, from fintech startups to larger companies building customer portals, standardise on Figma so everyone works from one shared design system. That means buttons, colours, and fonts stay consistent across an app because they all pull from the same central components.

If you are ready to get hands-on, follow a step-by-step Figma tutorial for beginners to build your first screen.

Research and Testing Tools

UX work leans more heavily on tools that help you gather insight and validate ideas before a single pixel is polished.

You will often use lightweight survey tools like Google Forms to collect feedback from users, and testing platforms like Maze to run unmoderated usability tests where people click through your prototype while you watch what confuses them.

Picture this simple scenario: you build a checkout flow in Figma, connect it to Maze, and send the link to ten testers. Within a day, you can see where they hesitated or tapped the wrong button, then fix it before developers write any code.

Collaboration and Handoff Tools

Design does not happen in isolation, so you need tools to plan, discuss, and pass work to developers.

FigJam, Figma’s whiteboarding companion, is handy for mapping user journeys and running remote workshops. Slack keeps day-to-day conversation flowing, and Jira tracks tasks so nothing gets lost between design and development.

Here is a common toolkit a small Singapore team might use:

• Figma for designing screens and prototypes
• FigJam for journey maps and brainstorms
• Maze or Google Forms for testing and surveys
• Slack for team communication
• Jira for tracking work and handoff

Broadly, UX leans on research and mapping tools while UI leans on visual and prototyping tools, but Figma comfortably covers both ends. Do not try to learn all of these at once. Master Figma first, and the rest will make sense as you need them.

Skills to Build for UX and for UI

When people ask me whether they are “more UX or more UI,” I tell them to stop guessing and start auditing. The fastest way to find your lean is to look honestly at which of these skills already feel natural to you.

Shared Foundational Skills

Whether you end up on the UX or UI side, some skills sit underneath both roles.

• Empathy: The ability to imagine what a frustrated user feels when a checkout form rejects their NRIC format.
• Communication: Explaining a design decision to a developer or a project manager without hiding behind jargon.
• Problem-solving: Breaking a messy request like “make the app easier” into concrete, testable changes.

Career switchers from customer service and teaching often pick up design quickly because they already have strong empathy and communication skills.

UX-Leaning Skills

If you enjoy asking questions, spotting patterns, and organising chaos, you probably lean UX.

The core here is research: running interviews, sending short surveys, and watching real people use a product. A UX designer at a local bank, for example, might sit with elderly customers to see why they abandon the PayNow flow.

Information architecture is the second pillar. It is the skill of structuring content and navigation so a Singaporean government service portal, say an HDB or CPF page, does not bury the one thing users came to do.

Testing rounds it out. You learn to run usability tests, read the results without ego, and iterate. If numbers and behaviour excite you, this side pays off, and it is worth looking at the UX designer salary figures in Singapore to see where the pathway can lead.

UI-Leaning Skills

If you have always noticed spacing, fonts, and colour that felt “off,” you likely lean toward UI.

Visual design is central: composition, hierarchy, and colour that guide the eye. Typography is its own craft, choosing type that reads cleanly on a small phone screen on a crowded MRT.

Design systems tie it together. This is building reusable components in a tool like Figma so a whole product stays consistent, which is exactly what growing SG startups need as their teams expand.

Reskilling Without a Design Degree

Here is the good news for working adults: you do not need a formal design degree to start.

Many of our learners use their SkillsFuture Credit to offset course fees. Singaporeans aged 25 and above receive an opening credit of S$500, and those aged 40 and above may also qualify for a Mid-Career top-up, which makes reskilling into design genuinely accessible mid-career.

So audit yourself first. List where you feel strongest across these three groups, and let your natural leanings, not a job title, point you toward UX, UI, or the hybrid path many designers here follow.

Common Myths and Misconceptions About UI/UX

The same handful of myths come up again and again among beginners. Let us clear them up, because getting the fundamentals wrong early makes everything else harder.

Myth: UI/UX is Just Making Things Pretty

This is the one I hear most, and it is the most damaging. Reality: visuals are only the surface. A design can look gorgeous and still fail badly.

Picture a local F&B SME that spends a small fortune on a beautifully polished website, all soft gradients and smooth animations. Sales still drop.

The problem is the checkout. Customers have to create an account before they can pay; the delivery slot picker is buried, and the confirmation button sits below the fold on mobile.

None of that is a visual problem. It is a user experience problem, and no amount of prettiness fixes a confusing journey. That single example shows why looks alone never fix a confusing journey.

Myth: You Need to Code to Do UI/UX

Reality: you do not. Plenty of strong designers I know cannot write a line of production code.

Tools like Figma let you build clickable prototypes, run through flows, and hand off specs to developers without touching code yourself.

Understanding some basic constraints (like why a certain layout is hard to build) helps you collaborate, but coding is not the entry ticket. Curiosity about people and their behaviour matters far more.

Myth: UX is Only for Big Tech Firms

I meet many people who assume UX belongs to Grab, Shopee, or the government’s digital service teams, and that a small business has no use for it.

Reality: any business with a website, an app, a booking form, or even a self-service kiosk is delivering an experience. A neighbourhood clinic, a tuition centre, or a home-based baker on Instagram all benefit when their customer journey is clear.

Smaller Singapore businesses often see the fastest wins, because fixing one broken form or clarifying one confusing menu directly recovers lost enquiries.

Myth: UI And UX are the Same Job

UI and UX are related but distinct. UI is the visual and interactive layer: buttons, colours, typography, spacing. UX is the overall experience: research, flows, information architecture, and whether the whole thing actually helps someone finish a task.

You can specialise in one, but understanding both makes you far more useful. Think of UX as deciding what the checkout journey should be, and UI as making each screen in that journey clear and pleasant to use.

Getting these distinctions right early is what separates a designer who guesses from one who solves real problems.

How to Get Started in UI/UX Design in Singapore

If you now know what UI UX design is and you are wondering how to actually break into it, the good news is that the path is more accessible than most people assume, especially here in Singapore.

You do not need a design degree or an art background. You need fundamentals, a small body of work to show, and structured training that employers recognise.

Learn the Fundamentals and One Tool

Start by understanding the basics: visual hierarchy, spacing, colour, typography, and how users move through a flow. Do not try to learn everything at once.

Then commit to one tool. Figma is the industry standard; it has a free Starter plan, and it is used weekly by most designers in the UX Tools Spring 2026 survey.

Give yourself a few weeks to get comfortable with frames, components, and prototyping. To speed this up, lean on ready-made resources like these best Figma templates to kickstart your designs so you learn by dissecting well-structured files rather than starting from a blank canvas.

Build a Small Portfolio Through Practice Projects

Employers hire from your portfolio, not your certificate alone. The fastest way to build one is to redesign something you already know.

Pick a familiar local app screen and improve it. For example, redesign the food ordering flow on a delivery app, tidy up the top-up screen in an EZ-Link or transit app, or rework a confusing booking step in an HDB or government e-service.

For each project, do these three things:

• Write down the user problem you noticed and who it affects.
• Show your before and after screens side by side.
• Explain the reasoning behind each change in a short case study.

Two or three thoughtful case studies beat a dozen pretty screens with no story. Recruiters want to see how you think, not just what you can decorate.

Get Structured Training or a Certification

Self-study gets you started, but structured training gets you job-ready faster and gives you feedback you cannot give yourself.

This is where Singapore support makes a real difference. Many UI/UX courses here are WSQ-accredited, and eligible courses can come with SSG course subsidies. Singaporeans aged 25 and above can also use their SkillsFuture Credit to offset fees on approved courses, so check the course’s MySkillsFuture listing for current funding.

That matters if you are a working adult or career switcher watching your budget. A funded, WSQ-accredited programme lets you reskill affordably while still holding down your current job.

The best next step: after you have played with Figma and sketched one practice redesign, join a guided, funded course. Equinet Academy’s WSQ UX/UI Design Essentials course is a one-day, beginner-friendly way to get trainer feedback on your first wireframes and user flows.

Conclusion

Remember the confusion we started with, the way UI and UX get thrown around as if they mean the same thing? By now you should have a clearer mental model to work with.

UX shapes how a product works and feels, from the flow and the logic to the moments where a user either gets what they need or gives up in frustration. UI shapes how that product looks and responds, through the buttons, the colours, the spacing, and the little animations that tell you a tap has registered.

They are distinct disciplines, but they are inseparable. A beautiful interface built on a broken journey is still a bad product, and a well-mapped journey wrapped in a confusing screen will lose people just as quickly. Great products need both working in harmony.

So where do you go from here? Start by being honest about your strengths. If you love talking to people, spotting patterns, and solving problems, you may lean UX. If you are drawn to layout, typography, and visual polish, UI might feel more natural. Most beginners in Singapore end up doing a bit of both before they specialise, and that is perfectly normal.

The good news is that structured, beginner-friendly training makes this an accessible on-ramp. If you are a fresh graduate, a mid-career switcher, or someone in a related field like marketing or product, a WSQ-accredited course lets you build real skills, with SkillsFuture support if you are eligible and the course is approved.

A practical next step is to enrol in Equinet Academy’s WSQ User Experience & User Interface (UX/UI) Design Essentials course, a beginner-friendly one-day course where you learn both sides hands-on, with SkillsFuture funding available.