Reding time: 6 minutes 23 seconds
Published: September 20 2022
Web Design Basic Vocabulary
This article is dedicated to anybody who is taking their first steps in web design. It’s hard to learn a new skill if you don’t know the terminology. Here you will find a complex list of the most useful web design terms so that those YouTube videos that you’re trying to watch won’t sound like gibberish anymore. And if you want to also know how to run a web design business, read this article.
Before we get to the list, I’d like to clarify that you are about to read web design, not web development vocabulary. So if you want to learn how to code and hope to find some explanation here, you will be disappointed. If you are at the beginning of your journey in web design, check out our article: how to become a web designer.
Now that we get this sorted out, let’s get started.
*** a cute puppy to keep you excited and motivated ***
Web design terminology
1. Alignment
Positioning of your design’s elements like text, images, buttons, etc. Elements can be aligned to the page (e.g. to the right margin) and to each other (e.g. centered).
2. Balance
Even distribution of the website’s visual weight. It usually means a symmetrical placement of elements resulting in a cohesive, harmonical look on the page.
3. Body copy / Body text
Main written content on the website. Needs to be clear and readable, written in font with simple character shapes.
4. Breadcrumb
A navigation element. Small links, usually placed under the header, help the user understand where they are. It usually looks like this homepage > page 1> page 2.
5. Call to Action
CTA for short, it’s usually a button that asks a user to take an action such as signing up for the newsletter, registering, buying, or filling out a contact form.
6. Color schemes
A combination of colors used throughout your design. Sticking to a color scheme allows you to create a cohesive and professional website. Different combinations can evoke specific associations based on color psychology and color theory.
7. Content
All the text, images and videos on the website. You should pay attention to the quality and quantity of the content as well as the way it’s presented.
8. Content Management System
It’s a platform where people who are not designers can edit the existing and add new content to the website without interfering with the design. In WebWave you, as a web designer, can permit access to the CMS and decide on the level of entitlement.
9. Contrast
Contrast reflects how striking are the differences between website elements. It usually means differences in colors. CTA buttons are usually created in contrasting colors to let them stand out.
10. Domain
It is basically a website’s address.
11. Dropdown Menu
It’s a list of links to other pages that appear when a user hovers over a menu item. Hover over Features&Solutions in the menu on top of this website and find out what a dropdown menu is by yourself.
12. Favicon
It’s a small icon that is displayed next to the website’s domain in the browser address bar. It’s usually your logo.
13. Fixed element
It’s an element on your website that is permanently fixed and won’t change its position when the user is scrolling down the page.
14. Focal point
It’s a part of a website where you are directing user’s attention. It’s the most important part of the website and what form it’s gonna take is up to you. It can be an image, a text, a banner, etc.
15. Footer
It’s a part of a website that stays at the bottom of it and looks the same from page to page. A footer often contains contact info, links to social media profiles and website navigation.
16. Forms
A website element used to collect usually contact data from users. Users have to fill out input fields and submit their answers. It’s a pretty standard page element that does not vary much from project to project.
17. Gradient
It’s a gradual blending from color to color, also known as a color transition. Gradient color fading is a trend in not only web design that allows to create an airy and modern look.
18. Grid
It's a structured layout of a website. Crossing lines help to align elements.
19. Header
It appears at the top of the website and looks the same on every page. It usually contains of company’s logo and navigation helping to get around the website.
20. Heading
Titles that help to organize the content on the page. Are utilized by search engines to scan content and rank it.
21. Hero
It’s the main image on a page. It’s usually accompanied by a CTA and becomes a focal point of a website.
22. HEX
It’s a code representing a color in HTML and CSS. Each color has its own number.
23. Homepage
It’s the main page of your website. It’s usually the first page a user is visiting and from there they take a further trip through the website. The homepage should give a general representation of what the website is all about.
24. Hosting
It’s a service of a website storing and making it accessible to the Internet. Every website needs to be hosted somewhere.
25. Hover State
A website element is in a hover state when a user places the cursor over it. Elements in a hover state look different when in a hover state to suggest users that they can interact with it.
26. HTML
It’s a language in which a website is coded. If you want to create a website without coding, the best thing you can do is use a html website builder, like WebWave.
27. Icon
It’s a simplified sketch / drawing / rendering of an object or a concept. Think about an envelope icon suggesting that the following letters are an email address.
28. Infinite scrolling
The content is loaded continuously as the user scrolls down the page. It’s a good way to keep user interested and prevent them from leaving the website.
29. Layout
It’s the way all the elements are arranged on the page. One of the most common website layouts are Z and F-patterned.
30. Link
They allow users to go from one page to another. Links can be in text, images, buttons, etc. They should be usually visually distinctive to encourage users to interact with them.
31. Loading speed
How fast the website loads on devices. The higher the loading speed, the better, of course. Web design influences the loading time.
32. Margin
It defines the amount of space outside of the element’s borders.
33. Menu
Alist of main links that navigate the user around the website. The menu is also called primary or main navigation. It’s usually on top of the website.
34. Mockup
It’s a way of demonstrating the design in action, for example, a model of a product or an image of how your website project will look on a screen.
35. Navigation
The system that allows users to go through the website. The most common element of navigation is a menu, but it also includes links, buttons, etc.
36. Opacity
Opacity means if the element (image, button, icon, etc.) is solid or transparent. You can manipulate the opacity and change the look of the design.
37. Padding
It defines the amount of space inside of the element’s borders.
WebWave AI Writer
Generate your website copy with just one click.
WebWave AI Writer
Generate your website copy with just one click.
38. Pagination
As opposed to infinite scrolling, content is separated into different pages on the website. The page numbers are used to navigate through them.
39. Parallax
It’s a scrolling effect when background elements on a website scroll at a different speed than the foreground. It created depth and a more dynamic feel to the design.
40. Pixel
It’s the smallest element of a digital image.
41. Repetition
Use of reoccurring elements in web design helps to create patterns and a sense of familiarity that enhances user experience.
42. Resolution
It means how many pixels in contained in a display screen or in an image. A higher resolution means a larger size and better quality.
43. Responsive design
Responsive web design means that the website is adjusted to the screen size of the device that it will be displayed on. Responsiveness is currently one of the most important principles of web design.
44. Saturation
It means how dull or intense is the color.
45. Slider
It’s a slideshow (usually of images) on a website.
46. SSL
Secure Socket Layer (SSL) is a security technology for encrypting transmitted information. It’s advised for websites to have an SSL certificate.
47. Stock imagery
Images created without a particular project in mind, licensed and usually available for free to use in various designs. You will usually use stock images in your projects, not only to create templates but also for final designs.
48. Toggles
On/off switches.
49. UI
User Interface (UI) Design is the way of designing and planning how everything will look on screen. It’s important for web designers to keep in mind the main principles of UI which cover graphic design and website usability.
50. UX
User Experience (UX) basically means how the user feels when they interact with the website. The main premise of UX as a discipline is to understand users' goals and needs and fulfilling them within the design. A website should be intuitive.
51. Usability
It reflects how easy it is to use a website and if the way a user interacts with it falls within the designer’s intentions.
52. Wireframe
A sketch of a website, usually made out of lines and boxes. It helps to place all the elements without going into the details.
53. Whitespace
It’s an empty space between elements on a website, also known as n negative space. The right use of whitespace can serve many purposes from aesthetic ones to increasing usability.
54. Viewport
It’s a visible area of a webpage. It can be any size and is connected to responsive web design since viewports change within used devices.
Now you have it - a complete list of web design vocabulary for beginners. Don’t wait any longer and create your very first website.
Other articles.
WebWave website builder is your AI-powered solution for building an online presence. Create your website in 3 minutes, add an online store or a blog, and grow your business.
We created this website with WebWave.
Follow us on social media
Company.
Help.
Templates.