Content and form

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

• Course home
• Syllabus
• Assignments
• Instructions and reference

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.

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. Avoid using CSS frameworks.

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

• Organize a website.
• Design using offline sketching processes.
• Bring color and images into a site.
• Create site markup using HTML.
• Format a site using CSS.
• Design a site as a single system, based on templates.

Deliverables

• For design documentation, research, and sketches, bring work on paper or as PDFs or images.
• The final deliverable is one website of 6-10 pages (or the equivalent, with the instructor’s permission), built with handcoded HTML/CSS.

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

Evaluation

• Usability of site structure and navigation
• Visual design, page layout, typography, and readability
• Use of templates and standardized code
• HTML/CSS quality; correct use of tags