Web Design 101 – A Handy Website Glossary

Web designers often sound like they’re speaking a foreign language to someone outside the industry. From SEO to “sticky elements,” the technical terms and jargon can be overwhelming. At Source, we aim to simplify the process of web design for our clients, so we take time to explain things to them in everyday language. However, there is some value in understanding industry terminology, and we know not all agencies take the same time to break things down.

Whether you’re a business owner, a budding web designer, or simply curious about website mechanics, we’re here to bust the jargon with a handy glossary. After all, knowledge is power.

So, without further ado, here are some commonly used terms in web design and what they mean in layman’s terms.

Definition diagram web design twickenham

1. 404 Page

A 404 page is a digital no-man’s land and appears when a website visitor tries to access a page that doesn’t exist. However, with intelligent design, you can turn it into a helpful redirect or search prompt, guiding users back to relevant content.

2. A/B Testing

A/B testing is essentially a digital experiment that compares two versions of your web page (A and B) to see which performs better. Whether it’s the colour of a button or two different headlines, A/B testing gives you a chance to improve user experience and get the outcome you’re looking for.

3. API (Application Programming Interface)

An API lets different software applications talk to each other. It’s a set of rules that allows your website to pull in information or functionality from other services, making your site more powerful and connected.

4. Above-the-fold

This is an old term that comes from newspapers and refers to that first section of the paper you see when you grab it off the shelf. In web design, it refers to the content visible on a website before you start scrolling. It’s the prime spot for grabbing attention and making a strong first impression.

5. Accessibility

Accessibility makes your website usable for everyone, including people with disabilities. It involves design and coding practices that remove barriers to access, ensuring all users can use, understand, and interact with your site. Read our complete guide to website accessibility here.

6. Adaptive Design

A graphical user interface (GUI) design adapts to different screen sizes. Websites with adaptive design use fixed layouts that don’t respond once they’re initially loaded. It detects the device and other features and chooses the best layout for the screen.
See also Responsive Design.

7. Backlink

A backlink is a link from another website to yours and serves as a digital vote of confidence (particularly if the site doing the linking is credible). High-quality backlinks from good sources can improve your site’s ranking in search engine results, but poor-quality backlinks can do the opposite.

8. Bandwidth

Bandwidth is the amount of data which is able to travel across an internet connection at a given time. High bandwidth means larger data files, like videos and images, can load quickly on your website.

9. Block

In web design, a section of a webpage is often referred to as a block. Blocks can be text, images, or buttons – they’re essentially the building blocks that make up the layout of your site.

10. Body

The body of a website is the main content area, where you find text, images, and videos. It’s everything between the header and footer, serving as the core of your website’s message. “Body copy” is the block of text that sits below a heading.

11. Bootstrap

Bootstrap is a free, open-source toolkit for creating responsive, mobile-first websites. It provides ready-made blocks of code (like a LEGO set) to help you build and design websites faster.

12. Breadcrumbs

Breadcrumbs are a navigational aid on websites. Just like the physical breadcrumbs in Hansel & Gretel, they’re designed to lead you back to where you started. Breadcrumbs improve usability and SEO by giving clear, direct paths.

13. Brochure Site

A brochure site is the digital equivalent of a printed brochure. It’s typically used by businesses to showcase their services or products in a straightforward way. If you’re looking for a website that lets you display your core information without the need for added bells and whistles, a brochure site is the way to do it.  

14. CDN (Content Delivery Network)

A CDN is a server network that is spread across the globe, delivering website content to users more quickly by hosting it closer to them geographically. It’s like having multiple express delivery trucks on hand ready to deliver your data, which allows for faster load times and a better user experience.

15. CMS (Content Management System)

CMS software lets you create, manage, and modify content on a website without needing specialised technical knowledge. WordPress and Shopify are examples of well-known CMS’s.

16. CSS (Cascading Style Sheets)

CSS is a language that describes the way a document written in HTML is laid out. CSS controls the visual aspects of web pages, allowing developers to set fonts, colours, spacing, etc, to create a site with a consistent design.

17. Cache

A cache is a technology that temporarily stores web content, such as images and web pages, to make future requests for that data faster. It’s like a memory bank that helps browsers load websites quicker, thereby reducing visitor wait times.

