What UI design is and what UX design is

User interface (UI) design is the design of the parts of a product that people see, hear and touch: screens, buttons, text, icons, colours, layout and the way those elements respond when someone uses them. If you can point at it on a screen, it is part of the UI.

User experience (UX) design is the design of the whole experience a person has while trying to get something done with a product. That includes the UI, but also the steps a task takes, the order of those steps, the words used, how long things take, what happens when something goes wrong, and even what happens away from the screen, such as an email receipt or a phone call to support.

A useful way to hold the difference: UI is what the product looks like and how its controls behave. UX is whether the person achieved what they came to do, and how it felt to get there.

The two are not opposites and they are not separate jobs on most teams. UI is one of the most visible tools a designer uses to shape the experience. A designer who changes the order of a checkout, removes an unnecessary form field and rewrites an error message is doing UX work. A designer who makes the "Pay" button clearly the most important thing on the screen is doing UI work in service of the same experience.

Why the terms get confused

Job adverts often say "UI/UX designer" as if it were one word, and many people use "UX" to mean "the design of an app". That is fine in conversation. What matters for your learning is to notice the different questions each one asks:

• UI questions: Is this readable? Does this look tappable? Is the most important action obvious? Is it consistent with the rest of the product?
• UX questions: Who is this for? What are they trying to do? What gets in their way? How many steps does it take? What happens if they make a mistake? Did they succeed?

Teams waste a lot of effort polishing screens that solve the wrong problem. Knowing the difference helps you ask the right question at the right time. Early in a project, the useful questions are almost all UX questions: who, what, why and in what order. Later, UI questions matter a great deal, because an unclear button or unreadable text can break an otherwise good flow.

It also helps you describe your skills honestly. A portfolio of attractive screens shows UI skill. A case study that explains how you found a problem, shaped a solution and checked that it worked shows UX skill. Most employers want to see both.

Imagine a city bus ticket app. A commuter called Mina needs to buy a single ticket while walking to the bus stop.

• A UI problem: the "Buy ticket" button is light grey on white, so in bright sunshine Mina cannot tell it is a button. The fix is a UI fix: stronger contrast and a clearer button style.
• A UX problem: the app asks Mina to create an account, confirm her email and add a card before she can buy anything. The bus arrives while she is still typing. The screens might be beautiful, but the experience fails. The fix is a UX fix: allow guest purchase with a saved payment method from the phone's wallet, and offer an account afterwards.
• A problem that is both: after paying, the ticket appears as small text in a list of past orders. The driver needs to see it quickly. The experience needs a "show ticket" step at the right moment (UX), and the ticket needs to be large, high-contrast and recognisable at a glance (UI).