UI/UX Quick Notes
A one-page condensed reference (~2,700 characters)
UI vs UX
UI (User Interface) design shapes how a product looks: layouts, colors, typography, icons, and buttons. UX (User
Experience) design shapes how a product works: the overall usability, structure, and satisfaction a user feels
from start to finish. UX is the foundation; UI is the polish built on top of it. A simple test: if you'd describe a change
as making something "easier to complete," that's UX; if you'd describe it as making something "look better," that's
UI.
Related Roles
Product Designer: often blends UX and UI, sometimes touching product strategy. UX Researcher: focuses solely
on user research and testing. Interaction Designer: designs how users interact with specific components. Visual
Designer: focuses purely on aesthetics and design systems.
The UX Process
1. Empathize - Research users through interviews, surveys, and observation to understand their needs and pain
points. 2. Define - Turn research into a clear problem statement and organize content logically (information
architecture). 3. Ideate - Brainstorm a wide range of possible solutions without judging them too early. 4.
Prototype - Build wireframes (low-fidelity) and interactive prototypes (high-fidelity) to represent the solution. 5.
Test - Run usability tests with real users, gather feedback, and iterate on the design before shipping.
Common deliverables along the way include personas, journey maps, sitemaps,
user flows, wireframes, prototypes, and usability test reports.
Key UX Laws
Jakob's Law: users prefer interfaces that work like ones they already know. Fitts's Law: bigger, closer targets are
faster to interact with. Hick's Law: more choices increase decision time, so simplify options. Miller's Law: people
hold about 7 (plus or minus 2) items in working memory, so keep interfaces simple.
Gestalt Principles
Proximity: nearby elements feel related. Similarity: elements sharing color or shape feel grouped. Closure: the
mind completes incomplete shapes on its own. Common Region: elements inside a shared boundary feel
connected.
Visual Design Basics
Limit designs to one or two typefaces with a clear, consistent type scale. Use an 8px spacing system so layouts
stay consistent across screens. Maintain a 4.5:1 text contrast ratio for accessibility. Never rely on color alone to
convey meaning, such as errors or status.
Usability Heuristics (Nielsen)
Visibility of status, match with the real world, user control and freedom, consistency and standards, error
prevention, recognition over recall, flexibility of use, minimalist design, error recovery, and help documentation.
Tip: revisit this one-pager before interviews or exams as a quick refresher on the core UI/UX vocabulary and models.