-
Above the fold
The portion of a webpage that is visible without scrolling.
-
Abstract
A design style that does not attempt to represent an accurate depiction of visual reality, instead uses shapes, colors, forms, and gestural marks to achieve its effect.
-
Airbrush
A digital tool that simulates the effect of an airbrush by producing a soft, smooth, and gradual transition of color.
-
Alignment
The process of ensuring the elements of a design line up along common edges or axes.
-
Analogous colors
Colors that are adjacent to each other on the color wheel and work well together, creating harmonious designs.
-
Ascender
The part of a lowercase letter that extends above the main body of the letter, such as 'b' or 'd'.
-
Aspect ratio
The proportion between the width and height of an image or screen.
-
Asymmetry
A design principle where elements are unbalanced to create a sense of movement or interest.
-
Avatar
A digital representation of a user in a virtual environment, often used in user interfaces and games.
-
Axis
A line about which a three-dimensional object or 2D graphic is evenly balanced.
-
Baseline
The line on which most letters in a typeface rest.
-
Bitmap
A type of graphic composed of pixels in a grid layout.
-
Bleed
In print design, the area to be trimmed off, which allows the print to continue to the edge of the paper.
-
Bold
A typeface style characterized by its thick stroke, often used for emphasis in text.
-
Border
A line or pattern that surrounds and defines the edge of an element or an object in a design.
-
Branding
The process of creating and promoting a consistent image or identity for a product or service across multiple platforms.
-
Brand identity
The visual elements that represent a company, such as logo, colors, and typography.
-
Breadcrumb
A type of secondary navigation scheme that reveals the user's location in a website or application.
-
Brightness
A measure of the amount of light in an image or a particular color, which influences the perception of the image or color's lightness or darkness.
-
Brush
A digital tool that can be customized to mimic the effects of traditional painting tools.
-
Button
A clickable element in an interface, used to trigger an action or navigate between sections.
-
Bezier Curve
A mathematically defined curve used in two-dimensional graphic applications for drawing smooth curves, outlines, and paths.
-
Blurb
A short description or summary, often used in publication designs, book jackets, and promotional materials.
-
Bokeh
A photography effect where the lens renders out-of-focus points of light, often used to create blurring effects or to emphasize the subject by contrasting it with the blurred background.
-
Bouma
The shape of a group of letters combined together in a word, often used in typography to enhance readability and recognition speed.
-
Call to action (CTA)
A prompt on a webpage that encourages users to take a specific action, such as clicking a button or filling out a form.
-
Canvas
The space where a design is rendered in graphic design software or on a webpage.
-
Cap height
The distance from the baseline to the top of an uppercase letter, not including any accent marks.
-
Clip art
Pre-made images used in medium-low-resolution designs, often in word processors. They are convenient for personal and small-business projects.
-
CMYK
A color model used in color printing, named after the four inks used: cyan, magenta, yellow, and key (black).
-
Complementary colors
Colors that are opposite each other on the color wheel. When combined, they produce a grayscale color, but when placed next to each other, they create the strongest contrast.
-
Composition
The arrangement of elements within a work of art or a design. Good composition draws the viewer's eye across the artwork to a focal point and then to other elements.
-
Contrast
A design principle that creates difference between elements in a design, such as contrasting colors, sizes, shapes, and so on, to draw visual interest and highlight certain elements.
-
Crop
To remove parts of an image or design to create focus or strengthen the composition.
-
CSS (Cascading Style Sheets)
A style sheet language used for describing the look and formatting of a document written in HTML or XML.
-
Cursive
A style of penmanship or font that mimics handwriting where the letters typically flow together.
-
Curve
A line or outline that gradually deviates from being straight for some or all of its length.
-
Cut-out
A technique of removing or "cutting out" the background of an image, often used in graphic design.
-
Cyan
A greenish-blue color, one of the four standard colors used in printing, along with magenta, yellow, and black.
-
Descender
The part of a lowercase letter that extends below the baseline, such as 'g', 'j', or 'y'.
-
Design Thinking
A methodology used by designers to solve complex problems and find desirable solutions for clients. It draws upon logic, imagination, intuition, and systemic reasoning, to explore possibilities of what could be and to create desired outcomes that benefit the end user (the customer).
-
Desktop Publishing
The creation of documents using page layout software on a personal computer, mainly for print, but also digital publications.
-
Diagonal Line
A line or path that slants in a direction between vertical and horizontal. In design, these are often used to create a sense of motion or direction.
-
Digital Art
An artistic work or practice that uses digital technology as an essential part of the creative or presentation process.
-
DPI (Dots Per Inch)
A measure of spatial printing or video dot density, in particular the number of individual dots that can be placed within the span of one linear inch (2.54 cm).
-
Drawing
The act or art of representing an object, scene, or idea by means of lines or marks on a surface.
-
Drop Cap
A large capital letter at the beginning of a block of text that drops into the line or lines of text below.
-
Duotone
A halftone illustration made from a single original with two different colors at different screen angles.
-
Dynamic
In web design, dynamic typically refers to content or elements that change based on user actions, time, or other variables.
-
Dynamic content
Content on a webpage that changes dynamically based on user interactions or other factors.
-
Element
Individual components or parts of a larger whole in a design. This can include things like images, buttons, text, or any other item in a design layout.
-
Ellipsis
A series of dots (usually three) that indicates an intentional omission of a word, sentence, or whole section from a text without altering its original meaning.
-
Emphasis
A principle of art which occurs any time an element of a piece is given dominance by the artist. In other words, the artist makes part of the work stand out, in order to draw the viewer's eye there first.
-
Ergonomics
The study of people's efficiency in their working environment. In design, it relates to the usability and accessibility of a product, interface, or environment.
-
Euler Diagram
A graphic representation used in logic and mathematics to illustrate the relationships between different sets.
-
Export
The act of saving data in a format that can be used by different programs. Designers often export work in various formats depending on the end use.
-
Extension
A term in computing that refers to the end of a file name that indicates the file type or format, such as .jpg, .png, or .ai.
-
Eye Flow
The path the viewer’s eye is likely to travel when looking at a design. Good designs can control eye flow to ensure important elements are seen.
-
Eye Tracking
A technology to measure where we look, the gaze point, and the movement of the eyes. It is used extensively in usability research for web design.
-
Extrusion
In 3D graphics, the process of creating a 3D object by extending a 2D shape into a third dimension, creating depth from a flat object.
-
Favicon
A small icon associated with a particular website, typically displayed in the address bar of a browser or next to the site name in a user's list of bookmarks.
-
Feathering
A technique used in computer graphics software to smooth or blur the edges of a feature.
-
Fill
A color, pattern, or texture applied to the inside of a shape.
-
Filter
A software tool that applies specific changes to an image or graphic. Examples include blur, sharpen, and color adjustments.
-
Flat Design
A design style that avoids the use of stylistic elements that give the illusion of three dimensions, such as gradients and shadows, and instead focuses on simple shapes and colors.
-
Flexbox
A layout mode in CSS3 designed for the complex layouts on responsive webpages. It provides a more efficient way to align, distribute space, and manipulate items in a container, even when their size is unknown or dynamic.
-
Font
A particular size, weight, and style of a typeface. For example, "Times New Roman" is a typeface, and "Times New Roman Bold Italic 12pt" is a font.
-
Font Family
A set of one or more fonts, in one or more sizes, designed with stylistic unity, each comprising a coordinated set of glyphs.
-
Font Weight
The thickness of the characters in a font. Font weight can range from 'light' to 'bold' or 'heavy'.
-
Footer
The section at the bottom of a webpage, typically containing information like copyright notices, links to privacy policies, credits, etc.
-
Framing
A technique used to bring focus to a subject in the design. This can be achieved by using elements such as borders, windows, or objects in the scene to frame the subject.
-
Gamification
The application of game-design elements and game principles in non-game contexts to improve user engagement, organizational productivity, flow, learning, crowdsourcing, employee recruitment and evaluation, ease of use, and physical exercise.
-
GIF (Graphics Interchange Format)
A bitmap image format that was developed by a team at the online services provider CompuServe and is supported by almost all web browsers.
-
Golden Ratio
A mathematical ratio commonly found in nature, and when used in design, it fosters organic and natural looking compositions.
-
Gradient
A gradual blend between two or more colors (or different tints of the same color).
-
Grid
A framework of spaced bars that are parallel to or cross each other; a grating. In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal) lines used to structure the content.
-
Grid System
A grid system is a structure comprising a series of horizontal and vertical lines which intersect and are used to arrange content efficiently.
-
Gutter
In graphic design, gutters are the spaces between columns on a page where the contents of different columns are separated.
-
Header
The top portion of a webpage, often containing the logo, navigation, and potentially key information like a website's purpose.
-
Hero Image
A large, featured image placed prominently on a webpage, usually at the top and in a full-width layout. It is often used for aesthetic or branding purposes or to draw attention to key content.
-
Hex Code
A six-digit code used in HTML, CSS, and design software to represent colors, with each pair of digits representing red, green, and blue components on a scale from 00 to FF.
-
Hierarchy
The visual arrangement of design elements in a way that signifies importance. This can be achieved through various means such as size, color, contrast, typography, placement, and more.
-
Hover State
A change in appearance or function of an interactive element that occurs when the user places their pointer over it, but does not select it. It often signals to the user that the element is interactive.
-
HTML (HyperText Markup Language)
The standard markup language used to create web pages. It is the most basic building block of the Web and defines the meaning and structure of web content.
-
Hue
In color theory, hue is one of the main properties of a color, defined technically as "the degree to which a stimulus can be described as similar to or different from stimuli that are described as red, blue, green, and yellow".
-
Hyperlink
A reference to data that the reader can directly follow either by clicking or by hovering. It points to a whole document or to a specific element within a document.
-
Icon
A small graphic symbol that represents an object or program. Icons are commonly used in graphical user interfaces such as desktops, websites, or mobile apps to quickly communicate an action or concept in a visually pleasing and easily understandable way.
-
Iconography
The use of icons or symbols to represent concepts, actions, or objects.
-
Ideation
The process of generating, developing, and communicating new ideas. It's an essential stage in the design process, leading to innovation and creative problem solving.
-
Illustration
A visual interpretation or explanation of a text, concept, or process. In design, illustrations are used for both aesthetic and communicative purposes.
-
Image Resolution
The detail an image holds, often measured in pixels for digital images. Higher resolution means more image detail.
-
Infographic
A visual representation of information or data, like a chart or a diagram, that is used to simplify complex information and present it in an easily digestible, visual format.
-
Interaction Design (IxD)
The practice of designing interactive digital products and services. It involves creating the behaviors and responses of digital interfaces in response to user interactions.
-
Interface
The means by which the user and a computer system interact. In design terms, it often refers to user interfaces (UIs) which include both hardware and software, like mouse control and clickable buttons, respectively.
-
Italic
A style of font that slants the letters of a text. It is often used for emphasis or to differentiate one part of a text from the rest.
-
Jitter
Random variations of timing or position, typically in reference to graphic design, digital graphics or animation.
-
JPEG
A common file format for digital images. Short for Joint Photographic Experts Group, JPEG is a lossy format, meaning it compresses images by reducing their quality.
-
Justification
The alignment of text along the left margin, right margin, or both. This results in a clean edge but can create large spaces between words in a line.
-
Juxtaposition
A design concept where two or more elements are placed close together or side by side for comparison or contrast.
-
Kerning
The adjustment of space between pairs of letters to improve its appearance or alter its fit.
-
Keyline
An outline used in graphic design to emphasize design elements, separate or organize content, or guide the viewer's eye.
-
Kicker
A short phrase or sentence that precedes a headline or introduction to grab the reader's attention.
-
Knolling
A process of arranging related objects in parallel or 90-degree angles as a method of organization, typically used in product photography.
-
KPI (Key Performance Indicator)
A type of performance measurement that evaluates the success of a particular activity or goal.
-
Layout
The arrangement of elements on a webpage, including the positioning of text, images, and other content.
-
Leading
The space between lines of text, measured from baseline to baseline.
-
Letterform
The specific shape of an individual letter in a typeface.
-
Letterpress
A printing technique where the text and image are transferred to paper by pressing an inked surface against the paper.
-
Ligature
Two or more letters combined into a single character.
-
Line art
An image that consists of distinct straight or curved lines placed against a background, without gradations in shade or color.
-
Line height
The vertical distance between lines of text.
-
Line length
The horizontal width of a block of typeset text, usually measured in pica or points.
-
Logo
A graphic mark or symbol used to aid and promote public identification and recognition of a company or product.
-
Logotype
A logo that consists only of typography, usually the name of the company or product.
-
Lorem Ipsum
A placeholder text used in publishing and graphic design.
-
Margin
The area between the main content and the page edges, providing a buffer to improve readability.
-
Mask
A tool that hides or reveals portions of an image without altering the image's pixels.
-
Mockup
A model of a design used for teaching, demonstration, and design evaluation.
-
Monospace
A font in which all letters and characters occupy the same amount of horizontal space.
-
Moodboard
A collage of images, text, and object samples used to illustrate a proposed design style.
-
Moiré effect
A visual perception that occurs when one set of lines or dots is superimposed on another, differing in size, angle, or spacing.
-
Motif
A recurring element in a design that, when repeated, creates a pattern or rhythm.
-
Multimedia
A form of communication combining text, audio, images, animations, or video into a single presentation.
-
Navigation
The system or menu that allows users to move between different sections or pages of a website.
-
Negative Space
The space around and between the subject of an image or the space within a design that’s left unmarked.
-
Neon Color Scheme
A color scheme that utilizes bright, vibrant colors that mimic those of neon lights.
-
Noise
A design element that adds texture by simulating the random speckle effect seen in old television displays or grain in photographs.
-
Non-destructive Editing
An editing method that allows you to make changes to an image without overwriting the original image data.
-
Normalization
A process in digital graphics to bring values or ranges of values into a standard or normal range.
-
Novelty Typeface
A typeface that is intended to be used for special occasions that require a particular thematic mood or visual interest.
-
Null Object
An invisible layer that you can create to control the motion of multiple layers or to control properties of other layers.
-
Numerals
The figures used to denote numbers, such as 1, 2, 3, etc. Different typefaces can have different styles for numerals.
-
Opacity
Refers to the level of transparency of an element. A lower opacity means the element is more transparent, and a higher opacity means the element is more solid.
-
Open Composition
A type of composition in design where the elements seem to continue outside the frame, giving an unfinished or open-ended feel to the work.
-
Ornamentation
The process or art of decorating or adding details or features to a design to make it more attractive or interesting.
-
Outline
The outer boundary of a shape or object in a design, usually represented by a line or similar form.
-
Output
The end result of a design process, such as a printed piece, a digital file, a produced video, etc.
-
Overprint
The process of printing one color over another. In digital design, it may refer to the process of overlapping or overlaying design elements.
-
Overscan
A behavior in certain television sets, where part of the input picture is shown outside of the visible bounds of the screen.
-
Overlapping Elements
Design elements that are placed on top of each other. Overlapping can create a sense of depth and add interest to a design.
-
Padding
Space that's inside the element between the element and the border. It can be used to manage the space between different elements and the content inside them.
-
Palette
A specific range of colors. Designers choose a palette to give their designs a cohesive feel.
-
Parallax scrolling
A scrolling effect where foreground and background elements move at different speeds, creating a sense of depth.
-
Path
In graphic design, a path is a vector-based line that can be both straight or curved and is used to create complex shapes.
-
Pattern
A repeated decorative design. Patterns are used to add visual interest or unify elements in a design project.
-
PDF
Short for Portable Document Format, it's a file format used to present and exchange documents reliably, independent of software, hardware, or operating system.
-
Pixel
The smallest basic unit of programmable color on a computer display or in a computer image.
-
PNG
A file format used for lossless image compression. PNG is a popular format for web graphics, because it supports transparency.
-
Prototype
A preliminary version of a product, built to test a concept or process or to act as an object to be replicated.
-
QR Code
Short for Quick Response Code, a QR code is a type of matrix barcode (or two-dimensional barcode) that can be read by a QR barcode reader or a smartphone camera.
-
Quote Marks
Also known as quotation marks or inverted commas, they are punctuation marks used in pairs to mark off speech, a quotation, or a phrase.
-
Quotation
The practice of directly citing a person's words in your own text. In design, this can refer to how these quotes are visually treated to stand out.
-
Quirkiness
A design style or element that is characterized by peculiar or unexpected traits. Quirkiness can make a design stand out and seem more human and approachable.
-
Quality
The standard of something measured against other things of a similar kind; the degree of excellence of something.
-
Quality assurance (QA)
The process of testing and ensuring that a product meets specified requirements and standards.
-
Radial Balance
A type of balance in which elements radiate from a central point. It can create a strong focal point in the center of the design.
-
Raster Images
Images that are made up of individual pixels, such as JPEGs or BMPs. Raster images can't be scaled up without losing quality.
-
Rasterization
The process by which vector images (in mathematical form) are converted into a raster format (pixels or dots) for output on a video display or printer, or for storage in a bitmap file format.
-
Readability
How easy an extended amount of text is to read. This is affected by typography, color scheme, layout, and content structure.
-
Resolution
Refers to the detail an image holds. Higher resolution means more image detail.
-
Responsive design
A design approach that ensures a website displays properly on different devices and screen sizes.
-
RGB
Red, Green, Blue - a color model that is used in screen displays.
-
Rule of Thirds
A guideline which applies to visual composition for images or designs, especially those which have elements that follow along the lines or intersections of the grid.
-
Sans-Serif
A style of typeface that does not have small lines at the end of characters. Sans-Serif fonts are often used for headings and titles.
-
Saturation
The intensity of a color, expressed as the degree to which it differs from white. High saturation colors are vivid, while low saturation colors appear more muted and grey.
-
Scale
The size of one object in relation to the other objects in a design or artwork.
-
Script
A type of font that imitates handwriting. Scripts can be formal or casual and are often used for invitations or headings.
-
Shade
A color made darker by the addition of black.
-
Sketch
A rough or unfinished drawing or painting, often made to assist in making a more finished picture.
-
Spec
Short for specification, a document that accurately describes the design and function of a product for the builders and stakeholders.
-
Stock Image
Professionally taken photographs that are bought and sold on a royalty-free basis and can be used and reused for commercial design purposes.
-
Stroke
The main diagonal portion of a letterform. Also, the main vertical line in a letter.
-
Style guide
A document that outlines the visual and writing standards for a brand or project, to ensure consistency.
-
Symmetry
A balanced arrangement of similar or exactly similar parts on either side of a plane or about a center or an axis.
-
Synchronous
An interaction that happens in real-time, such as a chat or video call. In UI design, it's used to describe real-time communication between users or between a user and the system.
-
Template
A pre-designed layout that can be used as a starting point for a particular type of document or design.
-
Texture
The feel, appearance, or consistency of a surface. In design, texture can create a more immersive and realistic experience for the user.
-
Thumbnail
A small picture that represents a larger image or concept. Thumbnails are often used in design to provide a snapshot view of a full content.
-
Tint
A color made lighter by the addition of white.
-
Tone
The general character or attitude of a place, piece of writing, design, etc. Tone in design can range from professional and formal to relaxed and casual.
-
Tracking
Adjusting the overall spacing of a group of letters or words.
-
Transparency
The property of a material or object that allows light to pass through it. In digital design, it's the ability of a pixel to show the color beneath it.
-
Triadic
A color scheme that uses three colors evenly spaced around the color wheel. Triadic color schemes are vibrant and should be managed well to ensure balance and harmony.
-
Trend
A general direction in which something is developing or changing. In design, trends are often influenced by cultural shifts, technology, and other industries.
-
Typography
The art and technique of arranging type to make written language legible, readable and appealing when displayed. This includes selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), and adjusting the space between pairs of letters (kerning).
-
UI (User Interface)
The means by which the user and a computer system interact. In design, it specifically refers to the use of buttons, menus, and other visual indicators on a screen.
-
Unified Design
A design approach that ensures all elements of a design are integrated and consistent with each other and deliver the same message or feeling.
-
Unity
The relationship among the elements of a visual that helps all the elements function together. Unity gives a sense of oneness to a visual image.
-
User-Centered Design
A design philosophy and a process in which the needs, wants, and limitations of end users of a product, service, or process are given extensive attention at each stage of the design process.
-
User Experience (UX)
The overall experience a person has using a product, system, or service. Good UX design improves the quality of a user's interaction and perceptions of products and services.
-
User Flow
A representation of the sequence of actions a user takes to complete a task on a website or app. They are useful tools for UX designers to understand the user's journey.
-
UX (User Experience)
The overall feeling a user is left with after interacting with a product, system, or service. UX design considers each and every element that shapes this experience, how it makes the user feel, and how easy it is for the user to accomplish their desired tasks.
-
Vector
A type of graphic that uses mathematical algorithms to create shapes. This allows the image to be scaled up or down without losing any quality.
-
Vector graphics
Graphics created using paths, which can be scaled without losing quality.
-
Vignette
A design technique where the brightness or saturation of an image is reduced at the periphery (edges) compared to the image center. This can be used to focus the viewer's attention on the central content.
-
Visual Hierarchy
The arrangement or presentation of elements in a way that implies importance. This is often achieved by varying size, color, and placement within the work.
-
Visual Identity
The visual elements of a brand, including color, design, logos, typography, and imagery, which create the overall brand image.
-
Visual Weight
The perceived heaviness or lightness of the elements within a design. It's a visual force that appears to act on a shape or body in the direction of the center of the earth or the center of the design.
-
Vintage
A design style that draws from the past, specifically from the 20th century, and incorporates those elements into contemporary designs.
-
Volume
The amount of space a substance or object occupies. In design, volume can refer to the perceived space a 3D object takes up, or the space within a container or shape.
-
Wireframe
A basic, visual guide used to suggest the layout and placement of elements, functions, and content on a webpage.
-
X-height
The height of a lowercase 'x' in a specific typeface, used as a measure of the relative height of lowercase letters.
-
X-ray
A design or technique that visually strips away the surface of an object to reveal what's inside or behind it.
-
XML (eXtensible Markup Language)
A language used to store and transport data. Unlike HTML, it does not describe how data should be displayed.
-
YAML (YAML Ain't Markup Language)
A human-readable data serialization language often used in configuration files.
-
Z-Depth
In 3D modeling and design, Z-Depth refers to an object's placement on the Z-Axis, which runs from front to back, allowing designers to create depth and perspective.
-
Z-Pattern
A term that refers to the pattern the human eye follows when reading content from left to right, creating the shape of the letter Z. This is often used in web design to arrange content on a page.
-
Zine
A small-circulation, self-published work of original or appropriated texts and images. Zines are often used to advance a social or political message, and are popular in counter-culture circles.
-
Zoom
The function of enlarging and reducing the view of a portion of a screen or image to see it in greater detail.
A
B
Balance
An essential design principle which ensures that elements in a design distribute their visual weight evenly.