OUGD504 (Brief 03): Development of mock ups

Once I'd planned out the basic structure including representations of the content I want to include I began to put my own images in there to get a better feel for what the actual site will look like once I have coded it.

I used a simple grid structure to centralise the objects on the alternate viewing page (one photo comparison view) From this I was able to drop my photos into the same frame, either aligned at the top or at either side - whichever made the photo fit within the central part of the page without interfering with the text.  I also tested the size of the subheading of each city which will be central aligned in between the navigation arrows, above each photo.

The grey section appearing from the bottom of the page includes a short amount of text about the architecture in the image and the place it was taken.  Navigational squares are evenly spaced below each photograph and covered by the grey panel when the photo is hovered over.

I changed the opacity of the bottom section so that when the grey panel appears (which is at 60% opacity) the squares behind it appear darker as they are shadowed by this section.  I also added abbreviations of the different countries (country codes) to make it easier for users to quickly understand which box links to photos from each country.

Playing with the arrows either side of each place made me realise the square box surrounding them is unnecessary and as I want to make the design as minimal as possible, so removed the low opacity shade and kept just the arrows on the white back ground.  I also changed the arrows to a lighter grey #c0c0c0.

For the homepage I mocked it up in a similar way using the photos that will be placed there when the site's completed.  

When the sidebar is extended and the squares (which are links) are hovered over, the name of each city, that the squares represent, appears from the box from right to left.  When selected, the box will fill grey and when deselected it only has a grey outline.

___________________

Features and motions

On the home page there are several links and features that create movement on the site.

 There are several animated features on the homepage

- hover over heading reveals wider sidebar
- keep the cursor in sidebar to access the squares
- hover over navigation arrows changes to a higher opacity (30% - 60%)
- holding cursor over these arrows makes that row of photos scroll slowly
- clicking arrows scrolls further at once
- hover over squares and name of city appears from right to left
- selecting a square fills it grey (#c0c0c0) and the chosen square shows photos from one city
- place cursor in the middle of the right hand edge of the page and transparent box with small white icon appears; link to take you to separate page

- click arrows at either side of place names to navigate through singular photos

- hover over squares to reveal country code / abbreviation e.g. CZ for czech republic

- when selected, squares are filled grey and outlined grey when deselected

I also printed out and broke down the design of the website so I know exactly what functions I need to create when coding the site.

I also tried out a design for mobile, showing a simplistic homepage where the user can swipe left and right on two separate panels to choose the photos they want to compare.  I decided to use a layout that is similar to the website by having the sidebar on the left, and needed the squares to be large enough for the user to select accurately.  With more time I'd like to add a function that shows the information about that photo - perhaps tapping the photo once allows same box with details in to appear from black central divide.