⌂ ◅ Classes + teaching ◅ Digital and Emerging Media Design I ◅ Assignments

Story

GDES-220 fall 2019 (David Ramos, American University Design)
ramos@american.edu · office hours · interaction design resources

Build a small website about a subject that interests you, taking a Wikipedia article as the core of your content. See if you can organize the information into a story. 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

Content and discovery

  1. Look for two or more Wikipedia articles, and give a three-minute presentation about your candidates. You may show slides if you wish.

  2. Once you’ve decided on a final article, look at related websites so that you understand the landscape.

Design and development

  1. Once you understand what the site needs to do, start on design. Examine several different approaches. Think about typographic language, photography, color, and concept, and create color swatches, type samples, and image samples. (You can work from a copy of the style tiles template in Figma.) Make sketches. Do initial sketches as thumbnails (small, not a full sheet of paper!).

  2. Plan the site’s organizational structure. Produce a site map.

  3. Sketch out your DIV structure on paper. Produce your already-sketched-out layout in HTML/CSS, starting with the basic site (ZIP). Create your layout without content in place, moving placeholder DIVs around the page.

  4. Set small samples of type in HTML/CSS, and refine your typographic decisions.

  5. Bring in images and the rest of your content. Replicate the site across multiple pages.

You can (and probably should) refine your design in code, but do more sketches on paper to help plan out layout changes, and aim for a stable design before you start bringing in substantial amounts of content.

For due dates, look at the class schedule.

Coding practices

When you move to HTML/CSS, work from the basic site. Save versions of the project in progress—the entire folder, ZIP-compressed and dated.

For this project, you may borrow code from the textbook, assigned readings, examples, and MDN—but cite all of that borrowed code in comments or in the readme.md file, and be able to explain everything. Otherwise, you must write every line of code that you use.

Content

Find an article that provides enough content for a multipage website. As a guideline, you might look for articles of 6–12 screens of text. If you can bring in more images, you might have a shorter article. You may also combine several related articles in order to generate enough content.

Plan on using all of the paragraph text of the original article. If you think that your audience would be best served by editing down the existing text, you may do that, but only with the instructor’s permission. You may leave out lists and tables, and you can modify the headlines. Link to the original article instead of providing footnotes.

Perhaps supplement the Wikipedia content with additional freely available images, or images of your own creation. As always, cite your sources.

Deliverables and specifications

Objectives

Evaluation