Content and form

GDES-220 spring 2016 · American University Design
Instructor: David Ramos (ramos@american.edu)

• Course home
• Syllabus
• Assignments
• Instructions + 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.

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.

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.

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