Interface Design

black linespins_3

pins_2

pins

Basic RGB

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.

Screen Shot 2017-03-18 at 20.37.32

mappage
Screen Shot 2017-04-30 at 16.17.28appad

FINAL INTERFACE DESIGN:final_designs

 

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.

mappage1

mapbuilding copy

mapbuilding2 copy

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