Interactive Map

View map here:

The PROCESS of the making:

Firstly, doing research, I went back to this interactive map that I had used before. T

This is the Genshin interactive map which I had often used in the past which had a simple user interface which was to select which options you wanted, then it would appear on the map.

Originally, I decided to use a pirate 'old world' map kind of theme as they were the most popular when searching for map ideas.

Some of the ideas that inspired the first map design:

However, I ended up going in a completely different direction upon actually creating it on illustrator: the y2k theme otherwise known as 'Year 2000' which was known for their pixelated icons and bright colours and grey and pink theme.

As I wanted to create a 'website inside of a website'. The creation of something that wouldn't take you back in time 2000 years into pirate old world but still bring nostalgia of 10 years ago.

Research:

Harry Beck

Harry Charles Beck (4 June 1902 – 18 September 1974) was an English technical draughtsman (drawing of functionality) who created the current London Underground Tube Map in 1931 after being fired from the London Metro Signal Office.

Originally, the map was rejected but then accepted after his resubmission update and was the pocket edition in January 1933. It was immediately popular and Beck used straight lines and 45 degree angles for maximum understanding with simple colours.

Susan Kare

Susan Kare (February 5, 1954 - present) is an American graphic designer and artist who contributed to the first Apple Macintosh personal computer (1983-1986) 's interface and typeface icons. She was a design consultant at Microsoft, Sony, Facebook and Pinterest as well as Creative Director at NeXT. As of 2023 she works at Niantic labs and is one of the most significant designers of modern technology.

Flower Power:

First I made a mind map for flower power, then some research.

At first glance, its very peace and love, yellow, hippie 70s-80s vibe.

Flower power was a slogan used during the late 1960s and early 1970s as a symbol of passive resistance and nonviolence. Its rooted back to opposition after the Vietnam War as a means to transform war protests into peaceful affirmative spectacles.

Hippies embraced the symbolism by dressing in clothing with embroidered flowers and vibrant colours, wearing flowers in their hair, and distributing flowers to the public.

Here I drew some flowers on paper:

This is where I drew them using Illustrator. I used a range of light and dark colours with simple shapes and shadows. I had to change the background to a darker colour as the lily was white in colour.

Map

I started off by making the base of the map, with the greenery, land and roads being showed in simple tones for the iconic colour theme.

I then added place names and made the main place locations bigger than the others to shower greater significance.

The fonts I used were:

'Troglodyte' and 'Troglodyte Pop'

'Octuple Max'.

Then I created the outer boarder which would make it a 'website' which the dark blue and grey colours.

The '?' and 'X' were created with the type tool and the font was 'Troglodyte Max' characterised with the stars.

Next I created the important assets with photoshop and individually painted each pixel:

-heart for Kingston 'heart of Kingston'

-clocktower for Surbiton 'famous landmark'

-Cooper logo for Hollyfield road

-castle for Hampton 'Hampton Court Palace'

(exp)^

Lastly, I created a 'loading screen' to play in the background.

I created a gradient of blocks going from pink to green to match the background and I made it animate appearing slowly one by one in the bar in Adobe Animate by creating an animation and deleting them one by one and then reversing it.

And then all of the information which I packed into the small card.

These are the different locations and addresses for the four places and respective icons.

This is the 'x' icon at the top of every card,

it turns pink when you hover over it.

Next on Adobe Animate, I made each of the pixelated icons a different colour as they hover and hit (press on). Then linked them to each card.

I added coding snippets in order to make each of the 'buttons' interactive and functional.

Lastly, I used Dreamweaver and connected it to the index.

Overall, I am satisfied by how the map came out. I think that I created a successfully interactive map that has the right elements of the Y2K genre that I wanted it to portray and all of the buttons work as intended. I even created a fake loading screen while the other information cards aren't being used to further be on the theme. I think the font I chose were suitable for this project however, the pixel art I created was time consuming and meant I had to do an extra step every time to place things from Photoshop.