UI UX Design Glossary Key Words Explained Simply

1. Research
   → Talk to 5 users
   → Note their pain points

2. Wireframe
   → Sketch the screen on paper
   → Keep it ugly, keep it fast

3. Mockup
   → Open Figma
   → Add colours, fonts, real text

4. Prototype
   → Link the screens
   → Make them clickable

5. Usability test
   → Watch 3 users try it
   → Fix what confuses them

6. Handoff
   → Share with developers
   → Annotate spacing, states, errors

What each step means:

Research
  → Before designing anything, talk to real users
  → Understand what problems they face
  → Without this, you're guessing

Wireframe
  → A rough layout with boxes and labels
  → No colours, no fonts — just structure
  → Cheap to change, fast to make

Mockup
  → A high-fidelity design
  → Looks like the final product
  → This is what stakeholders approve

Prototype
  → A clickable version of the mockup
  → Users can "use" it without code
  → Best way to test ideas quickly

Usability test
  → Watch real people use the prototype
  → Don't help them — just observe
  → Most of what they struggle with is invisible to you

Handoff
  → Developers need specs: spacing, sizes, states
  → Good handoff saves weeks of back-and-forth
  → Figma has built-in tools for this

Persona
  → A fake user that represents a real group
  → "Riya, 24, student, budget-conscious"

User Journey Map
  → A diagram of all the steps a user takes
  → From "I need this" to "I'm done"

Empathy Map
  → A canvas of what a user says, thinks, does, feels
  → Helps you design with feeling, not just logic

Stakeholder
  → Anyone who has a say in the project
  → Client, manager, developer, support team

UX Research
  → The process of learning about users
  → Interviews, surveys, observation

Why each matters:

Persona
  → Gives the team a shared picture of the user
  → Prevents "designing for yourself"
  → Every feature should help the persona

User Journey Map
  → Shows where users drop off or get stuck
  → Makes pain points visible
  → Aligns the team on the full flow

Empathy Map
  → Captures what people don't say out loud
  → Helps you see the emotional side
  → Especially useful for service design

Stakeholder
  → You can't design in isolation
  → Every stakeholder has constraints
  → Good UX designers manage them diplomatically

UX Research
  → Bad research leads to bad design
  → Even 5 user interviews reveal patterns
  → It's the difference between guessing and knowing

/* Good layout is mostly about spacing */

.card {
  padding: 24px;         /* space inside */
  margin-bottom: 16px;   /* space outside */
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.card h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.card p {
  font-size: 16px;
  line-height: 1.6;
  color: #4a5568;
}

/* Hierarchy in practice:
   → Bigger text = more important
   → Bolder weight = more important
   → More spacing = more separation
*/

Plain English explanation:

padding
  → Space inside the card
  → Keeps text away from edges
  → Too little = cramped, too much = wasteful

margin
  → Space outside the card
  → Separates it from other cards
  → Consistent spacing is a sign of quality

border-radius
  → Rounded corners
  → 0 = sharp, 12 = soft
  → Just a visual style, but consistent

box-shadow
  → A subtle drop shadow
  → Makes the card feel lifted off the page
  → Too strong looks dated; too subtle disappears

Typography
  → Bigger and bolder = more important
  → Smaller and lighter = less important
  → That's hierarchy

line-height
  → Space between lines of text
  → 1.4–1.6 is comfortable for body text
  → Too tight = suffocating, too loose = disconnected

Color
  → Use muted colours for body text
  → Save high-contrast colours for CTAs
  → This is how you guide the eye

Low-Fidelity Prototype
  → Paper sketches or simple boxes
  → Fast, cheap, easy to change

High-Fidelity Prototype
  → Realistic visuals, real text
  → Clickable in Figma
  → Closer to the real product

Interactive Prototype
  → A prototype where actions trigger effects
  → Clicking a button opens a new screen
  → Best for usability testing

Usability Test
  → Watching real users use your design
  → You don't help them
  → You just observe and take notes

A/B Test
  → Show two versions to different groups
  → See which performs better
  → Real data, not opinions

What each does:

Low-Fidelity
  → Paper, or Figma frames with placeholder boxes
  → Purpose: explore structure quickly
  → You can throw it away without guilt

High-Fidelity
  → Real colours, real fonts, real images
  → Purpose: convey the final look
  → Good for stakeholder approval

Interactive
  → Clicking works; screens link together
  → Purpose: feel the flow, test the logic
  → Where most design problems actually surface

Usability Test
  → Give the user a task: "Buy a pair of shoes"
  → Watch them try
  → Note where they hesitate, get stuck, or misinterpret
  → You learn more from 3 tests than 3 weeks of internal debate

A/B Test
  → Two versions of the same screen
  → Users are randomly split
  → Measure clicks, conversions, completion rate
  → Takes time, but gives real evidence

Key rule:
  → Test early, test often
  → The later you catch a problem, the more it costs to fix

/* Contrast and focus in action */

.button {
  background: #1a365d;
  color: #ffffff;
  /* Contrast ratio: 8.6:1 → passes AA and AAA */
}

.button:focus-visible {
  outline: 3px solid #f6ad55;
  outline-offset: 2px;
  /* Visible focus ring for keyboard users */
}

/* Alt text in HTML */
<img src="chart.png" alt="Sales grew 30% from Jan to June" />

/* ARIA label example */
<button aria-label="Close dialog">×</button>

What to check:

Contrast
  → WCAG AA requires 4.5:1 for normal text
  → 3:1 for large text (18px+ or 14px bold)
  → Use a contrast checker tool
  → Black text on white = 21:1 (perfect)

Focus states
  → Every interactive element needs one
  → Don't rely on :focus alone — use :focus-visible
  → Remove outline: none only if you replace it

Alt text
  → Describe the information, not the image
  → "Sales grew 30%" beats "bar chart image"
  → Purely decorative images use alt=""

ARIA
  → Use it sparingly
  → Semantic HTML usually covers it
  → "First rule of ARIA: don't use ARIA"

Keyboard navigation
  → Tab moves focus forward
  → Shift+Tab moves focus backward
  → Enter activates buttons, Space toggles checkboxes
  → All of this should work without a mouse

Week 1: Read this glossary
Week 2: Download Figma (free)
Week 3: Recreate one screen you use daily
Week 4: Turn it into a clickable prototype
Week 5: Test it with 2 friends
Week 6: Note what they struggled with

That's it. That's the whole course.
Everything else is repetition.

Best practices for learning:

Don't memorize
  → You'll forget a definition you never used
  → Use a term once and it sticks

Build small things
  → One screen, one flow, one prototype
  → The habit matters more than the project

Share your work
  → Post on LinkedIn or a design community
  → Feedback accelerates learning

Read design critiques
  → See how others spot problems
  → You'll start noticing the same things

Use the vocabulary
  → When you talk about designs, use the words
  → "The hierarchy is off" beats "It looks weird"
  → Specific terms make you sound and think clearer

Follow good designers
  → Not for inspiration, for language
  → Notice how they explain their decisions