Conrad+Shen+Project+1

Conrad's Grocery Adventure
 * Quick Link**


 * Process**


 * Week 1**
 * created Flickr account under conradshen
 * joined YSDN Interactive Two 2011 group


 * Week 2**

[|Original set of 30 photos]
 * printed and sorted 30 printed food photos
 * some possible categories include: colour, size, nutrition, food group or seeds(?)


 * Week 3**

Idea #1: Fig. 1Fig. 2

My first idea uses a fridge as the main subject of the website to organize my categories. In fact, both of my ideas use real world items and settings that are normally used to sort food. Thus doing the same but only in a website only makes sense. Doing so would make the experience of browsing food feel more natural and familiar to the user.

In Fig.1 is what the default state of the homepage would be: an idle fridge with two closed doors and numerous magnets attached to both. I had thought about using the magnets for a form of navigation, possibly through the different categories in rollover form. They could also be left as simply decorations the user the can interact with. Clicking on the handles would start an animation opening the corresponding door.

In Fig. 2 I played with two different layouts the site could use once the doors of the fridge are open. The foods would be organized by their food groups in the different compartments (meat in freezer or fruit in the drawers). Hovering over the different sections of the fridge would reveal rollovers which you could then click to open up a JQuery app in the inside of the top and bottom doors. For example the main photo of the gallery could be revealed in the top door while the controls are located in the bottom.

One of the problems I realized about this idea is that it would be difficult to take the photos of this set up considering how fridge doors do not open so perfectly and the food would take forever to organize, especially with two other roommates in the house. Also there is simply not enough room in front of the fridge to take a clear shot. I would have to cut and paste many of my own images and online images. This made the second idea appear far more plausible.

Idea #2

Fig.3Fig.4

A grocery store is another method of organizing food. It is also most likely more organized than most home fridges. My categories have already been organized for me by region in the store. So it makes sense for me to use the an overhead layout of the store as my homepage as shown in Fig. 3. Here I plotted out roughly what the store would look like with all the different departments. Originally I wanted to use rollovers that made an arrow or another sign to pop up saying which category it was. The following 3 Figures are all examples of what clicking on one of the departments would lead to. These are full screen photography pages that use a lightbox to display a closeup of the food in an open area. The foods that you can click would be highlighted by darker circles or arrows. I knew it was important to take a good perspective shot of the aisles to be able to show a good amount of food from everywhere. I knew that placing the thumbnails of the lightbox perfectly over each photo would be difficult.

Fig.5Fig.6


 * Week 4**

Website-Work In Progress


 * created a rough homepage using a brush tool to obtain a general feel of the site
 * laid out of the linking between the index and the main html files using simple text
 * all links to a page with the proper background image of the category, but none of the proper lightbox images have been set yet
 * all current lightbox images are set in a single static gallery and link to random photos I used in Excercise 2
 * set a "back" link in each of the category pages back to the homepage
 * consider using Fancy Box to set an iframe from the main page and then another gallery within the iframe for the images
 * all temporary background images are taken from google
 * decided on a 1024px x 768px frame size for the entire site


 * Week 5**

[|New set of 31 photos used in final site]
 * Final Website: Conrad's Grocery Adventure **


 * upon trying to create a vector blueprint of the grocery store I realized it was far more effective instead invert my black and white sketches to resemble chalk drawings
 * this aesthetic resembles the familiar one used in many grocery stores such as Sobeys or Zehrs.
 * the rollover links have been designed with this in mind accompanied with hand drawn pictures of the food as well as organic looking type
 * a chalkboard border has been included on the main page as well as in the other pages as part of the all new "Back" button
 * the four categories have been completely revamped and the photos have been retaken to allow for more variation in foods
 * each thumbnail is an individually declared gallery to allow for specific custom placement but doesn't allow for navigation between images unfortunately
 * the background have been darkened to allow for the thumbnails to stand out more
 * entire website has been centered

New sketches include:




 * THE END**