18. Call-to-Action (CTA)

A CTA is a website prompt that encourages users to take a particular action, like “Sign Up” or “Buy Now.” It’s a direct invitation that steers your users toward the outcome you’d like them to make.

19. Carousel

A carousel is a sliding or rotating set of images, text, or other content on a website. It allows you to make the most of prime real estate on your site, such as at the top of the home page, by sharing multiple pieces of content.

20. Conversion

Conversion is what we call the act of a visitor taking a desired action, like making a purchase or signing up for a newsletter. Whether you’re trying to build an email database or sell products, conversion is the end goal – turning a passive visitor into an active participant.

21. Conversion Rate

The conversion rate is a measurement of the percentage of website visitors who take the desired action out of the total number of visitors. We use conversion rates to understand a site’s effectiveness at meeting a goal.

22. Domain Name

A domain name is the web address where people can access your website, for example, https://sourcelondon.co/. Like a physical address for your home, it directs visitors straight to your doorstep and reduces the risk of them getting lost (or distracted) when trying to find you.

23. Favicon

A favicon is a small icon that appears in the address bar and tabs of a browser. It’s a tiny branding element that can make your site stand out and be easily recognised by users flipping through their open tabs.

24. Flat Design

Flat design is a minimalist approach that emphasises usability. It features open space, crisp edges, bright colours, and reduced textures, shadows, or gradients. The aim is to simplify what the user sees to create a cleaner and more straightforward user experience.

25. Fold

See Above-the-fold.

26. Footer

The footer is the bottom section of a website and usually contains copyright information, contact details, sitemap links, and other less prominent but important information. It offers users navigation options and details without cluttering the main content.

27. Grid System

A grid system is a structural framework of columns and rows used to layout and organise content on a webpage. It helps designers align content and maintain consistency so that your site is aesthetically pleasing and functions across different devices.

28. H1, H2 (and H3, H4, H5, H6)

H1 through H6 tags are types of headings used to rank the order of importance from H1 (most important) to H6 (least important). They structure the content to make it easy for people to read your text and for search engines to understand the information hierarchy. A page should have only one H1, but it can have multiple lower headings, depending on how you layout your content.

29. HTML (HyperText Markup Language)

The language of web pages, HTML, uses simple code structures called tags to outline text, images, and other content for web browsers. Think of it as the blueprint of a website, where each tag is a command that tells your browser how to display the elements on the page.

30. Heatmap

A heatmap is like a weather map for your website, showing you the areas that are getting the most attention on your site. Offering insights into user behaviour, it can tell you where people click, scroll, and spend the most time.

31. Hero Image

A hero image is a large banner picture at the top of a website. It’s the first thing users see when they visit your site, designed to grab attention and give a clear message about your brand or service. Like the cover of a book, it sets the tone for the entire website experience.

32. Hosting

Your website is stored digitally on a server by a “host”, which makes it accessible on the internet. It’s like renting a space on the web where your site’s data lives, ensuring people can visit your website anytime from anywhere.

33. JavaScript

JavaScript is a language used by programmers to create interactive elements on websites, such as games, animations, and forms. It brings websites to life, adding functionality that improves the user experience beyond the static pages created by HTML and CSS.

34. Landing Page

A specific web page created for a marketing or advertising campaign, landing pages are often separate from your main navigation. Once a visitor clicks a link in an email or from Google, YouTube, Facebook, Instagram, etc, they’re sent to a purpose-made page for conversion.

35. Lazy Loading

Lazy loading is a technique that prevents a browser from loading non-critical resources until they’re needed. Instead, images or videos are only loaded when the user scrolls to the relevant part of the screen. This improves page load times and conserves bandwidth, making the website faster and more efficient.

36. Material Design

A language developed by Google, the material design emphasises bold, graphic, and intentional visuals. It uses design principles like lighting, surface, and movement to create more intuitive and visually appealing interfaces.

37. Metadata

Metadata is essentially data about data. On a website, it refers to information that tells search engines and browsers about the contents of a page. Metadata can include titles, descriptions, and keywords that aren’t visible to users but help improve SEO and how information is displayed in search results.

38. Microsite

