Information Architecture: Aperture

So today is my critique for my Aperture camera collection website. It's currently up on our schools server for you to look at too; just click the link below!

http://design.kcai.edu/blyon/

Information Architecture: Progress

So after last classes critique, I got the most positive feedback from my analogue sketches that were superimposed over the photos of each camera. In this way, my rendering style reflects the analogue properties of the camera in my collection. The chosen layout however, comes from the digital icon layout. I had to adapt it to a full format since we are on a tight time frame to crank out these websites, and creating scrolling content and capabilities in flash for a website is pretty difficult. I've also turned the TLR cameras right side up, so that they are oriented as they actually would be when used. The first two sorting worked pretty well with the TLR's in the layout, however, the third has some issues since by camera type, three TLR's occur in a row, which can't be done vertically in a single column. So that  still needs to be addressed. For now I simply pushed a fourth camera on each vertical column to make space for the first TLR in another column. 

In each of the macro layouts, I have began using a negative image that focuses on details of that particular camera. The negative reflects the analogue film each camera uses, and helps to provide contrast for the type to be legible. For now, the info graphic on the right hand side is all I have in the layouts, so the info graphics will be shown some love next. The printers were also not working last night, so I couldn't print the cameras out to draw over them, so for now the other cameras are strictly photography. But refer to the Minolta Autocord, Kodak Instimatic, and Nikon TG-20 for the sketchy quality the others will have later. Each camera, when in the macro view, will have a smaller set of thumbnails below them, which when clicked will change the larger main photo. These photos will be without the sketchy rendering properties, so that the full camera and details are unobstructed. 

Information Architecture: Rendering the Collection

So in an attempt to catch up for the last class missed, I've began rendering my collection in various ways. Ideally, I would like the website to be influenced by this rendering style as well.

My layout was the larger image layout from the last deliverable. There was a better variety of formats I could use, and it didn't contain any imagery itself like the other two did. In this way it can function as a template, rather than a style. I did alter it a bit however, as well as the sitemap.

The sitemap is still rather basic. I need put some thought into what would be available on a collection website. At the moment, I'm at a loss, other than what's shown.

My first rendering method uses a vector icon-esk style, super simplifying the cameras, other than a few main features. Color can be easily applied to these, and they add a nice modern flair to an otherwise antique collection.

The Macro View

The Micro View

In the Macro view of this layout, I made use of a scrolling verticle section housing each of the cameras in the collection. They are colored in this one to better separate them, and to add some contrast to the website, which is admittedly plain at the moment. I have a lot of work ahead of me. In this version, when you hover over a camera on the left side, 4 images of the camera show on the right, highlighting defining features of the camera.

In the Micro View, after clicking a camera on the left, we are taken to that cameras own page. Here we see an infographic on the right (or would if there was one there), and get some detailed information on the camera itself. The initial image would be the icon of the camera, but the arrows to the sides of it will flip through real photos of the camera for additional visual characteristics.

For the second rendering method, I sketched the cameras, then placed them over straight on photographs of the camera. The layout of this meathod uses a few hand drawn elements to tie in with the sketchy qualities of the rendering.

The Micro View

The Macro View

I like the idea of drawing, and it has an interesting mix of old and rough, and modern and clean. Adding the photographs behind them also add a bit of shading to an otherwise black and white plain sketch. The Macro uses the same functions as the last method, but with only 2 images that are slightly larger. The Micro page has a series of photographs underneath the main camera sketch, so they can view the camera without the white filter over it.

For the final rendering method, I chose photography. For this layout, I chose to keep the hope page clean of any pop up images on the right, so as to keep the background image in view. The transparent backgrounds help to keep things relatively legible, and ads a bit of depth to a flat webpage.

The Micro View

The Macro View

This method came out as my favorite, and seemed to have more drama than the other layouts. In particular, I enjoy that the background can show large shots of small details on these cameras. While I haven't employed the idea in this method yet, i would also like the image in each macro page for each camera to contain shots of the camera you are on. This way, the image would relate more to the content of the page.

Information Architecture: Starting the Info-graphics

So last class period, we began by organizing out collections on a series of index cards. The placement of these index cards in relation to each other revealed different cataloguing methods and helped us sort information of each item into categories for our website info-graphics.

Here are a few of the cameras in my collection. I will be receiving more shortly and will post those photos of the expanded collection at a later date.

Here are my initial sketches and brain storming lists.

For my main 3 cataloguing methods I am going to sort the cameras by their:

1. Camera Type
2. Monetary Value
3. Condition

My info-graphics so far include:

1. Number of steps to take a photograph
2. Camera Viewfinders
3. Monetary Value: Ebay Vs. Amazon
4. Film Formats
5. Bellows Camera Parts
6. Image Size
7. Location of Manufacture
8. Size and Weight
9. Time of Manufacture