Intro to UI & UX Design Flashcards

Vocabulary practice flashcards covering fundamental UI and UX design topics, color theory, typography concepts, layout systems, and design thinking methodologies.

Graphic Design

A design discipline aimed at communicating ideas to inspire, inform, or captivate consumers through specialized typography choices, layout organization, and visual materials.

Interaction Design (ID)

A branch of design focused on satisfying user needs and enabling users to achieve goals by focusing on the user journey and information architecture as the backbone of UX.

User Experience Design (UX)

The design phase that follows interaction design, focusing on element placement, usability, user research, interviews, and early user testing to satisfy both business and user needs.

User Interface Design (UI)

A discipline focused on ease of use, visual hierarchy, element importance, and delighting users through curated selections of colors, fonts, and animations.

Design Thinking Process

A user-centered problem-solving framework consisting of three main phases (Understand, Create, Deliver) that span five steps: Empathy, Define, Ideate, Prototype, and Test.

Warm Colors

A color group comprising red, orange, and yellow that expresses traits like energy, passion, boldness, happiness, and comfort.

Cool Colors

A color group comprising green, blue, and purple that conveys attributes such as trust, luxury, richness, growth, and youth.

Neutral Colors

A color category consisting of black, white, grey, beige, brown, and wood tones used to evoke feelings ranging from mystery to classic or down-to-earth appeal.

Color Palette

A curated group of harmonious colors used across a design project, often organized into monochromatic, analogous, or complementary relationships on a $12$-color wheel.

Typography Anatomy

The structural anatomy of letters, including elements like cap height, x-height, baseline, bowl, serif, ascenders, and descenders.

X-Height

The height of the lowercase letter x, serving as a baseline relative measurement that varies across typefaces.

Baseline

The imaginary line upon which all letter characters sit, except for rounded characters which extend slightly below it.

Ascender

The portion of a lowercase letter that extends vertically above the x-height of a typeface.

Descender

The portion of a lowercase letter that extends vertically below the baseline of a typeface.

Serif

A small decorative stroke or line attached to the end of a larger stroke in a letterform.

Typeface vs. Font

A typeface represents the overall design style family (e.g., Futura), while a font refers to a specific weight or style variant within that family (e.g., Futura Bold).

F-Shape Pattern

A visual scanning layout behavior revealed by heatmaps showing that web visitors read content from top-left to right and then move down the left margin.

Bootstrap Grid System

A layout framework that structures responsive web layouts across a total of $12$ flexible columns.

Call to Action (CTA)

An interactive element designed to prompt an immediate user response or decision, typically limited to one primary focus per section.

Mobile-First Approach

A design strategy where layouts are designed for mobile screen sizes first before scaling up to tablet and desktop configurations.