Web Design Terminology: 60 Must-Know Definitions

Launching a new website? Though exciting, it throws a lot of questions your way. How will it be built? What colors to use? What’s front-end and back-end? (And seriously, what is a CTA?) 

So, before you dive into your web design project, let's get you familiar with the basic building blocks of web design and web terminology.

When you understand the website's anatomy and how it's built, you get the confidence to chat with a website design agency and discuss your dream site. 

‍

If you’re feeling overwhelmed with website jargon, we have compiled 60 essential website anatomy terms to get you comfortable before you start you website project. 

60 Web Design Terms You Need Know

There are a mind-boggling number of web design terms, and we cannot realistically describe every single one of them. However, the web design terms we have listed are frequently used by project managers, designers, and developers. 

Knowing these web design terms will prepare you to approach prospective agencies with a more in-depth idea of what your ideal web page should look like:

Above the Fold

The portion of a web page that is visible without scrolling.

The term comes from newspaper publishing where the most important stories were placed above the "fold" of the physical paper. 

It is considered important because that’s what visitors’ see first when skimming the web page and form an impression of the rest of your site.  It houses critical website features like calls to action buttons. 

Moreover, well-optimized content above the fold can have a positive impact on your blog post search ranking. That’s because search engines like Google consider content that appears near the top of a page to be more important. 

Accessibility

The practice of designing websites that can be used by people with disabilities, such as those with visual, auditory, or motor impairments.

For example, providing alternative text for images or transcripts for audio content. An accessible website may use screen readers, and captions, and properly use color and contrast.

Accordion Menu

A space-saving navigation technique in the web design process where menu items are stacked vertically and each section can be expanded or collapsed to show or hide its contents. They're ideal for organizing large amounts of content or navigation options.

Affordance

Refers to the visual clues on a webpage that communicate how a user can interact with an element on a website. These clues are like invitations that tell users what an element can do,  without needing explicit instructions.

Examples of affordance include a button with a rounded rectangle shape and the hover effect, or a text field with a blinking cursor.

Alt Text

A short description of an image or other non-text element, used to provide accessibility for visually impaired users or when images fail to load. Search engines also use alt text to understand the content of images and improve image search ranking. It also helps them grasp the webpage's overall content better.

Asynchronous JavaScript (Async/Defer)

Attributes in HTML script tags that influence how JavaScript files are loaded and executed. Async allows scripts to load without blocking the rendering of the rest of the page, while defer ensures scripts load after the HTML has parsed but before DOM manipulation begins.

Bootstrap

A popular front-end framework that provides a collection of HTML, CSS, and JavaScript components for building responsive web applications. Bootstrap provides a collection of pre-designed and styled components like buttons, forms, navigation bars, and more. These components can be easily integrated into your website.

Breadcrumb Navigation

A secondary navigation system that displays the path from the homepage to the current page. It resembles a trail of breadcrumbs, like in the fairytale of Hansel and Gretel, helping users find their way back. 

Breadcrumb navigation typically appears near the top of the page as a horizontal list of text links, separated by arrows or slashes. Each link represents a higher-level category or page leading to the current one.

Call-to-Action (CTA)

A prominently displayed button, link, or message that encourages the user to take a specific action, such as making a purchase or subscribing to a newsletter. Good CTAs can significantly impact your conversion rates, user engagement, and business goals.

Card Design

A self-contained, modular UI component that displays related information or functionalities in a compact, consistent layout.  Card design is like a miniaturized version of a physical notecard or index card.  Cards are a versatile and popular way to organize and display content on web pages.

Carousel

A rotating slideshow or gallery that automatically cycles through a set of images, content, or other elements. Users can navigate through the carousel content manually using arrows, dots, or thumbnails. Some carousels also rotate automatically with transition effects.

Cascading Style Sheets (CSS)

A style sheet language used to control the presentation of web pages, including layout, colors, and fonts. It separates content from presentation. CSS makes websites easier to maintain, more flexible, and accessible.

Chunking

The process of breaking up complex information into smaller, more manageable pieces to improve readability and comprehension. Chunking helps users process information one piece at a time and makes it easier to grasp complex topics. Chunking also boosts user engagement. Users are more likely to read and engage with content that is presented in clear, concise chunks. 

