Content and form

GDES-220 fall 2016 · American University Design
Instructor: David Ramos (

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


  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.

  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. Use the basic site files as the starting point for projects.

For due dates, look at the class schedule.

Getting started with code

When you move to HTML/CSS, work from the web1-basic project on GitHub.



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