When you visit a website—whether it’s a sleek online store or a personal blog—every image, button, text box, and interactive section you see is more than just a piece of the whole; it’s an element with a purpose and a name. Knowing these web design terms not only deepens your understanding of how websites function but also helps you communicate effectively about them, whether you’re a web designer, a content creator, or someone managing a website.
In this guide, we’ll walk you through essential web design terms. These terms will help you see the big picture of website design while appreciating the small details. Whether you’re diving into DIY web projects or collaborating with a designer, understanding these terms can make your work smoother and your results better.
Essential web design terms 
Table of Contents
Web design often involves overlap between disciplines, so we’ve included vocabulary related to branding, composition, color, and typography.
Knowing how to speak the language of web design will help you ask better questions, communicate more effectively, and produce a better final product. You can also notice how these terms are implemented across various websites (for better or worse). Because web design is a holistic process, web designers are trained to see the bigger picture and the details.
Understanding website design terminology can help non-designers, such as content creators and website owners, bridge the gap with creatives and developers when talking about their websites. From better understanding a DIY tutorial to communicating with a designer, this background is essential for anyone working with the web.
General terminology
Every website shares certain elements, regardless of the goals or purpose of the design. This set of general terminology will help you understand the basics of your site and help you communicate with a designer. These terms include everything from the anatomy of your website to parts of the website platform.
- Header: The header is the top section of a webpage, usually containing the logo, navigation links, and other key information. It helps users quickly understand the site’s identity and navigate its main sections.
- Landing Page: A standalone page often designed for a specific marketing campaign can direct users toward a single action, like signing up for a newsletter or purchasing a product.
- Call to Action (CTA): A call to action is a prompt encouraging users to take a specific action, often in the form of a button. Examples include “Sign Up,” “Buy Now,” or “Learn More.” A well-designed CTA is clear, enticing, and strategically placed.
- Hero: The hero section is the main, prominent area at the top of a webpage. It typically features a large image, video, or graphic and includes a headline and CTA to capture attention.
- Responsive Design: It is considered responsive when your website design approach ensures that the design adapts across different devices and screen sizes. This is crucial for providing a seamless user experience on phones, tablets, and desktops.
- Accessibility: Accessibility in web design refers to creating websites that everyone, including people with disabilities, can use. This often includes adding ARIA (Accessible Rich Internet Applications) labels to elements to assist screen readers in identifying them, ensuring sufficient color contrast, and following WCAG (Web Content Accessibility Guidelines) standards. These efforts make a website usable for people with visual, auditory, motor, or cognitive impairments.
- Front-End: The part of the website that users interact with directly is the front-end. It includes elements like text, images, buttons, and overall layout. Front-end developers use languages like HTML, CSS, and JavaScript to create these visual and interactive components.
- Back-End: The back-end is the part of a website that operates behind the scenes, managing the database, server, and application logic. Back-end development involves languages like PHP and Python and databases like SQL to ensure the site functions properly.
- User Experience (UX): User experience refers to how users feel while navigating a website. Good UX makes the site intuitive, enjoyable, and efficient for users, focusing on things like layout, accessibility, and usability.
- Above the Fold: Borrowed from newspaper terminology, the portion of a webpage visible without scrolling is above the fold, or above the scroll. Designers prioritize placing key information and CTAs here.
- Content Management System (CMS): A CMS is software that allows users to create, manage, and modify website content without specialized technical knowledge. WordPress, for example, is a popular CMS.
- Footer: The footer is the bottom section of a webpage. It typically contains additional navigation links, contact information, social media icons, and copyright notices. It often holds secondary information for users who scroll to the end of the page.
- Domain Name: The unique address of a website, like “example.com,” that helps users find and access the site easily. The domain name often reflects the site’s brand or purpose.
Website branding terms 
Branding is how an organization communicates its message, values, and overall experience. It includes everything from a logo and visual design elements to how people feel when they associate with the brand. In web design, branding is a powerful tool for shaping this perception; it allows you to craft experiences that consistently reinforce your identity and story across every interaction.
- Favicon: A small icon representing your website, usually seen in the browser tab. It is often a simplified version of a logo or brand mark.
- Logo: A design element that represents the business/organization/person. It can include visual elements like a brandmark and typography.
- Brandmark: A visual logo that doesn’t include words.
- Icon: A graphic rendering of an object or concept that pertains to your brand.
- Wordmark/lettercard/logotype: A readable logo that uses specific styles, fonts, and colors.
- Brand identity: The entire brand representation, including visual elements (logo, colors), to how the brand speaks and does things. A brand’s identity is more than just a logo.
- Design system: A library/group of reusable digital assets for a website.
- Brand guide: A document that contains all of your brand information and provides instructions on how to incorporate brand identity (voice, color, logos, and usage guidelines).
- Typography: The fonts that correlate to the brand and rules for usage.
- Color palette: A group of colors that the website or brand can use. Color often has a specific purpose.
- Visual hierarchy: How the arrangement of elements influences perception and interaction when brand elements are pulled together in a design project.
- Mood board: A set of elements that provide visual inspiration or direction for a design.
Website typography terms
Typography is the aesthetic decisions about the arrangement of type. Size, spacing, alignment, column size, and relative sizing of type have a big impact on user experience as well as aesthetics. Typographic choices should be deliberate, reinforcing big-picture systems while being aesthetically appealing and easy to read/understand.
- Font (typeface): Collection of letters, glyphs, and symbols
- Font family: All variables in a specific typeface, such as bold, regular, and italic.
- Font size: The size of a typeface in a design.
- Font weight: The light- or dark-ness of each font stroke. Thinner fonts are light, while colder fonts are heavier.
- Font style: Special features for text including italic, underline, or strike.
- Line height (leading): The amount of space between lines of text.
- Letter spacing (tracking): Adjusting the spacing between groups of letters/blocks of text.
- Kerning: The adjustment of spacing between individual letters.
- Text decoration: Any additional styling done to text, often with CSS.
- Serif/sans serif: Serif fonts have an extra decorative stroke or line to the end of letters, while a sans serif is without.
Website color terms 
Color encompasses aesthetic decisions about how to use color in a composition. Color can evoke emotion, emphasis, divide, or group elements, or create visual unity and balance. Color is usually related to branding. Color choices should be deliberate and used consistently across the entire website.
- HEX: A hexadecimal color is a six-digit number used to represent color in HTML/CSS.
- RGB: Additive color model used for screens, red, green, and blue light values combining to form colors.
- CMYK: For printing, the subtractive color model is used for ink, with cyan, magenta, yellow, and black ink combining to form colors.
- Pantone/spot color: These are specific custom inks of a certain color. Big brands usually have a custom Pantone color.
- Hue: Where a color falls on the overall color spectrum.
- Saturation: How you can describe a color’s vivid- or dullness.
- Contrast: The difference between two colors makes them stand apart. White and black, for example, have a high contrast.
- Opacity: How solid or transparent is a color? Can you see through it?
Website imagery terms
Imagery terms include the visual and graphical elements of a website. Imagery is important for communicating your message and connecting with your audience. However, when imagery is used improperly, it can add extra bulk to a website’s loading time while not improving user experience. Use imagery to support your messaging; use the right image format for the content.
- Vector: Images made of curves and lines that will not pixelate, regardless of size (SVG, EPS).
- Raster: Images that are made out of pixels and have a limited size (JPG, TIFF, PNG, GIF).
- Resolution: The number of pixels in a raster image (e.g. 800×600 or 2400×1200). A higher resolution will typically be larger but also have more detail.
- Optimization: Sizing an image for the location it will be used helps images and videos load faster on your website.
- Compression: An optimization that takes a large file size and makes it smaller.
- JPG/JPEG: Best for photography and detailed images.
- PNG: Best for graphics, simple color, and images with transparency.
- GIF: Best for low-detail graphics or animations.
- TIFF: Best for printing, not suited for screen display.
- SVG: A vector image format suitable for display on the web, best for graphics and logos.
- Webby: Modern image format that provides superior compression without sacrificing quality.
Website user experience terms
User experience encompasses how people interact and engage with a website. User experience influences how we direct users through the site and lead them to specific end goals. It encompasses many elements of design and development including how something looks and works. Make functionality decisions with the end-user in mind, not your preference or the tools you use.
- Persona: A fictional character that represents a primary user of your site/product. A well-developed persona will represent real people with real motivations.
- Wireframe: Low-fidelity site layout that represents general block-level content and interactive elements.
- Mockup: High-fidelity site layout showing final color, typography, imagery, etc.
- Prototype: Interactive version of a site that may not be built with final code.
- CTA: Call to action, usually paired with a button.
- Conversion: When a user takes a specific desired action.
- Landing Page: Single page optimized for a specific audience or search engine result.
- Usability: How well users interact with your site, usually tested by observing a series of tasks.
Website user interface terms
User interface (UX, UI) includes elements on the page with which the user interacts. Although they aren’t the same thing, your user interface does impact your user experience. Don’t make your users think; design an intuitive interface that takes advantage of modern patterns.
- Navigation: System that allows users to explore and interact with different sections and pages on a website. It typically includes menus, links, and buttons that guide users, helping them find information quickly and easily. Effective navigation is intuitive, well-organized, and responsive, ensuring a smooth user experience and making it easy for visitors to reach their goals on the site.
- Breadcrumb: Hierarchical content links that show parent and child pages.
- Menu: The primary navigation area sometimes has a dropdown or flyout of sub-menu items.
- Filter: Pre-defined elements that allow the narrowing down of visible content by various categories.
- Search: Open-ended input that queries content and returns a list of results.
- Slider: A trendy, animated way of displaying information you probably shouldn’t use.
Website composition and hierarchy terms
Composition refers to how the content and aesthetics of a website work together. Each element on a web page should feel like it belongs within the website layout, not added as an afterthought. Hierarchy involves the relative importance of information’s visibility. Visual hierarchy is a collection of small details such as typography, color, proximity, and balance. Having a good hierarchy helps with information’s standability and helps users prioritize information on the page by importance.
- Balance: Using similar or complementary design elements to make the composition feel equal.
- Repetition: Using recurring elements to reinforce patterns or provide familiar visual cues.
- Whitespace: The amount of open space or breathing room around an element.
- Grid: Underlying structure to a design that determines how everything lays out.
- Rule of Thirds: A visual concept that states the most pleasing focal points are at the intersection of three rows and columns.
- Scale: The relationship between elements on a page and each other.
- Proximity/Alignment: The closer elements are to each other with similar alignments, the more likely they are to be visually associated.
- Focal Point: The place on the page that captures user attention first.
- Semantic Markup: Using HTML elements correctly to imply hierarchy and usage within the content.
- Z-Pattern Layout: A layout strategy that follows the natural eye movement from left to right in a “Z” shape.
- F-Pattern Layout: A layout that aligns content along the left side with headlines and images to capture attention in an “F” shape.
Website SEO terms
Search engine optimization is
an a buzzwords. It includes all of a website’s visual, contextual, and technical elements that make it easy for search engines to understand. A strong SEO strategy starts with content and flows into more technical elements to support the user experience.
- Sitemap: A structured list or outline of all the pages on a website, often organized in a hierarchical order that helps users and search engines understand the layout and structure of a website.
- Core web vitals: A set of metrics that measure a website’s performance and user experience that includes page load speed (how fast the page loads), largest contently point (the time it takes for the main content to load), first input delay (how quickly the site responds to the first user interaction and cumulative layout shift (the stability of a page as it loads).
- Meta tags (Titles and Descriptions): Snippets of code in a webpage’s HTML that provide information about the page. Two of the most important meta tags include title, which appears in search results and browser tabs and meta description, which is a brief summary of the page’s content shown in search engine results.
- SERP (Search Engine Results Page): The page search engines display in response to a user’s search query. It typically includes organic results, paid ads, and other features like images, videos, and snippets.
- Keywords: Specific words or phrases people type into search engines to find content. Using relevant keywords strategically helps increase a website’s visibility in search engine results.
- On-page SEO: Optimizing individual pages to improve search engine rankings. This includes content quality, keyword usage, meta tags, headers, internal linking, and image optimization.
- Off-page SEO: Actions taken off of your website to improve its authority and ranking. This primarily includes building backlinks from other reputable websites, social media, and influencer marketing.
- Alt text (alternative text): A description added to images that helps screen readers interpret images for visually impaired users and provides context for search engines.
- Domain authority: A score developed by the SEO company Mos. that predicts a website’s ability to rank on search engines. It’s based on factors like the quality and quantity of backlinks, and a higher DA generally indicates a stronger ability to rank.
Put these terms into practice
When you speak the language of web design, you’ll be more confident working on your own website and talking with designers and developers to help with your website.
The best way to get comfortable with these terms is to use them and practice in a hands-on environment where you can build a website yourself. Pairing Kadence WP with your WordPress site will allow you to learn more about the website-building process and speak the language like a pro.
Get started for free today and see all the tools Kadence has to offer.
