Developing Ideas…

BRIEF:?“Produce a small mobile formatted website of two or three pages that interactively connects together an experience, situation or place in Bristol with media that you have authored (focusing on audio, images, text, and graphics). The project must be based on a location in or near the city center (between Castle Park and M Shed).
The project should require the user to be physically present at the situation or place for it to be meaningful and perhaps for it to work. The project should aim to re-imagine the situation or place for the user in an unexpected and imaginative way.”

Click here to view my locative experience site!

img_7057

Above: Is a paper wireframe mock-up of an example phone based locative experience involving McDonald’s, I made this to experiment ?and get inspiration and ideas for the brief.

hanging-man

Above: A?painting by street artist Banksy called ‘Naked Man’ it’s in the center of Bristol and I regularly walk past and admire it. I’d like to focus on this piece of graffiti as part of this ?project, as I think there is potential to ‘re-imagine the situation or place for the user in an unexpected and imaginative way’. It also fits within the parameters in the brief (between Castle Park and M Shed). I?revisited the location of the painting and took a few photos to reference, and thought about possible ideas in relation to the project and the brief.

img_7102

Above: Is a?set of paper wireframe mock-ups of my final idea I will make for the locative experience project.

iphone designs final

Above: Is the final design?for my Locative Experience mobile website interface, I have taken all the elements from my initial sketch and included them in these designs. I will code the website from scratch in HTML, using Brackets code editor, and google chrome’s inspect element mobile device viewer to try and recreate my the website as close as possible to these designs.

blog-drawingAbove: Is a diagram of the div framework I used, to reproduce each screen of my design in HTML code. I split up most of the elements in my designs on each screen into div’s to make it easier to embed the media into each container.

screen-shot-2016-12-02-at-13-42-12

screen-shot-2016-12-04-at-01-11-02

Above: I used snazzymaps.com which allowed me to customise the appearance of google maps using javascript, I wanted to change the look of the google maps I was embedding into my website to fit more with the overall colour scheme of the site, as the default google maps colours are too vibrant, and I wanted the colours of the to be less saturated.

screen-shot-2016-12-06-at-12-15-09
Above: Is the soundscape I constructed to accompany Banksy’s naked man painting, my aim was to immerse and intrigue?the listener in the painting using audio. ?I edited using Garageband and I used a mixture of sounds I downloaded online and sounds I recorded myself. I then embedded the audio file in a custom built javascript audio player on the web page.

phone

Click here to view my locative experience site!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s