Saturday, April 30, 2011

there's more than one way to skin an ipad

after talking to marty about our analog sketches, we started applying them to our digital design elements, "skinning" our ideas with the visual language we wanted our magazine to have. we needed two different skins so i started out with the "tray" idea i first had in my sketches, which i (spoilers!)  ultimately ended up moving forward with. the translucent dots are your fingers! when they show up several at once, they're illustrating several different kinds of interaction. you don't actually have to play ipad chords to turn pages or anything.
























the bubble tab tells you that there is an infographic in the space under the article, as well as the kind of information it will contain. the triangle in the corner (later to be refined) tells you the article continues to the right. if you either click the down arrows or scroll, the infographic will slide up into the frame.






















the map has three ways to interact with the map data. through map numbers, through timeline numbers, or through icons.






















if you click on the big number in the map, it will tell you what happened there. if you click on the small numbers in the timeline, it will react as though you'd clicked that number in the map, letting you see where each event happened in order of when. and lastly, if you click the icons along the bottom, it will bring up all the information relating to that topic all at once, so you can compare where similar events occurred.






















my other skin (it contains the same first page->map sequence) used the pink and green bars from my paper magazine as forward (green for go!) and backward (red for... go backward?) as navigational elements. unrelatedly, when i was talking to marty about these, we decide this opener was so handsome that i should try to incorporate a full-bleed photo like this into whatever magazine set i end up using, particularly because i'm working on my whole magazine.






















now, because i don't actually have an ipad, i'm not sure if this is a thing that they do? but i was thinking i might be able to use the accelerometer as cue to open the infographic when you tipped the ipad onto its side. 

















as for the map interactivity, it's still the same as the other skin. tap things. information. you know the rules.


i was trying out different ways to highlight the information... i kind of tried to use these arrows as a motif in this skin, but they're too visually different from my infographics. like i said, moving onward/upward with the first concept.

i've really been getting a kick out of this stuff. i just wish i knew how ipads worked, kind of... i just don't really have much experience with them (i've used my boyfriend's ipad a few times?).

i was talking to marty about "wouldn't it be awesome if we got a big happy grant to give all the design students ipads!" the conversation then went similar to this: "yes it would."

No comments:

Post a Comment