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.
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.
3. JavaScript
The programming language that allows for dynamic content on websites and robust applications, think animations and widgets.
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 world's 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.
7. Plug-ins
Like apps, but for your website. They add extra functionality to your website and are a big reason why WordPress is so popular. With plug-ins, 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.
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.
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.
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 helps it stand out.
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
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.
20. 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.
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 is 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.
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 be the completion of a form on a webpage. Measure the conversion rate of particular pages and offers allow 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.
32. Favicon
A small image that loads in the browser tab. Usually a company’s logo.
33. SSL Certificate
Stands 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 secured”.
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 or 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.
