Content and form

GDES-220 fall 2017 · American University Design
Instructor: David Ramos ( ramos@american.edu · office hours )

Build a small website for a subject that interests you, taking a Wikipedia article as the core of your content. This project involves the design of system of parts, with many pieces that support a single design concept. Explore ways to make individual pages stand out, but only after you have constructed the basic system, and working within the framework that you have constructed.

Photo of 'stoop sale' sign on bicycle

Process

  1. Decide on a Wikipedia article. Choose one that provides enough content for a multipage website. As a guideline, you might look for articles of 10–12 screens of text. If you can bring in more images, you might have a shorter article. You may also combine several related articles.

  2. Gather information about your article and look at related websites. Decide what the site needs to convey and to whom it needs to speak. This is going to be a modest-sized website, so it’s fine to cater to one or two audiences.

  3. Once you understand what the site needs to do, start on design. Examine several different approaches. Think about typographic language, photography, color, and concept. Make sketches first. Do initial sketches as thumbnails, and more detailed sketches using wireframe templates (PDF) and tracing paper.

  4. Plan the site’s organizational structure. Produce three site maps.

  5. Refine your initial ideas. Create static wireframes/comps on paper or on the computer.

  6. Pull content from the Wikipedia article, and gather any additional images or resources that you would like to include. Your site must include the entire text–or nearly the entire text–of the original article, along with several visual elements like photos, maps, and diagrams. (The site may incoroprate material in addition to the original text.)

  7. Produce the site in HTML/CSS, starting with a fork of the basic site.

For due dates, look at the class schedule.

Getting started with code

When you move to HTML/CSS, work from the basic site. Do not create your folders from scratch. Keep your files under version control with Git/GitHub.

Objectives

Deliverables

As always, for due dates, look at the class schedule.

Evaluation