# Graphic Design & Web Design Glossary

Essential terms for the html-designer skill to create professional, visually compelling web designs.

## Core Design Principles

**Alignment** - The arrangement of elements along a common edge, center line, or grid to create order and visual relationships.

**Asymmetry** - A type of balance using uneven elements for a dynamic, modern look while maintaining visual equilibrium.

**Balance** - The distribution of visual weight in a design; can be symmetrical (formal) or asymmetrical (informal).

**Contrast** - The deliberate juxtaposition of different visual elements (light/dark, big/small, bold/thin) to emphasize differences and improve legibility.

**Depth** - Creating a 3D effect using shadows, gradients, or overlapping elements to make flat designs feel more realistic.

**Emphasis** - Highlighting the most important part of a design to grab attention first through size, color, or placement.

**Framing** - Using borders, shapes, or white space to highlight or enclose elements.

**Hierarchy** - The arrangement of elements to signify their relative importance, guiding the viewer's eye through content in the intended sequence.

**Proximity** - The spatial grouping of related elements and the distancing of unrelated ones to communicate relationships.

**Repetition** - Consistently reusing visual motifs (colors, shapes, patterns, type styles) throughout a design to create unity.

**Rhythm** - Creating a sense of movement through repeating or alternating elements, guiding the eye smoothly through the design.

**Scale** - The relative size of elements used to create emphasis or drama.

**Symmetry** - Mirrored or evenly distributed design elements for a formal, stable, professional appearance.

**Unity** - Making all design elements work together for a cohesive, complete look.

**Variety** - Adding different elements (colors, shapes, textures) to keep the design interesting while maintaining unity.

## Typography Terms

**Body Copy** - The main text content, typically smaller and simpler than headlines.

**Font Family** - A group of related typefaces (e.g., Regular, Bold, Italic).

**Hierarchy (Typographic)** - Using size, weight, and style variations to establish importance and reading order.

**Leading** - The distance between the baselines of consecutive text lines (line spacing).

**Legibility** - How easy individual characters are to distinguish from each other.

**Readability** - How easy text blocks are to read and comprehend.

**Typeface** - A specific design of type (e.g., Arial, Helvetica, Times New Roman).

**Typography** - The art of choosing and arranging fonts to make text readable and match the design's tone.

**Type System** - A coordinated set of font choices, sizes, and styles used consistently throughout a design.

## Color Theory

**Analogous Colors** - Colors adjacent on the color wheel that create harmonious palettes.

**CMYK** - Cyan, Magenta, Yellow, Black - color mode used for print design.

**Color Harmony** - Pleasing color combinations based on color wheel relationships.

**Color Palette** - A selected set of colors used throughout a design.

**Complementary Colors** - Colors opposite on the color wheel that create high contrast.

**Hue** - The pure color (red, blue, yellow, etc.).

**Monochromatic Palette** - Tones and shades of a single hue.

**RGB** - Red, Green, Blue - color mode used for screen/digital design.

**Saturation** - The intensity or purity of a color.

**Temperature** - Whether colors feel warm (reds, oranges, yellows) or cool (blues, greens, purples).

**Value** - The lightness or darkness of a color.

## Layout & Composition

**Column** - Vertical divisions in a grid layout.

**F-Pattern** - Common web reading pattern where users scan in an F-shaped path.

**Gutter** - The space between columns in a grid system.

**Grid System** - An invisible framework of columns and rows that guides alignment and organization.

**Movement** - Guiding the viewer's eye through the design using lines, shapes, or positioning.

**Negative Space** - See White Space.

**Visual Flow** - The natural, intuitive path the viewer's eye follows through a design.

**Visual Weight** - The perceived "heaviness" of an element based on size, color, or position.

**White Space** - The empty area around design elements that provides breathing room and reduces clutter.

**Z-Pattern** - Reading pattern where the eye moves in a Z-shaped path across content.

## Design Concepts & Methods

**Accessibility** - Ensuring designs are usable by everyone, including people with disabilities (e.g., WCAG guidelines).

**Consistency** - Using the same elements across a design or brand for recognition and trust.

**Context** - Considering the audience's culture, environment, and needs to make designs relevant.

**Design System** - A set of reusable components (colors, fonts, buttons) ensuring consistency across a project.

**Functionality** - Ensuring the design works well for its intended purpose and is easy to use.

**Gestalt Principles** - Psychological principles explaining how people perceive visual elements as unified wholes (similarity, closure, figure-ground, continuity).

**Golden Ratio** - A mathematical proportion (1:1.618) that creates naturally pleasing designs.

**KISS Principle** - "Keep It Simple, Stupid" - the principle of keeping designs simple and avoiding unnecessary complexity.

**Proportion** - The size relationship between elements ensuring they're scaled for balance and impact.

**Texture** - Visual or tactile qualities (rough, smooth, grainy) that add depth and personality.

**4 P's Formula** - Purpose, Proximity, Proportion, Perception - a framework ensuring intentional, organized, balanced, audience-focused designs.

## Web-Specific Terms

**Call-to-Action (CTA)** - Elements (usually buttons) designed to prompt immediate user action.

**Hero Section** - The large, prominent area at the top of a webpage that captures attention.

**Landing Page** - A standalone web page designed for a specific marketing or advertising campaign.

**Responsive Design** - Designs that adapt to various screen sizes and devices.

**User Experience (UX)** - The overall experience a person has when interacting with a design or interface.

**User Interface (UI)** - The visual and interactive elements users engage with on screen.

**Wireframe** - A basic visual guide showing the structure and layout of a page before final design.

## Visual Effects

**Drop Shadow** - A shadow effect added behind an element to create depth.

**Glassmorphism** - A design style using transparency and blur effects to create a frosted glass appearance.

**Gradient** - A gradual transition between two or more colors.

**Overlay** - A semi-transparent layer placed over an image or background.

## Design Output

**Alt Text** - Descriptive text for images that assists screen readers and accessibility.

**Mockup** - A realistic representation of how the final design will look.

**Prototype** - An interactive model of a design showing how it functions.

**Resolution** - The detail an image holds, measured in pixels or DPI (dots per inch).

## Quality Principles

**Clarity** - How clearly a design communicates its message.

**Cohesion** - How well all elements work together as a unified whole.

**Cultural Sensitivity** - Awareness of cultural differences in color, symbols, and imagery.

**Inclusivity** - Designing for diverse audiences with varying abilities and backgrounds.

**Minimalism** - Design approach using only essential elements with ample white space.

**Maximalism** - Design approach using abundant decoration, pattern, and visual elements.

---

*Use these terms to communicate design decisions clearly and create purposeful, professional web experiences.*