Tuesday, February 9, 2010

Info Arch P1: McCoy | Vignelli Wireframes + CSS Research / Landing Page

I have been doing some research of what is out there as far as CSS, looking at style and aesthetics as well as structure and function. I have kept note of inspiring layouts and have pulled elements from others that I may like to implement some way in my comparison. I have also begun to take note of the limitations and flexibilities of navigation and how i can take those studies to create my own aesthetically pleasing yet functional navigation system. Here is some of the inspiration I found during my research:


 
In this, I specifically like the transparent navigation that is seamless with the background. source credit (above) 

In this piece I particularly like the gridded, yet free-formed structure. Could be an area to explore when comparing and contrasting Vignelli and McCoy. Source: Aline Caron Portfolio  (above)


 
I really liked the exploration and interaction of the browers is this page. The left and right top bands are stationary but the content and main nav scrolls up and down. Source: Grow.  (above)


 
This site, although it was created in flash, has a very nice, flowing vertical structure. I enjoyed the fact that the information was not limited to browser, it broke the top and bottom in a different form of scrolling. Source: Nick Jones (above)


 
This interaction is quite similar to the one above; however, this is established both vertically and horizontally. In addition, it has a horizontal reveal of the content. Source: Michael McDonald (above) 


Below is a look at an additional wireframe I created after doing some additional CSS research. This particular layout would integrate a vertical timeline including Modernism and Postmodernism, the works of Massimo Vignelli and Katherine McCoy, as well as other significant events within the era. The buttons themselves could be sized according to relevance or impact, that is an aspect that is not fully resolved at this time. 

 
 

I have also created the landing page for my KCAI web-space that will host a link for this project as well as others.

No comments:

Post a Comment