Above: Shows the process involved in designing the custom map pins for the static map page, the idea is that there will be three different iconic or recognisable locations in Bristol where you can use Mozaik, those locations being; Clifton Suspension Bridge, (which is the main focus for the project) Cabot Tower and Wills Memorial building. I started by illustrating the main recognisable buildings at those three locations, I then inserted that illustration inside of the pin and experimented with different colour scheme variations that would still fit with the look, feel and colours already running throughout the branding. I did four different colour scheme variations before I settled on the final version that will be used on the map page, which is the set with the white background because it still utilises the blues which run through the map, but will also stand out on the page, and look like three tactile buttons, which hopefully encourages the user to tap one in order to navigate to the next page. I didn’t want them to blend in with the map and that is why I also included a drop shadow on the pins.
FINAL INTERFACE DESIGN:
INTEGRATING AND BUILDING MAP PAGE:
To get the map page to work, we originally had a few differing opinions about how it should look. Josh’s initial idea was to use a media query so that the map image would always be on the page in the perfect size regardless of the device. However, when we looked at it upon testing, it did not quite look like our interface design, below you can see Josh’s editing progress.