Design Artefact 2 – Photo City Gallery

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”.

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

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.

15. Role-specific documents

Role – Website Designer

This role require the design and programming of the site using pre-existing code for inspiration however still creating a website from scratch. I shall be solely responsible for the uploading the site to the designated server and ensure no problems arise and fixing any that do.

Skill Needed

Knowledge in HTML, CSS and JavaScript.

Role – Data Collector 

This role requires me to use the Instagram api along side my website code to collect and display all the required images.

Skills Needed

Knowledge of the Instagram API in conjunction with my own website code.

Role – Project Manager

This role require me to ensure that the project goes as successfully as possible and ensuring enough contingency time for any unforeseen problems.

Skills Needed

Gantt Chart software skill to help manage my time of the course of the project.

 

14. Reflect on your role for this project

As I am the sole person within this project I feel a lot of pressure however immense determination to produce the project to the best of my ability. Within this project i shall be the web designer, coder, programmer and project manager. As all the roles fall on me its the perfect stepping stone to learn each aspect of the project from start to finish. From previous group project I have shied away from being the leader however now having to manage this project alone it has given me the chance to overview all aspect of the project and i feel shall expand some skills that i do and don’t have.

I am going to be using a mixture of skill i already previously know and also ones that I don’t . This will allow me to pursue strong skills that i already enjoy and want to improve however at the same time also looking into skills that I want to learn.

13. Place your project in its broader contexts

A main concept surrounding my work is the idea focusing around human curiosity and perception within online social media platform. This is the idea that as human we have a deep curiosity and have a desire to fill the need to explore this curiosity by finding answers to things. (Konnikova, 2013)

This project also touches on the ideas of many types of social networks are becoming very alienating in where the sense of community is lost. (Chouinard, 2013) This is where I want to create a platform to help human curiosity find answers and to create a platform in which the whole world can begin to feel more together with the sense of community.

 

Chouinard, J. (2013). When hyperconnectivity leads to social alienation |  Adviso. [online] Adviso – Internet Strategy. Available at: http://www.adviso.ca/en/blog/2013/02/20/hyperconnectivite-reclusion-sociale-2/ [Accessed 7 Dec. 2015].

Konnikova, M. (2013). Why We Need Answers – The New Yorker. [online] The New Yorker. Available at: http://www.newyorker.com/tech/elements/why-we-need-answers [Accessed 7 Dec. 2015].

12. Define your audience

For my project I am requiring a fairly large intended audience. This is because as human curiosity is one of the main features of the project the audience is very broad. However due to the nature of this technical piece the audience are predominately going to between the ages of 16-35 and aimed towards avid users of social media platforms. the project has no direct lean to one specific gender and is welcomed strongly by both.

11. Budget

This project require no unique installation therefore will have no cost association. My intention is to have the website displayed on multiple screens at the grad show. I have two options these are uses screens provided by the University, however if this isn’t available I have access to my two 21 inch monitors that able to supply for use at the show.

10. Time Management

Below are screenshots of a Gantt Chart that I have made to show my initial timescale I intend to keep to, this has plenty of room for amendment towards the start of the project and throughout however i shall keep to it as much as possible. towards the start of the project i intend to create some design choices that will later then be decided on to begin the coding of the site. Then i shall begin collection of images then eventually along side this the implementation of these images into the website. finally i have left time towards the end of the project allocated to testing, updating and preparation of files ready for the final submission date.

9. Delivery format

I intend for this project to be in the form of a responsive website that shall work both for desktop and mobile. For submission I shall be proving a link to the live/working website  along with screenshots of the website in each of its working stages with annotations explaining each progression throughout the site.

8. Identify the proposed sources of all the material that will not be produced by you.

I shall be using HTML and CSS ideas from similar website to help create and inform my own however i shall not be taking blocks of copied code i shall only use this as inspiration and shall be writing all the code for the website.

The map will also contain lots of photos that shall all be gathered from Instagram. These photos shall only be collected from Instagram account that have there privacy settings to public.