Usability.gov is archived and no longer updated.

External links may not function and information on the site may be out of date. Visit Digital.gov for current information.

Visual Design Glossary Terms

  • Above the fold [or Above-the-fold]
    The region of a Web page that is visible without scrolling. The area above the fold will vary according to a user's monitor size and their resolution settings. The region above the fold is called a screenful.
  • Affordance
    When a control behaves as its appearance suggests.
  • Animation
    A simulation of movement by the rapid appearance of images in sequence.
  • Anti-aliasing
    Smoothing the jagged appearance of diagonal lines in a bitmapped image. The pixels that surround the edges of the line are changed to varying shades of gray or color in order to blend the sharp edge into the background. This technique is also called "dithering."
  • Background images
    Images, pictures or patterns that appear behind graphical user interface elements on a web page.
  • Banner
    Banners are graphic images that commonly function as Web-based billboards. Banner ads generally appear toward the top-center of the screen, and are used as attention-grabbing links to other sites.
  • Bitmapped
    An image that follows a pattern of square shaped pixels.
  • Bounded field/Unbounded field
    An unbounded field is a free form entry field, a bounded field sets the parameters for selection or entry for the user.
  • Cascading style sheets (CSS)
    Code that defines how to display HTML elements in externalstyle sheets that enable you to change the appearance and layout of all the pages in a Web site by editing one single file.
  • Clickability cues
    A visual indication that a given word or item on a Web page is clickable. Cues that can be used to indicate the clickability of an item include color, underlining, bullets, and arrows.
  • Color depth
    How many colors a computer screen can display, based on the number of bits per pixel.
  • Data entry field
    A visually well-defined location on a page where users may type data.
  • Density, page
    A measure of the percentage of the screen that is filled with text and graphics.
  • Design validation
    An assessment of a website's functions and elements correspondence as identified initially with the design and the end user?s actual needs.
  • Design verification
    An assessment of the interface's correspondence with the design that was defined
  • Engaging or Engagement
    Capturing the user's attention or interest or maintaining their interaction.
  • Experience architecture
    Multidisciplinary approach to technology involving information architecture, interaction design and experience design practices that aim to provide a good user experience and benefit business.
  • Fluid layout
    When a page contracts and expands horizontally inside a persons web browser despite the size of the browser window or the resolution of the monitor.
  • Fold
    The fold is defined as the lowest point where a Web page is no longer visible on a computer monitor or screen. Where on a Web page the fold falls is a function of the monitor size, the screen resolution, and the font size selection. The information that is visible when a Web page first loads is considered to be "above the fold." Those regions of the same Web page that are visible only by scrolling are considered to be "below the fold."
  • Font
    A particular typeface, size, pitch and spacing.
  • Font color
    The color of the text.
  • Font readability
    How easy or difficult it is to read a collection of words in a specific type style.
  • Font size
    The height of a font measured in points.
  • Gestalt Principles
    People do not visually perceive items in isolation, but as part of a larger whole. These principles include humans tendencies towards similarity, proximity, continuity, and closure.
  • Graphic design
    See Visual Design
  • Graphic elements
    An element of a user interface that displays information or can be manipulated by the user to pursue a task.
  • Graphical User Interface (GUI)
    See User Interface
  • Graphics
    Images, icons, patterns or other visual representations.
  • High-Fidelity Prototype
    An interactive prototype that simulates the real system or site's functionality and design details. [See also Low-Fidelity Prototype]
  • Hues
    The frequency of the wavelength of color; what we normally refer to as the "color" of an object.
  • Hybrid navigation model (hybrid structure)
    A combination of navigation structures incorporates some combination of components possibly including sequential and/or hierarchical IA designs.
  • Icon graphic
    An image that is usually interactive and represents an object or action or marker for entry into information.
  • Image links
    A clickable image hyperlinked for internal linking and web site navigation without supporting text.
  • Image placeholders
    Text that provides users with descriptive information about a graphic while it is downloading.
  • Interaction Design (IXD)
    The study of how a user interacts with a page, application or product.
  • Interface
    A view or presentation of an object or program.
  • Interface Design
    See Interaction Design, Visual Design
  • Internationalization
    A system whose primary design has been developed to work in multiple languages and in the cultural contexts of different locales.
  • Landing page
    The location in a Web site where a given user goes after clicking on a link. Also Target page or Destination page.
  • Layout graphic
    Graphic elements that serve to delineate, divide or identify content on a webpage.
  • Leading
    Line spacing or the vertical space between lines of text.
  • Look and Feel
    The consistent visual design and application of a corporate identity to an interface.
  • Low-Fidelity Prototype
    Low cost, illustrated design or concept usually sketched on paper or created as flat images. [See also high-Fidelity Prototype]
  • Luminance
    Subjective brightness, intensity of light.
  • Masthead
    The (usually) graphical banner at the top of a Web page that identifies the organization or group that hosts the Web site. The masthead typically contains the name of the organization and site (if different) and an organizational logo.
  • Monochrome
    Paintings, drawings, design, or photographs in one color or shades of one color.
  • Monospaced font
    A font whose letters and characters each occupy the same amount of horizontal space.
  • Navigation
    The means by which users to get from page to page on a website.
  • Navigation design
    A design phase that interprets information architecture and task flows into wireframes or mockups to demonstrate and test the site structure and visual direction.
  • Negative space
    Unused space or white space.
  • Page density
    A measure of the percentage of the screen that is filled with text and graphics.
  • Page flow
    A hierarchy or sequence suggested by arrangement of elements on a page.
  • Page templates
    Predefined layouts or formats for sets of common web pages.
  • Page title
    Page titles refer to the text located in the browser title bar (this is the bar found at the very top of the screen of common browsers).
  • Pagination
    Dividing information into separate sequentially numbered or linked pages.
  • Paging
    A Web site design methodology that requires users to follow a series of "Next page" links to read an entire article. Moving from page-to-page is an alternative to scrolling through long pages.
  • Panels
    Visually and thematically-defined sections of a Web page. Panels are frequently placed in the left and right margins of pages. Panels often contain navigation aids, including related links. Content is not usually placed in left or right panels.
  • Paper Prototyping
    A prototyping method in which paper models are used to simulate computer or web applications.
  • Parallel Design
    A design methodology that involves several designers pursuing the same effort simultaneously, but independently, with the intention to combine the best aspects of each for the ultimate solution.
  • Physical consistency
    Physical consistency refers to the "look and feel" of a Web site. Physically consistent Web pages will have logos, headers, and navigation elements all located in the same place. The pages also will use the same fonts and graphic elements across all pages in the site.
  • Product Design or Industrial Design
    Design of consumer products that considers usability, human factors, ergonomics, and appearance while still maintaining function.
  • Proportional font
    Type with spacing apportioned according to the shape and width of the character .
  • Prototype
    A preliminary model or archetype of a web page or website used to demonstrate or test the user experience and various task flows. [See also Low & High Fidelity Prototypes]
  • Radio button
    A screen-based control used to select one item from a list of mutually-exclusive items (i.e., use radio buttons when only one item in a list of several items can be selected).
  • Rapid Prototyping
    Quickly generating mockups of what a system will look like to facilitate internal review or testing.
  • Readability
    The degree to which users can easily and accurately read information on a web page
  • Responsive Design
    A web design approach aimed at crafting sites to provide an optimal viewing experience across platforms and devices.
  • Rollovers
    A state change that involves one element being replaced by another upon the mouse going over it.
  • Scanability
    How easy it is to read and understand a body of text.
  • Scroll bar
    The scroll bar is visible along the right edge of common browsers. It is defined by a movable box that runs on a vertical or horizontal axis.
  • Scrolling
    A method of traversing a Web page wherein users either roll the scroll wheel on their mouse, or manually move the scroll bar located on the right side of their browser's screen.
  • Serif
    A projection off of the stroke of a character
  • Similarity
    Perception that elements of the same size, shape or color belong together
  • Site map
    A clickable, graphic- or text-based display of a Web site's hierarchy.
  • Storyboard
    A visual representation of how a user will interact with an application or interface.
  • Style sheet
    A set of statements that specify presentation of a document. Style sheets may have three different origins: they may be written by content providers, created by users, or built into browsers or plug-ins.
  • Tab
    A graphical navigation element that is most often placed at the top of a Web page. Effective tabs should be designed so that they resemble real-world file folder tabs.
  • Tagline
    A phrase or short sentence placed directly below a Web page's masthead. The tagline functions to quickly identify the purpose of the Web site. It may be a subtitle, an organizational motto, or a vision or purpose statement.
  • Target audience
    The set of users for which a system is designed or intended.
  • Task
    A procedure that includes goals, steps, skills, start state, inputs, end state, and outputs to accomplish an activity.
  • Thumbnail image
    A small copy of a larger image.
  • User Interface (UI), or Graphical User Interface (GUI)
    What the user sees.
  • User interface structure
    The basic content organization and its navigation model.
  • User-Centered Design (UCD)
    An approach to designing a product or service (e.g. user interface design), in which the end user is placed in the center of the process.
  • Waterfall model
    A linear design process whereby, steps are completed and the project passes onto the next phase with evaluation completed at the end.
  • White Space
    The use of blank (uncluttered) space on a page to promote content and navigation.
  • Widget
    Screen-based controls that are used to interact with a Web site and other systems. Widgets include pushbuttons, selection lists, radio buttons, sliders, etc.
  • Wireframe
    A highly simplified sketch of the important information in a page. Also known as page architecture, page schematic, or blueprint
  • WYSIWYG
    An acronym for "What you see is what you get." It describes the way in which the layout on the graphical screen is a representation of the printed version of the document.