Before hiring a web developer to create your website, it’s best to brush up on some web design terms so you can work well together.

Below are 40 of the most common terms used in web design. If you’ve ever had a web design consultation call and felt like the designer was speaking a different language, this post is for you.

1. HTML

The foundation of every website you’ve ever looked at. Hyper Text Markup Language (HTML) comprises all of the text you see on a webpage. It can also be used out to build out elements like images, video, and links.

40 Web Design Terms To Know

Source: Adobe Blogs

2. CSS

Cascading Style Sheets is a markup language that adds the color and style to websites. It essentially styles the elements that are built out with HTML. It’s responsible for the way navigation bars, colors, and fonts appear. Without it, the web would be a very dull place.

40 Web Design Terms To Know

Source: Visual Studio

3. JavaScript

The programming language that allows for dynamic content on websites and robust applications (think animations and widgets).

40 Web Design Terms To Know

Source: Visual Studio

4. Domain Name

The URL address of your website. For example, the domain name we own for this website is “www.inboundwedevelopment.com”.

5. Content Management System (CMS)

A content management system is an application that allows you to store and manage all of the content on your website. This includes copy, images, videos, blog posts, audio, maps and the code itself on your website. An example of a CMS is WordPress.

6. WordPress

The worlds most popular content management system. Its flexibility, compatibility, and developer friendly tools make it the best website builder for small businesses. About 40% of all small business website run on WordPress.

WordPress for NJ Small Businesses

Source: WordPress

7. Plugins

Like apps, but for your website. They add extra functionality to your website and are a big reason why WordPress is so popular. With plugins, you can add extra functionality to your WordPress websites like chatbots, exit intent pop-ups, or an entire e-commerce section to your website.

8. WordPress Themes

WordPress themes dramatically change the look and functionality of your website. Which one you choose will change the way elements and other structures on your website appear.

9. Hosting

The service that allows your website to be connected to and viewed on the internet. A website is stored on a server and loads on a webpage when your browser pings the URL address of your website.

10. Box model

A web browser views every element on a webpage as a box. These boxes have borders, padding, and margins that can be manipulated with CSS to change how each element looks. To the browser, it serves as a visual representation of all the elements on the page.

40 Web Design Terms To Know

Source: Mozilla Developer Network

11. Site Map

A visual representation of all the webpages that make up a website and how they all connect to one another. Useful for planning out the content and direction of the website.

40 Web Design Terms To Know

Source: NVision

12. Wireframe

A document that outlines the layout and structure of a webpage. Extremely useful during the design phase to establish a rough layout and quickly iterate on the design before developing.

40 Web Design Terms To Know

Source: Mockplus

13. Compression

Reduces an images file size so that it can load on a web page faster, but without losing quality. Very important for SEO and providing a great user experience.

14. Pixels

The unit used to specify the size of an image in web design. Ex. 800px x 1200px.

15. Drop Shadow

A shadow effect that is added to elements on a webpage to create depth and help it stand out.

40 Web Design Terms To Know

Source: Wikipedia

16. Typography

This refers to the fonts used on your website. Serif fonts are more traditional and can be identified by the tail at the end of each letter. Sans serif fonts are more modern and don’t feature the tail decoration.

17. Font

40 Web Design Terms To Know

Source: W3Schools

The individual instance of your typography. For example, Helvetica 18px Bold.

18. Gif

An animated image that is comprised of a few different frames to create a looping video.

19. Gradient

The transition effect on a colored background. Great for adding depth and making your website look more dynamic.

gradient20. Hex Code

6 digit color code that is used to tell browsers what colors to load on the web page. For example, the hex code for the blue on this website is #283427

21. JPEG

A common file format is useful for digital photography on your website. It compresses the image in a lossy format, meaning some quality is lost if you reduce the file size. Also, the background is NOT transparent.

22. PNG

An image format that compresses an image in a lossless way. This means no quality is lost as you reduce the file size. Its background is also completely transparent, which comes in hand very often when developing a website.

