77 Web Design Terms You Need to Know

Venturing into the world of web design can be an exhilarating journey. However, just like any unfamiliar territory, it comes with its own unique language and terminology that may leave you feeling lost or confused. Fear not. We’re here to help.

We’ve prepared the ultimate web design glossary—a treasure trove of essential web design terms that will empower you to navigate the intricacies confidently. Whether you’re a curious beginner or just trying to understand what your designer or developer is saying, this guide will demystify web design jargon.

You’ll find succinct and easy-to-grasp explanations that will serve as invaluable reference material and improve your grasp of important terms and concepts.

Glossary of Web Design Terms

A/B Testing

A method for determining which of two versions is the most effective by testing them on different sets of users (also known as split testing). For example, you might run an A/B test to determine whether a red button attracts more clicks than a green button.

Above the Fold

The portion of a web page that’s visible without scrolling down. Web designers often try to ensure the most important content and features are placed above the fold to maximize engagement.

Accessibility

The practice of making websites, content, and applications accessible to people with disabilities. This includes design elements like alt text for images and code that enables screen readers to process the page’s content.

Alt Text

Short for “alternative text,” alt text is an attribute used to briefly describe an image. This is especially important for accessibility purposes, as it allows screen readers to understand the content of images. Images, aside from those that are purely decorative, should include alt text.

Anchor Text

The clickable text in a hyperlink. For example, “Learn more” or “Read our blog” are both examples of anchor text.

Back-End Development

The process of creating server-side applications, coding, and programming the logic that powers a website or application. This type of development is usually handled by developers with strong knowledge of databases, scripting languages, and frameworks.

Below the Fold

The portion of a web page that’s visible only after scrolling down. This term comes from the newspaper industry, which traditionally used two-page spreads and placed the most crucial content on the top half of the first page (above the fold).

Body Copy

The main text or content of a web page. This could include blog posts, product descriptions, press releases, and any other form of written material. Body copy typically uses a smaller font size than headlines. Since readability is essential, simple serif and sans serif fonts are commonly used for body copy.

Bounce Rate

The percentage of visitors to a website who leave the site after viewing just one page. A high bounce rate may indicate poor content quality, usability issues, or other issues that discourage users from remaining on the site. However, a high bounce rate isn’t always bad. It could also indicate that visitors are quickly getting what they need.

Breadcrumb Navigation

A type of website navigation that shows the user’s position within a website’s hierarchy. Breadcrumb links typically appear at the top of web pages and are usually separated by arrows, slashes, or other symbols. These links allow users to quickly navigate to pages that are higher in the hierarchy. For example, breadcrumb navigation on a blog post may look like “blog name > category name > blog post title.”

Breakpoint

A specific width or size of the browser window at which a responsive website adapts its layout to render correctly on different screen sizes. If the screen width is below a certain breakpoint, the layout adjusts accordingly to provide a better user experience. The most common breakpoints are for mobile and desktop devices.

Call to Action (CTA)

A link, button, or other element used to encourage a website visitor to take a specific action. Common examples of CTA’s include “Subscribe Now” and “Contact Us.” CTAs should be placed in prominent locations on the page so visitors can easily see them.

Cascading Style Sheets (CSS)

A style sheet language controls a web page’s presentation (layout, colors, fonts, etc.). CSS allows web designers to specify how page elements such as headings and paragraphs should look.

Compression

The process of reducing the size of a file to improve page load times. Compression can be applied to images, audio, video, and other types of files. Smaller files will load faster in the web browser, providing a better user experience.

Content Delivery Network (CDN)

A collection of servers located across the globe that can deliver content to a user more quickly than a single server would. This is achieved by caching static files (like images, scripts, and stylesheets) on multiple servers so they are geographically closer to the website visitor.

Content Management System (CMS)

A platform that allows users to create, manage, and publish content on the web. Popular CMSs such as WordPress and Squarespace make building and maintaining websites easier for non-coders. Users can create and edit pages from the CMS’s dashboard.

Contrast

The difference between the light and dark elements on a web page. High contrast is essential for legibility, as it helps text stand out from its background. Contrast can also differentiate types of content, such as links and headlines.

Conversion Rate

The percentage of visitors who take a desired action, such as signing up for a newsletter or purchasing. A low conversion rate could indicate usability issues with the website or its content. Or it could indicate issues with the offer (like pricing, for example).

Cookies

Small files that a website stores on a user’s computer to remember their preferences and browsing behavior. Cookies can be used for numerous purposes, such as tracking user behavior or personalizing the content they see.

DNS

Short for “Domain Name System,” DNS is the protocol that translates a domain name to its corresponding IP address. When a user enters a website address into the browser (www.example.com), it finds the server hosting the website by looking up its numerical IP address in the DNS database.

Domain Name

A unique name that identifies a website or web page. Domain names are used in place of IP addresses, as they’re easier to remember and type. For example, www.example.com is easier to remember than 123.45.67.89/index.html.

