I found these maps on Pinterest as an inspiration for my design, I especially liked the colours and simplified images in them.
![](https://static.wixstatic.com/media/1ca05e_0b1b4e3d7f444490b8408f7380da5a71~mv2.jpeg/v1/fill/w_980,h_1742,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/1ca05e_0b1b4e3d7f444490b8408f7380da5a71~mv2.jpeg)
I also created this research/mood board or shuffles, another side app on Pinterest.
I added important music characters and fashion figures, the best movies and important revolutions like Flower Power and gay rights.
The most important thing we can see in the 60s was probably the peace after World War Two.
With the ending war, people woke up and started to defend and talk their minds.
Bright, colours, mini skirts, Beatles, hippies and more became popular in no time.
![](https://static.wixstatic.com/media/1ca05e_6104420509b64a1f8a0bb787f11afa24~mv2.jpg/v1/fill/w_980,h_630,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/1ca05e_6104420509b64a1f8a0bb787f11afa24~mv2.jpg)
![](https://static.wixstatic.com/media/1ca05e_6ce65e5fa2354bccb0345e2af7fcee5d~mv2.png/v1/fill/w_980,h_564,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/1ca05e_6ce65e5fa2354bccb0345e2af7fcee5d~mv2.png)
In my design, I wanted to keep it simple and non-complex. Since I used vibrant and bright colours on roads, I wanted to balance them with a calm colour like green and green shades.
I chose my font something round and lively so it can add more movements to my design.
Then I imported it into Adobe Animator and created my buttons.
![](https://static.wixstatic.com/media/1ca05e_cc115f28bb16427cb9e70b254f808a4a~mv2.jpg/v1/fill/w_980,h_551,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/1ca05e_cc115f28bb16427cb9e70b254f808a4a~mv2.jpg)
![](https://static.wixstatic.com/media/1ca05e_0b4424dccf464403a89f43c1316deb2c~mv2.png/v1/fill/w_646,h_1156,al_c,q_90,enc_auto/1ca05e_0b4424dccf464403a89f43c1316deb2c~mv2.png)
I added my commands into my icons and close buttons.
![](https://static.wixstatic.com/media/1ca05e_96a0c42750b743dd90f239b3e33cb163~mv2.png/v1/fill/w_980,h_561,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/1ca05e_96a0c42750b743dd90f239b3e33cb163~mv2.png)
![](https://static.wixstatic.com/media/1ca05e_8e3fbc038f894ba2a40684b5b54e85c7~mv2.png/v1/fill/w_980,h_231,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/1ca05e_8e3fbc038f894ba2a40684b5b54e85c7~mv2.png)
We are organizing our buttons to take us into specific seconds where our information appears or disappears.
It was still a little bit flat so I wanted to add an effect for a 3D look. I copied the parks and moved then changed the name of it so it looked like floating or higher than the floor level.
I used orange on my information panels and designed a "Mini Cooper" for it.
![](https://static.wixstatic.com/media/1ca05e_5978680c8ec24c929a0ad5df0bbaa770~mv2.png/v1/fill/w_980,h_549,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/1ca05e_5978680c8ec24c929a0ad5df0bbaa770~mv2.png)
Lastly, I added my location icons and Mini icons. I wanted them to look like stickers so I copied and changed their colours to white and increased the size.
My next step was publishing my map with "Dream Weaver" which is a website coding program in general. We need to move our "javascript" and "image" files onto our names.
![](https://static.wixstatic.com/media/1ca05e_1c3ded8fd5574971889ef33329d4d94d~mv2.png/v1/fill/w_980,h_574,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/1ca05e_1c3ded8fd5574971889ef33329d4d94d~mv2.png)
When I tried to publish my map, I got a few errors. I solved these by putting "//" at the beginning of them or deleting them. These codes were extra codes created by Dream Weaver.
After refreshing and publishing my site, now my interactive map was working.
![](https://static.wixstatic.com/media/1ca05e_cecb0173f017473dbe22ea8e8c466102~mv2.png/v1/fill/w_980,h_548,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/1ca05e_cecb0173f017473dbe22ea8e8c466102~mv2.png)
Next, I need to make my map fit on the whole screen. For this one, we need to change the publish settings.
![](https://static.wixstatic.com/media/1ca05e_878391e039d243fea09997ecbf6d5b04~mv2.png/v1/fill/w_980,h_968,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/1ca05e_878391e039d243fea09997ecbf6d5b04~mv2.png)
We are setting our new publish settings by clicking "ok" and publishing our map.
After getting done with our settings, we need to go back and publish our map in Dream Weaver again.
For this, we need to choose them just like in the beginning and drop them under our name so they will get refreshed and published. Unfortunately, mine didn't work. This time, tehere were no any errors or problems.
(You can also click on the image to get the link)
Comments