Website Design Terms Glossary

Navigating the world of website design can feel like learning a new language. With so many terms and acronyms around, it’s easy to get lost! That’s why we’ve created this glossary of website design terms. This will help you understand some of the terminology we use when designing and developing your website. If you are ever unsure, please don’t hesitate to ask we will be happy to explain in more detail.

Navigate to a specific letter using the links below –

A B C D E F G H I J K L M N O P Q R S T U V X Y Z

404 Errors 

When you visit a webpage, your computer sends a request to the server hosting that page. If the server can’t find the page you’re looking for, it sends back a 404 error message or ‘not found’ message. This can be for a number of reasons: the page may have been moved or deleted, there may be a typo in the URL, or the website might be down. Here’s an example of a 404 message on our website.

Accessibility

Accessibility is all about designing websites that are usable for people with disabilities. This can be done by following the Web Content Accessibility Guidelines (WCAG). If you want to learn more about website accessibility, we have a whole blog post dedicated to it here.

Alt Tags

An alt tag or alt text is a short piece of descriptive text that is used by screen readers and search engines, this is part of making a website accessible. Alt tags are important as they not only help with accessibility, they also help with SEO as search engines use alt tags to understand the content of images. They also provide context for images in case they are broken or they don’t load, the alt tag then describes the image to the user.

Anchor Text & Links

Anchor text acts as a link you can click on. When you click on an anchor text, it takes you to a different part of the webpage or a different webpage altogether. There are examples of anchor links within this post, the A B C links at the top of this post are anchor links. When you click on a specific letter it directs you further down the page to that section.

Breadcrumb Trail 

A breadcrumb trail is a navigation feature that shows you the path you have taken to get to the current page you are on. For example, to get to this blog post you may have taken a path like this Home > News > Advice & Tips > Website Design Terms Glossary. This shows that you started on the home page, then clicked on the news page from the main menu, then clicked on the blog category ‘Advice & Tips’ then finally clicked on this blog post. Breadcrumb trails are useful as they help users navigate back to previous pages and also shows them where they are in the website structure.

Caching

Caching is like saving a copy of a website on your computer. When you visit a website for the first time, your browser downloads all the files, such as HTML, CSS and any images, these files are then stored in a cache. When you then revisit a website, the browser can check the cache first and load that version directly from your browser, which bypasses the need to download all of the files again, this results in faster load times for your web pages.

Carousel

A carousel is a collection of images that slide or move automatically on a website. It’s normally used to showcase multiple images in a limited space. Various purposes include showing products, testimonials, image galleries and more. We have an example of a carousel on our home page; our ‘New Website Projects’ is an automatic carousel of images.

CDN 

A CDN or Content Delivery Network stores copies of a website’s files on multiple servers located all over the world. When you visit a website, the CDN directs your browser to the nearest server geographically, which can deliver the files to you much faster than if they were all stored in one location. This is helpful if you have a website that has a large number of visitors or lots of users in different locations.

CMS (Content Management System)

A Content Management System is a way to manage your website. It allows you to add, edit and delete content without requiring extensive technical knowledge. Some popular CMS examples include WordPress, Wix, Squarespace and Joomla.

CMYK & RGB 

CMYK and RGB are both colour models. CMYK is the colour model we use when we are creating printed materials such as business cards, flyers, posters etc. It’s called CMYK as the printed colours are created by mixing varying amounts of cyan, magenta, yellow, and black ink. RGB is the colour model used in digital displays such as computer monitors, phones, televisions etc. RGB colours are created by combining varying amounts of red, green and blue light. This is why colours can differ when looking at them on a screen to when they are printed!

Cookies

Website cookies are left on your computer after visiting a website. They help the website remember things about you, like your preferences or what you’ve looked at before. For example, if you have previously added something in your shopping cart in an online store, a cookie might remember what you added so you can then find it again.

CSS (Cascading Style Sheets)

CSS is a coding language that is used to style elements, as well as control the layout of a web page. You can use CSS to change the colours, fonts and other elements on a website.

CTA (Call To Action)

A CTA or call to action is an instruction or request that encourages users to take a desired action. Examples of CTAs include “Buy Now”, “Learn More”, and “Contact Us” buttons. They tell users what to do next and they can help guide users through your website whilst converting them into enquiries and sales.

