Map Page and Website

Above: You can see an initial sketch I did of what I envisaged the map (Journey) page to look like, it would have ‘The Parallel’ logo at the top of the page that would also double up as a menu, to allow the user to navigate between the pages of the website. The map would be underneath the logo with the route Dadyr’s uncle took on his journey from Iran to Bristol plotted, which we took from the detailed transcript of our recorded conversation. You can see the map below, which we styled using Snazzy Maps, we used the same exact HEX colours in the map as we used in our branding so it fitted with the overall theme of the project, I think it would have looked wrong if we had just used an unstyled standard google map embedded in our website as the theme that runs throughout the branding is very monochrome and the standard google map aesthetic is quite vibrant and saturated.

60e4613c1c9f4c14be512a6b42d10cef

f4159f21d03249339a075e7e80174f25

Screen Shot 2017-05-06 at 00.43.16Above: Is the finished map (Journey) page featuring a styled google map embedded in our website pinpointing Dadyr’s uncle’s extraordinary route from Iran to Bristol. I produced some custom map pins that fit with the overall branding, to accentuate the start and finish points of the route.

2017-04-07 11:45:27 amAbove: Shows my sketch for an initial map page which we decided not to go with in the end, but did explore the possibilities of before setting on the version above. The idea consisted of having two styles maps side by side split in the centre of the web page, the map on the left showing Bristol with a custom pin, and the map on the right showing Iran. However, we thought it would be more interesting to show the journey which he broke down in such detail during our interview. As you can see below Jamie investigated the functionality of embedding two interactive google maps side by side it was possible but styling them proved difficult.

mapsplit2017-04-30 12:05:50 pm

Above: You can see an initial sketch of what I wanted the slide down overlay menu to look like including the list of pages our website would have. I wanted the menu to be linked to ‘The Parallel’ logo which will be permanently fixed to the top of all of the web pages, as a subtle but effective navigation solution that’s hidden until you need it. I also wanted the menu to retain the font used throughout the branding to fit with the overall theme of the project. I got the code for the slide down javascript menu from W3CSchools and customised it to my liking and to fit with the project. As you can see the finished outcome below, I think I have effectively achieved what I set out to do.

Screen Shot 2017-04-30 at 12.02.54

Below: Is the ‘About’ page which I believe is very important element of the website, because we can’t assume that everyone has read this blog, therefore it’s purpose is to give someone who doesn’t know anything about the project some background information on the project and tell them what ‘The Parallel’ is about, how it works, who its been made by and for what purpose. I have also included to internal and external hyperlinks for the reader to find out more about the project.Screen Shot 2017-05-06 at 01.26.30

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