UX & UI Design
An interface is where people and software communicate. UI design shapes what you see and interact with: layout, typography, colour, controls and their states. UX design asks whether the entire process works. Good UI design makes the right action obvious and keeps the rest understated.
Learning objective: You can distinguish between UI and UX, name the fundamental principles of good interfaces, and use them to evaluate an existing interface in a reasoned manner.
A good interface explains itself before you even ask.
Clarity, hierarchy, consistency.
Almost every good interface design decision can be traced back to three principles:
01
Clarity
You can immediately see what something is and what it does.
02
Hierarchy
The most important thing catches the eye first.
03
Consistency
Like looks like like and behaves the same.
Consistency applies outwardly, too: people expect your website to behave like others they know. It can have its own distinct personality, but not its own distinct way of working.
Surprise with content, not with operation.
The form reveals the action.
Affordance describes what actions an object offers: a button wants to be pressed, a slider to be moved. Signifiers are the clues that make this possibility visible: shadows, borders, underlines, an arrow.
Flat design has stripped away many signifiers. That's why it requires deliberate choices: how do you know what's clickable without drop shadows? Mostly through colour, shape, and placement, consistently applied across the entire product.
What is clickable must look clickable.
UI is the interface, UX is the whole experience.
UX design determines what people need and how the flow works. UI design gives it shape. Visual design provides expression and branding, while interaction design brings movement and feedback. In small teams, one person does it all; in large teams, there are specialists for each area.
What matters is a shared point of reference: a design system, a clickable prototype, and a language shared by design and development.
Good finishes come from good processes.
Read an interface
Task: Analyse the homepage of a website that you know well.
STEP 1
Take a screenshot and highlight the main action.
STEP 2
Number the elements in the order in which your eyes meet them.
STEP 3
Find three places where consistency is lacking.
STEP 4
Sketch an improved version with a clear hierarchy.
Evaluation: Does the order of your gaze match what the page intends?