The Anatomy of an Effective Website: Elements and Terms You Need to Know

There's a lot that goes into building the right website for your business. If you don't know where to start, we'll give you some tips and terms so you can get started today.

Let's go over a couple of key terms that are a part of pretty much every effective website.

Featured Image

A featured image is used to represent a particular page or post. Take the HubSpot Website Blog as an example.

Each image associated with a blog post is a featured image. Featured images are used to give a face to a post so that people are more likely to click on pages and recommended links.

Web Form

Web forms are used to convert site visitors into qualified leads through a short series of questions to glean information from the reader in exchange for an ebook or other content offer. This is a flexible tool that can be placed anywhere it fits by developers. You can build a web form in seconds with HubSpot's free form builder.

Landing Page

The landing page is where your primary goal is converting customers into leads with an offer. A landing page differs from web forms in that a landing page is less flexible. While web forms can be placed on any page that it belongs, a landing page is a specific place where you want to lead potential customers. Here's a quick video that goes into a little more detail on landing pages.

CTA

While there are many types of CTA, or call-to-actions, the primary use is generating leads for your website. Here's an example of a CTA for the aforementioned web forms.

Header

A header is a one-line strip or menu that sits at the top of the website. Here's what that looks like for HubSpot.

Search Bar

As simple as it sounds, a search bar helps users find exactly what they're looking for on your website. Designing an effective search bar can be tricky, but it's doable with the right tools at your disposal.

Breadcrumbs

Breadcrumbs are a navigational tool that tells users where they are in their site-reading journey. 

This is an example of a location-based breadcrumb hierarchy, showing the user the current page they're on along with each parent page.

While there are obviously some terms that didn't make it to our glossary, these should serve as a good baseline for fleshing out your website. If you still don't have a website, use HubSpot's free drag-and-drop website builder to get your website up and running in minutes.

Now let's go over three principles for designing your effective website.

1) User-Dentered Design

User-centered design is a five-step process that we'll briefly outline below.

• Research users to understand how and why they would use your product
• Align user goals with business goals
• Build solutions and products for user pain points
• Test to make sure that your website answers user pain points 
• Iterate on your website over and over until it's ready for market.

Following these steps can help ensure that you and your users are always on the same page. 

2) Intuitive Navigation

A good website navigation can help your customer satisfaction and in turn your lead conversion rates. Generally having a good navigation menu is a big part of good website navigation. Check our example of a header above. Having your menu in the header is the best way to make sure that your customers will find exactly where they need to go. 

3) Effective Calls-to-Action

Visitors usually visit a website to do something. They just might not know what that something is quite yet. It’s the role of the home page to make offers to move readers forward in their research and/or buying process. Top-of-funnel and bottom-of-funnel offers help them do just that.

Here's a great example of structuring your website around the call-to-action.

Notice how the simple 'shop now' button in the middle of the image is highlighted without being obnoxious or in your face about it. You can also get to the same place by scrolling down, which is a natural next step after loading a page for the first time. For an ecommerce site, this is a great example of an effective call-to-action.

Building an Effective Website

Building an effective website requires understanding key terms and  incorporating user-centered design, intuitive navigation, and effective calls-to-action. You're ready to start implementing these strategies today.