Sunday 24 March 2013

Website Development

When creating the style of my website I wanted it to be slick and fluent. The site is an architecture portfolio of sorts. Showcasing some of the most influential architects of the last century. This site of course is highly image based showcasing the designs and final products of these acclaimed architects.

The navigation of the sight was a main design concern for me. I wanted the website to be based on a single page as this kind of website is aesthetically popular these days and I wanted to encompass some skills in jquery and java scripting. I chose to display everything within a fixed loop light box gallery. This way the person can press on any of the designers and flick through their personal gallery of images, but by integrating the other architects to fluently pass onto the next and combine galleries I aimed to make a polished and free flowing gallery based image site. 

The aesthetic choices are obvious, black and white colour schemes are used to link back to the architects themselves, half of which were born in the late 1800's. Also architectural buildings often have a unique aesthetic value when seen in black and white. 

Some initial layout designs:


Image above shows some consideration of the way in which the multiple light boxes will control the flow of the galleries


Some initial designs, layout of images is experimented.


The final layout was a kind of mix of most of my concepts. When getting down to the coding of the layout the current layout worked better than the rest in terms of user interaction and simplicity stylistically also. 

The logo was of course important too, the header fits across the entire body of the screen. I used the 960 grid for considering how the site will look on ipad and iphone, the 960 grid is perfect for such scaling issues and image stacking. The light boxes work perfectly on any device and this was another choice I made when designing the site. 


Just some basic geometrical concepts for an architecture logo.


Final logo


Footer used for the bottom of the site. 



A screen shot showing the layout of the galleries in the background and the light box image in the foreground. 

A few problems with host registration so I'm using  a non-permanent url address for the mean time and will update it shortly..

http://nickyhoffmandesign.com/marty/

No comments:

Post a Comment