Site Map + Wireframes

GDES-220 fall 2017 · American University Design
Instructor: David Ramos ( · office hours )

[Provisional assignment sheet, likely to change.] Before a website becomes a website, it’s an idea, just a notion floating in someone’s head. Through experiments, iteration, and critique – and some hours of work – that idea will gain a tangible form. Until then, we can’t discuss the site itself. Instead, we have to talk about your plans for the site, communicated through mockups, diagrams, and prototypes.

Photo of art project with man floating in pool

This project offers a chance to start thinking about how to communicate the ideas behind a design. It also asks you to look closely, to notice details and how people use a site.

Take a website you think is worthy of admiration and share with us why you think the site is so notable. Convince us. But do it in ten to fifteen slides that you’ll project on the screen.

Tell us:

You might appreciate the website’s aesthetics, or the success that it’s brought for an organization. Perhaps you admire some details of how the site works. Maybe the site makes you feel a certain way. Share that with us.

You can use screenshots of the site, words, and diagrams. (Perhaps put screenshots on the screen and draw labels.) No talking until afterwards. Still slides only, either a PDF or a series of image files. You control how long each slide stays on screen. Add your own comments and explanations, though; unannotated screenshots are insufficient.

This is good practice in analyzing websites and thinking about the subtleties of how they work. It’s also an introduction to documenting your design ideas.

For due dates, look at the class schedule.

Example visual explanations

These are examples to think about, not models to imitate. We’ll talk about formal documentation methods later.