OUGD504 (Brief 03): Design for web - Development

Some varied designs using the diagonal cut/ perspective concept are shown below, and were designed with the Van de Graaf page layout theory in mind.  These thumbnails show where the images text and possible logo could go and follow a grid that splits the page into different sections suitable for the content.

Below these I've drawn out a site map which includes the homepage and 5 pages linked from there; one for each city the groups of photos are from.  This way the user can navigate around the site based on which city they want to see the architecture of.

I've decided I don't want to create a timeline showcasing the architecture from different eras as this is a common way of showcasing information about something with as large a historical background as architecture.  Instead, the architectural styles will be grouped by city they're in.

Crit

In the crit today it was suggested that I establish a specific target audience and/or purpose of the website.  I want my photos and additional research to inform and educate the user.

I could also include a summary of the building styles of one city and include on the separate pages.

Other considerations:
- make it responsive
- suggestions to compose the photos so that when cropped to fit perspective style the angular composition fits with adjacent photos
- when hovered over would reveal full image

Experimentation with perspective scrolling and design:

site map including 5 different pages of the different cities led to 

experiments with layout using that content/idea

even more below

interactive / roll of film on a reel..

Another idea to include an archive of all photographs for easier access could be done by creating a contact sheet style page to display them, which would have the photos cropped to the smaller irregular shapes (shown in sketch below).  Again, when hovered over would reveal enlarged version of full image.

Scamps

Using more defined measurements I mocked up three of the ideas onto squared paper to get a better idea of what they'd look like.

________________________

Working with idea of comparison.. needed something that would showcase photographs at a suitable size which i felt couldn't be achieved as well with the perspective scrolling.

Horizontal comparative views allows you to view two separate series of photos from different cities and navigate through either left or right.  You can select a city using the squares at the side so only photos from that city are shown in that section.  The home page is split down the middle horizontally.

I also decided to add the heading in on the left hand side rotated at a 90degree angle so make use of the space there which gives the photos more room on the page.

I want to create an entrance page for the website using a symbol I thought of earlier in the project  which uses the diagonal lines of the letterforms to separate the page.  Not fully thought about this in detail but thought to use it as a more formal page to come to when typing in the web address before entering the homepage which showcases the photos.

The homepage will have two horizontal rows of photos on a loop, which can be filtered to a certain city by using the square buttons in the left hand side bar.  This idea works a lot better than my other ones as the site has a clear purpose and navigation and allows the photos to be shown at a larger size.  An alternate viewing page will be split vertically down the middle to compare two photographs.