Website Anatomy

Let's do a quick overview of website anatomy! The easier we can communicate with each other the smoother the process goes, but don't worry there won't be a quiz. The main goal here is to provide a resource that you can reference from time to time when you can't quite find the words you are looking for! 

Homepage
The Homepage is the first thing visitors see when visiting your website. This is used to capture the visitor's attention and convey your main key points as quickly as possible! This is also usually the most intricate page on the website and generally takes the longest to build. 

Interior pages 
Interior pages are any other pages on your website that are not your homepage. These are typically used to house the more specific information and details that are not included on the homepage! 

Navigation bar
Your navigation bar is the primary means of transportation for your website visitors. Located at the top of every page, the navigation bar covers the key areas you would like users to visit. Typically Home is the first option on the navigation bar followed by the most important pages as users read from left to right. 

Here is an example of a navigation bar with the options of Home, About, Services, Blog, and Contact. 

Dropdown menu
Dropdown menus can be added to the navigation bar. This is used when an option on the navigation bar is too big to have all of its content on one page. So we break it down into multiple pages and list them in a dropdown.  

Here is an example where "Services" was too big, so we broke it down into two pages "Web Design" and "Our Portfolio." 

Hamburger button
This was named after the button's resemblance to a hamburger and is used to hide navigation bars when visitors are browsing a website on a smaller screen (such as a mobile device). It still allows access to the navigation bar but tucks it out of sight so that it doesn't take up screen space.

Here is an example of what a hamburger button looks like on this site. 

Favicon
A Favicon is an important part of your website's branding! This is the small little image that appears on your web page's browser tab. Typically a logo is placed here.  

Here is an example of Amazon's Favicon. 

Homepage hero section
Homepage hero sections are the top section of the homepage located just under the navigation bar. This is typically an eye-catching image or video accompanied by some text and buttons. This usually highlights the most important message that you are trying to convey to your visitors. 

Here is an example of a header hero image with supporting text with a button. 

Page headers
Page headers are used for interior pages and typically display the title of the page. This labeling helps visitors remember which page they currently are on. These are typically header text with a colored background to match your theme, but we can do modifications to fit your needs! 

Here is an example of a page header, with a grey and red color scheme.

Section Width
Section and content width information can be really helpful when it comes to page design! Would you like a simple 50/50 split with an image on the left and the text on the right, or do you have something else in mind? You may want to add an image and have it centered and stretch 90% across the page leaving a 5% gap on each side. Providing some sort of indication on the size of the objects on the page can be helpful for us to provide work that matches what you have in mind! 

Here is an example of a 50/50 split. 

2x3
We sometimes use 2 by 3 or 1 by 4 to reference a section. This describes how many rows and columns make up the section's content. 

Here is an example of a 2x3, because there are two rows of three images.

Image carousels and sliders 
Image carousels and sliders are a great way to show lots of images in a small space. This is oftentimes used to show advertisements, products, locations, etc. Carousels and sliders are essentially the same things, the main difference is a carousel will show multiple images at once were as a slider displays a single image at a time. 

Here is an example of a slider:

Here is an example of a carousel: 

Text justification and styles 
These are just the standard options that we are all familiar with. Left, right, and center justified changes where the clean edge of the text block is. Most text (including these instructions) is left-justified, but it is pretty common to have bigger things like page titles centered! There is also Underlined, Italicized, and Bold. These are great tools to draw the reader's attention to the important content in the text.  

The other text style that is very important when it comes to website design is link color. We oftentimes will recolor link text to match the website color scheme to help it stick out to your readers. 

Buttons 
Buttons are designated places for the visitor to click to take them to another page or different content! Buttons are everywhere and are used all of the time! The items in the navigation and dropdown menu are buttons. Buttons can be in forms, at the bottom of the page, but are typically colored boxes with labeling text placed on top of them.  

Here is an example of a "Watch Video" button in the bottom left corner. 

Link's and new tabs 
Links are what bring you from one location to another. The link is what the new destination will be. For example, www.google.com is a link that will take you to Google's homepage. Links are placed inside buttons, text, navigation bars, dropdown menus, and placed inside images.

We can also have links open inside a new tab. By default, links will open in the same tab you are already on. Opening a new tab can be helpful when you don't want users to leave the page they were on when clicking the link. For example, if they are wanting to view a PDF it's nice to have that appear in a new tab instead of taking the user off the website and into the PDF. 

Forms and triggers 
We can add forms and triggers to your website as well! These are generally used in the contact us sections. We can collect visitor-submitted information and then set a trigger to email that information to you after it has been submitted. This is a great way to connect with your visitors, but can sometimes be abused by spammers. We place spam filters on your forms which will block most spammers. 

Here is an example of a contact form.