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.

This is a basic sketch I did on how I’d like the overall aesthetic of my map to look. With simple blocks and shapes accompanied by more detailed drawings around 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 where its located on the map. I’ve also included some basic info boxes and some concepts for the specifjc col-

• ur of the points. I’d like the map to have a limited palette so it doesn’t become

too confusing. Using colour can help enhance the overall map. 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. The starting point for this was drawing a semi-accurate map of Kingston itself. This is represented in the top left. This as an image on it’s own, however, is boring and relatively plain. When looking to stylize the map, I wanted to add over-the-top icons and im- ages to represent certain places on the map. Along with the exageration, I wanted to make it more clear and bold rather than confusing. I want to combine a functional map with a more artistic ap- proach

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

• f 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

• verall 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

• f 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

• utcome, 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- ed to map was a key, displaying the icons and what they display. Though the icons on the points themselves also show this, I felt it would be useful to have it writ- ten out. This was the last piece

• f the map I added on

Illustrator before mov- ing it into Animate. I did add more elements in Illustrator later on, but after the initial interac- tivity was added. After trying a few different animation ideas, I settled on a girl bobbing slightly up and down, on the far right side of the map. Since that area was also quite barren, I thought it would be a welcome addition. In Illustrator, I traced over a sketch I had made, separating each part and mak- ing sure each individual aspect could be animated. I used the same palette I had used for the rest of the map, making sure it didn’t stand out too much, distracting for the maps contents. When imported into Animate, I converted the overall drawing into a movie clip, enabling me to animate it. I used small tweaks within the clip to create the animation. The overall animation only has a total of six frames, three doing down and three going up.

I began the process of making the leaf- let by drawing lots of smaller thumbnail images, showing how I wanted to de- sign each individual panel of the leafmet. These sketches were quite small, and meant for simply getting ideas down. The fjrst few sketches informed how I would continue to design the more fjnalised sketches and designs. I took certain elements I liked from the thumbnails to create the fjnalised de- sign. I had to consider how I would display all my information on a printed leafmet, due to the fact the original design was

• interactive. Converting the map to a

more traditional format involved quite a bit of planning. My designs consisted of a front cover, two sections containing information on Kingston, and then the map, with all the information displayed on the inside of the leafmet. Since the leafmet is being designed to promote tourism, I wanted to make it interesting and engaging, showing a great deal of information and activities, to hopefully convince people to spend time and return to Kingston.

After creating the thumbnail sketches, I developed the ideas further, making larger more refjned designs. Not per- fect, these ideas were meant to bring together the better elements from the previous designs, and combine them into something both appealing and functional in displaying the information effectively. I kept the idea of having two separate information panels; one focusing on art and one focused on Kingston itself, and the history surrounding it. The cover re- mains more generally art-themed, meant to show what the leafmet focuses on. The inside, containing the map, is rela- tively plain but is the most important part of the leafmet. I had some designs containing additions, or separating the map from the information boxes. In the end, I wanted to keep it simple and concise. I kept some motifs and images between designs, specifjcally the paint palette to represent arts, and the use of the three fjsh to represent Kingston. Both of these pieces of imagery made it into the fjnal design, considering I feel they fjt the subject quite well.

Final Design

Taking the two more refjned designs, I made a much more detailed design, a culmination of both designs into something engaging and aesthetically

• pleasing. Keeping the same format of information, map and cover I simply

re-arranged some of the key elements, making sure each panel was able to effectively convey information whilst still being interesting to look at. The cover in this design included the more important motifs from previous designs, such as the paintbrush, palette, canvas and photo. All of which help evoke the idea of arts and culture. Inside the leafmet is the map, complete with information boxes to display the information of each location. Keeping the map simple, and allowing it to take up a large amount of space makes the leafmet easier to read and understand. I didn’t want the map to be small, making it diffjcult to read the text on each information box. When redesigning the map for print, I need to ensure all the information boxes fjt on the page, I also need to ensure the boxes don’t overlay with each-other or any other important aspect of the map, such as the key. This may involve moving the positions of each text box, or scaling certain ele- ments of the map. The fact that the maps original fjle is entirely vectorized will help in making edits, considering all the elements are infjnitely scalable without losing qual-

• ity. This means I can resize important graphics, and they will maintain their

pixel quality.

Once I was happy with my sketch, I needed to digitize the traditional artwork. Bringing it into Illustrator, I began to trace over the pencil sketches and add colour and depth to the original sketches. I made sure to use the original palette from my interactive map to ensure it stayed faithful to the original design. I also wanted the leafmet to work well with the original map aesthetically. I used a template to ensure the leafmet was the correct size, making it easier to format for print. This meant re-arranging certain sketch elements in order to make them fjt within the lines. I also took some short-cuts when creating the graphics, such as copying the fjsh so they stay consistent throughout. There are also a few changes within the artwork itself, made to make the design more appealing overall. When it came to placing the map on the leafmet, I made a illustrator version showing all text boxes and omitting all other graphics I had added in the interactive version. This simpler version was then simply placed on the leafmet template itself as an inner section.

The fjrst step when preparing my leafmet for print was to format it correctly in InDesign. This included setting bleeds and format- ting. Unfortunately, when printing my leafmet through InDesign, it con- sistently came out in black and white, and no amount of chang- ing settings and output remedied the error. As a work around; I exported the fjle as a pdf fjle and printed from Adobe Acrobat. Once I used Acrobat, the print was in full colour, however the fjnal print had quite an offset between the front and back. It’s most evident here, where the back of the map is too small to fjt with the front. I cut the leafmet based on the front cover, leaving the inner map with some white area, but no information cut off. This offset could be remedied by a larger bleed on the front cover, making the offset seem less large, however the leafmet works fjne even with the small bits of white show- ing through in the inner map. This version of the printed leafmet was also printed on sim- ple, thin paper which doesn’t lend itself well to the colours

