Visual Design: Glossary



Summary: 
Use this glossary to quickly clarify key terms and concepts related to visual design.

Visual design requires knowledge and understanding of many jargon terms. Use this glossary as a reference as you delve into visual and user interface design.

Jump to a definition in the table or review the complete glossary.

Aesthetic-Usability Effect

Users’ tendency to perceive attractive products as more usable. People believe that things that look better will work better — even if they aren’t actually more effective or efficient.

Brightness

The proportion of light versus dark colors that an element has or the density of light colors within an image. Increasing the brightness of an image means that more light is perceived as being reflected by that image.

Change Blindness

Peoples’ tendency to ignore changes in a scene when they occur in a region that is far away from their focus of attention.

Closure

A Gestalt principle that states that people will fill in blanks to perceive a complete object whenever an external stimulus partially matches that object.

Graphic of four incomplete circles in a minimalist style, each missing a segment, arranged against a pink background.

Clutter

Visual elements that are unnecessary or excessive, making it difficult for the viewer to focus on important aspects of a design.

Color Palette

A defined set of colors used in a design to maintain consistency and create harmony.

A color palette with three rows of color squares. The colors range from teal to dark blue, vibrant red, and muted purples and pinks.

Common Fate

A Gestalt principle stating that things that move in synch are perceived as belonging to the same group, while being different than other screen elements that stay put or move differently.

Common Region

A Gestalt principle stating that items within a boundary are perceived as a group and assumed to share some common characteristic or functionality.

Illustration showing a grid of blue circles organized in three rows.

Connectedness

A Gestalt principle referring to the tendency to perceive elements that are connected by lines or other visual cues as belonging together. This principle is strong enough to overrule small differences between the items.

A horizontal row of blue circles connected by lines, grouped into four labeled sections.

Consistency

Using similar characteristics and patterns in design elements — in layout, typography, and color palettes — to provide coherence and predictability to users.

Continuation

A Gestalt principle stating that the eye automatically follows lines and curves, continuing them. Continuation guides users along desired paths in a user interface.

A series of dark red dots that transition into pink dots forming a diagonal line across a pink background

Contrast

The difference in visual properties — including color, brightness, or size — that makes an object distinguishable from its surroundings.

A grid of blue and light blue circles

Dark Mode

The combination of light text on a dark background; also known as negative contrast polarity.

A mobile phone interface with dark teal backgrounds and lighter teal screen elements

Data Visualization

The representation of data through visuals, such as charts, plots, infographics, and animations. These visualizations are used to communicate complex data relationships and data-driven insights in a way that is easy to understand.

Bar chart with three horizontal bars in teal, pink, and blue, each with error bars

Density

The number of visual elements in a given area or space. High-density designs are sometimes referred to as cluttered, busy, or crowded. Low-density designs use whitespace and few components. Low-density designs are sometimes referred to as “minimalist.”

Design Principles

Value statements that guide designers in making the right tradeoffs in UX designs.

Design System

A complete set of standards intended to manage design at scale using reusable components and patterns.

External Consistency

Established design conventions in an industry or on the web at large, beyond one application or family of applications.

Figure/Ground

A Gestalt principle stating that people divide a scene into foreground and background and focus their perception on elements in the foreground.

A bright pink message bubble in focus, with a lighter pink message bubble blurred

Fitts’s Law

Describes how long it takes a user to move a pointer (such as the mouse cursor or a finger) to a target in a graphical user interface (GUI) or other design, as a function of size and distance.

Flat Design

A design style characterized by minimalist use of visual elements such as gradients, shadows, and textures to create a clean and simple interface.

Gestalt Principles

Principles that explain how humans simplify and organize complex images that consist of many elements, by subconsciously arranging the parts into an organized system that creates a whole, rather than interpreting them as a series of disparate elements. Gestalt principles capture our tendency to perceive the whole as opposed to individual elements.

Golden Ratio

A mathematical ratio used in design to create organic, balanced, and aesthetically pleasing compositions, thought to be favored by the human eye. This ratio is found in design, nature, photography, and architecture. In UX, use the golden ratio to harmoniously adjust font sizes, highlight focus areas of images, and create balanced layouts.