Color Scheme

The selection and combination of colors used throughout a website's design, often chosen to reinforce branding and create a cohesive visual experience. A well-defined color scheme in web design creates brand identity, enhances user experience, also sets the tone. For example, a blue palette might feel calming and trustworthy, while a red palette energetic and exciting.

Conversion Rate Optimization (CRO)

The practice of optimizing web design and user experience elements to increase the percentage of website visitors who complete a desired action, such as making a purchase or filling out a form. CRO helps you get more value out of your existing website traffic. By optimizing your conversion rate, you increase sales and revenue without necessarily attracting more visitors. Many content management systems have a CRO suite built in.

Content Management System (CMS)

A software application that allows users to create, manage, and modify website content without needing extensive coding knowledge. There are various content management system options available, some requiring installation on your server (on-premise) and others hosted by the provider (cloud-based). Popular examples include WordPress, Drupal, Wix, and Squarespace.

Critical Rendering Path (CRP)

The minimum set of resources (HTML, CSS, JavaScript) required for a webpage to render its initial content and become visually usable as quickly as possible. Optimizing the CRP can improve perceived performance and user experience.

Cross-Browser Compatibility

The ability of a website to function consistently across different browsers, such as Chrome, Firefox, and Safari, ensuring a consistent user experience. This feature allows everyone, irrespective of the browser they use, to access your website. Many web design companies use browser stack testing systems to catch compatibility issues early on.

CSS Grid

A powerful CSS layout system that allows for two-dimensional grid-based layouts with more precise control over element placement and responsiveness compared to traditional methods. It defines rows and columns and enables flexible positioning of content within the grid cells.

Domain Name System (DNS)

The hierarchical naming system that translates human-readable domain names into numerical IP addresses, enabling web browsers to locate and access websites. When you type a domain name into your browser, a DNS request goes out behind the scenes, finds the matching IP address, and directs your browser to the right website.

Dummy Content

Placeholder text or images used during the design process to visualize the layout and structure of a website before the final content is ready. Dummy content helps designers and developers see how the website will function with real content in place, allowing them to identify potential layout issues or usability problems early on. 

Favicon

A small icon displayed in the browser's address bar or tab, representing the website's brand or theme. Favicons are typically small, usually 16x16 pixels, and use the .ico format.  A well-designed favicon can reinforce your brand identity and make your website more recognizable in a crowded browser tab or bookmark list.

Flat Design

Flat design is a minimalist aesthetic for user interfaces (UI) that emphasizes clean lines, two-dimensional shapes, and solid colors.  It ditches the skeuomorphic trend of mimicking real-world textures and materials (think buttons that look stitched or shadows that mimic depth), opting for a simpler and more streamlined look. 

The image attached below embodies the principles of flat design.

Fluid Layout

A website layout that adapts to different screen resolutions and browser window sizes by using relative units of measurement, such as percentages. The key characteristics of fluid layout are responsiveness, scalability, and use of percentages.

In everyday usage, fluid design is observed in e-commerce web sites, social media feeds and news websites.

Footer

The bottom section of a web page, typically containing information like copyright notices, contact details, or additional navigation links.  Footers provide users easy access to essential information and navigation options, even if they haven't found what they were looking for on other parts of the webpage.

Grid Layout

A web design technique that arranges content into rows and columns, creating a structured and organized layout. intricate layouts can be effectively broken down into a grid, which simplifies the design process and allows management of complex arrangements with greater ease

Hamburger Menu

A compact navigation menu icon featuring three horizontal lines, typically used to reveal a sidebar or dropdown menu on smaller screens or mobile devices. By hiding less frequently used navigation options, hamburger menus create a less cluttered user interface.

Heat Map

A visual representation of user behavior and engagement on a web page. It is usually generated through analytics tools and displayed as color-coded overlays. Heatmaps track user interactions such as clicks, mouse movements, and scrolls on a specific webpage.

Header

The top section of a web page, usually containing the website's logo, primary navigation menu, and sometimes a search bar. Headers can also be used to display CTAs, encouraging users to take a desired action, like signing up for a newsletter, making a purchase, or contacting you.

Hero Image

