Website Anatomy

Website Anatomy | Varro Creative
When you want to begin a new website project, you have a lot to think about, and chances are there are a lot of new terminologies to understand. To set you up for success, it helps to familiarize yourself with basic website anatomy and vocabulary. It will help you better communicate with your website designer so you can get your points across.
Website Anatomy Graphic

Business logo. Horizontal format typically works best. 

1 of 12

Is typically a large image or visual placed on the home page of the website.

2 of 12

The headline helps visitors understand the site’s content, products or services.

3 of 12

Short overview videos can be powerful website content.  

4 of 12

Images, text, graphics and media make up the website content.

5 of 12

The bottom part of the website, typically has copyright information.

6 of 12

A set of the most prominent links on the website, that helps the user navigate. 

7 of 12

Is typically the child-pages under the main navigation, typically displayed as a dropdown.

8 of 12

Images, text, graphics and media make up the website content.

9 of 12

A visual element asking users to complete an action.

10 of 12

Rotating set of images that change every few seconds.

11 of 12

A simple way for your web visitors to contact you directly through your site.

12 of 12

The homepage is essentially the main or first page that someone sees when arriving at your website. It usually acts as an overview, to give visitors an immediate sense of what you or your business offers. It is the jump-off point to lead them to explore different parts of your website.

The header is the top area of the page, that usually looks the same across every page of the website. It typically contains the logo and navigation, but sometimes has other items like social media icons, a shopping cart or a search bar. When a header is ‘sticky’ is always stays at the top, even when you scroll.
The Business logo should always be in the top left (the first point of sight). Horizontal format typically works best on websites.
The headline helps visitors understand the site’s content, products or services. It’s important for the headline to be short and clear, to make a strong first impression so visitors can decide within seconds whether to stay on the site or to move on.
Is typically a large image or visual placed on the home page of the website. It is often meant to grab attention when visitors first arrive.
Sometimes called ‘primary navigation’, this is a set of the most prominent links on the website. The Main Navigation shows on every page, and helps the user navigate through the main website content.

Also called ‘secondary navigation’, sub navigation is typically the child-pages found under the main navigation items in a hierarchy, popularly displayed as a dropdown menu. This helps organize websites with a lot of content, so it’s fast and easy to navigate to specific pages.

Dropdown menus reveal themselves when a user rolls over a main navigation item, showing a list of child pages (sub navigation). Dropdown menus help a user dive deeper into website content quickly.

Links allow website users to get from one web page to the next. They can be in the form of text, buttons or images. Text links are typically highlighted in some way, such as using a different color to make the words stand out from the rest of the copy. 

Also called a hover state, this is a color change or slight animation that happens when a user rolls their cursor over a link. This helps ensure that site visitors know they are able to click the element and be linked elsewhere.

It is the images, text, graphics and media that make up a website. Typically speaking, this is what visitors coming to the website are most interested in.
A Call to Action is a visual element asking users to complete an action. Some typical examples are; subscribe to a newsletter, donate to a cause, sign up to an event or download specific documents, just to name a few.
A breadcrumb is a trail of links at the top of the page that shows a user where they are within the website hierarchy. For example; Home > About Us > Our History. Each item is typically a clickable link, that allows them to quickly backtrack to other pages in that section.
A carousel is a rotating set of images that change every few seconds. The images can be linked, and its useful for showing a collection of information, such as a set of client logos.
A sidebar is part of the layout of some pages, usually a column that is ⅓ the width of the page, either set to the left or right. It usually has useful pieces of information relating to that page, such as links to other areas of that section, highlighted information, downloadable documents, etc. It is very typical for blogs to have sidebars, which is usually where Recent Posts are listed, along with Categories, Tags or Archives.
A contact form is a simple way for your web visitors to contact you directly through your site, so they don’t have to switch to their email or phone.

A footer is the bottom part of the website. Similar to the header, the footer stays the same on every page. A footer typically has copyright information, links to privacy policies, and contact information, but can also be more complex and show additional navigation, social media links, have newsletter sign ups or other useful information.

Facebook
Twitter
LinkedIn
Email
Want to know more about how digital media can help grow your business?
Get in touch and let's start the conversation
Connect with us
Scroll to Top