# Site Organization

### Major Concepts

The following are some major concepts that should be considered when creating the site in which the exhibit lives.&#x20;

**Information Architecture (IA)** - The structure of the site (e.g., the site hierarchy, the way pages link to each other) and the labeling of information so that it is understandable and navigable. (Read [Information Architecture Basics](https://www.usability.gov/what-and-why/information-architecture.html) and see below.)

**Taxonomy** - A component of IA that involves the language chosen to label menus/navigation bars,  page headers, etc. (Read [Website Taxonomy Guidelines and Tips](https://martech.org/website-taxonomy-guidelines-tips/).)

**Navigation** - The means by which one moves within a site and finds specific information, e.g., the site navigation menu. (Read [Supporting Navigation and Wayfinding](https://accessibility.huit.harvard.edu/support-navigation-and-wayfinding).)

* **Wayfinding** - Related to navigation, wayfinding is how one knows where they are within a site and if they are able to find their way back to information to which they previously navigated.

**Page Organization and Layout** - The way content (text, images, video, etc.) is organized on a page. (Read[ What Do Common Web Layouts Contain?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Common_web_layouts) and see below.)

### Planning Your Organization

When planning your site, it is helpful to sketch out your information architecture in diagram form and draw wireframes to plan page organization and layout.

#### Information Architecture&#x20;

The following provides an example of an information architecture diagram for an exhibit on the history of cats. Looking at the diagram, you can get a sense of how the curator decided to organize the exhibit's content logically (which could have been done in a multitude of ways) and structure the site in which the exhibit lives accordingly.

The exhibit site has a hierarchy of only two levels: the _Home_ page is the top level and the rest of the pages are the second level. The terms _History_, _Breeds_, _Culture_, and _Readings_ are part of the site's **taxonomy** and will be the labels in the navigation menu that users click to find their way to the various pages.&#x20;

![](https://4055173823-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LgXtIWpHMikxGQHLU5T%2Fuploads%2FyoAJOLOTIRXXCtw0rAEn%2Fia_cats.jpeg?alt=media\&token=c9275331-b383-4a30-8cb7-7dbaf15d08c0)

**Accessibility image description:** The diagram shows the structure of the site, which is made up of ten different web pages. At the top (or the first level of the hierarchy) is the _Home_ page, represented by a rectangle with the word _home_ written on it. Below that is a row of terms that run left to right. They are _History_, _Breed_, _Culture_, and _Readings_. Lines make them look as if they are branching off of the _Home_ page. (These terms will be the labels in the navigation menu.) Branching off of these terms and situated below them are rectangles that represent pages. These pages make up the second level in the site's hierarchy. Branching off of the term _History_ are the pages _Wild Ancestors_ and _Domestication_. Branching off of the term _Breeds_ are the pages _Short Hair_, _Medium Hair_, and _Long Hair_. Branching off of the term &#x43;_&#x75;lture_ are the pages _Cats in Art_, _Cats in Literature_, and _Cats in Animation._ Branching off of the term _Readings_ is the page _Further Readings_.

#### Page Organization and Layout

[Wireframes](https://www.usability.gov/how-to-and-tools/methods/wireframing.html) are simple drawings of web pages that help with planning the organization of content and layouts. Below is an example of a wireframe for a page in the _History of Cats_ exhibit. Here you can see that when one clicks on _Culture_, options for the pages for cats in art, literature, and animation appear.

_Cats in Art_ is the page's main header (also known as _header 1_ or _h1)_ and lets users know the page's title and the overarching topic. The other headers, _Ancient Representations_ and _Classical Cats_, are second-level subheaders (also known as _header 2_ or _h2_). Each subheader introduces or frames the content to follow and is assumed to apply until a new header is used. If _Ancient Representations_, for example, had subsections like _Ancient China_ and _Ancient Greece_ those would be _header 3_ or _h3_. Notice the pattern forming? Like the structuring of sites, pages are also structured using a hierarchy.

![](https://4055173823-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LgXtIWpHMikxGQHLU5T%2Fuploads%2FZ9lWcMzm3t6IogBIfSR4%2Fpage-cats.jpg?alt=media\&token=1cd6fed0-f5dd-4766-9c24-99c0bada9ca4)

**Accessibility image description:** The image shows a barebones black and white drawing of a web page. At the top is the exhibit's title, _The History of Cats_. Below that is the navigation menu, which has the options _Home_, _History_, _Breeds_, _Culture_, and _Readings_. As if someone is clicking on the term _Culture_, a dropdown menu appears just below the word and has the list of links _Cats in Art_, _Cats in Literature_, and _Cats in Animation_. The featured page is _Cats in Art._ Those words appear as the main header on the top left of the page just below the navigation menu and are in the largest font on the page. Below this header are large rectangles that function as placeholders for what will be three images in the future. On the right side of the page just below the navigation menu is the subheader _Ancient Representations_, which is in the second largest font on the page. Below this subheader, there are lines that abstractly represent a block of textual content that will be added later. Below that content is another subheader, _Classical Cats_, which is the same font size as the previous subheader, and below it are also lines that represent a block of textual content.&#x20;