Database 

A database is used to hold the underlying information and content held within most websites. Within the database, tables divide information into relevant sections and certain entities like key fields are used to relate one table to another. Languages such as SQL (Structured Query Language) are used to store, process and pull data from the database for use on the website.

Domains & DNS

In the context of the internet, a domain is the unique name that identifies a website. It’s the address people use to access a website, such as google.com or wikipedia.org.

DNS stands for Domain Name System, and it’s a fundamental technology that makes the internet user-friendly. Here’s how it works and why it’s important:

DNS is like the phonebook of the internet. When you enter a website address (like alistairwhiteley.co.uk) into your browser, DNS translates that human-readable address into an IP (Internet Protocol) address, which is a numerical label like 192.168.1.1. Computers and servers use IP addresses to identify and communicate with each other over the internet, but humans find domain names much easier to remember.

E-commerce 

E-commerce (short for electronic commerce) refers to the buying and selling of goods and services over the Internet. It’s a broad concept that encompasses all kinds of commercial transactions conducted online, including both physical products and digital services.

Key Aspects of E-commerce:

1. Online Stores: These are websites where customers can browse products, add them to a shopping basket, and make a purchase. Popular examples include Amazon, eBay, and Shopify stores.
2. Types of E-commerce:
   • B2C (Business-to-Consumer): This is the most common form, where businesses sell products or services directly to individual customers. Example: purchasing clothing from an online retailer.
   • B2B (Business-to-Business): In this model, businesses sell products or services to other businesses. Example: a company buying software or office supplies from a supplier online.
   • C2C (Consumer-to-Consumer): In this case, individuals sell goods or services to each other, often through platforms like eBay or Vinted.
   • C2B (Consumer-to-Business): Here, individuals offer products or services to businesses. For example, freelancers bidding on projects through platforms like Fiver.

Favicon

A favicon (short for “favourite icon”) is a small, icon-sized image that represents a website. It typically appears in several key places, such as:

1. Browser Tab: The favicon is displayed in the browser tab next to the website’s title, helping users identify and distinguish between open tabs.
2. Bookmarks Bar: When a user bookmarks a website, the favicon is displayed next to the site’s name in the bookmarks menu or bar.
3. Browser History: Favicons often appear next to a website’s name in a user’s browsing history.
4. Mobile Browsers and Apps: Some mobile browsers and home screen shortcuts also use favicons to visually represent a site.

The Fold 

In web design and digital content, “the fold” refers to the portion of a webpage that is visible without scrolling when the page first loads. It originates from the concept of newspapers, where “above the fold” referred to the upper half of the front page—this was considered prime real estate because it was immediately visible when newspapers were stacked or displayed.

Key Points about “The Fold”

1. Above the Fold: This is the part of the webpage that users can see right away when they visit, without having to scroll. It’s considered crucial for important content or calls-to-action (CTAs) because it catches the user’s attention immediately.
2. Below the Fold: Everything that requires scrolling to be viewed is referred to as “below the fold.” While less visible than content above the fold, the importance of below-the-fold content has increased as users are more accustomed to scrolling through websites.

Font

A font refers to a specific design or style of text characters that are used to display written language in digital and print media. Fonts include different weights (like bold or italic), styles, sizes, and types. Here’s a deeper look at what a font encompasses:

Key Concepts Related to Fonts:

Display: These are often more decorative or dramatic fonts, used in large headings or titles rather than for body text. Examples: Impact, Lobster.

Typeface vs. Font:

Typeface: This is the broader term that refers to a specific design or family of characters. For example, Arial, Times New Roman, and Helvetica are typefaces.

Font: A font is a specific version or instance of a typeface. For example, Arial Bold at 12pt size is a font, which is a member of the larger Arial typeface family.

Font Styles:

Serif: Serif fonts have small lines or strokes attached to the ends of the characters. They are often used in traditional or formal contexts. Examples: Times New Roman, Georgia.

Sans-serif: Sans-serif fonts are clean, without the extra strokes or “serifs” on the ends of characters, giving them a modern and simple look. Examples: Arial, Helvetica.

Script: Script fonts resemble cursive handwriting, often used for decorative or elegant purposes. Examples: Brush Script, Dancing Script.

