21 Web Design Terms You Need to Know
Do you know what breadcrumbs are? How about a CTA? A wireframe? I’ve put together a list of 21 common web design terms to help you better understand what web designers are talking about. They’re clearly explained, some with examples, which will aid in grasping the concepts.
If you’re interested in visiting any of the websites used as examples, I have a list with links at the end.
Making a website accessible is a requirement for some businesses depending on certain factors such as where you live, but it’s also a common courtesy. For those with hearing and/or visual impairments, having an accessible website allows them to be able to access it.
For those in Ontario, or anyone wanting an idea of what may go into designing and building an accessible site, you can check out https://www.ontario.ca/page/how-make-websites-accessible.
Breadcrumbs are used to let a user know where they are, in terms of the hierarchy of pages, within a website. The farthest right is the page the user is currently on. In this example it’s Home > Apparel > All Tees, with All Tees being the current page.
A content management system, such as WordPress, Joomla! or Drupal, is a platform that manages the creation and modification of web content. You don’t need much, or sometimes any, coding knowledge, and it’s easier to collaborate on.
A CTA, or call to action, is a button and/or phrase that tells a user to do something or go somewhere. You’re getting them to perform a desired action.
A favicon is a small icon that is seen on browser tabs, in bookmark lists, and more. It builds brand awareness and is often a version of, part of, or compliments, your logo.
6. Fixed / Sticky Nav
When you scroll down a webpage, you may notice the navigation following you down the screen. This gives you access to the navigation no matter how far down you’ve scrolled, and is known as a fixed or sticky nav.
7. Fixed width Layout
A website with a fixed width layout has the width set to a specific numerical value. When the screen gets wider or thinner, the web content will remain the same width. With a wider screen, you will see blank space on the left and right. This is unlike a liquid or fluid layout.
8. Hamburger Menu
A hamburger menu has 3 horizontal lines that are stacked and is most often seen on mobile devices. It collapses all of the navigation items at first so they’re hidden, and toggles between this state and revealing the menu. It keeps things tidy and simplified on phones, tablets, and sometimes on laptops and desktops too.
9. Hero Image
A hero image is the the large first image or graphic you see when entering a website. It’s at the top of the home page and engages users with a call-to-action.
10. Hex Code
Every colour has a hex code, and these are used to create the colours of a website.
12. Liquid / Fluid Layout
A liquid or fluid layout is made through relative units like percentages, so that no matter the width of your screen, the content is flexible and will fill the space. Even if you’re using a very large desktop, the web content will still extend to the edges of the screen, unlike a fixed width layout.
13. Mega Menu
A mega menu is a type of dropdown menu that includes many page links. It’s organized in a way that prevents the menu from being infinitely long, and includes columns.
A website’s navigation, navigation menu, or nav (all the same thing), allows the user to have an easy way to find their desired page on a website. If a website has a secondary nav/menu, this is typically seen at the very top of the page with additional information than what’s found on the main nav.
15. Responsive Design
Responsive design means that a website is designed to be fully optimized (in both looks and function) on any device, such as a desktop, laptop, tablet, or phone. The design will be different on each device, especially going from desktop/laptop to mobile, so that the user gets the best experience possible.
SEO, or search engine optimization, is crucial for your website to be seen. Optimizing your website helps your ranking in search engines, and therefore can increase your organic reach.
To learn more about SEO and how to implement it, visit HubSpot’s Ultimate Guide to SEO.
The sitemap organizes the pages that will be included on the website. In addition to mapping out where each page will go, it also shows a brief description of what will be found on each page.
18. Style Tiles / Style Guides
Style tiles, or style guides, give a general idea of how the website could look and feel. It may include colours, fonts, button styles, textures, images, descriptive words, icons, or more.
19. Web Designer
A web designer designs the way a website will look and how it will work. They figure out the best ways to display a company or brand’s information and ensure their goals are met. They take into account market strategy, function, trends, what the client needs, what the client wants, and more. It’s about form and function.
Wireframes are based off of the sitemap. A wireframe is the bare bones or structure of the website, and shows where content, both written and visual, will go. This will likely be changed in the actual design, but what’s important is the hierarchy of information.
21. UI & UX Design
UI design is user interface design, in which the focus is on how things look. The design must be intuitive, guiding the user to where you want them to go.
UX design is user experience design, where the focus is on the user’s experience and how things work. This includes focusing on functionality and usability so that the user doesn’t have to think.
For a great resource to learn more about the difference between UI and UX, check out freeCodeCamp.
Hopefully you have a better understanding of web designer lingo now that you’ve seen the meanings of some common terms. If you come across any other terms that you don’t quite understand, don’t be afraid to ask! We just want to help and make things easy for you. 🙂
If you’d like to visit any of the websites featured in this list, you can check them out below: