Challenge: Design at least 3 cultural map “skins” for the iPhone using the theme of Personal and Family Life
As the holidays approach, joy and grief blend into rich experiences full of potential empathy. Rather than purchase new materials, create innovative maps that bring meaning into personal and family life.
Manipulate variables of a d.Maps function to guide you:
Track(s) + Dimension(s) + Media = Cultural Maps Expression
For example, I can build on the track of art and saturate myself with examples that represent emotion. While gaining empathy through interviews and observations, I eventually define the following POV:
Ben is my fictitious brother who needs a better way of coping with emotional events in his life because it’s difficult for him to visualize how they are related over time.
From this POV I can ideate around a number of potential solutions and prototype them rapidly. After several rounds of feedback and testing, I design a multimedia map like the iPhone web app pictured above based on inspiration from monitors with oscillating graphs.
Requirements:
*Optimize and test your maps on the iPhone/iPhone simulator
*Showcase at least three distinct final maps that are uniquely different (eg practical, abstract, conceptual, futuristic)
*Reference a geo-location in every map
*Make every map accessible by a short and unique url culturalmaps.org/xxxx.html (DO NOT OVERWRITE THE FILES OF OTHERS!)
Learning Goals:
* Complete the entire design process including multiple rounds of testing (get through multiple cycles)
* Practice different empathy research techniques and define clear POV(s)
* Effectively brainstorm fluent (a wide range of non-obvious) and flexible ideas (uniqueness you can build on in many directions)
* Gain competency prototyping and confidence testing rapidly
* Creatively use different media types
* Creatively use different dimensions
Dates & Deliverables:
*Share 3 paper prototypes on Thursday 11/19
*Post 3 digital prototypes to culturalmaps.org with the tag “Final Project” by Tuesday 11/24
*Prepare to test and work on your maps on Monday 11/30
*Post a summary of your Core Project including documentation of the design process, your POV(s) and a final representation of your maps with the tag “Final Project” to culturalmaps.org by Thursday 12/3
* Post inspirational media to culturalmaps.backlight.org before by Thursday 12/3
* Prepare to persuasively discuss your project in less than 5 minutes in front of the d.school community on Thursday 12/3
Directions & Resources:
*Login to the Cultural Maps server via FTP (username and password sent via email)
*Store the final link to your maps in the root html folder eg accessible at culturalmaps.org/XXXX.html. All sub-pages and media should be stored in your personal file labeled by your name
*Copy and past sample code from my example, http://culturalmaps.org/emotiontest.html into an editor like Dreamweaver. On the Firefox browser go View > Page Source.
*Note that the above example is intentionally bare bones and you can use packages like http://code.google.com/p/iui/ and http://iphone.hohli.com/ for more functionality
*Google My Maps allows you to create and embed custom maps. Click “link” > “Customize and preview embedded map” > format map accordingly to show primary point of interest. Don’t necessarily be constrained to Google, there are other mapping options available like OpenStreetMap.
*The Adobe Photoshop Slice Tool can help you get the coordinates for your image map. Remember that origin (0,0) is the upper left corner of your image map and the rect attribute takes in the coordinates of the top left and bottom right coordinates of a rectangle. Drag the tool in the left corner above the area you want hyperlinked (make sure your clickable area is large enough for a finger) > Control/right click on the slice > Select “Edit Slice Options” >Use these these x and y coordinates as the first pair in the coords attribute and add a standard # to get the coordinates of the lower right corner eg (x,y, x + #, Y + #).
*iPhone web application metrics, layout guidlines, and tips
*More Safari references from Apple
Comments:
