Design Glossary
Let's clear up some of those technical words
A
A/B testing, also known as split testing, is a method used in marketing, user experience design, and other fields to compare two versions (A and B) of a webpage or app to determine which one performs better.
“Above the fold” is a term originally derived from the newspaper industry, referring to the upper half of the front page that’s visible when the newspaper is folded. In the digital realm, it’s used to describe the content that’s immediately visible on a webpage without requiring any scrolling.
Accessibility refers to the practice of ensuring that products, services, environments, and information are usable and available to as many people as possible, regardless of any potential limitations or disabilities they may have. This concept is especially vital in the digital realm, encompassing web design, software development, and content creation to make sure that everyone, including those with disabilities or impairments, can perceive, understand, navigate, and interact with online content.
Web accessibility, for example, involves adhering to certain guidelines and standards (such as the Web Content Accessibility Guidelines – WCAG) to create websites and digital content that are inclusive and usable by individuals with various disabilities. These disabilities can include visual impairments, auditory impairments, physical disabilities, cognitive limitations, or other conditions.
Making content accessible might involve practices like providing alt text for images (to assist those using screen readers), ensuring high contrast for readability, providing captions or transcripts for videos, implementing keyboard-friendly navigation, and considering various assistive technologies that can help people access digital content more effectively.
The goal of accessibility is to break down barriers and create an inclusive environment where everyone can equally access, understand, and interact with digital content or physical spaces. It’s not just a legal or moral requirement in many cases, but it also enhances the overall user experience for everyone, not just those with disabilities.
Adobe XD (Experience Design) is a powerful design and prototyping tool developed by Adobe. It’s specifically crafted for creating user interfaces, user experiences, web and mobile app designs, and interactive prototypes. Adobe XD is part of the Adobe Creative Cloud suite and is used by designers, developers, and product teams to streamline the design and prototyping process.
AJAX stands for “Asynchronous JavaScript and XML.” It’s a set of web development techniques used to create more dynamic and responsive web pages by enabling data to be retrieved from a server asynchronously in the background without interfering with the display and behavior of the existing page.
Alignment in various contexts generally refers to the arrangement, positioning, or adjustment of elements or entities in relation to one another. It’s a fundamental principle in design, business, teamwork, and various other fields, emphasizing the arrangement of elements to achieve a specific objective or visual harmony.
An API, which stands for Application Programming Interface, is a set of protocols, tools, and definitions that allows different software applications to communicate and interact with each other. It defines the methods and data formats that applications can use to request and exchange information.
B
The “back end” refers to the server-side or behind-the-scenes part of an application that is responsible for managing and processing data. It’s the part of a system that users don’t directly interact with; instead, it works behind the scenes to ensure the functionality of the software or website.
In the context of design or web design, “body” often refers to the main content area within a layout, particularly within the realm of web development.
In web design:
Body Tag in HTML/CSS: The “body” tag in HTML/CSS refers to the main section of a webpage where the primary content is displayed. It encompasses all the visible content that users see when they visit a website. Developers use CSS (Cascading Style Sheets) to style and format elements within the body, including text, images, and other media, to create an appealing and functional layout.
Content Area: The body area is where the bulk of the website’s textual and visual content is presented. It might include paragraphs, images, headings, forms, or any other content relevant to the site’s purpose.
Bootstrap is a popular front-end framework used in web development to create responsive and mobile-first websites and web applications. Originally developed by Twitter, it provides a collection of pre-built tools, templates, and components, such as HTML, CSS, and JavaScript, to expedite the process of creating consistent and visually appealing user interfaces.
Breadcrumbs, in the context of web design and navigation, are a navigational aid or a secondary navigation system that shows users the path they’ve taken to arrive at the current page or location within a website. They are typically displayed as a horizontal trail of links at the top of a web page, mirroring the hierarchy or structure of the site.
The term “breadcrumbs” is derived from the story of Hansel and Gretel, where they dropped breadcrumbs to mark their path through the forest.
The “burger menu,” also known as the “hamburger menu,” is a widely recognized icon used in user interfaces to indicate a hidden or collapsible menu on a website or mobile application. Its name is derived from its appearance, which consists of three horizontal lines stacked on top of each other, resembling a hamburger or sandwich.
The icon is typically placed in the top corner of a website or app, usually the top left or top right. When users click or tap on the burger menu icon, it reveals a navigation menu that slides in or drops down, displaying various options for navigation, settings, or additional content.
A browser, often referred to as a web browser, is an application used to access and display content on the World Wide Web. It’s a software program that enables users to navigate the internet, view websites, and interact with various online content. Browsers interpret and render HTML, CSS, JavaScript, and other web languages to display web pages in a human-readable format.
C
Cache, in the context of computing, refers to a component that stores data temporarily to speed up subsequent access to that data. It acts as a high-speed storage mechanism that holds recently accessed or frequently used information to reduce the time it takes to retrieve the same data.
There are various types of caches in computing, including:
Memory Cache: In a computer system, the memory cache is a small, fast storage area that temporarily holds frequently accessed data. This cache, located closer to the CPU, helps to speed up processing by providing rapid access to frequently used instructions and data.
Browser Cache: In web browsers, the cache stores files such as images, scripts, and other web page components to speed up the loading of previously visited websites. When you revisit a web page, the browser can retrieve certain elements from the cache instead of re-downloading them from the internet, resulting in faster page load times.
CAPTCHA, an acronym for “Completely Automated Public Turing test to tell Computers and Humans Apart,” is a challenge-response test designed to distinguish human users from automated computer programs, often referred to as bots. It is commonly used on websites to prevent spam, abuse, or unauthorized access by ensuring that the entity attempting to access the site or perform a task is a human and not a computer program.
A carousel, in the context of web design and user interface, refers to a slideshow or image gallery that displays a series of images, content, or media elements in a rotating or sequential manner. Carousels are commonly used on websites to showcase multiple pieces of content within a limited space, often on the homepage or specific sections of a webpage.
Compression, in the realm of computing and data storage, is the process of reducing the size of a file or data to save space or transmit it more efficiently over a network.
A CMS (Content Management System) is software that helps people create, manage, and publish digital content, especially for websites. It provides tools for adding, editing, and organizing content, making it easier for multiple users to work on the same website. It’s like a user-friendly toolbox for building and maintaining websites without needing deep technical knowledge.
D
Dynamic content refers to website or application content that changes or updates based on various factors, such as user interactions, preferences, or real-time data. It’s content that’s not fixed or static; instead, it adapts or is generated on-the-fly according to specific conditions or user inputs.
DNS (Domain Name System) is like a phone book for the internet. It translates human-readable web addresses (like “example.com”) into computer-friendly numbers (IP addresses) so that your browser can find websites. It helps you access websites using names you remember, instead of needing to know complicated numbers for each site.
Debugging is the process of finding and fixing problems or mistakes in software or computer programs to make sure they work correctly. It involves figuring out what’s wrong, locating where the issue is, and making changes to solve the problem.
A database is like a digital filing system that stores and organizes information. It’s a structured collection of data that can be easily accessed, managed, and updated. Databases store various types of information such as text, numbers, images, and more. They are used in many applications like websites, banking systems, and inventory management to efficiently store and retrieve data.
A dashboard in design is like a car’s dashboard but for information. It shows important data in a clear, simple way using graphs and charts. It helps people quickly understand things, make decisions, and see how something is performing, just by looking at it.
E
An “end user” is the person who ultimately uses a product or service. In the context of technology, it refers to the person who uses software, hardware, or any technological product.
A “404 error page” is what you see when you try to visit a web page that doesn’t exist or can’t be found. The number 404 is the code the server gives when it can’t find the page you’re looking for. The error page usually displays a message telling you the page couldn’t be found, sometimes with helpful links to navigate back to the website’s main pages or search for what you were looking for.
Embedding refers to the process of integrating or including one type of content or technology within another. It involves taking an element from one source and placing it into a different context, allowing it to be displayed or used within the new environment.
Encryption is like putting your message into a secret code that only certain people can understand. It scrambles information into a form that’s unreadable without the right key or code. It helps keep data safe and private when it’s being sent or stored, making sure only authorized people can access and understand it.
E-commerce is like having a store on the internet. It involves buying and selling goods or services online. It allows people to shop, make payments, and conduct business transactions through websites or online platforms, without physically visiting a traditional brick-and-mortar store. It covers a wide range of activities, including online shopping, digital payments, and online auctions, offering convenience and access to a variety of products and services from anywhere with an internet connection.
F
A favicon is a small icon associated with a website that appears in the browser tab, next to the website’s name or page title. It’s a tiny graphic, often a simplified version of a logo or a distinctive image, used to represent a website and help users easily identify and locate it when multiple tabs are open in a web browser.
FTP is a way to move files between your computer and a remote server, like putting files on a website or downloading stuff from the internet. It’s like a digital bridge that helps move files between two places.
In web design, a footer is like the bottom part of a web page. It contains information that appears consistently at the bottom of each page, such as copyright details, contact information, links to important pages, or other relevant content. Just like the footer of a document, it’s the area at the bottom that often includes essential information or navigation links for users to access.
The front end refers to the part of a website or application that users interact with directly. It’s everything you see and interact with on a website – the layout, design, buttons, text, images, and any interactive elements. The front end is built using languages like HTML, CSS, and JavaScript and is what users experience when they visit a website or use an app. It’s like the storefront of a shop, where customers interact with products and services.
A fluid layout in web design refers to a layout structure that adjusts and adapts its size and proportions based on the size of the screen or the browser window. Unlike fixed layouts with set dimensions, a fluid layout uses percentages or relative units to define the size of elements, allowing them to resize and reflow to fit different screen sizes or devices
G
A gradient is a gradual transition between two or more colors, shades, or tones. It’s a visual effect where one color smoothly blends into another, creating a smooth progression or transition
A GIF, short for Graphics Interchange Format, is a type of image file that supports animation or a sequence of images. It’s like a short, silent video loop composed of a series of individual frames that play in sequence, often creating a looping or repeating effect.
A grid layout in web design is a structured system used to organize content on a webpage. It consists of rows and columns that create a framework to position and arrange elements such as text, images, and other content.
Gutenberg replaces the classic WordPress editor and provides a more visual and dynamic approach to building and customising web pages. It simplifies the process of designing and arranging content, making it more accessible for users to create engaging and visually appealing web pages.
GUI stands for Graphical User Interface. It’s the visual way people interact with computers, software, or devices. Instead of using text-based commands, a GUI uses graphical icons, buttons, windows, and menus to make it easier for users to operate and navigate through applications or systems.
H
A “hamburger menu” is a symbol with three horizontal lines often used in website or app design. It’s named for its resemblance to a hamburger due to the three stacked lines. This icon typically represents a hidden or collapsible menu. When users click or tap on the hamburger icon, it reveals a menu with various options for navigation, settings, or additional content, providing a space-efficient way to display menu items on smaller screens or to declutter the interface.
The “hotdog menu” is a less common term used in a similar context to the “hamburger menu.” It represents a menu icon with three stacked lines, much like the three lines in a hotdog bun, hence the name. Similar to the hamburger menu, the hotdog menu icon often signifies a hidden or collapsible menu in website or app design. When users click or tap on the hotdog icon, it typically reveals a menu with various navigation options or additional content, helping to save space on the interface or smaller screens.
In web design, the “header” refers to the top section of a webpage. It usually contains elements such as the website’s logo, navigation menus, and sometimes additional information like contact details or a search bar
A “hyperlink” is a connection between two resources on the internet, often text or an image that, when clicked, directs the user to another webpage, document, or resource. It’s a clickable element that allows users to navigate between different parts of a website or to external sites.
The “hover effect” refers to the visual change that occurs when a user moves their cursor over an interactive element, like a link, button, or image on a webpage.
“Hosting” refers to a service that allows individuals or organisations to make their website accessible via the internet. It involves storing the files and data of a website on a server provided by a hosting provider.
The “hover state” refers to the appearance or behavior of an element on a website when a user moves their cursor over it. It’s the visual change that occurs in response to a user hovering their mouse pointer over an interactive element like a link, button, or image.
I
An “interface” is where you interact with a device or a computer. It includes everything you see and use, like buttons, screens, and menus, that lets you control and communicate with that device or software.
“Information architecture” involves organizing and structuring information to make it easy to find and understand. It’s like designing a blueprint or a map for information on a website or in a system. This helps users navigate and locate what they need quickly and efficiently.
An “iteration” refers to the process of repeating or revisiting a series of steps or actions to refine, improve, or develop something. In various fields such as software development, design, or problem-solving, iteration involves going through a cycle of planning, executing, and reviewing multiple times to achieve a better outcome.
L
Designers or developers use “Lorem Ipsum” text as temporary content to fill spaces where actual text will be placed later. It helps in assessing the layout, fonts, and design without getting distracted by the actual content.
“Letter tracking” typically refers to the adjustment or alteration of the spacing between characters (letters) in typography. It involves modifying the space between letters to improve readability, visual appeal, or to achieve a particular design effect.
A “landing page” is a specific webpage designed for a particular marketing or advertising campaign. It’s where a user ‘lands’ after clicking on a link, advertisement, or search result. These pages are created with a focused purpose, usually to encourage a visitor to take a specific action, such as signing up for a service, purchasing a product, or providing contact information. Landing pages are often optimized for conversions and designed to be clear, persuasive, and user-friendly to prompt visitors to take the intended action.
M
A “minimum viable product” (MVP) is the most basic version of a product that has enough features to satisfy early users and gather feedback
A “mockup” is like a preview or a basic picture that shows how a final product or design might look. It’s a visual representation used to share the general idea or layout of a website, app, or product before creating the real thing.
N
“Navigation” refers to the method or system used to move around and explore a website, app, or software. It involves menus, links, buttons, or other elements that help users travel between different pages, sections, or features within the interface.
A “navbar” is a familiar element on a website or app. It’s a menu bar or a collection of links that typically appears at the top of a webpage. The navbar usually includes links to various sections of the site, such as home, about, services, and contact, making navigation easy for users. It acts as a guide, allowing users to move around the website and access different pages or sections with just a click.
O
“Onboarding” typically refers to the process of familiarising or introducing new users to a service, platform, or system. It involves guiding users through the features, functionalities, or key elements of a product when they first start using it.
An “overlay” is a layer that appears on top of another element, often in web design or user interfaces. It’s like a transparent sheet placed above the existing content, creating a visual effect without replacing what’s underneath.
In simple terms it is like a see-through layer that appears on top of something else, often used in websites or apps. It shows extra information or options without replacing what’s already there, like a pop-up window or a message that appears on the screen.
An “overlay menu” is a menu that appears on top of the main content of a webpage or app. It usually slides in or pops up when triggered, covering part or all of the existing content, providing navigation options, links, or additional features.
“Optimisation” means making something work better by improving, refining, or enhancing its performance or efficiency. It involves finding ways to get the most out of a system or process, making it work as effectively as possible using available resources.
P
A “pixel” is the smallest unit of a digital image or display. It’s like a tiny dot that represents a single point in an image. Images on screens, such as those on your phone or computer, are made up of many pixels. The more pixels, the higher the detail and clarity of the image. The term “pixel” is a short form of “picture element,” and it’s the building block of digital images, forming the visual content you see on electronic devices.
Parallax scrolling is a visual effect used in web design where the background moves at a different speed than the foreground when a user scrolls down a webpage. This technique creates an illusion of depth and perspective, enhancing the user’s visual experience by making the elements on the screen appear to move independently.
Pagination is when a long list or content is split into smaller sections, each shown on a different page. It helps make a big list or lots of information easier to read by breaking it into smaller parts you can move between.
PNG stands for Portable Network Graphics. It is a type of image file format used to store pictures on a computer or the internet.
“Page speed” refers to the time it takes for a web page to load its content and become visible to a user.
A “prototype” is an early, basic version of a product or design. It’s created to test, demonstrate, or visualize the idea before building the final product.
R
“Retention” refers to the act of keeping or maintaining something. In business or marketing, it often specifically refers to customer retention, which involves keeping existing customers engaged and satisfied to encourage them to continue using a product or service.
Responsive design is an approach used in web development to create websites that adapt and display effectively on various devices and screen sizes, such as desktops, tablets, and mobile phones. It involves designing and building websites to ensure that the layout, content, and features adjust and look good regardless of the device being used.
S
A “sticky menu” refers to a navigation bar on a website that remains visible and fixed in the same position even as a user scrolls down the page. This type of menu “sticks” to the top or side of the screen, ensuring that it remains easily accessible to users as they explore the content on the webpage.
In simple terms, a “sticky menu” is a navigation bar that stays in one place on a webpage, even when you scroll up or down.
A “stock photo” is a picture or image that is already created and available for use. These photos are often taken by photographers or artists and then made accessible for others to use, usually for a fee or under specific licensing conditions.
SEO, which stands for Search Engine Optimization, refers to the practices and strategies used to improve a website’s visibility and ranking in search engine results. The goal of SEO is to enhance a site’s presence in organic (non-paid) search engine results, increasing its chances of being seen by more users when they search for relevant terms or topics.
SVG stands for Scalable Vector Graphics. It’s a type of image file format that uses vector graphics to display images. SVGs are widely used on the web for graphics and icons because they can scale in size without losing quality.
T
“The fold” refers to the bottom edge of the visible area on a web page without the need to scroll down. Content that appears on a webpage without scrolling is what users initially see when the page loads.
Typography refers to the art and technique of arranging and styling text to make written language readable and appealing. It involves choosing fonts, arranging typefaces, adjusting spacing, and structuring the text to create a visually pleasing and readable layout.
A “thumbnail” is a small, reduced-size image that represents a larger picture or video. Thumbnails are commonly used in galleries, search engines, and video-sharing platforms. They provide a preview or quick overview of the content they represent, allowing users to recognize and select specific items of interest.
Tabs are like dividers that separate and show different parts of information in one small space. You click on a tab to see the content in that section without cluttering the screen.
U
“Usability” refers to how easy and effective it is to use a product, system, or interface. It focuses on ensuring that the design is user-friendly and straightforward, allowing people to interact with and navigate the product or system easily and efficiently. A high level of usability means that the design is intuitive, understandable, and satisfies the needs of its users, making their experience smooth and productive.
Usability testing is a method used to evaluate how easy and practical it is for people to use a product, system, or interface.
UAT stands for User Acceptance Testing. It is the final phase of testing in software development before the product is released to the end users.
“UX” stands for User Experience. It refers to how people feel and interact with a product, system, or service.
UX design, or User Experience design, involves creating and designing products or systems with the user in mind.
“User flow” refers to the path or sequence of steps that a user follows while interacting with a product or system to accomplish a particular task or goal. It outlines the series of actions or decisions a user makes from the start to the completion of a task or objective within an interface or application.
“User-centric” refers to an approach or design philosophy that prioritizes the needs, preferences, and experiences of the user. It revolves around placing the user at the forefront of decision-making, whether in product development, services, or systems.
User personas are fictional characters representing different types of users who might interact with a product, service, or system. They are crafted based on research and data, including demographic information, behaviors, needs, and motivations of actual users.
V
Visual hierarchy is the way design elements are arranged to show what’s most important. It uses things like size, color, and position to guide where people look first and how they move through the information.
Vertical navigation refers to a website or application layout where the navigation menu or links are positioned vertically along the side of the page rather than horizontally across the top.
Vector graphics are images created using geometric shapes, lines, and curves instead of individual pixels. These images are based on mathematical equations, allowing them to be infinitely scaled without losing quality.
The “viewport” refers to the visible area or the part of a webpage that is currently visible on the screen of a device, such as a computer, tablet, or smartphone. It represents the portion of the webpage that a user can see without scrolling.
w
“White space,” also known as negative space, is the empty or unmarked area in a design, often around text, images, or other elements. It doesn’t necessarily need to be white; it’s simply the absence of content. White space is intentionally left blank to create separation, balance, and focus within a design.
A “widget” is a small, standalone application or component that performs a specific function or provides information on a user interface, like on a website, mobile device, or computer desktop.
A wireframe is a basic visual representation or outline of a web page or application. It’s a simple and low-fidelity depiction, usually in black and white, that illustrates the structure and layout of the interface without detailed design elements like colors or images.
Web fonts are special fonts made for websites. They offer a broader choice of typography styles that designers can use to make web pages look more appealing.
WordPress is a popular and user-friendly content management system (CMS) used for creating websites and blogs.
X
X-height refers to the height of a lowercase “x” in a typeface, used as a measure in typography to determine the height of other lowercase letters in the same font.
XML is a flexible language used to store and share data between different systems. It’s like a set of tags that organizes information in a way that’s easy for computers to read and understand.