23. White Space

The amount of empty (or negative) spaces around an image. Used to draw attention and establish a minimalist design. The Google homepage is a great example of how white space can be used.

40 Web Design Terms To Know

Source: Adobe Blogs

24. Header

The first above the fold row you see on a webpage. “Above the fold” simply means what is viewable before you scroll down on a webpage. They’re meant to grab the users attention and make clear what that page is about.

25. SEO

Search Engine Optimization. The art and science of optimizing your website and its content to rank at the top of Google and other search engines.

26. Page Speed

A metric used to determine how fast your website loads. An important metric for SEO and ensuring users have a good experience on your website.

27. Style Guide

A brands style guide lays out the colors for the website and the typography that will be used.

40 Web Design Terms To Know

Source: Venngage

28. Color Palette

The range of colors to be used on a website. A well-balanced color palette uses colors that contrast well together to achieve an overall pleasing look.

29. Cache

Refers to information that a browser will save when you load a webpage. The browser uses this information from a previously loaded webpage to load faster the next time a user visits.

30. Conversion

A conversion is any action that a user takes on your webpage that you deem to be valuable and thus want to measure. For an e-commerce website, this would be completing an order. For a service based business, this would the completion of a form on a webpage. Measure the conversion rate of particular pages and offers allows you to evaluate their effectiveness.

31. Call To Action (CTA)

An element on a webpage that is highlighted with an accent color that contrasts against its background and encourages a user to take a specific action. When a user clicks on a CTA, it is usually considered a conversion. In the example below from Slack, the “Get Started” button is the CTA. Once a user fills in their email address and hits that button, an account is created and thus Slack gains a new user.

40 Web Design Terms To Know32. Favicon

A small image that loads in the browser tab. Usually a company’s logo.

40 Web Design Terms To Know33. SSL Certificate

Standing in for Secure Sockets Layer, it is used to ensure websites connected to the web server is secure and encrypted. It is especially important these days, as Google Chrome labels websites that have an SSL Certificate as “not secure”. That’s an immediate red flag to all new visitors.

34. HTTPS

Standing in for Hypertext Transfer Protocol Secure – it’s a more secure website connection than HTTP that was the standard of the past. It adds extra security with an SSL certificate that encrypts the connection to a webpage. This ensures any data you enter into a webpage (like credit card info) stays safe.

35. Navigation Bar

The bar at the top (or side) of a webpage that allows a user to navigate to different pages on the website.

36. Lazy Loading

An image loading format that increases page load speed by not loading elements until they are about to be scrolled into view.

37. Responsive Design

A feature of modern websites that allows them to “respond” to the width of the screen they are viewed on. This allows the website to look good no matter if it is viewed on mobile, tablet or desktop.

38. Slider

An image slider that rotates in new images every few seconds. Useful for giving your website a dynamic look.

39. User Experience (UX) Design

The study and process of creating a positive user experience by ensuring webpages are usable, accessible, and easy to use.

40. Content Delivery Network

A content delivery network is a network of connected servers that your website can be hosted on. Utilizing a CDN spreads the server your website is hosted on over a wide geographic area. This way, when a user goes to your website the browser will ping the nearest server, improve the loading speed of your website.

Why Study These Web Design Terms

Learning these web design terms are key for you and your web developer/designer to communicate effectively. Learning these will also empower you to be able to better tell your web designer what you want your website to look like. We promise they aren’t that complex and after a while, you will be using them like a seasoned pro.

Until then, we recommend keeping this list of web design terms handy for reference.

Bailey Canning

Bailey Canning

Bailey Canning is a digital marketing consultant & web designer based in Northern New Jersey. Right out of college, he founded Inbound Web Development - a marketing-focused web development firm that helps small businesses generate leads and grow online. Feel free to reach out at bailey@inboundwebdevelopment.com to discuss a project, or be featured as a guest on the podcast Business Talks.

Send this to a friend