A large, eye-catching image or multimedia element prominently displayed on a web page, often used to capture the user's attention or convey a key message.  Hero images can feature various visuals like photographs, illustrations, or videos. Their primary purpose is to grab attention, convey value proposition, and encourage engagement.

Hyperlink

A clickable text or element that redirects the user to another web page or a specific location within the same page. Hyperlinks are of two kinds: External and Internal. Internal links connect users to different pages within the same website. External links connect users to web pages on entirely different websites.

Information Architecture (IA)

The structure and organization of website content, including navigation, labeling, and categorization, to ensure users can find and understand information easily. Good IA leads to increased user satisfaction and improved website performance.

JavaScript

A programming language used to add interactivity, animations, and dynamic effects to web pages, enhancing the user experience. Web development JS code is executed directly by web browsers, without needing separate compilation. This allows for dynamic and interactive website experiences. This code primarily runs within users' browsers, acting on the client side. 

Landing Page

Also sometimes called a lead capture page or squeeze page. A landing page is a standalone web page that users arrive at after clicking on a link from an ad, email campaign, or other marketing source. 

Unlike a standard webpage that might be part of a larger website, landing pages are designed with a very specific goal in mind,  often to convert visitors into leads or customers.

Lazy Loading

A performance optimization technique that loads content or resources only when they are needed, rather than loading everything upfront. Lazy loading pre-loads the content that's initially visible to the user (above the fold) and delays loading the rest (below the fold) until the user scrolls down the page.

Markdown

A lightweight markup language used to format text documents, often used for creating content in content management systems or online editors. Markdown uses a user-friendly syntax with easy-to-remember symbols and punctuation for formatting text elements like headings, lists, and quotes. Markdown also separates the content itself from the formatting instructions. 

Material Design

Google's design language and guidelines for creating visually consistent and user-friendly interfaces across different platforms and devices. It was developed in 2014 and offers pre-built user interface components like buttons, cards, navigation menus, dialog boxes, and more.

Metadata

Data that provides information about other data, such as page titles, descriptions, and keywords, used by search engines and browsers to understand and display web content.

Types of metadata include meta tags, such as title tags, meta descriptions, keywords, Open Graph Protocol (OGP), Twitter Cards, and schema markup.

Microinteractions

Small, single-purpose interactive visual elements, or animations that provide feedback and enhance the overall user experience, such as hover effects or loading spinners. Microinteractions subtly guide users through a website or app and offer visual or auditory confirmation for a user’s action.

Minification/Compression

Techniques to reduce the file size of website resources like HTML, CSS, and JavaScript. Minification removes unnecessary characters like whitespace and comments, while compression techniques like Gzip further reduce the file size by encoding the data.

Modal Window

A secondary window or overlay that appears on top of the current page, typically used to display additional content or prompt user input. Modality, the defining feature behind modal windows, restricts user interaction with the underlying content of the webpage or application.

Navigation Menu

A set of links or buttons that allow users to navigate between different sections or pages of a website, typically located in the header or sidebar. Navigation menus are typically positioned horizontally across the top of the webpage (header) or vertically along the side (sidebar). The placement depends on the website's design and the amount of content it has.

Pagination

A method of dividing digital content into separate pages on a website or application. It's a common technique used to manage large amounts of information and improve user experience by making content easier to navigate and digest.

Parallax Scrolling

A web design technique that creates a 3D effect by moving background and foreground elements at different speeds as the user scrolls. It is achieved using JavaScript or CSS coding, different layers of background images or elements are positioned at varying depths within the webpage code. As the user scrolls, the code dictates the layer movement speed at which each layer moves.

Progressive Enhancement (PE)

A web design philosophy that prioritizes delivering a basic usable experience with core content even on less capable devices or browsers. Additional features and enhancements are then progressively layered on top for users with more modern browsers or faster connections.

Prototype

A preliminary model or simulation of a website or application, used by web designers to test and refine the design and functionality before final development. Prototypes enable early detection and correction of design flaws or usability issues.

Responsive Design

A web design approach that ensures websites adapt and provide an optimal viewing experience across different devices and screen resolutions, using flexible layouts and media queries. RWD relies on media queries, which are pieces of code that instruct the browser to adjust the website's presentation based on specific screen size conditions.

