Design Process: Interactive Type Map!

For my final project in Typography this semester, we were to create an interactive typographic map by taking pictures of the typography of a certain area, designing a map that suited the tone, and also explain in little pop ups and roll over states what was working with the type and what wasn’t.

style guide for type map
style guide for type map
rough sketch of type map layout
rough sketch of type map layout

I first started off with creating a style guide to help get a sense of the tone and feel of the map; I decided to the downtown section of my home town Kingston, and focus on the typography of the night life there (bars and pubs). I wanted to use bright colours to represent nightlife, and keep the map looking fun and energetic. I also started drawing out rough layouts for the map.

version 1 of home page layout with rollover state
version 1 of home page layout with rollover state
version 1 pop up state
version 1 pop up state

I then quickly moved to digital, and rendered my first mock up of the map on photoshop. For the map typography, I chose “ITC Lubalin Graph STD” and “Futura”; I went with a more contemporary look since downtown Kingtson had a combination of modern and old style typography paired with historic buildings. Lubalin was better suited for the road since it was a slab serif that draws in the eye, while futura was used in paragraphs and in the main menu and type cluster.For the bar/pub markers, I wanted to use beer icons for pubs, and cocktail glasses for bars, and have them different colours depending on their typefaces.

version 2 of type map layout with rollover state
version 2 of type map layout with rollover state
version 2 of pop up layout
version 2 of pop up layout

Realizing I had way too many colours going on (they weren’t very accessible), I narrowed it down to 3 colours that were still vibrant, but had enough contrast to distinguish from one another. I also changed all the icons to the same colour, since a legend wasn’t really needed. The condensed futura made it so there were too many different fonts and styles, so I stuck to normal futura in everything and changed the title in the pop up to Lubalin. I also changed the colours in the type cluster so that”Kingston” was noticed first.

final type map layout
final type map layout
final type map layout with rollover state
final type map layout with rollover state
final pop up state
final pop up state

For my final design solution, I took out the bar feature of the main menu, and moved it more to the side of the map where it was less busy and kept it as a box. I changed the colours in the type cluster to blue and yellow, since the magenta is so powerful and is already taking up a lot of the map.

Overall, this was a really interesting and fun project! This type of map would be really useful for tourists or new students coming to town that want to learn more about downtown Kingston, and how choosing typography for a logo/business really sets the first impression, tone and feel of a place. Typography can tell you a lot about a place before you even go inside, you just have to know what to look for!

Advertisements

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 )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s