Interaction Design Basics: 5 Principles of Interaction Design
The clearest introduction to interaction design as its own discipline, and how it differs from UI, UX and product design. Start here if the boundaries between those words still feel fuzzy.
Watch on YouTube (opens in a new tab)Third-party video. It is loaded from YouTube and is not hosted by the academy.
By the end of this lesson you can
- Describe UI, UX, product, interaction and visual design and how they overlap.
- Read a job advert and work out which skills it is really asking for.
- Choose which discipline to focus on first, based on what you enjoy.
The idea
Design job titles are messy. The same work can be called different things at different companies, and the same title can mean different work. Instead of memorising titles, learn the kinds of work. Most titles are a mix of these five.
- Visual design
- Typography, colour, layout, imagery and brand expression. The question is: does this communicate clearly and look like it belongs to this brand? Visual designers often work across marketing, print and product.
- UI design
- Visual design applied to interactive products: screens, components, states and the details of how controls look and respond. The question is: can people see what to do and do it confidently?
- Interaction design
- How a product behaves over time: what happens when you tap, drag, wait or make a mistake; transitions; feedback; the logic of flows. The question is: does the product respond in ways people expect and understand?
- UX design
- The overall experience of reaching a goal: research, structure, flows, content and testing. The question is: does this solve the right problem in a way that works for the people who have it?
- Product design
- UX, UI and interaction design combined with product thinking: business goals, metrics, prioritisation and close work with engineering. The question is: is this the right thing to build, and is it working once shipped?
Specialist roles also exist: UX researcher, content designer or UX writer, service designer, design systems designer, accessibility specialist, motion designer. Many of them appear as optional paths later in this academy.
Why it matters in real projects
Knowing the disciplines lets you read the market honestly. A "UI/UX designer" advert at a small agency usually wants strong visual and UI skills and fast delivery. A "product designer" advert at a software company usually wants evidence that you can frame problems, work with metrics and collaborate with engineers. The portfolio that suits one may not suit the other.
It also protects you from trying to master everything at once. Every designer has a "T shape": broad awareness of all five areas and depth in one or two.
A realistic example
Here is a fictional advert, written to look like many real ones:
Junior Product Designer. You will design new features for our appointment booking app, from discovery through to delivery. You will run lightweight research with customers, create flows and prototypes, contribute to our design system, and work daily with engineers and our product manager. You care about details and accessibility.
Reading it by discipline: "discovery", "research with customers" and "flows" are UX. "Prototypes" and "details" are interaction and UI. "Design system" is UI and systems work. "Work daily with engineers and our product manager" is product design. There is almost nothing here about brand or illustration, so a portfolio of posters would miss the point, while a single well-explained booking-flow case study would hit it.
Step by step
Collect five job adverts
Search for "junior product designer", "UI designer" and "UX designer" in your region or for remote roles. Copy the responsibilities sections into one document.
Highlight by discipline
Use five colours, one per discipline. Highlight every responsibility. Some lines will get two colours.
Count the colours
For each advert, note which discipline dominates. You will usually see two or three patterns repeat.
Compare with what you enjoy
Which highlighted tasks sound most interesting to you? Be honest. Enjoyment keeps you practising.
Choose a starting focus
Write one sentence: "For the next three months I will focus on ___ while keeping a general awareness of the rest." You can change it later.
Common mistakes
Mistake Choosing a title because it sounds senior or pays more.
Instead Choose the work you want to do every day. Titles follow skills.
Mistake Ignoring visual skills because "UX is about research".
Instead Almost every junior role still involves producing clear interfaces. Visual fundamentals make your research and ideas easier to understand.
Mistake Trying to become an expert in all five areas before applying anywhere.
Instead Build a T shape: depth in one or two, working knowledge of the rest.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 40 min
Decode five job adverts
Do the walkthrough with real adverts. Keep your highlighted document; you will use it again in the career stage.
Steps
- Collect five adverts and paste their responsibilities into one document.
- Highlight every line by discipline.
- Write a one-line summary per advert: "Mostly ___ with some ___."
- List the three skills that appear in at least three adverts.
- Write your starting focus sentence.
Deliverable
A highlighted document with five summaries, a list of the three most repeated skills, and your focus sentence.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
5 items
Summary
- Learn kinds of work, not titles: visual, UI, interaction, UX and product design.
- UI combines visual and interaction design; UX includes UI; product design adds business and delivery thinking.
- Read job adverts by responsibilities, not titles.
- Aim for a T shape: broad awareness and one or two deep skills.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
- UX research cheat sheet (opens in a new tab)Nielsen Norman Group
Shows how research methods fit across a product lifecycle, which helps place UX work in context.
- Digital, data and technology roles and skills (opens in a new tab)UK Government
Public, detailed descriptions of design roles (interaction, service, content, graphic) and the skills expected at each level.
Your notes
Marking complete updates your course and roadmap progress.