Web Design Jargon – The Ultimate Guide

Featured image for an article titled ultimate web design jargon buster. The image conains the title on a gradiant background

Web designers like to use lots of words, phrases, and acronyms that you may not be familiar with. To be honest, this isn’t exclusive to the world of web design. When I’m chatting with clients, I frequently forget that not everyone is versed in this lingo. Some of the first questions to be asked include things like ‘What does X mean’, or ‘Can you tell me what Y is’. So, I thought it might be helpful to put together this ultimate guide to web design jargon. I’m going to list as many of the most common words, phrases, and acronyms, and hopefully, explain what they mean.

HTML

HTML, or HyperText Markup Language, is the standard markup language used to create and structure content on the web. It forms the backbone of any web page, defining its structure and content. HTML uses a system of tags and attributes to denote different types of content such as headings, paragraphs, links, images, and other multimedia elements. These tags instruct web browsers how to display the content to users. HTML is essential for building the foundation of a website, setting up the framework that CSS and JavaScript can then build upon to add style and interactivity, respectively. Its role is crucial in creating accessible, logically structured web pages that can be interpreted by browsers and assistive technologies.

CSS

CSS, which stands for Cascading Style Sheets, is a cornerstone technology used alongside HTML and JavaScript for web design and development. It enables the separation of content from design, allowing web developers to create stylistic choices like fonts, colors, spacing, and layout without altering the HTML structure of a webpage. This separation not only makes it easier to design and maintain websites but also allows for more flexibility and control over how webpages are presented across different browsers and devices. CSS governs how elements are displayed, providing a consistent look and feel across a website, and can be used to create responsive designs that adapt to various screen sizes and orientations.

JavaScript

JavaScript is a powerful programming language commonly used in web development to create interactive and dynamic user experiences on websites. Unlike HTML, which structures the content, and CSS, which styles it, JavaScript provides functionality to web pages, allowing them to respond to user actions, manipulate the DOM (Document Object Model), and perform complex operations like updating content without reloading the page (as seen in AJAX requests). It’s essential for creating responsive interfaces, handling events (like clicks and keystrokes), and implementing features like animations, form validations, and interactive maps. JavaScript’s versatility extends beyond the browser, too, with environments like Node.js enabling server-side programming. This language plays a pivotal role in modern web development, forming the foundation of many contemporary web applications.

CMS (Content Management System)

A Content Management System (CMS) is a software application or set of related programs used to create and manage digital content. It’s designed to simplify the process of building and maintaining websites for users who may not have extensive technical knowledge or coding skills. A CMS typically provides a user-friendly interface that allows individuals to publish, edit, and organize various types of content, such as text, images, and multimedia, without needing to write or edit code directly. This makes it an invaluable tool for managing blogs, news sites, e-commerce platforms, and more. Popular CMS platforms like WordPress, Joomla, and Drupal offer customizable templates and plugins, enabling users to create unique, functional websites with relative ease. The CMS handles all the basic infrastructure of the website, allowing users to focus on the more creative aspects of site design and content creation.

Alt Text

Alt Text (or Alternative Text, Alt Tags, or Alt Description) is a bit of code added to the HTML used to display an image within a page. It allows you to describe what the image is. For example, if you have a picture of a child reading a book by a fireplace, you might add the alt text “small child reading a book near an unlit fire” or something like that. You can get as descriptive as you like, so long as you’re describing what’s in the image. The Alt Text plays a part in a few different SEO-related things, but the key points are that adding alt text enhances the user experience, allows search engines to better understand an image, and makes your site more accessible (it’s used by screen readers to help visually impaired users).

Hero Image

In web design terms, a hero image is usually a large image at the top of a page. It frequently spans the full width of the page (and sometimes the height too). By using high-quality images, videos, or graphics, the hero image can be a way to give a great first impression to new users.

Featured Image

Featured images are similar to hero images, in that they are usually well-designed, informative images. These images are usually designed to match a specific post. They are sometimes added to the top of the post (you can see one in action on this very page). You can think of featured images in a similar way to YouTube Thumbnails. The idea is to capture a user’s attention, quickly inform them of what type of content is behind the image, and encourage them to click. They can also be a great way to liven up an article archive page.

Drop Shadows

A drop shadow is pretty much as it sounds. This term is used to describe a shadow applied to a specific element. In web design, drop shadows are sometimes used on titles or to add depth to images, cards, or buttons. The image below shows an example of drop shadows in action.

Image showing 8 examples of drop shadows applied to basic cards

Display Resolution

Display resolution or screen resolution refers to the number of pixels that a screen contains both vertically and horizontally. For example, an average 4k display will contain 3840 horizontal pixels and 2160 vertical pixels. Resolution and screen size are not the same thing as screens of the same size can have different resolutions. Display resolution is important in understanding how a website will show up, optimising for various resolutions (as well as screen sizes) is important in achieving a fluid responsive design.

