Skip to Main Content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.

Transformative Website Style Guide: Anatomy of a Website

This guide offers practical advice on creating a transformative library website.


Favicon - an icon associated with a URL that is variously displayed, as in a browser's address bar or next to the site name in a bookmark list.
Fold - the area at the bottom of a browser that is not visible upon the first load of the site.
Hamburger Menu - an icon comprised of three horizontal lines that toggles the menu.
Thumbnail - a miniature representation of a page or an image.

Effective Calls To Action (CTAs)

  • Share on social
  • Survey/Form
  • Sign up for an event
  • Discovery Search Box
  • Reference Chat
  • Reserve a Study Room

Website Anatomy

Header* - The top portion of the page that includes the most valuable information, logo and sliders/banners.
Navigation* - The menu of pages included on your site. This area could also include a search bar.
Body - The largest area of your page that contains 
Sidebar - A column (typically on the left side) that includes quick links to information and often times, a search bar.
Call To Action - Every great website has a call to action (CTA).  This will prompt your audience to actually do something on your site.  Examples are, subscribe to an email list, make a purchase, or contribute to something.
Footer* - The bottom portion of the website that contains links to the most frequently or most important pages of your site.  The footer is also a great place for contact information and FAQs.
*These areas are static and typically remain the same throughout your website