Article8 minFree preview

What UX and UI design are

Design is how something works, not only how it looks. This course covers both halves of that job, and how they fit together.

UX: the experience

User experience (UX) design is about whether people can do what they came to do, easily and without confusion. A UX designer asks questions like:

  • Who is this for, and what are they trying to get done?
  • What steps do they take, and in what order?
  • Where do they get stuck, give up or make mistakes?
  • What information do they need at each step?

UX work produces research notes, user flows, site maps and wireframes. Much of it happens before anyone chooses a colour.

UI: the interface

User interface (UI) design is about the screens people actually see and touch: layout, type, colour, buttons, forms, icons and the small details that make an interface feel clear and trustworthy. A UI designer asks:

  • What should people notice first on this screen?
  • Does this look like something that can be tapped?
  • Is the text readable on a phone, outdoors, in bright light?
  • Do similar things look and behave the same way everywhere?

UI work produces visual designs, components and the specifications developers build from.

How they fit together

UX and UI are two views of the same product, and on small teams one person usually does both. A beautiful interface on a confusing flow still fails. A well-researched flow with unreadable text still fails. You need both.

A worked example: booking a haircut

A salon wants online booking. Here is how the two halves split the work:

QuestionUX or UIExample answer
Do customers choose the stylist or the time first?UXResearch shows regulars pick a stylist first, so that comes first.
What happens if no times are free this week?UXShow the next available date instead of an empty screen.
How do free and full times look different?UIFree times are buttons; full times are hidden, so nobody tries to tap them.
Is the "Confirm booking" button easy to reach on a phone?UIFull width, at the bottom of the screen, within reach of a thumb.

The UX answers come from knowing the customers. The UI answers make those decisions visible and easy to act on.

What good design is not

  • Not decoration. Every visual choice should help someone understand or act.
  • Not the designer's taste. "I like it" is not a reason. "People found it faster in testing" is.
  • Not a single step. Design is researched, tested and improved, often several times.

How this course works

The course moves from understanding people, to structure, to visual design and accessibility, and finally to design systems, prototypes, testing, mobile and handover. Each lesson ends with an exercise, and most can be done with paper and a pen. The final project, "Redesign a small business's booking flow", brings everything together, and a member of staff reviews it.

Exercise

Pick an app or website you used this week. Write down one thing about its UX (how it works) that helped or annoyed you, and one thing about its UI (how it looks or reads) that helped or annoyed you. Be specific: name the screen and what happened.

This is a free preview. Enroll to open every lesson and track your progress.

Log in to enroll
Download as PDF
What UX and UI design are · UI/UX design foundations · Skillhancer Labs