Form follows
Empathy.
Good design is more than just aesthetics; it's the bridge between human intent and machine execution.
User Interface vs. User Experience
User Interface (UI)
UI is the physical layer of an interface. It includes the buttons, colors, typography, spacing, and layout—the specific visual elements that a user interacts with.
User Experience (UX)
UX is the internal experience a person has as they interact with every aspect of a company’s products and services. It’s about how they feel and how easily they achieve their goals.
Analogy Breakdown
The Horse
UI: The saddle, stirrups, and reins.
UX: The
feeling of the ride.
The Dinner
UI: The plate and cutlery.
UX: The taste and
service.
The House
UI: Walls and paint.
UX: The comfort of living
there.
The Design Thinking Process
User-Centered Design (UCD) follows a non-linear, iterative process called Design Thinking. It focuses on understanding users' needs before jumping into solutions.
Empathize
Research user needs.
Define
State user problems.
Ideate
Create solutions.
Prototype
Build drafts.
Test
Check results.
User Research & Personas
Research provides the data needed to design with intent. It helps us move from "I think" to "We know."
User Personas
"The Power User"
Archetype, not a real person.
Personas are fictional characters created to represent the different user types that might use your service in a similar way.
Methodology
- Qualitative: Interviews, Usability tests (The "Why").
- Quantitative: Surveys, Analytics (The "How many").
Structuring Content (IA)
IA is the discipline of making information findable and understandable. It is the sitemap of your product’s digital world.
"Don't make them think about where things are."
Wireframing & Fidelity
Before we build, we blueprint. Fidelity refers to the level of detail and realism in a design. Choosing the right fidelity depends on what you need to test.
Low-Fidelity (Lo-Fi)
The Skeleton
Quick, rough sketches or digital outlines. Focuses on user flow and information structure without distractions like color or images.
High-Fidelity (Hi-Fi)
The Simulation
Detailed, pixel-perfect mockups. Features real content, brand colors, and typography. Used to test visual appeal and finalize technical specifications.
| Feature | Lo-Fi | Hi-Fi |
|---|---|---|
| Purpose | Structure & Navigation | Visuals & Branding |
| Speed | Very Fast (Minutes) | Slower (Hours/Days) |
| Interactivity | Static or basic clickable | Fully interactive prototype |
| Visuals | Boxes, Lines, B&W | Colors, Images, Final Fonts |
Live Fidelity Switcher
Viewing the "Skeleton": Pure structure, zero styling.
Rule of Thirds & Golden Ratio
Composition is the arrangement of visual elements. It's how we create focus, balance, and harmony in a design.
Rule of Thirds
Divide your canvas into a 3x3 grid. Placing key elements at the intersections creates a more dynamic and engaging composition.
Golden Ratio (1.618)
A mathematical ratio often found in nature. In design, it creates a perfect sense of proportion and organic balance.
Color Theory & Psychology
Color is more than just decoration; it's a form of non-verbal communication. Designers use color to evoke specific emotions and influence user behavior.
Visual Balance: The 60-30-10 Rule
Color Psychology in UI
Blue
Trust, Security, Calm.
Red
Urgency, Excitement, Error.
Green
Growth, Health, Success.
Yellow
Optimism, Attention.
Purple
Luxury, Wisdom.
Black
Power, Elegance.
Typography & Visual Hierarchy
Visual hierarchy is the arrangement of elements in a way that implies importance. Typography is the most powerful tool for establishing this hierarchy.
Hierarchy Principles
Big = Important
Vibrant = Priority
Bolder = Stronger
Proximity = Related
Attention starts here.
By using scale, weight, and color, we guide the user's eye effortlessly through the content.
Expert Font Pairing
Contrast Weights
Extra Bold
Light Pair
Pair extremely different weights of the same typeface.
Serif + Sans Serif
Classic Serif
Modern Sans
The most reliable pairing for balanced professionalism.
The X-Height Rule
Look for similar heights in lowercase letters for better visual harmony.
Laws of UX
Predictive principles that describe how users perceive and interact with interfaces.
Jakob's Law
Users spend most of their time on other sites. This means users prefer your site to work the same way as all the other sites they already know.
Fitts' Law
The time to acquire a target is a function of the distance to and size of the target. Make important actions big and easy to reach.
Hick's Law
The time it takes to make a decision increases with the number and complexity of choices. Simplify by removing unnecessary options.
Miller's Law
The average person can only keep 7 (± 2) items in their working memory. Use "chunking" to organize information into manageable groups.
Peak-End Rule
People judge an experience largely based on how they felt at its peak (the most intense point) and at its end, rather than the total sum or average of every moment.
Identify the 'Aha!' moment of your product and ensure it's overwhelmingly positive.
Ensure the final interaction—like a success message or exit—is smooth and rewarding.
Aesthetic-Usability Effect
Users often perceive aesthetically pleasing design as design that’s more usable. People are more tolerant of minor usability issues when the design looks good.
Doherty Threshold
Productivity soars when a computer and its users interact at a pace (<400ms) that ensures neither has to wait on the other.
Zeigarnik Effect
People remember uncompleted or interrupted tasks better than completed tasks. Use progress bars to gamify completion.
Von Restorff Effect
The Isolation Effect. When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
Accessibility (A11y)
The "a11y" numeronym stands for accessibility (11 letters between 'a' and 'y'). It ensures that digital products are usable by people with disabilities.
Contrast Ratios (WCAG)
Focus States
7 Core UI Principles
Fundamental rules that guide every effective interface layout and interaction.
1. Clarity
Eliminate ambiguity. The user should always know what an element is and does.
2. Feedback
Every action needs an immediate reaction (visual, audio, or haptic) to confirm receipt.
3. User Control
Allow users to undo, redo, and exit. Make them feel in charge of the system.
4. Consistency
Use standard layouts and elements. Don't reinvent the wheel for standard patterns.
5. Efficiency
Streamline workflows. Reduce clicks and scrolls for frequent actions.
6. Familiarity
Use icons and language that users already understand from the real world.
7. Structure & Hierarchy
Organize information logically. Use grouping and aligning to reduce cognitive load.
Designer's Glossary
Affordance
A property of an object that suggests how the object should be used (e.g., a button looking clickable).
Signifier
Visual cues that signal affordance (e.g., the shadow on a button, an arrow icon).
Kerning
The spacing between individual characters in a word.
Leading
The vertical spacing between lines of text (line-height).
Responsive
Design that adapts fluidly to different screen sizes and orientations.
Negative Space
The "white space" around elements that gives the design room to breathe.