Information architecture
GDES-315 spring 2019 (David Ramos, American University Design)
ramos@american.edu · 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.
Steps
These steps assume work in Jekyll/GitHub Pages. Substitute the name of another tool, if you are using a different one.
- Decide on a topic. Write up your approach, the audiences, and their needs.
- 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.
- 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.
- Make more refined wireframes, by hand or using a prototyping tool.
- Build static versions of key pages, in HTML/CSS. Then move those static versions into Jekyll templates.
- 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.
- Suggested: Jekyll, deployed as GitHub Pages. You can download and install Jekyll locally, for development.
- If ambitious: CraftCMS, which offers an excellent starting point if you’re new to CMSes and you are concerned with well-written, intentional templates. Free for a single-user license. You will need to arrange hosting, or to run a server locally using a tool like MAMP or Vagrant.
- Possibly: SiteLeaf is a web-based, server-side tool. It provides a structured interface for editing content files, runs Jekyll, and syncs to GitHub (and to other hosts). There is a limited, free plan.
- Possibly: self-hosted WordPress could work, as could a paid account with WordPress.com. WordPress is extremely popular, but difficult to use if you want precise control over structure and markup. Your instructor will not help you with WordPress.
- Possibly: another tool of your choice. Get instructor approval first.
Themes
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.
Specifications
Technical requirements
- Build the website in accessible, interoperable, and semantic HTML/CSS.
- Generate individual pages for each of the 24 basic units of information. This should not be a single-page site.
- The site can include JavaScript, but it must be usable on a browser with JavaScript turned off or not present.
- Slideshows are fine, but not a substitute for individual pages for the basic units of information.
- Although you have a larger data budget, think about file sizes and load times.
- This site should work well on desktops, and at least moderately well on mobile devices.
Content requirements
- Include at least 24 units of information (like high-quality images and accompanying labels; or parks, their descriptions, and a few images). These units should appear as separate pages, and also as previews or links elsewhere in the site.
- Let users browse or filter by at least three different facets, like topic, date, place of origin, medium, or scale.
- Add a home page and section/landing/results pages that display different sets of the pages lower down in the site structure.
- You can include additional pages (like about pages).
- If you put this on the web, be conscious of copyright.
Resources
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.