Favicon

A small icon that represents a website or web page is usually displayed in the address bar, bookmarks, and other locations. Favicons are typically 16×16 pixels and should be saved as a .ico file.

Focal Point

The main area of a composition that captures the viewer’s attention and guides their eyes. Focal points can be used to emphasize certain elements in web design, such as headings, graphics, or calls to action.

Front-End Development

The process of coding and programming the user-facing elements of a website. This includes HTML, CSS, JavaScript, and other code used to make websites look and function correctly in web browsers. Front-end developers typically have strong knowledge of design principles as well.

FTP

Short for “File Transfer Protocol,” FTP is a standard protocol used to transfer files from one host to another. Developers and designers often use FTP clients such as FileZilla to upload files to web servers.

Global

Styles that are used throughout a website, as opposed to only in one place. These styles can include fonts, colors, and any other elements that should be consistent across the entire site. Changing a global style will impact the entire site.

Grid System

A structure of columns and rows used to arrange page elements. Grid systems are especially useful for designing responsive websites, as they create an organized layout that adapts nicely to different screen sizes. Popular grid systems include Bootstrap and Foundation.

Hamburger Icon

An icon of three horizontal lines indicates a menu on a website or within an app. This icon is usually placed in the top right corner of the page and expands into a full menu when clicked or tapped.

Header

The top section of a web page that typically contains the website’s logo, navigation, and other important elements. Headers are often placed at the top of every page on a website to provide quick access to essential content or links.

Heatmap

A visual representation of user activity on a website. Heatmaps allow web designers to quickly analyze where users click, scroll, and hover to better understand how visitors interact with the page’s content.

Hero Image

A large banner or image that is usually placed at the top of a website page. Hero images grab attention and create an emotional connection with visitors.

Hex Color Code

A six-digit code used in web design to identify a particular color. For example, the hex code for red is “FF0000” and the hex code for blue is “0000FF”.

Hierarchy

The arrangement of different elements on a page to create a logical and visually pleasing structure. Proper hierarchy helps direct the user’s attention to the most important content first.

HTML (HyperText Markup Language)

The main language used to create websites. HTML is a markup language comprising tags that define web page structure and content. Today’s drag-and-drop website builders like Squarespace create HTML for you behind the scenes.

Hyperlink (Link)

A clickable element on a web page that links to another part of the same page, another page on the same website, or an external website. Hyperlinks are styled as blue and underlined by default, but CSS can be used to style them in other ways.

Icon

A graphic symbol used to represent an action, feature, or concept. Icons are often used in web design to direct user attention and visually explain features without the need for words. For example, a news page may include an envelope icon that allows users to email the link to the article to someone.

Iframe

Short for “inline frame,” an iframe is an HTML element that embeds content from another website or page into a web page. Iframes are commonly used to display third-party content such as videos, maps, or posts from social networks.

Infinite Scrolling

A method of loading content that allows users to keep scrolling down the page indefinitely. This technique is often used on social media sites or news sites, as it helps visitors find more content quickly.

JPG/JPEG

A common image file format used for photographs or other detailed images. JPG files are generally smaller than PNG files and can be optimized further to improve page load times.

Landing Page

A web page designed specifically for a marketing campaign, subscription form, or another goal-driven activity. Landing pages often have minimal distractions (for example, the navigation menu may be removed). These pages focused on achieving one specific objective, such as collecting user information or encouraging visitors to purchase a product.

Lazy Loading

A technique used to improve page speed by loading content only when needed. For example, images below the fold may not be loaded until a user scrolls down the page. This helps reduce page load times, as fewer resources need to be downloaded at once.

Meta Data

Data that’s used to describe the content of a web page. Meta tags, such as title and description, are especially important for SEO because they provide search engines with information about the page’s subject matter.

Mobile First Design

A design approach in which mobile devices are given priority when creating website layouts. This means designing the mobile version of a website first and then scaling up for desktop devices rather than creating a desktop-first design and then downscaling for mobile devices.

Navigation

The system that allows visitors to find their way around a website or application. Good navigation should be organized, logical, and easy to use. Clear labels and intuitive menu structures are essential for good navigation.

Open Source

Software published under an open-source license, meaning its source code is freely available and can be modified by anyone. Open-source software often has a large community of developers working to improve it and make it more secure. Popular open-source CMSs include WordPress and Drupal.

Parallax Scrolling

A technique that creates the illusion of depth on a web page. As users scroll down, background elements move slower than foreground elements to create a layered effect. Parallax scrolling is often used in web design for visual appeal, to draw the user’s attention to certain content, or simply to provide a unique experience.

Persona

A fictional representation of a website’s target audience. Personas are typically based on market research and help designers create well-targeted, user-friendly websites.

Plug-In

A piece of software that expands the functionality of an existing program or website (sometimes called an “add-on” or “extension”). Plugins are often used to add features or functionalities not included in the core product.