For example, a media query might target screens smaller than 768 pixels wide and adjust the layout accordingly.

Scalable Vector Graphics (SVG)

An XML-based vector image format that allows for high-quality, scalable graphics on the web, making it suitable for logos, icons, and other graphical elements. A key advantage of SVGs is their infinite scalability. You can resize an SVG image to any size without losing quality, which is perfect for responsive web design.

Search Engine Optimization (SEO)

The process of improving the ranking and visibility of your website in search engine results pages (SERPs) for relevant keywords. 

When people search for products, services, or information online using search engines like Google, Bing, or DuckDuckGo, ideally you want your website to appear at the top of the results for those searches.  The combination of proper web design practices along with effective SEO helps achieve that goal.

Server-Side Rendering (SSR)

A web development technique where the web server generates the initial HTML content on the server side, potentially including pre-rendered JavaScript. This can improve SEO, initial load performance, and content shareability compared to client-side rendering with JavaScript frameworks.

Skeuomorphism

A design approach that mimics the appearance and functionality of real-world objects or materials in a digital interface.

Common examples of skeuomorphic design elements in web design include buttons designed like 3D push buttons, file folders, trash can icons for file management, stitching de

Sitemap

A hierarchical list or diagram that represents the structure and organization of a website's pages, helping users navigate and understand the website's content.

There are 2 main kinds of sitemaps in web design: HTML and XML. HTML Sitemap is a human-readable list of all the pages on your website. XML Sitemap is an XML file that follows a specific format understood by search engines.tails on menus to resemble physical notebooks, and realistic wood textures for backgrounds.

Sticky Navigation

A navigation bar or menu that remains visible and accessible as the user scrolls down the page, providing consistent access to important links and features.

Sticky navigation, using CSS (Cascading Style Sheets) or JavaScript, defines that the navigation bar element should maintain a fixed position relative to the viewport (the visible area of the webpage) as the user scrolls.

Version Control Systems (Git)

Software applications that track changes to source code and other project files over time. Version control systems like Git allow developers to collaborate effectively, revert to previous versions if necessary, and maintain a clear history of code changes.

Web Accessibility Initiative (WAI)

A set of guidelines and recommendations developed by the World Wide Web Consortium (W3C) to make web content accessible to people with disabilities.

The WAI develops strategies, guidelines, and resources to help individuals and organizations create, maintain, and evaluate accessible websites and web tools. They work on various aspects like WCAG (Web Content Accessibility Guidelines), authoring tools, and evaluation tools.

Web Hosting

The service of renting server space and resources from a web hosting company. These servers store your website's data (files, images, code) and run constantly so that your website is accessible to visitors anytime via the internet.  In essence, you're outsourcing the infrastructure needed for your website to be live on the web.

Web Standards

A set of guidelines and specifications developed by organizations like the W3C to ensure consistency, interoperability, and accessibility of web content across different browsers and devices.  Following these web design standards helps web developers create websites that are not only visually appealing but also load quickly, function properly, and can be easily found by search engines.

Website Wireframe

A low-fidelity visual representation of a website's structure, layout, and content hierarchy, used for planning and designing the user interface and experience. Web designers use wireframes to plan the organization of content, navigation elements, and user interaction on a webpage before they move on to the visual design phase. 

Whitespace

The negative space or empty areas between design elements, used to improve readability, create emphasis, and enhance the overall aesthetic of a web page.

Whitespace provides breathing room between text blocks, images, and other content elements. This makes the content easier to read and visually digest, especially for large amounts of text.

Z-Index

A CSS property that controls the stacking order of overlapping elements, determining which elements appear on top or behind others. Z-index controls which elements appear on top of a webpage overlap.

Higher Z-index numbers are closer to the foreground, lower appear behind. Elements without a specified z-index appear in the order they are coded, with later elements on top. Even negative values are allowed for elements behind the webpage.

A Website is More Than Just Terminologies

Understanding some basic web design and web development terms can be a superpower when working with a website designer. When you know a little about web design terms and design lingo, things run much smoother.

However, learning terminologies is just the beginning. You do know what a hero image is, but do you know about its best practices? 

You can check out Amply Academy which has a vast suite of tutorials and best practices to help you with your new website.

‍