Monospace: In monospace fonts, each character takes up the same width, making them useful for code or technical purposes. Examples: Courier New, Consolas.

Footer

A footer is the bottom section of a webpage, typically found at the very end of the page after the main content. It serves as a space for additional information, navigation, and links that are relevant but not critical to the immediate content of the page. Footers are a common element in both web design and print media, providing a consistent location for secondary content.

Front-End Development

Front-end development refers to the practice of creating the visual and interactive parts of a website or web application that users directly interact with. It’s all about building the “client-side” of a website, which includes everything users see and engage with—such as the layout, design, buttons, and content presentation.

GIF 

A GIF (short for Graphics Interchange Format) is a bitmap image format that supports both static and animated images. GIFs are widely used on the web for their ability to display a series of images or frames in a single file, creating a looping animation effect.

Gradients

Gradients are visual effects that create a smooth transition between two or more colours. They can be used in various design contexts, including graphic design, web design, and digital art, to add depth, interest, and dynamism to images, backgrounds, and user interfaces.

Types of Gradients:

• Angular (Conic) Gradient: This gradient type transitions colours in a circular fashion around a centre point, creating a pie-like effect. It’s often used for design elements that require a 360-degree transition.

• Linear Gradient: This type transitions colours along a straight line. The direction can be horizontal, vertical, diagonal, or at any angle, allowing for a range of effects. For example, a linear gradient might fade from blue at the top to white at the bottom.

• Radial Gradient: Radial gradients transition colours outward from a central point, creating a circular effect. They can give a sense of depth or a spotlight effect, with colours radiating from the centre.

Hero Images

A hero image is a large, prominently placed visual element on a webpage, usually at the top or near the beginning of a section. It is often used as a focal point to grab the viewer’s attention and convey a specific message or theme. Hero images can be photographs, illustrations, or even videos, and they play a crucial role in web design and marketing.

Hex codes (hexadecimal) 

Hex codes (short for hexadecimal colour codes) are a way to represent colours in web design and graphic design using a six-digit alphanumeric format. Each hex code starts with a # symbol followed by six characters, which can be numbers (0 – 9) or letters (A – F). Hex codes are widely used in CSS (Cascading Style Sheets) and other design software to define colours for web pages, graphics, and other digital content.

Structure of Hex Codes:

• A hex code is made up of three pairs of characters:
  • #RRGGBB
    • RR: Represents the red component of the colour (00 to FF in hexadecimal).
    • GG: Represents the green component of the colour (00 to FF in hexadecimal).
    • BB: Represents the blue component of the colour (00 to FF in hexadecimal).

Hosting

Hosting refers to the service that allows individuals and organisations to make their websites accessible on the Internet. When you host a website, you store its files (like HTML, CSS, images, and videos) on a server that is connected to the Internet, enabling users to access the site through web browsers.

HTML (Hypertext Markup Language)

HTML (HyperText Markup Language) is the standard markup language used for creating and structuring content on the web. It serves as the backbone of most web pages, providing the fundamental structure and organisation for text, images, links, and other multimedia elements. HTML is not a programming language; instead, it is a markup language that uses tags to delineate elements within a document.

HTTP/HTTPS 

HTTP (HyperText Transfer Protocol) and HTTPS (HyperText Transfer Protocol Secure) are protocols used for transmitting data over the Internet. They define how messages are formatted and transmitted, as well as how web servers and browsers should respond to various commands. Understanding the differences between the two is crucial for web security and user safety.

Icons

Icons are graphical representations or symbols used to convey ideas, actions, or concepts visually. They play a crucial role in user interface (UI) and user experience (UX) design, providing a way to enhance navigation, communicate information, and improve the overall aesthetic of digital content. Icons can represent actions (like “save” or “delete”), objects (like “folder” or “user”), or concepts (like “settings” or “help”).

Iframe

An iframe (inline frame) is an HTML element that allows you to embed another HTML document within the current document. It is commonly used to display content from another source, such as a webpage, video, or interactive application, directly within a web page. This enables the inclusion of external content without requiring a full page reload or navigation away from the current page.

ISP