A microsite is a branded, specific site that lives outside of a company’s main website. It has a separate URL and is usually used for a specific campaign or target audience. Microsites allow you to showcase focused and detailed information that wouldn’t fit comfortably on the leading site.

39. Minification

By removing unnecessary characters (like spaces, comments, and new lines), the minification process streamlines source code without changing its functionality. This makes the code lighter and reduces load times, improving website speed and performance.

40. Mock-up

In web design, a mock-up is a visual representation of a webpage, showing how it will look and function before it’s built. It’s a key step in the design process, allowing the client to make adjustments before development begins.

41. Modal

A pop-up window that appears on top of a website’s main content, requiring users to interact with it before returning to the site. It’s often used for alerts, forms, or to provide important information, grabbing the user’s attention without taking them to a different page.

42. Navigation

Navigation includes menus, dropdowns, and links that help users find what they’re looking for quickly and easily. Good navigation is key to a great user experience, making sure everything on a site is easy to find.

43. Negative Space

See White Space.

44. Pagination

Pagination divides content into separate pages, making it more manageable and user-friendly. It’s commonly seen in search results or on blogs, where a limited number of items or posts are displayed at a time, with controls to navigate to the next or previous set.

45. Parallax Scrolling

Parallax scrolling is a visual effect on a webpage where the foreground and background content moves at different speeds as you scroll. This creates a sense of depth and adds a dynamic, interactive layer to the browsing experience.

46. Responsive Design

Responsive design is an approach that makes web pages respond to the type of device they’re being accessed on, down to the screen size. It ensures a site looks good and works well, whether you’re viewing it on a phone, tablet, or desktop.

47. SEO (Search Engine Optimisation)

SEO is method for increasing organic search by targeting search engine algorithms. It involves improving your site’s content and structure to make it more attractive to search engines, with the aim of making your site appear higher in search results. The task of optimising for search engines and also for human users is a fine balance.

Seo diagram web design richmond

48. SSL Certificate

An SSL Certificate is a digital indicator that a site is secure and trustworthy, which is essential for e-commerce sites and any site that collects user information.

49. Sitemap

A file that contains information about the pages, videos, and other files on your site. It’s like a map of your website that helps search engines find, crawl, and index all of your content more efficiently.

50. Splash Page

An optional page that users see before entering a website’s main content. It can be used to promote a company, product, or service or to inform visitors about site requirements, like age restrictions. Splash pages should be used sparingly to avoid impacting the user experience.

51. Sticky Elements

Sticky elements are features on a webpage that stay visible and fixed in place as you scroll up or down the page. Common sticky elements include navigation bars and call-to-action buttons.

52. User Experience (UX)

User Experience (UX) incorporates all the elements of a site that visitors interact with when dealing with a company, its services, and its products. The goal of UX design in web development is to create easy, efficient, relevant, and all-around pleasant experiences for the user.

53. User Interface (UI)

User Interface (UI) relates to the elements that users interact with on a website, including buttons, icons, spacing, typography, colour schemes, etc. The aim of UI design is to visually guide users through a website.

54. Web Analytics

The collection, reporting, and analysis of your site data is referred to as web analytics. Using tools like GA4, we can identify measures based on your organisational goals and then look at the website data to see how its meeting those goals.

55. Website Wireframe

A wireframe is a visual guide that presents the skeleton of a website. It’s used in the early development process to represent the basic structure of a page before design and content are added, focusing on what a page does, not what it looks like.

56. White Space

White space, or negative space, refers to the blank spaces between visuals, columns, lines, graphics, and margins on a webpage. White space is almost as important to a design as the beautiful elements, as it creates balance.

57. Widget

A widget is a small application or program that can be embedded and executed within a web page. It has a specific function, such as weather updates, stock tickers, or social media feeds. Widgets add elements of interactivity and utility to a site.

58. Wireframe

See Website Wireframe.

Web Wireframe diagram web design twickenham

Get Your Site Back on Track with Source, Ealing Web Designers

Understanding web design terminology is just the first step toward creating a website that not only looks great but meets your users’ needs. If you’re looking for expert assistance to bring your vision to life, our team is here to help.

With a deep understanding of web design principles and a keen eye for detail, we specialise in websites that stand out for all the right reasons. So, whether you’re starting from scratch or it’s time to refresh your existing site, get a quote today.