Core Definitions

• What is UX? (User Experience)It’s the “behind-the-scenes” logic of a product. UX is about how a user feels and how easily they can accomplish a task. It involves research, psychology, and mapping out the “flow” of an app so it isn’t frustrating.
• What is UI? (User Interface)It’s the “skin” of the product. UI is the actual visual screen you see—the buttons, colors, fonts, and spacing. It focuses on making the interaction aesthetically pleasing and clear.
• What is Product Design?Product Design is a broader role that combines UX/UI with business goals. A Product Designer doesn’t just ask “Is this easy to use?” but also “Does this help the company make money?” and “How will this evolve over the next two years?”

Why so many titles?

The field is relatively new and evolving fast.

• Specialization: Large companies (like Google or Meta) hire specialists like “UX Researchers” or “UX Writers.”
• Generalization: Startups usually want a “Product Designer” who can do everything from research to the final visual design.
• Marketing: Sometimes “UX/UI Designer” is used by recruiters simply because it’s a popular buzzword, even if the job is mostly just graphic design.

Layout & Structure

What is Hierarchy?

Hierarchy is the order of importance. It tells the user where to look first.

• Visual Hierarchy: Using size and color. A big red button draws the eye more than a small gray link.
• Text Hierarchy: Using different font weights (Bold vs. Regular) and sizes ($H1$, $H2$, Body) to organize information.
• Layout Hierarchy: Placing the most important information “above the fold” (the part of the screen seen without scrolling).

What is a Grid?

A grid is an invisible structure of vertical columns and horizontal rows used to align elements.

• Why use it? It creates consistency. If your images and text align to a 12-column grid, the app feels “stable” and professional rather than messy.

The Power of Space

Why is spacing so important?

Spacing (often called “padding” or “margin”) prevents a design from looking cluttered.

1. Grouping: Elements close together are perceived as related (e.g., a photo and its caption).
2. Readability: It’s easier to read text when there is enough room between the lines.
3. Clickability: On mobile, you need enough space around a button so the user doesn’t accidentally click the wrong thing with their thumb.

What is Whitespace?

Whitespace (or “Negative Space”) is the empty area between design elements.

• It doesn’t have to be white; it just means “nothing is here.”
• The Benefit: It reduces “cognitive load.” If a screen is packed with 50 buttons, the user panics. If there is lots of whitespace and only one big button, the user knows exactly what to do.

[Image showing a cluttered interface vs a clean interface with effective whitespace]

Deep Dive

1. User Experience (UX) Design

UX design focuses on the logic, structure, and overall feel of the product. Its goal is to solve problems and make the user’s journey as smooth as possible.

• User Research: The process of gathering data about users through interviews, surveys, and observation to understand their needs and pain points.
• Information Architecture (IA): The way content and navigation are organized. Good IA ensures a user doesn’t get lost looking for a specific page.
• Wireframes: Low-fidelity, black-and-white sketches that outline the structure of a screen without any visual styling.
• User Personas: Fictional characters created to represent the different user types that might use your service or product in a similar way.
• Usability Testing: The practice of watching real users try to complete tasks on your design to see where they struggle.

2. User Interface (UI) Design

UI design is the visual and interactive side of the product. It focuses on the aesthetics and making sure the interface is intuitive and accessible.

• Visual Hierarchy: Using size, color, and spacing to guide the user’s eye toward the most important elements first (like a “Buy Now” button).
• Typography: The art of arranging type (fonts) to make text legible, readable, and appealing.
• Color Theory: The study of how colors affect mood and how they can be combined to create a cohesive brand identity.
• Interactions & Micro-interactions: Small animations or visual changes (like a button changing color when hovered over) that provide feedback to the user.
• Design Systems: A library of reusable components (buttons, icons, fonts) that ensures the design stays consistent across an entire app or website.

3. The “Glue” Concepts

These terms sit right in the middle, as they are vital to both UI and UX.

• Accessibility (A11y): Designing so that everyone, including people with visual, hearing, or motor impairments, can use the product effectively.
• Prototypes: An interactive model of your design (usually created in tools like Figma) that mimics how the final app will actually function.
• Affordance: A property of an object that suggests how it should be used. For example, a button that looks “raised” suggests it should be clicked.

Comparison at a Glance

Pro-Tip: If you are just starting out, I highly recommend downloading Figma. It is the industry-standard tool for both UI and UX, and it’s free for individual learners.