An ISP (Internet Service Provider) is a company or organisation that provides individuals and businesses with access to the Internet. ISPs facilitate the connection to the Internet and offer various services, including broadband access, web hosting, email, and domain registration. They play a critical role in enabling users to communicate, share information, and access online resources.

Javascript

Javascript is a programming language that is used to add dynamic features to websites, such as animations and interactive elements like forms and menus.

Jpeg

JPEG (Joint Photographic Experts Group) is a widely used compressed image file format that is especially popular for digital photography and web graphics. The JPEG format allows for a balance between image quality and file size, making it an ideal choice for storing and sharing photographs and complex images.

Kerning

Kerning refers to the process of adjusting the space between individual characters in a font to improve the visual appearance and readability of text. Unlike tracking, which adjusts the space uniformly across all characters, kerning specifically focuses on fine-tuning the space between certain letter pairs to create a more harmonious and visually balanced appearance.

Landing Page 

A landing page is a standalone web page specifically designed to capture the attention of visitors and prompt them to take a particular action, such as signing up for a service, purchasing a product, or downloading content. It is often used in digital marketing campaigns and is typically the first page a user “lands” on after clicking on an advertisement, email link, or other forms of promotional content.

Key Characteristics of a Landing Page:

1. Focused Content:
   • Landing pages are highly focused, with a single, clear purpose. Unlike a typical website page with multiple navigation options, a landing page usually has minimal distractions and guides users toward a specific goal.
2. Call to Action (CTA):
   • A strong, compelling Call to Action is central to any landing page. CTAs encourage visitors to take the desired action, whether it’s filling out a form, downloading a resource, or making a purchase. Common CTAs include “Sign Up,” “Download Now,” or “Get Started.”
3. No (or Limited) Navigation:
   • Many landing pages intentionally minimise or remove navigation links to keep users focused on the primary goal, reducing the chances of them leaving the page before completing the desired action.
4. Optimised for Conversions:
   • Every element of a landing page—headlines, imagery, copy, and layout—is designed to maximise conversions. This means the page is carefully crafted to drive users toward the CTA, often using persuasive language and strong visual design.
5. Lead Generation Forms:
   • Many landing pages include forms where users can input their details in exchange for an offer, such as a free trial, ebook, or webinar. This is a common method for collecting leads.
6. Targeted Content:
   • Landing pages are often tailored to specific audiences or campaigns. For example, a landing page linked to a Google ad about a product might be different from one linked to a social media campaign offering a discount.

Lazy Loading 

Lazy loading is a web development technique used to delay the loading of non-essential resources, such as images, videos, or iframes until they are actually needed. Instead of loading all content at once when a webpage is first accessed, lazy loading only loads resources as the user scrolls down or interacts with the page. This method improves page load times, enhances performance, and reduces unnecessary data usage.

Moodboard

A moodboard is a visual tool used to gather and display a collection of images, colours, textures, typography, and other design elements to convey the overall look and feel of a project. It serves as a creative guide that helps to set the tone, style, and direction of a design, branding, or creative project.

Navigation & Menus 

Navigation and menus are essential components of a website or application’s user interface (UI) that help users find and access content efficiently. They provide a structured way for users to move through a website or app and locate the pages or information they are looking for.

Types of Website Navigation:

1. Main Navigation (Primary Navigation):
   • This is the top-level navigation that includes links to the most important pages or sections of a website, such as Home, About, Services, Contact, or Shop. It is often presented in a horizontal menu bar at the top of the page.
2. Secondary Navigation:
   • These are links to sub-sections within the main categories. For example, under “Services,” there might be links to specific services offered, such as “Consulting,” “Web Design,” and “Marketing.” Secondary navigation is often found in dropdown menus or sidebars.
3. Breadcrumb Navigation:
   • Breadcrumbs display the user’s current location on a site and the path they took to get there. It helps users orient themselves and easily navigate back to previous sections. Example: Home > Products > Electronics > Laptops.
4. Footer Navigation:
   • Footer navigation is located at the bottom of a webpage and often contains additional links, such as privacy policies, terms of service, FAQs, or contact information. While less prominent than the main navigation, footers provide useful secondary access to important pages.
5. Hamburger Menu:
   • Commonly used in mobile design, the hamburger menu is an icon that resembles three stacked horizontal lines. When clicked, it expands to show the full menu. It’s a popular choice for space-saving navigation in responsive designs.
