Interactive Map Project After considering the possibilities of - PowerPoint PPT Presentation

Interactive Map Project

After considering the possibilities of what my map could be about- I made the decision to cen- tre my map around art. This includes galleries, art shops, scultpures and stu- dios. I chose this topic because it’s got enough depth whilst also not being too large. A topic like food could be far too big to capture. I’m also very in- terested in art and know quite a bit about its pres- ence in Kingston. Art is also a broad topic, meaning I can include as much / as little as I’d like. This also allows for more creativity with the map layout and aesthetics, as it should be artistic to fjt the overall theme. Hence why I chose art for my theme.

The starting point for this was drawing a semi-accurate map of Kingston itself. This is a basic sketch I did on how I’d like the overall aesthetic of my map to look. This is represented in the top left. This as an image on it’s own, however, is With simple blocks and shapes accompanied by more detailed drawings around boring and relatively plain. the outside. Some of these images correspond to what their nearest to on the map, such as the telephone box sculpture “Out of Order”, which is right next to When looking to stylize the map, I wanted to add over-the-top icons and im- where its located on the map. ages to represent certain places on the map. I’ve also included some basic info boxes and some concepts for the specifjc col - Along with the exageration, I wanted to make it more clear and bold rather our of the points. I’d like the map to have a limited palette so it doesn’t become than confusing. I want to combine a functional map with a more artistic ap- too confusing. Using colour can help enhance the overall map. proach Along with showing some basic colours, this prototype also shows how I plan to have the map show the actual distances between each point of interest. This is because I do want the map to be able to help navigate. The reason I decided to include large drawings, with information attached is because it helps fjll the empty space between each point on the map. Otherwise; the map could become far too sparse and not very pleasing to use.

An important aspect of my map is the colour. Colour can help differentiate and create contrast between different elements. I want my map to have a lim- ited palette, because otherwise it can be overly confusing and complicated. The palettes i’ve chosen here are contrasting, include bright colours, and have a wide range of hues. One thing that’s important is that the colours are con- trasting against eachother, otherwise they’ll be muddled and hard to juxtapose against eachother. The palettes I’m leaning most towards are the fjrst and last, due to the range of colours within them, despite working well together and contrasting in way that’s pleasing to the eye. It’s extremely important for the colours to work well together and look ap- pealing, since the entire map is dependant on the user and how they like the overall design. Being interactive, it also needs to make sense and be clear enough to use with ease- clear concise colours can help achieve this. This map on the left shows how a limited palette can be extremely effective in showing sections and areas. This map only uses around fjve or six colours- yet it’s full of depth and

The next step in the creation of the map was deciding exactly how the icons would look. To start this process I did some rough sketching of different icons and sym- bols that could represent different aspects. This is somehwhat split up into sections; such as more art based, station- ary, shopping and even photography. Each corre- sponding to an aspect of the map Since I want each aspect of the map to have a unique icon, I decided to plan out many different types, as long as varia- tions. These, however, were only rough sketch- es and needed to be defjned further.

To help further my icon development- I took the main sections and drew out the key icons for each. By using some of the basic sketches I had made- and new ideas I was able to create a range of different icons to choose from when it comes to creating the fjnal icons. I tried to make them simple and easy to under - stand, since on the map they will be far smaller and won’t be able to hold much detail. The fewer shapes and lines, the better. I wanted to give myself a wide range of ideas when it came to the icons, to allow more fmexibility when creating the fjnal icons to the use on the map. One more thing I hadn’t considered on this page is the colours of each icon type.

After considering the icons; I needed to consider the informa- tion boxes. Since the map will be interactive, it’s important to think about how the information will be delivered to the end user. I started by drawing out some more generic, basic boxes with places for information, a title and images. However, an important aspect of my map is making it creative in order to refmect the theme. So, I made a few boxes with a more artistic approach. Boxes that have the appearence of a canvas, document, etc. These box- es could be used when showing information on specifjc shops or places. For example; the document themed box could be used when showing a stationary store. This helps add some uniqueness to the overall map.

The fjrst step toward the creation of the Interactive map was creating the basic outline for the map itself. This involved scanning in some of the traditional map sketches and placing it into Illustrator. I used the pen tool to trace around the pencil sketch- es and make a professional, clear map. There are some differences between the original sketches and the fjnal outcome, such as making the lines different widths to better represent them. Once the strokes were placed, I added an outline and background to make the lines stand out, and conform to my set colour palette. The outline is subtle, but I used a pure black to sepa- rate the the lighter tones and the darker background. I tried other colour palettes and different ways of pre- senting it, but I decided these colours fjt best. Along with adding the outline, I also added bits of text to identify the roads. Once I was happy with the roads and background, I started to make the icons. Similarly to the roads, I made them by tracing over and editing icons I had drawn on paper. By using a mixture of the pen, line and various shape tools I was able to create the desired look for each icon. I kept them simple and easy to identify, no matter how small the icon was. I also gave them a unique colour to make them easy to differentiate. The map also con- forms to only these few colours to make it simpler.

Along with the icons, I also traced some fjsh, meant to represent the Kingston Upon Thames coat of arms and iconography. Using the same colours, I created the text boxes. I made a rectangle, with a small black outline, I used the same sized box for each information piece, making the map look more consistent. For some informational icons I used Illustrator’s image trace feature on existing logos and images, this is the technique I used for the Kingston borough logo along the branded icons. The other images, however, were made by hand in Illustrator. Images such as the spool of fabric and phone boxes falling. There are some errors on these icons, such as the lines extending too far past the middle area on the phone box- es, or the white area around the spool being a different colour than the background. Otherwise, however, I feel the icons were effective in con- veying some basic information about the location they’re linked to. I had to create these icons because the locations didn’t have any typical iconography, such as a logo. The last piece I add- After trying a few different animation ideas, I settled on a girl bobbing slightly ed to map was a key, up and down, on the far right side of the map. Since that area was also quite displaying the icons barren, I thought it would be a welcome addition. and what they display. Though the icons on the In Illustrator, I traced over a sketch I had made, separating each part and mak- points themselves also ing sure each individual aspect could be animated. show this, I felt it would be useful to have it writ- I used the same palette I had used for the rest of the map, making sure it ten out. didn’t stand out too much, distracting for the maps contents. This was the last piece When imported into Animate, I converted the overall drawing into a movie of the map I added on clip, enabling me to animate it. I used small tweaks within the clip to create Illustrator before mov- the animation. The overall animation only has a total of six frames, three doing ing it into Animate. I did down and three going up. add more elements in Illustrator later on, but after the initial interac- tivity was added.