Sunday, October 9, 2011

koenig initial and revised grids

friday was one of those pleasant days when a professor reconsiders the schedule and gives you more information and more time to think before moving on. for which i am grateful. kidwell gave us another demonstration on page layouts and grid structures and ratios etc (and i got all excited about fibonacci, like i always do) and then, thankfully, gave us another shot to redevelop our grids. thankfully because here was attempt uno:



to quote kidwell, although not necessarily about this: "eeehh."



here is grid and implementation number two. much less painful looking. in my mind. i hope. 

half page sketches

the next step was half page sketches, building those concepts into a system for the rest of the package.
this set was based on the idea of building a character out of the tools in the kit.






the next set is based on the idea of my square as either a spokesman or a design element.







lastly, the cat treats that used the icon-set to illustrate four important facts.






both my classmates and i were over the first set before they were even out of the gate. and you can see which ones were liked in the last set by the little critiquestars. i couldn't let go of my square, though. i loved him. so i kept him in the running, too. and maybe even his little friend.


vislang packaging thumbs

step one for our package redesign (after the show and tell aspect) is to come up with 8-10 options for each mode of appeal that the package doesn't currently use. my bra package began as logos, so i have ten pathos labels, relying on feelings:


luckily, the beauty industry is pretty passionate, making pathos easy. then, ten ethos labels, relying on the authority of the seller:
which, also luckily, was pretty attainable because the maker of this bra is a division of maidenform, the company who patented the first ever bra in the first place.

next was my geometry kit. it started out as ethos, so i redesigned it as logos:


which was fairly boring in my mind focusing just on accurate depictions of the contents, and pathos:


which was a lot more fun, if a little tangential in places, filled with crazy geometry characters and "the human touch." (foreshadowing: i got to take two of these to the next step: the figure made out of the tools, and the little square character, or, if i may, squaracter.) next was redesigning my cat treats, which, unfortunately, started out as a really lame pathos. this left ethos:


which was all about the awards, and the seals of approval, and the established brand, etc etc, and then finally, logos:


which focused on what the treats were, what they were made of, and those facts and stats that riddled the old package. (i took the foursquare cat treat possibility along, too.)


understudy wireframes

while we are most interested in the more complicated visual and interactive systems of the previous two wireframes, we kept trying different possibilities and came up with these to work as sort of... backup plans. first, a basic timeline with active points.





then, the static digital newspaper idea, to be populated with headlines images and pullquotes from articles from each year. it has interactive possibility to elucidate an infographic and reveal the full text of an article.









good wireframe 2

here is a tidy wireframe of the most recent way the tabletop display could work. on first approach, the things floating are the decades themselves, the 100 year timeline. once a decade has been activated, all its equals sink, still visible, but obviously a step away. the active decade then spills its years across the surface of the table. this process repeats once one of those years has been opened: its contents spread across the surface while the previous level sinks. each of the separate experiences from a year can then expand in its own way to the surface, or be active several at a time, for a multi-user experience. people at the table can be looking at different years within a decade, or objects within a year, but at this point, they can't be looking at different decades. the levels get too confusing.











good wireframe 1

this is a cleaned up wireframe affectionately known as the "zooming in forever" model. it's remarkably straightforward to read as a wireframe! it works like this: you see the decade you want, you zoom all the way in on it until you see each year. you see the year that you want, you zoom all the way in on it until its information is revealed. and so forth, until you're as deep as you can get. at any point, it is possible to swipe side to side and navigate between other items on the level you are currently reading.