6. Sidebar Navigation:
   • A vertical menu is placed on the side of a webpage, typically on the left or right. Sidebar navigation is common in blogs, e-commerce sites, and dashboards, where it can provide easy access to categories, filters, or settings.
7. Sticky Navigation:
   • This type of navigation “sticks” to the top of the page as users scroll, ensuring that the menu is always visible, even as users move down the page. This is useful for improving accessibility and user experience on long pages.
8. Dropdown Menus:
   • Dropdown menus display additional links or sub-menus when a user hovers over or clicks on a top-level navigation item. This allows for more content to be accessed from the main menu without cluttering the interface.

Opacity

Opacity is a term used in design, photography, and digital graphics to describe the transparency level of an object, colour, or image. It determines how much light can pass through a surface, influencing how clearly the underlying elements are visible. The concept of opacity is essential in both visual design and user interface development.

Permalinks 

Permalinks, short for permanent links, are the permanent URLs used to link to specific content on a website, such as a blog post, article, or webpage. They are designed to remain unchanged over time, providing a stable way to access that content, which is particularly important for web pages that may be shared or referenced by others.

Pixel 

A pixel is the fundamental unit of digital images and displays, representing a single point of colour in a grid that combines to form complete images. Understanding pixels is essential for anyone involved in digital imaging, graphic design, photography, and web development, as they play a critical role in determining image resolution, quality, and overall visual experience.

PPI/DPI 

PPI (Pixels Per Inch) and DPI (Dots Per Inch) are both measurements that refer to the density of pixels or dots in a digital image or printed output, but they are used in different contexts and have distinct meanings.

PPI measures the number of pixels present in one inch of a digital image or display. It indicates the pixel density of a digital image when viewed on a screen.

DPI measures the number of individual dots of ink that a printer can produce in a one-inch space. It refers to the resolution of a printed image and how finely the printer can render details.

Responsive Design

Responsive Design is an approach to web design and development that ensures a website provides an optimal viewing experience across a wide range of devices, from desktop computers to mobile phones. It involves creating flexible layouts, images, and CSS styles that adapt to the screen size and resolution of the device being used.

Rich Snippets 

Rich Snippets are enhanced search results that provide additional information beyond the standard title, URL, and meta description. They display structured data that gives users a preview of the content on a webpage, making it more visually appealing and informative in search engine results pages (SERPs). Rich snippets help improve click-through rates by providing users with valuable information at a glance.

Key Aspects of Rich Snippets:

1. Structured Data:
   • Rich snippets are generated using structured data markup, which is a standardised format for providing information about a page and its content. This markup helps search engines understand the context of the content better.
   • Common types of structured data include Schema.org, which provides a vocabulary for describing different types of content (like articles, events, products, reviews, etc.).
2. Types of Rich Snippets:
   • Different types of rich snippets can be displayed based on the content type. Some common examples include:
     • Recipe Snippets: Display cooking times, ratings, and ingredients.
     • Product Snippets: Show prices, availability, and user ratings.
     • Review Snippets: Highlight user reviews and ratings for products or services.
     • Event Snippets: Provide details about upcoming events, including dates and locations.
     • Article Snippets: Display information such as the author and publication date.
3. Benefits of Rich Snippets:
   • Enhanced Visibility: Rich snippets stand out in SERPs, attracting more attention and potentially increasing click-through rates.
   • Improved User Experience: By providing additional information directly in search results, rich snippets help users find relevant content more quickly.
   • SEO Advantage: While rich snippets are not a direct ranking factor, having structured data can improve visibility and CTR, indirectly benefiting SEO efforts.

SEO (Search Engine Optimisation)

SEO is how we optimise your website for search engines, it can improve its ranking in the search engine results. We have a whole blog post about SEO if you want to learn more here.

SERP

SERP stands for Search Engine Results Page, which is the page displayed by a search engine in response to a user’s query. It contains a list of results that are relevant to the search term entered, along with various additional features designed to enhance the user experience and provide immediate information.

Stock Photos

Stock Photos are professionally taken photographs that are available for licensing and use in various media projects, such as websites, advertisements, social media, and print materials. These images can be purchased or downloaded, often from online platforms known as stock photo agencies or libraries.

