Skip to Main Content

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