PNG (Portable Network Graphics)

A raster image file format that supports transparency and allows images to be saved in a lossless format (unlike JPGs). PNG files are generally larger than JPG files but can display complex graphics without degrading the quality.

Prototype

A basic version of a product used to test usability and design. Prototypes are often used to test a website’s user experience and flow before coding starts.

Raster Image

An image composed of pixels. Unlike vector images, which are made up of paths and curves that can be scaled without losing quality, raster images will become blurry and pixelated if the resolution is increased. Popular raster file formats include JPG and PNG.

For more details, please read Raster vs. Vector.

Readability

The ease with which text can be read. Readability is essential for good web design, as it helps visitors understand the content quickly and easily. Factors such as font size, line length, line height, and color contrast all impact readability.

Resolution

The number of pixels in a given image or display. The higher the resolution, the more detail that can be seen. Common resolutions for web images include 72 points per inch (for low-resolution displays) and 300 ppi (for high-resolution displays).

Responsive Design

A design approach that allows web pages to adapt their layouts to render correctly on different screen sizes. Responsive websites use fluid grids and media queries to create an optimal viewing experience, regardless of the user’s device.

Search Engine Optimization (SEO)

The practice of optimizing a website’s content, design, and code to improve its visibility in search engine results pages (SERPs). SEO typically involves optimizing page titles, descriptions, images, and other elements that help to improve the chances of the page ranking in searches for relevant keywords or phrases.

Semantic Markup

HTML tags that are used to define the meaning of page content. Semantic markup allows web browsers, search engines, and other machines to understand the structure and information on a web page. Headings (h1-h6), paragraphs (p), and lists (ul/ol) are all examples of semantic markup.

Sitemap

A list of all of the pages on a website. Sitemaps often help search engine bots crawl a website and index its content for search results. They can also help human visitors find the content they’re looking for.

Slider (Carousel)

An element that allows users to scroll through multiple images or content blocks (such as text, videos, etc.). Sliders/carousels are often used to showcase featured products or content and can be useful for highlighting multiple offers on the same page.

SSL Certificate

A type of encryption used to secure data transmitted over the Internet. SSL certificates are essential for all websites, but especially those that collect payment information or other sensitive data, as they protect clients from having their information stolen by hackers. If a website uses an active SSL certificate, the address will begin with “https” instead of “http.”

Staging Site

A duplicate version of a website used for testing and debugging purposes. Staging sites are often used to test design changes or new features before making them live on the production (live) site.

SVG (Scalable Vector Graphics)

A vector image file format that is typically used on a website for elements like logos and icons. Unlike raster images, which are made up of pixels, SVG files are composed of paths and curves that can be edited with code or a graphics editor.

Template

A pre-built design that provides a basic structure for a website. Templates allow developers and designers to quickly create sites from scratch without starting from zero.

Theme

A set of files used to change the look and feel of a website. WordPress themes, for example, are bundles of templates that define the overall design of a WordPress site.

URL (Uniform Resource Locator)

The address of a web page. URLs typically comprise the protocol (http/https), domain name, and path to the page (e.g., http://www.example.com/blog).

Usability

The ease with which a website can be used and navigated. Good usability is essential for providing an enjoyable user experience, as it ensures visitors can quickly find what they’re looking for with minimal distractions or interruptions.

User Experience (UX)

The overall experience of a user when interacting with a website or application. UX designers focus on creating an intuitive and enjoyable experience by optimizing the usability and accessibility of the product.

User Flow

A path or sequence of steps that an individual takes while using a website or application. User flows are typically mapped out before coding begins to ensure an optimal user experience.

User Interface (UI)

The graphical elements of a product that a user interacts with, such as buttons, menus, and other controls. UI design focuses on creating an attractive and intuitive interface that allows users to interact with the product easily.

Vector Image

An image composed of paths and curves. Vector images are resolution-independent, meaning they can be scaled up or down without losing quality. Popular vector file formats include Ai (Adobe Illustrator), EPS, and SVG.

Web Fonts

Fonts that are hosted on a server and served to the user’s web browser. Web fonts allow designers to use custom typefaces and ensure their designs look consistent across different browsers.

Web Hosting

Web hosting is the service of providing server space and bandwidth for websites. Websites need to be hosted on servers to be accessible through the internet.

White Space

The area of a design that does not contain any elements. It helps break up content on a page and can draw attention to important elements.

Wireframe

A low-fidelity sketch or drawing of a website that outlines the general layout and elements of the page. Wireframes are used by designers at the beginning of a project to map out the structure of a website before diving into more detailed design work.

XML (Extensible Markup Language)

A markup language used for organizing data in a structured way. XML is often used to store data, such as RSS feeds or sitemaps generated by websites and applications.

Final Thoughts on Web Design Terms

Understanding basic website terminology is essential for anyone working in or with web development and design. As you continue in the world of web design, be sure to keep exploring and growing your knowledge base so you can create better sites and applications.