Visual Design: Glossary

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.

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.

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

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

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

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

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.

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

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.

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

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

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

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

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.

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.”

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

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

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

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

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.

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

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.

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.

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.

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

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).

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

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

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.

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

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.

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 interface that adapts and responds to different screen sizes and devices, providing an optimal user experience across various platforms.

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.

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

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

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.

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

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

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.

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.

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.

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.

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

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