If you’re starting a web project, you’ve probably got a lot on your mind. What colors do we want to use? Where are we going to to find images? What on earth is a CTA? How are people going to find our site? Are we going to end up with a product we love? But before you dive into these details, make sure you’re familiar with basic web design vocabulary.
It’s important to know the parts that make up a whole website. With website layout terms under your belt, you’ll be able to talk to your designers and developers with additional confidence.
Web Design Vocabulary List
Does it feel like there’s an endless amount of website terminology to learn and keep up with? Here are some foundational website anatomy terms to get comfortable with as you start to talk about the layout and design of your site.
A website header is located at the top of each page of the website. The header typically looks the same from page to page and contains an organization’s logo and navigation, creating a central hub to get elsewhere on the website.
All websites should have primary navigation. Primary navigation is typically a list of prominent links toward the top of the page, with titles that help users determine where they want to go from wherever they are at on the site. The primary navigation features the parent pages of a website, which are typically broad topics leading users to related, more detailed, child pages.
Secondary navigation is typically found in the website header above the primary navigation. While the primary navigation is considered the main nav, secondary navigation can include helpful items for users that maybe need to be highlighted. A lot of times you’ll find action items like Log In, Donate, or Volunteer.
Dropdown menus reveal themselves when a user rolls over a primary navigation item, showing a list of child pages (so named since they stem from the parent pages). Dropdown menus help a user dive deeper into website content to find strategically organized pages.
A search bar is typically located in the upper right-hand corner of the website’s header. It is usually noted by the word “Search” within a form field, or includes some sort of magnifying glass icon. Here, users can type in a word or phrase they’re looking for more information on and then be taken to a results page listing website pages that may have related content within them. This functionality is helpful for site visitors that may know exactly what information they’re looking for but don’t want to browse through your navigation.
Links allow website users to get from one web page to the next. They can be in the form of text or an image. Text links are typically highlighted in some way, using color to make the words stand out from static copy or making the text look like it’s in a button. Images can be highlighted with some sort of color overlay, words or symbols to make it obvious that it’s clickable. All links, regardless of how they are visually represented, should have some sort of hover state to indicate its clickability.
A hover state (also called a rollover state) is the slight animation that is triggered when a user rolls their cursor over a link. This helps ensure that site visitors know what they can and cannot click on throughout the site. A hover state can be as simple as a button changing color or as complex as design elements moving or fading in and out.
A selected state is usually found in a list of navigation links to show what link is selected at that moment. This is a great way to show a user where they’re at within the site. For example if a site visitor is on the About Us page, the “About Us” link in the header would have some sort of selected state activated. The text may be bold, underlined, a different color or all of the above.
A homepage is essentially the cover to your website. It’s usually the most unique page on your site, giving visitors an immediate sense of who you are as an organization. A homepage also guides them to other important information throughout the internal pages of your website.
Call to Action (CTA)
A Call to Action is exactly what it sounds like; a visual element asking users to complete an action. Common CTAs for nonprofit websites may request that users subscribe to a newsletter, donate to a cause, sign up to volunteer or download specific educational materials, just to name a few.
A breadcrumb is essentially a trail at the top of any given web page that shows a user where that particular page lives within the site structure. For instance, if someone is on a page about a nonprofit’s mission, the breadcrumb at the top might say Mission and Vision < About Us < Home. It’s an additional (but optional) way to let users understand where they are located on your site.
A sidebar can be a very diverse piece of a website and typically appears on the majority of a site’s internal or child pages. A sidebar is used to house important pieces of information that an organization doesn’t want to get lost within the body. It’s vital that this space be used wisely. If it becomes too cluttered, it’s less and less effective. In a sidebar, you may find additional navigation, pertinent CTAs, upcoming events, or even just additional bits of highlighted content. But navigation again? Yes! It’s smart to make it as easy as possible for users to find the content you’ve worked so hard to thoughtfully put together.
A footer is the caboose of any given site. Similar to the header, the footer stays the same page to page, but it appears at the very bottom of every single page of the website rather than the top. A footer is typically a very structured section of the site that serves as the last opportunity to get various information to your site visitors. Some organizations opt to keep this as simple as possible, with only copyright information. Some create large footers, repeating the primary navigation, a call to action or two, and a statement that they are a 501(c)3 to help build credibility. Social media links are another popular item for website footers.
Any way you slice it, creating a website can be a daunting task. Deciding how you want to portray your organization on the web for all to see is no easy feat. Hopefully with this list of web design vocabulary, you’ll feel more confident talking with web designers and developers as you work together to create something you’re proud to show the world.
Are there additional words or phrases that should be added to our list of website terminology? What terms do you find confusing? Let’s hash them out in the comments.