Narrative
GDES-220 spring 2016 · American University Design
Instructor: David Ramos (ramos@american.edu)
Build a website that tells users a story. Consider navigation, user experience, typography, image choice, and the value of templates and shared stylesheets in web development. Think of this website as a single system, built from many smaller and reusable parts.
As a departure point, start by talking about a place managed by the National Park Service—an historic site, national park, national landmark, or other site.
Consider the way in which a reader should experience the site. The heart of your task is to convey a narrative: deciding what story you want to tell, creating a site design that communicates that story, and building that site.
This project involves the design of system of parts; all of these pieces should work as a whole. For this project, use every page of the site to express a single design concept. The site will most likely draw from two or three standard layouts, with only the content changing from page to page. Make every page adhere to one overarching color scheme, one way of handling type, and one grid. Explore ways to make individual pages stand out, but only after you have constructed the fundamental system, and only within the framework that you have constructed.
Objectives
- Create design that tells a story.
- Learn efficient HTML/CSS coding practices.
- Build a website that is based on a controlled number of standard templates.
- Work with a larger amount of content.
- Experiment with a design process for a more complex, concept- and content-based website.
Deliverables
One website, built in HTML/CSS. The website should have at least three page types/page templates; creating more than five page templates is probably unnecessary and inadvisable. (We can discuss requirements for projects that do not fit a page-by-page model.)
At the end of the project, turn in a rough, un-designed PDF process book, containing images of your work in progress, sketches, and early versions.
You may use JavaScript to add features to the site, but remember that JavaScript is not the focus of this course. Consider using existing scripts based on the jQuery library.
Use the basic site files as the starting point for projects.
Evaluation
- Concept and storytelling
- Page layout and typography
- Usability of site structure and navigation
- Use of templates and standardized code
- HTML/CSS/JavaScript quality and correctness
- Process and process documentation
Sites to consider
Think of these as precedents rather than models to imitate.
Websites with narrative aspects
- Crash of the Century
- A List Apart
- Extra Virgin Suicide
- Liverpool Biennial
- Eephus League Magazine
- Edits Quarterly
- Jason Santa Maria candygram articles
- Lost Worlds Fairs
- The Pantry at Delancey
- Quarterly.co
Place and narrative
- Marie Lorenz (seeing places by artist-built boat)
- Los Angeles Urban Rangers (a kind of guerrilla interpretation project)
- Port Cities
- Center for Land Use Interpretation
- Triple Canopy on the Meadowlands
- Jazz Age Lawn Party
- New York Times, “Snow Fall”
- InfoAmazonia
- Paperholm
- Losing Ground by ProPublica
- The End of Brooklyn
- Edible Geography
- Sherlock Holmes and London Landscapes
- Fallen Fruit
- The New English Landscape