It’s not always easy to tell your web designer which parts of a website need improvement. Similarly, communicating what you envision for a new website can be like translating your needs in a foreign language! You know exactly what you want your site to look like in your head and have some great examples. But you’re struggling to find the terminology needed to make it happen with your website designer or web developer.
A marketing agency like Witty Kitty will hold your hand through the development process, with vetted employees you can trust. Sometimes freelancers just don’t have the time or resources to help you understand or advise you of how your choices will impact website traffic and sales. When we’re building a site for one of our clients, these are some of the most common parts of a website that we get asked about!
Popular Web Design Terms
Here are some of the most common web design components that you’ll encounter when discussing your website with a designer or developer. You can think of these as the building blocks of how your website will look and function. Or, different ways of organizing your site to make it easy for your customers to get the information they most need.
1. Navigation Bar (AKA Navbar or Main Menu)
The navigation bar is the circulatory system of your website, pumping traffic to your most important pages and helping your visitors find the information they need to make a purchase. There are a few different types of navigation bars. On a desktop, you’ll most likely always see a classic, vertical orientation nav bar, like on our Witty Kitty Digital Marketing website.
There are also:
- Sidebar menu’s (see below for sidebar definition)
- Modern grid-style visual menu’s that are commonly called “multimedia-based”
- Footer menu’s (also mentioned below)
While there are many unique parts of a website, as long as you know the term navbar, you’ll be just fine!
2. Hamburger Navigation (AKA Mobile Menu)
The mobile-friendly version of your website probably uses a hamburger menu. It’s called a hamburger menu because it appears as three stacked lines in the right upper corner of the mobile screen, and looks kind of like a tiny hamburger!
Humburger menu’s conserve space and make navigation less difficult on smaller mobile screens. When your customers click on the three lines an accordion-style, condensed menu of your website’s page navigation will pop up, making pages easier to select. And easier to hide when they’re done exploring the nav.
3. “Sticky” Navbar
What does it mean when a web designer or web developer asks you if you’d like your navbar or main menu to be “sticky”? It’s simple. Some navbars stay put at the top of the page as the visitor scrolls down to check out the page’s content. A “sticky” navbar stays with the customer as they scroll down your homepage.
The main benefit here is that your navigation can be accessed at any time—the visitor does not have to scroll back up to choose which page on your site they’ll visit next. Plus, the nav is always there should they need it. We love the ease of sticky navbars, which is why we use one on our site!
4. Hero Image (AKA Featured Image)
The hero image is a large, dramatic image at the top of each web page. Most websites have only one hero image, but your template layout may even have two side-by-side images in this space.
Either way, the hero image is the one that grabs their attention, helps illustrate who you are, what you do, and why you do it. This image is your business’s chance to jump out and say hello to your customer. Make sure it’s one of the parts of your website that has an IMPACT!
5. Slider (AKA Featured Image Slider)
Instead of a static hero image, some websites have a featured image slider. This could be super useful if your website needs to heavily promote content like blogs, case studies, or e-books. It’s also useful to showcase your best images, like for a design or art portfolio website.
We use a slider on our homepage to make sure our clients know about the most recent digital marketing blogs we have created. Check out our blog for more free resources!
6. Sidebar (AKA Side Menu)
We don’t use a sidebar on our website, but you should know about them when learning parts of a website!
Sidebars can help improve user experience on a blog, a shop page, or anywhere else where you want to highlight products or content based on topic and/or category. You can also use a side menu to suggest similar products your audience might also be interested in based on their browsing history.
8. Web Form
A web form is an important tool used by your web designer or developer to capture leads, collect emails for your email newsletter, or prompt a slew of other desired actions from your audience. Web forms generally have one singular goal—data collection—and include a headline, a short blurb of supporting body copy, and a strong CTA botton.
Your web form might be coded to send you an email (contact form). Or automatically add a customer to your MailChimp mailing list. Many plugins exist that can help your website talk to other marketing tools via web forms, and your design and dev team will be able to advise you! There are more in-depth info on the content terms (headline, body copy) I used here at the bottom of this article if you’re scratching your head.
A pop-up is like a friendly “hey there” from your website. It draws the visitor’s attention through disruption by popping up in front of your web content. Some pop-ups disappear after a certain amount of time. Some require the visitor to click an X or opt-out of participation to exit.
Honestly, pop-ups can be extremely annoying and totally wreck your user experience when used irresponsibly! If you’re going to use a pop-up, make sure you’re offering something of value. You might offer a free consult, a discount, a piece of free content they’ll love, or entry into a monthly giveaway. We recommend using only one or two pop-ups. Otherwise, your site may seem spammy.
10. Social Media Icons (AKA Social Logos, Links, or Buttons)
Most smart businesses promote through social. Social media icons are one of the basic parts of a website that you cannot forgo. You can choose to add them to your footer, main nav, contact page, or all of the above! Social media icons come in a huge variety of different styles and can be any size or color you like to match your branding.
There are also plugins that allow you to feature a gallery of your most recent social media posts on your website or design themes you can choose that already include this feature.
11. Favicon (AKA Browser Icon)
When you have multiple tabs open on your web browser, the favicon is the tiny icon you see displayed on each tab that identifies the web page. It’s usually a simplified logo that is easy to see at this small size.
Make sure when you launch your site that your web designer adds a favicon. Otherwise, a generic one will be featured, and you’ll lose a super valuable shot at keeping visitors on your website longer. If they can’t easily find your tab, they likely won’t return to the page and make a purchase!
12. Tile Design (AKA Grid or Card Design)
Tile design is super popular with modern website layouts because it allows you to organize and sort content visually. Much like Instagram or Pinterest, tile design is pleasing to the eye and can give your website a “pop” of color that will break up web copy (writing) and help your audience easily scan the most important content on your page.
Tile design is frequently used for blog previews, image galleries, or service menus. We use it to showcase some of our favorite clients on our Testimonials page!!
13. Content Block (AKA Content Segment)
When creating a website, designers will often use the same content block or content segment multiple times. We use the above content block on every Industry page. Content blocks can make your web design more harmonious and holistic. But what exactly does your designer mean when they say content block?
A content block could be a testimonial slider, a web form, or a tile design. It can also be a simple grouping of an image, a headline, a subhead, and body copy, that is repeated with slight variations on multiple pages of your site. Knowing these repeating blocks of your website can help you communicate with your web designer. Which content blocks do you like, which do you hate, and which need to be adjusted?
14. “As Seen In” Content Block (AKA Press HIghlights)
Trust signals are parts of a website that show you’re business is well-regarded in your industry, in the media, and with past customers. One popular section we use to convey trust is the “As Seen In” content block. If you display all of your recent press appearances—especially if they’re in well-known outlets—your customers will have proof that you can be trusted.
Want to know how to earn press mentions from popular news outlets? Check out Link Building for Small Businesses: Tips for More Effective PR Outreach and SEO.
15. Parent Pages (AKA Main or Core Pages)
Parent pages are the most important pages on your site that are featured in your main navigation. They usually link out to “child” pages, secondary pages that might appear in a dropdown, for instance.
The important thing to know is that parent pages with be the highest in your sitemap hierarchy and will usually be more complex and will encompass multiple content topics (like our Industries parent page). Child pages are usually simpler, have less copy, and will focus on one, drilled-down topic (Like our Medical page in the Industries dropdown).
Popular Website Content Terms
Website content is the writing on your pages that tells your customers about your business and explains the merits of your products. It’s extremely important that your website content be optimized for SEO and true to your brand’s voice and tone. Basically, how you want to sound when you talk about your business. Witty Kitty is happy to help you with an SEO audit or SEO-optimized copy!
When you’re working with a web designer, they’ll need to know where exactly your copy is going to go and which fonts you want to use on your website. This info is often passed on to you in a branding style guide. If you’ve worked with a graphic designer on a logo and branding in the past, this is a great place to look for guidance!
The headline is usually the largest font on your page, featured in the Hero image or closely under it. Effective headlines tend to be short and punchy, and should immediately grab the attention of your audience.
Subheads are often a medium font and support your headline. Some websites don’t use subheads—consider which content approach fits your brand best!
18. Body Copy
Body copy is the smaller font on your web page and is usually used in paragraphs and longer copy blurbs that support your headline and subhead with more information. Body copy is usually where you will find links to other pages.
19. CTA (aka Button Copy or Call to Action)
Call to action, referred to as a CTA, is what you want your customers to do. You might encourage them to make a purchase, join your mailing list, or download your free guide. It needs to be brief, powerful, and engaging to persuade them to click. CTA’s are often found on website buttons or on sales landing pages.
20. Link Anchor Text
When you see a hyperlink within website copy, it’s frequently blue so it stands out. Sometimes it is even underlined or coded to change color when you hover over it. This helps to grab your customer’s attention.
The text you highlight to indicate a link is called link anchor text. It lets visitors know which page or info they’ll see when they click on your link. It also impacts your SEO. To improve search engine ranking, you’ll want to make sure the link anchor text on your site is accurate and diverse.
21. FAQ (Frequently Asked Questions)
The FAQ section of your site is a real unsung hero as far as essential parts of a website are concerned. Which questions do you get asked most about your product, shipping, or returns process? Adding frequently asked questions to your website can help customers get the answers they need faster. And prevent your customer service team from having to answer the same questions over and over. Bonus: FAQ’s are also a huge opportunity to use relevant SEO keywords in your copy.
Find a Web Designer that Speaks Human
Need help repairing your website or launching a new business website? Now that you know the basic parts of a website, you’re one step closer! You have the language you need to instruct any web design or web development team to do exactly what you need. Next steps? Reach out to Witty Kitty! We’d love to put our skilled team to work making your website purrfect.