chrematisai_prj1

=**Jenny Taylor | Project 1 ** =

===** ﻿ ** ** Photos on Flickr ** ===

My object is fruit, as you will see from the photos. I tried to photograph fruit from all over the world, including some pretty exotic stuff, as my original concept was to sort them by the country they were imported from. However, I found that the vast majority of the fruit had come from either Brazil or the USA. So I decided to do a bit of research about where each species or cultivar actually originated, historically speaking.

After doing some searching online (primarily using wikipedia), this is what I came up with:

apricot: armenia/china/india banana: southeast asia cantaloupe: india/africa cherries: europe golden delicious apple: USA grapefruit: barbados green grapes: australia green mango: philippenes green pear: england honeydew melon: france/algeria kiwi: china lemon: india/burma/china lime: indo-malayan region springfels mango: usa (florida) nectarine: china orange: southeast asia/china papaya: mexico peach: china persimmon: china/japan pineapple: southern brazil/paraguay prickly pear: USA red grapes: australia red pear: belgium/france gala apple: new zealand yellow mango: mexico

This list was giving me the opposite problem. There are too many different countries on this list for me to use country of origin as my sorting factor. However, when I looked at a map of the world, it occurred to me that I could potentially sort them by the latitute at which they originated. Like so:

In this concept, there would be three groups (one for each colour of box that I've got superimposed on the image). However, I am still working on other concepts based on the latitude/longitude that I will post when they are more fleshed out.

http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm

http://bavotasan.com/tutorials/a-simple-mouseover-hover-effect-with-jquery/

http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html

Process work stuff
So, I ended up sticking with the thought posted above - with my inexperience with code, I figured that my time would be better spent experimenting with the actual code than messing around with other ideas, especially because I was quite pleased with this organizational system from the very beginning.

After some thinking, and experimenting with visual concepts, I decided to group the fruit into four categories based on latitude, rather than three. I also opted to omit any reference to longitude, mostly because I would have ended up with too many groups, and not enough photos in each.

My first explorations involved the use of globe imagery:





My first thought was to have some of the coloured blocks within the globe link to groups of photographs. I was thinking of using jquery to have the images pull up in a space beside the globe image, or possibly appear within the globe itself, so that the viewer would have to click some kind of back button to return to the main navigation. I liked this idea, but visually it lacked something, and I really didn't know where to start looking for code examples that would allow me to explore this avenue. I was finding jquery and javascript quite intimidating at first (though somewhat less so now).

Then I started to think about ways to abstract the image of the globe, but still represent the latitude concept. So I considered a way to have a very simple layout, with a series of lines representing the latitude lines, and a series of boxes, one for each fruit. In this concept, the boxes would have slide aside on mouseover to reveal the photograph (a la the link [|provided] on the Exercise Two page). The location of the boxes in relation to the lines would indicate which group each fruit belonged to. I began to code this concept with html alone (not yet adding the mouseover effect) to get an idea of what initial impression this would give, and quickly decided to move onto other ideas.

The next idea was based on the more literal representation of the globe once more, but still using the [|sliding boxes technique]. Again, I was less than satisfied with the direction this was going, and though I could have done more with it visually, I opted to continue exploring.

So I started [|looking at another idea], which was based on a tile background image I found. This one would look, when the viewer first saw it, like nothing but repeating grey and black tiles. The viewer would have to move the mouse around the page in order to find anything. Upon mouseover, any of the tiles that were links would change colour to a vibrant green, yellow, or blue. Upon clicking, a photograph would appear, potentially using a lightbox-like piece of code.

However, I ran into a few roadblocks with this one. First of all, I was having a difficult time incorporating both the mouseover and the click to view features using jquery. In retrospect, I may have been able to use a simple css mouseover (rather than using jquery), and then used the more complicated code for the image reveal, but I never explored that, so I still am not sure if the two would have been compatible anyway. So, instead of doing both mouseover and click, I decided to look at the possibility of having the button tiles visible from the start, but have the [|image show on mouseover], or possibly have a thumbnail, with the full image revealed on [|click]. But then I ran into problems placing the buttons. I wanted them to line up with the tiles in the background, so that they would appear to be a part of the same image. This difficulty acted rather as the last straw for this concept (especially coupled with the second roadblock).

The main reason I stopped exploring code options was because of the second roadblock. This was an issue of visual organization. The tile layout bears no resemblance to a globe, and thus I felt like there was little connection between the system I used to group the objects and the navigation - a connection I felt should be at least somewhat evident in the final design. I was thinking of using a colour-coded grouping - ie, having all the fruit from the northernmost latitude (30-60 degrees N) in one colour, the ones from the next latitude (0-30 degrees N) in another colour, etc., ideally with the colours corresponding to the latitude in such a way to evoke the climate (a cooler colour for a temperate climate, a warmer one for a tropical climate). This colour based system seemed rather tenuous, so I was going to couple that system with location on the page - ie, have all the 30-60 degree fruit in a row at the top, the 0-30 degree fruit in a row next, and so on, for a total of four rows of buttons across the page. This still didn't really appeal, and I felt like I was grasping at straws, design-wise. For design, I feel function over form should be priority, even for such an experimental assignment. There should always be a solid rationale for why I do something the way I do - "because it's pretty" isn't really good enough.

So I sat for awhile a stared at the map (the image that I first posted) trying to brainstorm another idea. I then realized that I could represent a globe using some simple, curved lines. When I first explored this idea, I was using various stroke styles on the lines, and was including lines representing latitude. However, I quickly realized that I could use two simple, curved lines would be sufficient. In fact, these lines, when drawn with the pen tool, reminded me of brackets, so I ended up using a pair of vectorized Garamond brackets. I then used both colour and positioning to indicate each group of buttons, and ended up with a very visually pleasing layout. I then coded it, using a snippet of code I found. I hit a couple of minor bumps with regards to positioning the dots, but the most major issue was resolved when I realized that I forgot to close a div.

I'm pretty pleased with the final layout. After seeing some of the things that my classmates came up with, I wish I had have had more time to familiarize myself with what jquery and so on is capable of, and thus to broaden my horizons. My final is much simpler than many others, but in the circumstances, I think I did pretty well. That, and this project was a great refresher, and gave me a chance to learn a bit about javascript. I'm feeling quite a bit more capable now than I did a few weeks ago.

If you read this entire thing (especially if you are not Graham), congratulations!

Now, without further ado. . ..


 * drumroll*

[| Here it is!]

(PS: having done this in the lab, uploading files from my usb key, I appear to be missing a couple of mockup images that would illustrate some of the things that I was talking about. I will also soon be including links to the websites that I sourced my code from - especially jquery-wise.)