• r detail. The leafmet could always be further improved

with higher grade paper, with more depth in colour and more sturdiness in form. A lack of good or professional printers makes printing a perfect leafmet near impossible; it’s important to make the most of what we have, with simpler prototypes and proofs. Despite the errors, the leafmet still works well as an attrac- tive and interesting way of promotion tourism in Kingston, which was it’s only original purpose.

Apps and Maps

When conveying information like location, directions, and other mapping, interactivity is important. If a user can navigate through the maps and they can respond in real-time, it becomes easier to use and comprehend. Therefore; there are many different mapping apps, all with unique takes on making maps interactive and user friendly. To help inform my own app creation, I decided to look into some of the apps and how they are designed. One of the most widely known app and website is Google Maps. Simple and in- formative; Google Maps displays only what’s necessary. It provides information such as directions, shop opening times, etc. Google Maps also shows reviews and live reports on how busy the location is. This can help inform people of where to go and when. The fact that it remains simple and clear helps users navigate easily, making it per- fect for people just casually checking their routes and destinations. Google Maps focuses on all types of navigation, including by foot, public transport, car or bicycle. It can plan the best routes to get to your destination, as well as cal- culating routes with specifjc parameters like least walking, or avoiding certain roads.

Idea and app Development

Tiese sketches show some planning in how I wanted my menus and information pages to look. I needed to ensure I could fjt everything onto the app and still make it clear and concise. I looked at how the menus would be laid out including the shape and size of the icons and how the information would be displayed. I made sure to label each section so I knew what each page showed and what other information it re- quired. I also did some small drawings for the login and notes page, since I also wanted my app to include both of those pages as well. Some of the menus featured scroll bars, meaning the in- formation would be displayed vertically in such a way that the user could scroll through the menu items. Having a scrolling menu is more complicated, but allows for more information on one single screen, rather than re- lying on more simple menus that lack as much informa- tion.

Using the previous sketches and thumbnails of what I wanted the app to look like, I drew up a more detailed plan of each page, including what pieces of UI and designs I wanted on each page. I planned the splash screen, login screen, menu, basic information page and notes

• page. Each have their own set of UI elements and quite a few feature my map branding.

Tie branding is referenced from my leafmet, and shows that all my map products have a consistent set of colours and designs. Tiough these sketches aren’t coloured, they would have the exact same palette as my map and leafmet designs to keep things consistent.

Afuer researching a handful of other apps, and considering how it would work with my app, I started the creation of my own app. To create it, I used Adobe XD, a free piece of sofuware focusing on the creation of apps. I only needed to create a prototype of my app, rather than a fully func- tioning program. It’s meant to show ofg how the app might look and function if it were to be a full application. XD is full of useful tools and design options that helped make the app both clear and functional, as well as appealing and fjtting to my over- all theme and colour scheme. All the graphics I used in the app were taken directly from the original map vector. Tie fjrst things I created were the splash screen and login page. Creating the splash screen was simply a case of taking graphics from the map leafmet and re-ar- ranging them to create an attractive looking introductory screen. Tie login screen, too, uses those simple vectors I had created for the leafmet and uses them as a logo to compliment to login screen. Tie input boxes for this screen were taken from a set of UI samples issued by Apple and available Apple’s

• wn website for use in XD.

Tie top interface was also part of the UI kit along with the bottom menu, howev- er the menu was edited by hand to include only one symbol, linking to notes. Tie ‘go’ button, however, was created by me using XD’s simple design tools

A bit of work I did in illustrator was tak- ing and isolation certain logos and icons from the map and information boxes, and creating a small grid-like menu which will act as navigation through the app. Each buttons links to a corresponding information page on the app, containing the same information as I placed both

• n the interactive map and the leafmet.

I kept this menu simple and clear to allow easy navigation. Afuer I created the information pages for each section, I added a notes page. Tiis page can be opened using the bottom menu, and when the text box is clicked it opens the key- board. To create the keyboard, I took an existing keyboard UI from the kit and recoloured each key to fjt my colour scheme and theme. I made the keyboard open by linking the text box to the keyboard page, but using the over- lay option rather than transition from one page to another. I also made the keyboard appear at the bot- tom of the screen, as it would appear on any

• ther app or piece of mobile sofuware.

The fjnal mockup of the kiosk uses simple shapes and layer effects along with the artwork created for my app prototype. The kiosk would function very simi- larly to the app, considering it’s operated by touch- screen, and needs to be simplistic and easy to use. To create the mockup, I used Illustrator’s 3D Ex- trude & Bevel effect, this creates an effective 3D look whilst being easy to customise and edit. I also used the Map Art function- ality to make the artwork wrap to the surfaces effec- tively. The process involved converting my artwork to symbols, to make them compatible with the map art function. I also needed to position them to create a realistic looking kiosk display, with room for external buttons or

• ther potential screens below the main one. Similarly, I ensured there was room around the edges to mimic an

actual kiosk screen. In terms of the functionality of the kiosk; it would operate almost identically to the app prototype, without some functions such as the login or notes page. To show this; I ensured the kiosk art didn’t show the notes page or any phone UI added to the app. Otherwise, the kiosk would navigate in the same way, showing each page and linking back to the main menu.