Familiarising yourself with these fundamental website design terms will not only save you time and resources but also encourages a more fruitful and efficient working relationship with your web designer. In fact, understanding how to work with a web designer becomes much easier.
Effective communication forms the backbone of any successful collaboration.
Understanding and using the correct website terminology ensures that both parties are ‘speaking the same language,’ which leads to clear and concise design requests.
Ultimately, effective communication plays an important role in the creation of a website that is both aesthetically pleasing and functionally sound.
Important Website Design Terms To Know:
Before we get stuck into my full list of all 65 website design terms, here are the 15 most important words that I believe you should know:
UI (User Interface): The front end of a website that users interact with. This includes the buttons, menus, images and forms.
UX (User Experience): The overall experience a user has while navigating through a website. How intuitive it is, and how enjoyable it is to use.
Responsive Design: The design approach that makes sure a website looks good on all devices. This includes mobiles, tablets and desktops.
SEO (Search Engine Optimisation): The practice of ensuring that your website structure is optimised to rank high on search engines like Google.
Web Hosting: This is the location where your ‘domain name’ points to, allowing you to ‘host’ your website on the web.
Wireframe: A super basic website layout that helps align the page elements, site features and content in a simple format, usually using plain colours and shapes.
CTA (Call To Action): A prompt that tells the user what action to take next, usually a button that says something like ‘Buy Now’ or ‘Sign Up Today’. You can find my ‘call to action’ at the bottom of this glossary of website design terms.
Conversion: The desired action you encourage website users to follow through with. Filling in a form or making a purchase is most common.
Plugin: A piece of software that can be added to a website allowing you to extend your website features or functionality.
Element: An individual component such as a text box, heading, image, menu, form, CTA or button. To see some inspiring ways to combine different elements, have a look through the inspiring elements library on the Awwwards website.
Padding: The empty space directly around an element within its borders.
Margin: The space around an element, outside of any defined borders.
Section: A primary building block of a website in the form of a ‘row’ that contains elements.
Column: The vertical division of a row, often used to balance and structure content.
Anchor Point: A unique ID element that can direct a user to a specific section on a page rather than the top.
UX (User Experience) Website Design Terms:
Accessibility: The act of dilligence that ensures that your website is usable by all individuals, regardless of their abilities or disabilities.
Bounce Rate: The percentage of website visitors who leave a webpage without engaging further or navigating to other pages.
Conversion Rate: The percentage of website visitors who take a desired action, such as purchasing or filling out a form.
Heatmap: A visual representation of anonymous user activity on a webpage, indicating areas of high and low engagement or interaction to help make data driven decisions.
Journey Mapping: The process of visualising and understanding the steps and experiences that users go through when interacting with a website when looking for a product or service.
Usability: The measure of how easily and effectively users can interact with your website to acheive their desired goals.
User Flow: The path that a user follows as they navigate through a website to complete a specific task or achieve a desired outcome.
User Persona: A fictional representation of a target market, created to understand better and relate to the needs, behaviours, and motivations of the users.
UI (User Interface) Website Design Terms:
Above the fold: The portion of a webpage that is visible without scrolling.
Article: A written piece of content such as a ‘blog post’ or ‘resource’ providing information or opinions on your website, such as this article about ‘web design terms‘.
Border Radius: The curvature of the corners of an element, such as a button or image.
Breadcrumb: A navigation aid that shows the user’s current location within a website.
Breakpoint: A specific screen size or resolution at which a responsive design layout changes.
Button: An interactive element that users can click or tap to perform an action.
Dropdown Menu: A list of options that appears when a user clicks or hovers over a button or link.
Favicon: A small icon that represents a website, typically displayed in the browser tab.
Filter: A tool that allows users to narrow down or refine a set of data or content, commonly found on e-commerce stores, blogs or portfolios.
Footer: The bottom section of a webpage, commonly known as the footer, usually presents consistent additional information or navigation links on every page.
Hamburger Menu: A type of menu icon that expands or collapses a navigation menu when clicked.
Header: The top section of a webpage that often contains a logo, navigation menu, and main CTA button.
Hero: A prominent section of a webpage that showcases key content or features. Usually the first section on a page.
HTML Heading Tags: The six levels of heading tags you can give your website titles and text with H1 tags being the highest (most important) level and H6 tags the lowest (least important).
Landing Page: A standalone webpage designed to promote or capture user attention for a specific purpose. Landing pages are usually not indexed with Google, as they are mainly used for ads or A/B split testing.
Search Bar: A text input field that allows users to enter keywords and search for specific content.
Slider: A user interface element that allows users to slide or swipe through a series of images or content.
Title: A concise description representing the content or purpose of a page, enhancing usability through clarity and aiding in user navigation.
Website Development & Technical Terms:
301 Redirect: A method of automatically redirecting users from one URL to another, typically used when the ‘slug’ of a URL changes and you want to send users to the new URL so they can find what they were meant to be looking for.
404 Error: A HTTP status code that indicated that the web page you were trying to visit has been removed or moved, without a 301 redirect in place.
ALT Tag: A written description added to an image on a website that describes what the image is or contains. It is important for SEO and website accessibility.
Back End: The ‘behind the scenes’ side of the CMS or server that handles data processing, storage, and retrieval, as opposed to the user-facing front end.
CMS (Content Management System): A software or application used to create, manage and modify the content on a website such as WordPress.
CSS (Cascading Style Sheets): A code language used to describe the look and formatting of a document, controlling the layout, colours, and fonts of a webpage.
Domain Name: The address on the internet where users can access your website. Domain names are basically like your office addresses, and your website is like an office full of content.
Front End: The part of a website that users interact with directly, encompassing everything they see and use, including the layout, design, and interactive elements.
GTM (Google Tag Manager): A tool that allows you to manage and deploy marketing tags (snippets of code or tracking pixels) on your website without having to modify the code.
JavaScript: High-level code used to run interactive elements on a website such as form field validations, animations or third-party software.
Pixel (Tracking): A pixel is a small piece of JavaScript code that triggers a server request used to track user behaviour (for tools like Facebook and TikTok ads) and conversions on a website.
Slug: A slug refers to the part of a URL that identifies a particular page on a website in an easy-to-read form, following the first ‘/’ of a domain URL. For example ‘jacobnegri.com.au/blog‘.
SSL (Secure Socket Layer) Certificate: A digital certificate that provides authentication to access a website, enabling an encrypted connection.
Tag (Google Tag Manager): A snippet of JavaScript code that sends specific user interaction data from a website to third-party services, like Google Analytics.
WooCommerce: A customisable, open-source eCommerce platform built on WordPress that allows businesses to build and manage an online store.
E-Commerce Website Design Terms:
Abandoned Cart: When a user gets all the way up to paying for the products in their cart and then they leave the website.
Cart: The ‘basket’ in which products are added prior to ‘checking out and making a purchase.
Catalog: An organised collection of products that are available for purchase on the website
Checkout: The process of adding shipping and billing details, then committing to purchasing your products.
Cross-Selling: A sales technique used to encourage customers to buy related or complementary items, in addition to the product they are already purchasing.
E-Commerce: A system of buying and selling goods or services online, typically through a specific platform like WooCommerce or Shopify.
Payment Gateway: A middle-ware service that handles the transaction between the customer and a merchant securely, such as PayPal, Stripe or AfterPay.
SKU (Stock Keeping Unit): A unique number to identify individual variations of products on your e-commerce store.
Upselling: A sales strategy where you encourage the customer to spend more by purchasing an upgraded or premium version of what’s already being purchased.
Ready To Speak With A Web Designer?
Don’t forget to bookmark this comprehensive glossary of website design terms. The next time you work with a web designer, having these terms at your fingertips will ensure smoother communication and a better understanding of your website brief. It’s your handy guide to speaking to a web designer with confidence and ease.