Project Scope

This term, like many in this post, are not exclusive to web design. It’s a more general term used to describe a project blueprint. It’s usually a written plan for designing a site, including the services that fall within the project scope. Designers will frequently outline the project scope and charge extra for any service you request that falls outside.

Web Form

A web form is usually a HTML form that appears on a website. It’s used to allow your sites users to submit information or data. While web form can be used to describe a number of different types of forms, the most common include contact forms and quote request forms. That said, there are other forms that would be classed as web forms that you might not consider, for example the form used to submit a comment or enter shipping information – both are web forms.

Visual Weight

In the realm of web design, the idea of visual weight refers to how certain design elements can appear more prominent or ‘heavier’ than others, despite being in a two-dimensional space. This concept plays a crucial role because it facilitates the creation of visual symmetry, hierarchy, harmony, and balance within designs.

This notion is intimately connected with the principle of symmetry. To establish a sense of balance and symmetry in a design, it’s essential to manipulate the perceived visual weight of various objects to make them seem equally weighted. This involves strategically unbalancing elements to either highlight or downplay them. As a result, this approach helps in forming a visual hierarchy that directs the viewer’s focus to particular areas more than others.

Site Animation

Site animations can help a website come alive and improve the visual experience for users. These Site animations can take numerous forms, from minimal shifts when hovering objects, to fully animated SVG backgrounds. Site animations should always be used carefully. To many animations can become overwhelming for the user and have a negative impact on your site’s performance. When used correctly though, they can really enhance the user experience and make a website feel pleasant to use.

One Page Website

A one-page website is exactly as it sounds. It’s a website that only has a single page. They are great for showcasing a single idea, project, or product. Some one page websites will include a navigation system, but instead of loading new pages, the navigation will take the user to a specific part of the website.

Below the Fold / Above the Fold

The term “below the fold” refers to parts of a webpage that become visible only when a user scrolls down, as opposed to the prime viewing area known as “above the fold.” In the digital marketing world, there’s a strong focus on content that’s above the fold since it captures the most attention from readers. In line with this, web designers often organize a website’s layout to prioritize and highlight this above-the-fold content for the site’s advantage.

Adaptive User Interface

An Adaptive User Interface (AUI) is a type of user interface (UI) designed to adjust its elements and layout in response to the user’s needs or context.

In the context of web design, this means customizing certain aspects of a website for each visitor. This customization can include concealing content that isn’t relevant to the user, thereby enhancing the overall user experience (UX).

Flyout Navigation

Flyout Navigation refers to a type of page menu where submenus, objects, or links appear visually when users hover their mouse over menu items on a website.

This navigation style is distinct from traditional dropdown menus that require clicking on a menu option to reveal further choices. Flyout Navigation typically involves menus that expand or ‘fly out’ horizontally when the mouse hovers over them, as opposed to being clicked.

Lottie Animation

Lottie Animation is an open-source animation tool that uses JSON to allow designers to easily deploy animations across various platforms, as conveniently as they would with static assets.

These animations are high-quality yet compact and interactive, compatible with any device. They can be resized without losing clarity due to pixelation. Additionally, these animations can be modified in real-time. Many of the top 500 apps on the App Store utilize Lottie Animation to captivate their users and boost conversion rates.

Input Fields

Input Fields are an essential element in user interface design, providing a means for users to submit non-standardized responses.

These fields find application in various situations, commonly encountered when users are inputting personal information and delivery addresses on eCommerce web forms or when submitting queries online. Input Fields facilitate the entry of tailored data, thereby enhancing and streamlining customer interactions.

Infinite Scrolling

Infinite Scrolling is a web design strategy where content from subsequent pages loads automatically and continuously as users scroll down a webpage.

This approach is often used as an alternative to traditional pagination, eliminating the need for users to click on “previous,” “next,” or page numbers to access more content. The primary goal of Infinite Scrolling is to simplify the browsing experience, allowing users to view more content by simply scrolling down.

Additionally, this technique helps web applications manage user requests and deliver data seamlessly without the need for page refreshes. Infinite Scrolling is especially popular on social media platforms like Facebook and Instagram, where content appears to load endlessly.

Mega Menu

A Mega Menu is a type of expandable menu that presents navigation options to site visitors in a broad, rectangular format. This menu style replaces the need for scrolling, utilizing icons, tooltips, and typography to clarify the choices available to users.

Enjoyed this article?

If you'd like to receive my newsletter, you can sign up below. You'll be joining a friendly bunch that all get the latest news and insights, direct to their inbox.

Request a quote

Breathe new life into your site or get a new one off the ground. Get in touch to request a quote today.

Start a conversation about your project