Archive | December, 2015

Design Artefact 2 – Photo City Gallery

5 Dec

After spending lots of time trying to assign a picture to a google map using the google API I ran out of time. I was able to extract geo from a desired image and assign a marker to that location on a map as shown from the image below, however after hours of coding i was still struggling on figuring out how to then place the desired image into the “infoWindow”.

Screen Shot 2015-12-08 at 01.04.37.png

As time was an issue here it became aparant there was not enough time to finish this artefact before the presentation deadline. So I started a new artefact with the little time I had remaining which wasn’t much.

The artefact i was able to make is an simple example of how i wish my navigation of cities and layout of image to be without the overriding map feature.

I was able to create a simple HTML and CSS gallery of images with tabs for each city. This resembles ideas that where created from artefact 1, the wireframe. Below is a short video of the gallery of cities in progress.

Due to the wasted time this was the only option and was the last chance i had to produce a artefact that still resembled the features that i would like to include in the final project. With more time i would have liked to also the other buttons similar to the wireframe that would allow the users to change the year in the photos where taken but this wasn’t feasible in my limited time frame.




Design Artefact 1 – Wireframe

1 Dec

My first artefact is a wireframe mock up of my intended website. I want for the user to not feel like it is being shown a large bundle of data straight away, i want the user to come away feeling like they have had an experience. To achieve this I want the website to be easy of use, have lots of interactivity and be visually appealing.

My first thought when doing sketches was what is the first thing the users is going to see. Because of this wanted to incorporate a landing page. As from experience as being a users of a range of website in my opinion a landing page is perfect for this scenario. This is because it introduces the users to what is to come and gives them a metaphorical front door to the experience in which they have to open.

Below is a simple example of a splash page or landing page for reference.



Above is the final wireframe design consisting of a splash screen with enter button then buttons or tabs for different cities and different years and the map in the middle of these two. This is a simple design that shall be implemented effectively with bold colour but minimal design as not to take away from the intended experience of the interactive map.