Grid

A visual made up of columns, gutters, and margins that provide a structure for the layout of elements on a page. Common grid structures include column, modular, and hierarchical grids.

A complex grid layout in varying shades of blue and white

Iconography

The use of symbols or icons to represent concepts, actions, or ideas.

Row of common interface icons in light purple, including a gear, funnel, thumbs up, flag, user profile, light bulb, link chain, book, globe, and open book

Infographic

A multimedia graphic aiming to present complex information and data in a way that is easy to understand. Infographics often include data or (more rarely) information visualizations but must also provide context in the form of illustrations, facts, quotes, and captions. Thus, an infographic can stand on its own as a separate piece of content (though it can also be shown in the context of an article with additional text).

Internal Consistency

Consistency within a product or family of products, either within a single application or across a family or suite of applications.

Minimalism

A low-density aesthetic style in which a design provides the bare minimum components needed to fulfill some purpose.

Monochrome

A color palette composed only of different shades of a single color, with no other colors present. Monochrome palettes can be centered around any color, as long as every color in that palette is a lighter or darker shade of that one color.

Four squares in varying shades of pink from bright to dark

Prototype

An early version of a design used to test and validate ideas, interactions, and functionality.

Proximity

A Gestalt principle stating that design elements near each other are perceived as related, while elements spaced apart are perceived as belonging to separate groups.

Two groups of blue geometric shapes (circles and triangles)

Raster Image

An image whose size is static and is composed of pixels (as opposed to vectors). When a raster image is zoomed in on or stretched, the pixels are more defined or visible. Raster images are also known as bitmap images, including JPG, PNG, or GIF files.

An illustration with a pixelated close up

Responsive Design

An interface that adapts and responds to different screen sizes and devices, providing an optimal user experience across various platforms.

Three variations of screen sizes: phone, tablet, and desktop

Saturation

How intensely colors appear in any given element. Highly saturated elements use bright, bold colors, while less saturated elements use neutral tones or muted colors.

Four pink squares with varying colors, from most saturated to least

Scale

A design principle that uses relative size to signal importance and rank in a composition.

Three different sized blue circles

Signal-to-Noise Ratio

The ratio of relevant to irrelevant information in an interface or communication channel.

Similarity

A Gestalt principle stating that user-interface elements that share one or more traits (such as shape, color, size, etc.) will be seen by users as being similar and belonging together.

Alternating columns of circles and triangles

Skeuomorphism

A design practice incorporating real-world elements into digital interfaces to create a sense of familiarity with these interfaces.

Squint Test

A technique used to evaluate visual designs by narrowing the eyes to reduce detail and focus on overall composition and visual hierarchy.

A screenshot in focus next to a blurred screenshot

Vector Image

An image that can be easily scaled or modified because the file contains mathematical calculations for every shape in the image. Vectors are typically used for images that are not photographs, such as logos, icons, diagrams, or other graphics.

An illustration with a closeup of its contents in focus

Visual Balance

A satisfying arrangement or proportion of design elements. Balance occurs when there is an equally distributed amount of visual signal on both sides of an imaginary axis going through the middle of the screen. This axis is often vertical but can also be horizontal. A design can have symmetrical, asymmetrical, or radial balance.

A screenshot with a dotted line down the center

Visual Hierarchy

The organization of design elements on the page so that the eye is guided to consume each design element in the order of intended importance. Visual hierarchy can be created through color and contrast, scale, and grouping of elements.

Visual Weight

The perceived importance or prominence of a design element based on its size, color, contrast, or placement. Objects that are bigger in size, similar in shape, use dark colors, or have high contrast appear visually heavier.

Whitespace

The empty space between design elements used to achieve a balanced design, making it easier for users to scan and read.

Wireframe

A skeletal outline of a design layout used to represent the structure and functionality of an interface before visual design is considered.

Four phone screens with outlined elements



Source link

Post a Comment

Previous Post Next Post