SVG 

SVG stands for Scalable Vector Graphics, which is a widely used vector image format for defining two-dimensional graphics in XML (Extensible Markup Language). SVG is designed for the web and is supported by most modern web browsers, making it a popular choice for creating graphics, logos, icons, and animations.

Typography 

Typography refers to the art and technique of arranging type to make written language legible, readable, and visually appealing when displayed. It involves not just the selection of typefaces but also the spacing, size, and alignment of the text, as well as its overall presentation within a design.

URL

A URL or Uniform Resource Locator is the address of the website, so the URL for our website would be https://alistairwhiteley.co.uk/.

User Experience (UX)

UX, or User Experience, refers to the overall experience a user has when interacting with a product or service, particularly in the context of websites, applications, and software. UX encompasses all aspects of the user’s interaction, including usability, accessibility, performance, design, and satisfaction.

User Interface (UI)

UI, or User Interface, refers to the visual elements and interactive components that users engage with when they use a digital product, such as websites, applications, or software. The primary goal of UI design is to create an interface that is visually appealing, intuitive, and efficient, facilitating user interactions with the system.

Validation

Data validation is the process of verifying that the data entered by users meets specific rules or criteria before it is processed or stored. This can help prevent errors, ensure data integrity, and protect against malicious inputs. Key aspects of data validation include:

• Format Validation: Ensuring that the data is in the correct format (e.g., date formats, email addresses).
• Range Validation: Checking that numerical values fall within an acceptable range (e.g., age must be between 0 and 120).
• Required Fields: Confirming that mandatory fields are filled in before submission.
• Type Validation: Ensuring that the data type matches the expected input (e.g., numbers vs. text).

Vector Graphics

Vector Graphics are a type of digital image created using mathematical equations to define shapes, lines, curves, and colours. Unlike raster graphics, which are made up of a grid of pixels, vector graphics are resolution-independent, meaning they can be scaled up or down without losing quality. This characteristic makes them ideal for various applications in design, illustration, and digital art.

Website Analytics

Website Analytics refers to the collection, measurement, analysis, and reporting of data related to website usage. This process helps website owners and marketers understand how users interact with their site, allowing them to make informed decisions to improve performance, enhance user experience, and achieve business goals. Website analytics tools track various metrics, providing insights into user behaviour, traffic sources, and overall site effectiveness.

White Space

White Space, also known as negative space, refers to the empty areas of a design that are left unmarked or unused. This space can be found between text, images, and other elements on a webpage or graphic. While it is called “white” space, it does not have to be white; it can be any colour or even a background pattern. White space is an essential element in design that plays a significant role in enhancing the overall aesthetics and usability of a composition.

Widgets 

Widgets are small applications or components that provide specific functionality or information on a website, application, or desktop environment. They are designed to be user-friendly and often serve as interactive elements that enhance user experience by delivering dynamic content, tools, or services. Widgets can be embedded into websites or applications and can range from simple to complex in functionality.

Wireframe

A wireframe is a visual blueprint or schematic representation of a webpage or application interface that outlines the structure, layout, and functionality of the design without focusing on detailed aesthetics. Wireframes serve as a foundational step in the design process, allowing designers, stakeholders, and developers to collaborate and make decisions about the arrangement of elements and the overall user experience (UX) before moving into more detailed design phases.

WYSIWYG 

WYSIWYG, which stands for “What You See Is What You Get,” is a type of editor or software that allows users to create and edit content in a way that closely resembles the final output. This term is commonly associated with web design and document editing tools, where the interface displays content as it will appear to users when published or printed. WYSIWYG editors eliminate the need for users to write code or markup, making content creation more accessible, especially for those who may not have technical expertise.

XML Sitemaps 

XML sitemaps are files that provide search engines with a structured map of a website’s content, helping them understand the site’s organisation and discover pages more effectively. They serve as a guide for search engine crawlers, allowing them to index the site efficiently and prioritise content based on its importance and update frequency.

Zip File 

A ZIP file is a compressed archive file format that allows users to package multiple files and folders into a single file for easier storage, transfer, and management. The ZIP format uses lossless data compression, meaning that the original data can be fully restored after decompression without any loss of quality.