• Written by Rich McNabb • Proofread & Edited by Claude AI
"Where am I?" Always indicate active navigation states. A quick, practical reference covering the core principles of UX and UI design, from information architecture and affordances through to signifiers and genuinely useful testing.
This started as a set of personal study notes, scribbled down while working through Interaction Design Foundation courses, the kind of fundamentals I wanted somewhere to actually find again rather than buried in a notes app I’d never reopen.
It’s stayed a reference rather than turned into a proper article, and that’s deliberate. These are the basics I still check myself against on every project, spacing, hierarchy, usability, the stuff that’s easy to skim past while learning and easy to forget once you know it. Consider this the cheat sheet version.
UX (user experience) is how something works: the flow, the logic, whether people can actually get things done. UI (user interface) is how it looks: colour, type, spacing, the surface people touch and see.
Good UI on top of bad UX still fails. It just fails while looking nice.
A checkout form that’s beautifully typeset, though it hides the total price until the final screen, is bad UX wrapped in good UI. One that’s rough around the edges, though it shows exactly where you are, what’s next, and what it costs, is good UX with rough UI. Ideally you get both. If you only get one, UX is the one that actually gets someone to buy.
The overlap is why the two titles get used interchangeably. On smaller teams the same person often does both, and even where the roles are split, a good UI designer needs enough UX sense to know why a layout decision matters, and a good UX designer needs enough UI sense to know when a flow that works on paper will still look confusing on screen.
Getting the intent right, though missing the outcome, is how you end up with a feature nobody actually wanted, even though it does exactly what was asked for.
Miss any one of the three and the other two stop mattering, the right goal for the wrong user, or the right user in the wrong environment, both fail the same way.
A description of the users, tasks, equipment (hardware, software and materials), and the physical and social environments in which a product is used.
Skip this step and even a well-designed screen can miss the mark entirely. A great interface built for the wrong environment is still the wrong interface.
Usability shows up in four different ways from here, what it means, how you work toward it, how you check it against expert principles, and two named laws worth knowing on their own.
Three things usability actually comes down to:
These are about how you work, not what you’re checking for once something exists.
Jakob Nielsen’s ten principles, still the reference point most usability heuristics trace back to, and the checklist I run new screens against when something feels slightly off and I can’t immediately say why.
That’s usability covered from four angles. Next is where all of it actually gets organised.
Connecting people to the content they are looking for.
The process of identifying design solutions and creating prototype user interfaces.
Most of what’s above feeds into this one process, IA, usability, the heuristics, all of it shows up the moment you actually start building screens rather than just thinking about them.
A handful of rules for how people read a layout before they’ve consciously thought about it.
What people say isn’t as useful as what people do.
It’s why usability testing beats a survey every time. Watching where someone actually gets stuck tells you more than any exit interview will.
Designing for the widest possible range of people, not an edge case to bolt on at the end.
Get this right from the start and it rarely costs anything extra. Retrofit it later and it costs a full pass. As someone who’s dyslexic myself, this is the one I probably think about the most.
The fundamentals of UX/UI design never really go away. Things like spacing, typography, hierarchy, and accessibility show up in every strong interface, no matter how complex the product becomes. They’re easy to skim past when you’re learning, and easy to forget once you know them, which is exactly when they start causing problems.
Most design mistakes I’ve had to fix later trace back to one of these basics being rushed or skipped early on. Not a lack of creativity, just a missed fundamental that quietly made everything downstream harder than it needed to be.
That thinking carries through projects like a loyalty app designed and a dashboard built, where small decisions compound into clearer, more usable experiences. Get the basics right early, and the complex stuff tends to look after itself.