Glossary: Visual Design and Aesthetic Usability

Estimated reading time: 10 minutes

Welcome! This alphabetized glossary contains many terms used in this module. Understanding these terms is essential when working in the industry, participating in user groups, and completing other certificate programs.

Download the Glossary Document for a complete list of terms and definitions.

Note: If the glossary doesn't download, right-click and open the link in a new tab.

Color Psychology in UI Design

Term	Definition	Role in UX/UI
Color accessibility	The practice of ensuring color choices are perceivable by all users, including those with color blindness.	Enhances usability and inclusivity, ensuring that information is accessible to all users, regardless of color perception.
Color consistency	Maintaining the same use of color for similar meanings or functions across the interface.	Promotes predictability, reduces cognitive load, and ensures clarity throughout the interface.
Color for function	Using color to convey meaning or system feedback (for example, green for success, red for error).	Helps users interpret information quickly without relying on text; crucial for guiding user actions and system feedback.
Color palette	A defined group of primary, secondary, and neutral colors used throughout a product.	Creates a unified visual experience; helps users quickly identify key elements of the interface.
Primary color	The dominant brand or interface color used across the UI.	Establishes a cohesive brand identity and visual consistency across the interface.

Typography in UI Design

Term	Definition	Role in UX/UI
Body font (paragraph font)	A simpler, more readable font used for longer text blocks.	Ensures readability in extended content; enhances user experience by providing legibility.
Font	A specific typeface with style and weight (for example, Roboto Bold, Georgia Italic).	Establishes the visual identity of the interface and communicates tone and style.
Font pairing	The combination of two complementary fonts (usually for headings and body text).	Enhances visual appeal and readability by pairing complementary font styles.
Font personality	The emotional tone or brand feel a font conveys (for example, playful, serious).	Conveys the brand’s character or mood, helping users understand the interface’s emotional context.
Font weight	Thickness of characters (for example, Light, Regular, Bold).	Helps establish hierarchy and draws attention to key information.
Google fonts	A library of free, open-source fonts optimized for the web.	Provides a wide selection of fonts optimized for web use, enabling aesthetic customization while maintaining performance.
Heading font (display font)	Typically bold or decorative font used for titles or headers.	Draws attention to important sections or key information, enhancing readability.
Letter spacing (tracking)	Horizontal spacing between characters.	Improves legibility and visual balance, especially in headers or large text blocks.
Line spacing (leading)	Vertical space between lines of text.	Ensures that text is easily readable and avoids overcrowding of characters.
Readability	How easily users can recognize and process text.	Ensures that content is easy to understand and engage with, improving the user experience.
Responsive typography	Font sizing and layout that adjusts for different screen sizes.	Ensures text remains legible and appropriately sized across various screen resolutions.
Web-safe fonts	Fonts that are widely supported across all browsers and devices.	Ensures consistent rendering of text across different platforms, improving reliability.

Visual Hierarchy in UI Design

Term	Definition	Role in UX/UI
Hierarchy	Visual prioritization of elements based on importance, size, or placement.	Helps users quickly identify key elements, guiding their interaction and ensuring a smooth experience.
Position	Placement of elements in a top-to-bottom or left-to-right reading order.	Guides users through the interface by structuring elements in a logical, intuitive flow.
Scan-ability	The ease with which users can visually navigate and absorb content.	Enhances content discovery and allows users to quickly identify key information.
Size	Larger elements catch the eye first; smaller elements are read later.	Creates a visual hierarchy, ensuring that key elements stand out and users can easily navigate the interface.
Visual cues	Design hints such as icons, arrows, or animations that suggest where to look or what to do next.	Directs users’ attention and guides interaction by highlighting important actions or areas.
Visual hierarchy	The arrangement of elements to show their order of importance visually.	Guides users attention and actions, making the interface more intuitive and user-friendly.

Grid Systems in UI Design

Term	Definition	Role in UX/UI
12-column layout	A common responsive grid structure that divides the screen into 12 equal parts.	Offers flexibility in design, allowing content to be arranged and adjusted according to screen size.
Alignment	The positioning of elements along a common edge or axis within the grid.	Ensures visual order, consistency, and a balanced layout.
Columns	Vertical divisions of space within a row.	Defines the structure of the grid, enabling flexible and organized content placement.
Container	The outermost wrapper that holds the grid layout together.	Holds and organizes the content within the grid, ensuring proper alignment and spacing.
Grid system	A framework of horizontal and vertical lines used to organize and align content in a layout.	Provides a structured, organized approach to layout design, ensuring consistency and clarity.
Gutters	The spacing between columns in a grid.	Provides visual separation between elements, ensuring a clean and organized design.
Rows	Horizontal groupings of content within a container.	Defines the structure of content, ensuring it is displayed logically and consistently.
Whitespace (negative space)	Empty areas between grid elements and around content.	Enhances readability, reduces clutter, and gives the design breathing room, improving user focus.

Designing for Different Screen Sizes

Term	Definition	Role in UX/UI
Breakpoints	Predefined screen widths (e.g., 600px, 768px, 1024px) used to trigger layout adjustments.	Determines how layout changes at specific screen sizes; crucial for responsive design.
Card layout	A responsive layout where each piece of content is enclosed in a consistent card format.	Organizes content in a digestible, visually consistent manner.
Collapsible sidebar	A sidebar that hides or minimizes on smaller screens.	Provides a cleaner, more focused interface on smaller screens, improving accessibility and reducing clutter.
Content reflow	When elements reposition themselves as the viewport size changes.	Ensures that content adapts and remains legible on various screen sizes and orientations.
Flexible media	Images and videos that scale with their containers using properties such as max-width: 100%.	Ensures that media content adapts to various screen sizes without breaking the layout.
Hamburger menu	A collapsible navigation icon commonly used in mobile layouts.	Maximizes screen space by hiding navigation options under a minimalistic icon, ideal for mobile design.
Layout fluidity	The smooth scaling and repositioning of elements without breakpoints.	Creates an adaptive layout that fluidly responds to changes in screen size, optimizing for various devices.
Mobile-first design	Designing for small screens first, then enhancing for larger ones.	Ensures optimal user experience on mobile devices before expanding for larger screens.

Adaptive versus Responsive Design Layouts

Term	Definition	Role in UX/UI
Adaptive design	A method where multiple fixed layouts are created for specific screen widths or devices.	Customizes the interface for different devices or screen sizes, ensuring optimal layout and performance.
Device detection	Technique used in adaptive design to detect a device’s screen type and load a corresponding layout.	Improves user experience by delivering a layout optimized for the specific device or screen size.
Responsive design	A design approach where a single, fluid layout automatically adjusts based on screen size using CSS media queries and flexible grids.	Provides universal compatibility and ease of maintenance across all devices.