Information architecture

GDES-315 spring 2019 (David Ramos, American University Design) · office hours · interaction design resources

Design an interactive exhibit website that explores how structure—the relationships between discrete pieces of content—is itself a significant decision, contributing to user experience and creating meaning. Build the site with a template-based approach, using a static site generator or content management system.

For content, showcase Cooper Hewitt’s online collection, the collection of the Science Museum (London), Farm Security Administration/Office of War Information photos at the Library of Congress, or sites of the National Park Service. (These are all sources of freely-licensed or public domain material.) You might also choose content of your own, with instructor approval.

You can choose to work with a partner for this project; see the instructor first to plan.


These steps assume work in Jekyll/GitHub Pages. Substitute the name of another tool, if you are using a different one.

  1. Decide on a topic. Write up your approach, the audiences, and their needs.
  2. Information architecture and planning: design the site’s structure. Make a table (spreadsheet) of content, with names and metadata. Make a site map or a flowchart to describe how users should move through the site. Sketch out rough wireframes so that you know what information needs to go on what pages—pen and paper would be a good choice at this stage.
  3. Explore Jekyll. Set up a GitHub account and a repository for your site. Build a minimally-styled site using a small amount of test content.
  4. Make more refined wireframes, by hand or using a prototyping tool.
  5. Build static versions of key pages, in HTML/CSS. Then move those static versions into Jekyll templates.
  6. Add the rest of your content and test.

Jekyll (or similar tools)

Generate the site using a content management system or a static site generator.


Secure instructor approval for any existing themes that you use. (The answer is probably going to be “no,” for anything other than a theme offering minimal HTML and CSS.) Themes are probably going to get in the way of your learning how these systems work. Start blank.


Technical requirements

Content requirements


Example website

See example code for a Jekyll/GitHub Pages site that displays a collection of nine images from FSA/OWI photographers. There is Jekyll/Liquid template code to list every photo, photos by time period, and photos by creator, with images. There is also code to display images on detail pages. The source code is on GitHub and the public-facing site is on GitHub Pages.

Loops and conditionals

Sample Jekyll template code, to list all pages or list only pages with particular characteristics.


Jekyll template documentation