Glossary of Web Design Terms
This is a comprehensive glossary of web design terms. Keep scrolling to see the words and phrases web designers are using today 🗣️⬇️
A
1. A/B testing: A method of comparing two versions of a web page to see which performs better in terms of user engagement or conversion rates.
2. Above the fold: The area of a web page that is visible without having to scroll down.
3. Accessibility: The practice of designing websites that can be used by people with disabilities.
4. Affordance: A design element that suggests how it can be used, such as a button or a link.
5. AJAX: Asynchronous JavaScript and XML. This is a technique used in web development to create dynamic content on web pages without having to reload the entire page. Essentially, it allows you to update parts of a page with new data without refreshing the whole page.
6. Alt attribute: The alt attribute (or alt text) provides a textual alternative to an image on a web page. It describes the content of the image, and if the image fails to load, this description will be displayed instead.
7. Anchor text: The visible, clickable text in a hyperlink, often used to provide context or description for the linked page.
8. API: Application Programming Interface. A set of protocols and tools for building software applications.
» MORE: Looking for a new web design? See our WordPress web design services
B
9. Backend: The part of a website that is not visible to users, where the website’s functionality is built and managed.
10. Bandwidth: The amount of data that can be transmitted over a network connection.
11. Behavioral design: The use of psychology and human behavioral principles in web design to create effective and engaging experiences.
12. Blog: A website or section of a website that contains articles or posts that are regularly updated.
13. Breadcrumb: A breadcrumb is a navigation aid that shows the user’s location within a website. It’s a trail of links, usually at the top of a page, that shows the hierarchy of content, allowing users to easily navigate back to previous sections or pages.
14. Browser: Software that allows users to access and view websites on the internet.
15. Browser compatibility: The ability of a website to display and function properly across different web browsers and platforms.
16. Button: A clickable element on a website used to trigger an action, such as submitting a form or navigating to a new page.
C
17. Cache: A temporary storage location for frequently accessed data.
18. Card-based design: A design technique that presents content in a series of cards, each containing a piece of information or functionality.
19. CMS: Content Management System, a software application that enables users to create, manage, and publish digital content.
20. Cookie: A small text file stored on a user’s computer by a website, used to remember preferences or track user behavior.
21. Color scheme: A predefined combination of colors used throughout a website to create a cohesive and visually appealing design.
22. Color theory: The principles and guidelines for creating visually appealing and effective color schemes in design.
23. Content Delivery Network (CDN): A system of distributed servers that deliver web content based on the user’s geographic location, improving loading times and reducing server load.
24. CTA: Call to action. An element on a website that encourages the user to take a specific action, such as making a purchase or filling out a form.
25. CSS: Cascading Style Sheets, a programming language used to style the visual elements of a website.
26. CSS preprocessors: Tools that extend CSS with variables, mixins, and functions, making styling more efficient and organized. Examples include Sass, LESS, and Stylus.
» MORE: WordPress web design: Customizable, dynamic WordPress websites for your business
D
27. Database: A collection of data that is organized and stored in a computer system.
28. Dark mode: A design mode that displays a website with a dark background and light text, which can reduce eye strain and improve readability in low-light environments.
29. Data visualization: The use of visual elements to display data and information, including charts, graphs, and infographics.
30. Debugging: The process of identifying and fixing errors or bugs in software code.
31. Deliverables: The tangible items or outputs that will be delivered as part of the project, such as wireframes, design concepts, or a completed website.
32. Design mockup: A visual representation of what a website will look like before it is built.
33. Design system: A set of design principles, guidelines, and components used to ensure consistency and coherence across all aspects of a website or digital product.
34. DevOps: Development Operations. A set of practices and tools used to automate and streamline the software development process.
35. DHTML (Dynamic HTML): A collection of technologies used to create interactive and animated web pages, including HTML, CSS, and JavaScript.
36. DNS: Domain Name System. The system used to translate domain names into IP addresses.
37. Doctype: A declaration at the beginning of an HTML document that specifies the version of HTML being used and helps ensure proper rendering of the page.
38. Domain: The unique name that identifies a website on the internet.
E
39. Ecommerce: The buying and selling of goods and services over the internet, often through an online store or shopping cart system.
40. Edge computing: A computing model where data processing and storage are done closer to the source of the data, reducing latency and improving performance.
41. Elastic design: A design approach that allows a website to adapt and respond to different screen sizes and resolutions without sacrificing functionality or user experience.
42. EM: A unit of measurement used in web design, typically based on the size of the font being used.
43. Embedded style: A style sheet that is included directly in the HTML document rather than as a separate file.
44. Empathy mapping: A technique used in user research to understand and empathize with the needs and motivations of website users.
45. Encryption: The process of converting data into a coded language to protect it from unauthorized access.
46. Error page: A page that appears when a user tries to access a web page that does not exist.
47. Exit intent pop-up: A pop-up window that appears when a user attempts to leave a website, usually containing a special offer or call to action.
48. External link: A hyperlink that points to a website outside of the current website.
F
49. Favicon: A small icon that appears in the browser tab or bookmark bar, representing the website.
50. Figma: A cloud-based design tool used for creating digital interfaces, including websites and mobile apps.
51. Fixed width (layout): A design approach where the width of a website is fixed and does not change regardless of the size of the browser window.
52. Flat design: A minimalist design style that uses simple shapes, typography, and bold colors, often with a focus on usability and user experience.
53. Flexbox: A layout module in CSS that allows for flexible and responsive page layouts, particularly for complex and dynamic interfaces.
54. Focal point: The main point of interest in a design or image, typically used to draw the viewer’s attention and create a visual hierarchy.
55. Footer: The bottom section of a web page that contains information such as copyright notices and contact information.
56. Form: A section of a web page used to collect information from the user, such as a registration form or a contact form.
57. Frontend: The part of a website that is visible to users and includes the design and layout. It also includes HTML, CSS, and JavaScript code.
» MORE: Web Design Resources: More about web design from Sage Digital Agency
G
58. Gamification: The use of game design elements in non-game contexts, such as websites and mobile apps, to engage users and encourage desired behaviors.
59. GIF: Graphics Interchange Format. A file format used for animated images.
60. Google Analytics: A free web analytics service provided by Google to track and report website traffic.
61. Graphic design: The art of creating visual content for communication purposes.
62. Gradient: A color transition that blends.
63. Grid system: A design technique used to create a layout for a website using a grid of rows and columns.
H
64. Hamburger menu: A menu icon (with three horizontal lines) that opens a navigation menu when clicked, often used on mobile devices.
65. Header: The top section of a web page that typically contains the website logo, navigation menu, and other important information.
66. Hexadecimal: A system of representing colors using a combination of six digits and letters, often used in web design. For example, #FF0000 represents the color red.
67. HTML: Hypertext Markup Language, the standard language used to create web pages.
68. HTTP: Hypertext Transfer Protocol. The protocol used to transfer data over the internet.
69. HTTPS: Hypertext Transfer Protocol Secure. A secure version of HTTP that uses encryption to protect data.
70. Hue: The attribute of a color that distinguishes it from other colors, such as red, blue, or green.
I
71. Information architecture: The structure and organization of a website’s content and navigation, designed to make it easy for users to find what they need.
72. Infinite scrolling: A design technique that automatically loads more content as the user scrolls down a page, allowing for an endless stream of content without the need for pagination.
73. Interface: An interface refers to the space or point where interactions between humans and machines occur. In terms of web design and computer systems, the interface includes all the things a user can interact with – like screens, pages, buttons, icons, and other visual elements.
74. IP address: Internet Protocol address. A unique numerical identifier assigned to devices connected to the internet.
75. Iteration: The process of repeating a design or development task until it is refined and improved.
J
76. JavaScript: A programming language used to create dynamic and interactive web pages.
K
77. Keyword: A word or phrase that is used to search for information on the internet.
L
78. Landing page: A web page designed to receive traffic from a specific marketing campaign and convert visitors into customers or leads.
79. Layout: The way in which the content of a web page is arranged and displayed.
80. Link: A clickable element on a web page that takes the user to another page or website.
81. Load time: The time it takes for a web page to fully load in a browser.
M
82. Microinteractions: Small, functional interactions within a user interface that enhance the user experience, such as animations.
83. Milestones: Specific dates or deadlines by which certain parts of the web design project will be completed.
84. Menu: A navigational tool on a web page that displays a list of links to other pages on the site.
85. Metadata: Information about a web page that is not displayed to users but used by search engines and other tools to understand the content of the page.
86. Meta tags: HTML tags that provide information about a web page, such as title, description, and keywords.
87. Mobile responsiveness: The ability of a web page to adapt to different screen sizes and devices, providing a seamless user experience across all platforms.
88. Motion Design: The use of animation and video in web design to create engaging and dynamic user experiences.
» MORE: Sage Digital Agency | A Web Design and Web Development Company
N
89. Navigation: The menu or links that enable users to navigate around a website.
90. Navigation bar: The menu or set of links on a web page used to navigate to different sections or pages of the site.
91. Navigation hierarchy: The order and structure of the links in a website’s navigation menu.
92. Navigation menu: A list of links that allow users to navigate to different sections or pages of a website.
93. Neuromarketing: The study of how the brain responds to marketing stimuli, used to create more effective and engaging web designs.
O
94. Optimization: The process of improving the performance and user experience of a website, often by reducing load times and improving design.
95. Open source: Software that is freely available and can be modified and distributed by anyone.
96. Organic search: Search engine results that are displayed naturally by search engines, like Google or Bing, based on their algorithms.
P
97. Page speed: This is essentially the same thing as Load Time. It is the time it takes for a web page to load in a browser.
98. Parallax scrolling: A design technique that creates the illusion of depth and movement by scrolling different layers of a web page at different speeds.
99. Payment terms: The payment schedule, payment methods, and payment amounts associated with the project.
100. PHP: Hypertext Preprocessor. A programming language used to create dynamic websites.
1o1. Plugin: A software component that can be added to a website to provide additional functionality.
102. Progressive Web Apps (PWAs): Web applications that offer app-like experiences by utilizing offline access, push notifications, and device hardware access.
R
103. Resolution: The number of pixels displayed on a screen, typically measured as width x height. Common resolutions for websites include 1920×1080 or 1366×768.
104. Responsive Design: A design approach that ensures a website looks good on all devices, including desktops, tablets, and smartphones.
105. Rollover: A design element that changes appearance when the user hovers the cursor over it.
S
106. Saturation: The intensity or purity of a color, ranging from fully saturated (pure) to desaturated (gray).
107. Scalable Vector Graphics (SVG): A file format for vector graphics that allows for high-quality images that can be scaled without losing clarity or resolution.
108. Scope of Work: A detailed description of the tasks, deliverables, and timelines involved in a web design project.
109. Search engine optimization: The practice of optimizing a website to improve its ranking in search engine results pages.
110. SEO: This is the same as the term above. Search engine optimization is sometimes abbreviated like this.
111. Site map: A list of all the pages on a website, used to aid navigation and improve search engine indexing.
112. Skeuomorphism: The design approach of using real-world textures and objects in digital interfaces, such as a bookshelf in an e-reader app.
113. Staging: A pre-production environment used to test and review changes to a website or web application before they are made live.
114. Style guide: A set of design and branding standards used to ensure consistency across all aspects of a website.
115. SSL: Secure Sockets Layer, a security technology that encrypts data transferred between a website and its users.
T
116. Template: A pre-designed layout or framework that can be used to create a website or web page.
117. Typography: The art of designing and arranging typefaces to make written language legible, readable, and appealing when displayed.
U
118. UI: User Interface. The visual elements and design of a website that users interact with.
119. UX: User Experience. The overall experience users have when interacting with a website.
120. URL: Uniform Resource Locator. The address used to access a web page on the internet.
121. Usability testing: The process of evaluating a website’s user interface by observing real users as they navigate and complete tasks on the site, identifying areas for improvement.
V
122. Valid: A term that describes code that conforms to web standards and is free of errors or warnings.
123. Vector graphics: Graphics created using mathematical equations to represent images, rather than pixels.
W
124. Web Accessibility: Designing and developing websites to be accessible for users with disabilities.
125. Web fonts: Custom fonts that can be embedded on a website, allowing designers to use a wider range of typography options.
126. Web host: A company that provides the infrastructure and servers needed to host a website on the internet.
127. Wireframe: A visual representation of the layout and structure of a website or app.
128. Web standards: A set of guidelines and best practices for developing web pages and applications, ensuring they are accessible, interoperable, and maintainable.
129. Website anatomy: The different parts of a website, such as header, footer, and sidebar.
130. WYSIWYG (What You See Is What You Get): An editor that allows users to create content without having to write code, displaying the content as it will appear on the final website or application.
X
131. XML: Extensible Markup Language. This is a language used to store and transport data.
Get in Touch with Sage!
If you found this glossary useful and want to hire Sage Digital Agency, visit our Contact page. We offer a free, no-pressure consultation!
Additional Web Design Terms
Automagically: This term refers to a feature or function that works automatically, seemingly by magic. In web design, it can refer to the automatic completion of forms, the automatic resizing of images, or the auto-saving of data.
Below the fold: This term refers to the portion of a web page that is not visible without scrolling down. It comes from the traditional layout of a newspaper, where the most important headlines and articles are displayed above a fold in the paper. In web design, the most important content is typically placed above the fold to increase the chances of engagement.
Dither: This term refers to a technique used to simulate colors that are not available on a particular display device. In web design, dithering can be used to create the appearance of a wider range of colors, especially in images or animations.
Font family: This term refers to a collection of fonts that share a similar design style. A font family can include a range of different weights and styles, such as bold, italic, and condensed, allowing designers to create cohesive and visually appealing typography on a web page.
Iframe: This term refers to an HTML element that allows a web page to embed content from another source, such as a video or a social media post. The content displayed in an iframe is typically hosted on a different server or domain than the page on which it appears.
Image map: This term refers to an HTML element that allows designers to define clickable areas within an image. These clickable areas can link to other pages, images, or media files, allowing designers to create interactive and engaging content on a web page.
Progressive enhancement: This term refers to a web design approach that focuses on creating a baseline experience that is accessible to all users, regardless of the device or browser they are using. Additional features or enhancements can then be added to provide a more immersive or engaging experience for users with more capable devices or browsers.
XHTML: This term refers to a markup language used to create web pages. XHTML is a stricter and more structured version of HTML, designed to make web pages more compatible with other XML-based technologies. It is considered an alternative to HTML5.
Video background: A design element where a video plays.
