Project 2
From the syllabus:
(Option 1) Infographic
Using HTML, CSS, and images, create a single- or multi- page infographic on a topic that invites a systematic visual explanation. Prototype your idea with sketches, then move to code early. Use scale, white space, and a grid to describe and orient the user to the material. Don’t rely entirely on images to carry the information. We will emphasize iterating your design based on class critiques.
(Option 2) CV
Create an online version of your résumé that is detailed but easy to scan and read. Pay attention to which typographic “moves” translate well from your print version and which need to be reconsidered for the web. Consider incorporating web-specific technologies: microformats (hcards), embedded Google maps, or other dynamic elements that give the reader a bigger picture of your work experience, education, skills, etc. Include intra-page navigation or use multiple pages if necessary.
Whichever project you choose, be prepared to discuss your choice of layout techniques. We will view and critique the project on a variety of browsers, OSs, and mobile devices.
Description
The point of Project 2 is for you (a) to practice using the web as a medium of information design, and (b) to wrestle with more advanced CSS layout techniques. Most likely you will want to incorporate a grid system, short bursts of explanatory text, and possibly icons, maps, photographs, or illustrations. As with Project 1, I think the best results will come from “doing a lot with a little” — that is, thinking through each design move so that they all count, rather than flooding the screen with a redundant or disorganized visual material.
If you go with the résumé/bio/about page, think about what makes your bio, work, skills, and interests unique. What are the common threads that you might be able to tease out and make prominent? If you’ve moved around the country or state, maybe you would want a map image to serve as the organizing principle of your site, and your experiences could be overlaid as boxes on top of the map. If you’ve worked while you’ve been in school, a timeline might be a good choice, since you could reveal relationships between the courses you were taking and the jobs you were working at any given point in time. Of course, it’s not critical that a single visual device orchestrate all of your information, but it’s good to have a hierarchy in mind, so that your audience can progress through your site in a logical way.
If you want to do the infographic, look for a subject, event, or data set that is meaningful to you or directly relates to your experience. I’ve found that a systematic and “objective” visualization of a topic about which the designer has a strong opinion often makes for the most compelling design work. If you feel you have promising source material (e.g all the books you read last year) but aren’t sure how to present it, try the LATCH acronym: how would the presentation differ if you organized your information by location, alphabetical order, time, category, or hierarchy? With the books example, each of those organizing principles could create radically different infographics.
With both projects, your primary concern should be finding a visual structure that tells your story best. When you brainstorm, sketch each of your ideas on paper and return to them frequently. What first seems like a silly idea may turn out to be great when combined with another one.