BEHOME A visual system to find out people’s most suitable location for living in Berlin according to their very specific needs.
INHALT x ExposĂŠ x Information arquitecture x Selectable list
x Map xLegend xInfobox
Personas Icons Photos Berlin Photos miniaturen
3
4
EXPOSÉ Behome explores lifestyles landscapes as a relationship between people’s needs and their environment. It is a project based on the cartographic visualisation of the variety of interests aiming to construct a lifestyle image of the city of Berlin. There are multiple profiles of people that are currently moving to Berlin with a wide range of interests as well as several options of neighbourhoods that are able to provide for those needs. Currently there is no platform that presents in a graphic way, where can people find what they need. The project focuses on the identification of the wide range of needs of people that are currently moving to Berlin. The analysis of the users through the constructions of profiles of people that are constantly moving to Berlin will provide a list of their needs that will be used as a starting point for a more detailed list. This list will be presented as a selectable menu were the main categories will be represented by a custom set of icons with a limitation of 5 choices that will be visualised in the map of Berlin, through the selection of this needs each user will defined their own lifestyle. Based on several existing databases the selection of needs will be visualised according to pre-defined graphic parameters ( color, shape, size, opacity, patterns or direction) on a SVG map providing a graphic translation of lifestyles landscapes in Berlin The goal is to provide a interactive visualisation of the heat zones where the needs of people moving to Berlin can be pleased, through an extended selectable list of categories that will defined each lifestyle and visualise those needs in a map.
5
6
INF. ARQUITECTURE To achieve a correct structural design of information for the project, an architecture map and a series of possible wireframes were design to organize properly all the information that must be contained , in this case the required blocks of content and their technical aspects are : 1
Homepage
Static landing page.
2 Languages
List of the languages spoken by Berlin immigrants based on the Wikipedia page of Demographics in Berlin.)
3 About
Summary refering the project , its aproach, tools and data.
4 Selectable List
Selectable list with a maximum of 5 selection, with categories organized in three ranges of hierarchy, the first one are the main categories presented by a set of custommade icons ,second and third range are presented in text.
5 Map
The Map wil be powered by Google API where colors and map features can be completely customized. The heat zones of their selection will be visualized on the map in five different colors , this heat zones will be based on the Google Places API database of more than 95 million places , verified and reviewed by owners and users on a daily basis.
6 Selected categories
For the user to understand what is being visualised in the map, a legend of their personal selection will be presented on the website explaining the selected categories and the colors that represent them on the map.
7 Info Box
The infobox will apear wile hovering the categories and will contain relevant information and tips for new berliners .
7
0.0
Information arquitecture of the website project.
1.0 Selectable list
1.1 Transportation 1.2 Education
2.0
3.0 Map
2.1 Berlin Map 2.2 Heat Zones
4.0 Legend
3.1 Selection 1 3.2 Selection 2
1.3 Eating & Drinking out
3.3 Selection 3
1.4
3.4 Selection 4
Leisure 1.5 Green Areas 1.6 Health 1.7 Drugs 1.8 Services & Ofices 1.9 Money 1.10 Shopping 2.11 Beauty 1.12 Sport 1.13 Religion 1.14 Handicap 1.15 Pets
8
Behome Homepage
3.5 Selection 5
Info Box
0.0
Home
0.1
Languages
0.2
About
0.1.1 German
0.3.1 The Project
0.1.2 English
0.3.2 Aproach
0.1.3 Turkish
0.3.3 Tools
0.1.4 Polish
0.3.4 Data
0.1.5 Spanish
0.1.6 French
0.1.7 Russian
9
128 0 PX CENTERED
BEHOME
Home
Languages
Selectable List
About
5 Selected Categories
6 36 PX
6 Possible wireframes for the project, containing the same blocks of information.
Map
Ifo box
128 0 PX CENTERED
Home
BEHOME
Languages
About
5 Selected Categories
63 6 P X
Selectable List
Map
Info Box
128 0 PX CENTERED
BEHOME
Home
Languages
About
Selectable List
5 Selected
Ifo box
Categories
636 PX
Map
10
1280 PX CENTERED
Home
BEHOME
Languages
About
Selectable List
63 6 P X
5 Selected Categories
Map
Info Box
12 80 PX CENTERED
BEHOME
Home
Languages
About
Home
Languages
About
Selectable List Ifo box
636 PX
Map
5 Selected Categories
1280 PX CENTERED
BEHOME
636 PX
Map
Info Box 5 Selected Categories Selectable List
11
12
LIST For the content in the selectable list and its design, a series of steps were made to achieve the final result. The first setep was to create a series of personas that provided a starting point for the needs list, then this list was developed and organized in three categories , mother categories (Education), secondary categories ( Adults education ) and last the specific need( German Course). The second step was defining whitch icon will be used to represent each one of the mother categories , in this point a survey of free asociation concepts was asked to twentie new berliners and then came the design of each icon.
13
14
Personas In order to achieve an acurate list of what are the users of this plattform looking for Berlin to provide, a series of profiles was developed of prospective new berliners. Personas are a method of market segmentation where a combination of qualitative and quantitative data is collected to build archetypes of the members of our target audience. Building Personas helps predicting users based on their previous behavior and it contains information about the users scenareo, expectations and characteristics. For this project 6 personas where builded , trying to include a wide range of different people that are currently moving to Berlin. The profiles builded are the following: 1 2 3 4 5 6
Young pregnant couple. Single buisness man. Yoggi woman with her dog. Elderly woman. Student who loves to party. Family with two kids.
15
They need
“The more doors you open, the more you will discover who you are”
Ţ -PX CVEKFU Ţ -JCSBSZ Ţ 'FB NBSLFUT Ţ 4FDPOE hand stores Ţ )PTQJUBM Ţ %PDUPS Ţ 'BSNBDZ Ţ ,JOEFSHBSUFO
Name : Katie Adams & Peter Thorne Background : Late twenties coupple from London, they live together for five years already, now she is pregnant and writes a Phd , he is a psychologist their income together less than €15.000. Goals : Raise their child in a healthy enviroment, get a place in a kindergarden, they are enviromental activists and they live under a low budjet. Atributes : Looking for a cheap way of living, in a place where they can recycle, they participate in seminars and workshops very often, their soon will be born soon and he will need daycare. Profile : Katie and Pete have been together for 8 years, they where living together in London when she got accepted for a graduate school in Berlin, they decide to move here so she could write her PhD and Pete is looking for a job as a Psychologist. They are expecting their first child together, who they need to race in a country with good public education because their income is not much at the moment. They live under a low budjet and they enjoy consumming less that the average, though they are big fans of vintage furniture and vintage clothes.
16
“My biggest motivation? Just to keep challenging myself. I see life like one long race — everyday I’m getting closer to the triumph.”
Hee needs Ţ 1BSLJOH garage Ţ 4FDVSJUZ Ţ -VYVSZ CBST Ţ -VYVSZ restaurants
Name : John Walters Background : 35 years old, comes from U.S.A, single and works in a multinational consultancy, has an income more than €100.000. Goals : Meet new people, flaunt his achievements with friends, explore the world. Atributes : Luxury living is a priority, work comes first, he loves tecnology and gadjets, and constantly needs to be beter than others. Profile : John is a young professional working for a multinational company with precense in Berlin. He is moving to berlin because of his job, he is single and therefore moving alone , he doesn’t know anyone in Berlin. He lives a luxurius lifestyle with all the comforts he can get, he is a very sociable person but he spends most of his time working. He has his own luxury car and public transportation is not a need, he enjoys going out to fancy restaurants and clubs when not working.
17
“ Always do your best, but keep in mind that your best is going to change from moment to moment. ”
They need Ţ $SBGUT TUPSF Ţ 1FU TUPSF Ţ 'BSNFST market Ţ #JP PSHBOJD store Ţ 1BSL XIFSF dogs are allowed Ţ )BOE NBEF markets Ţ :PHB TUVEJP
Pia Albacete and Lucy 30 years old, comes from spain, single with a dog, works as a freelancer journalist , average income of €24.000. Make new friends, stay healthy, provide for Lucy. She loves to DIY, only buys fair trade and organic. Pia is a talented journalist, she moved to Berlin after loosing her job and decided to start working as a freelance journalist. She enjoys a healthy living wile traveling with her loyal companion Lucy, they enjoy going to the park but especially long anveturous walks in the nature. Pia supports fairtrade to the maximum and buys her food in local farmers markets, she apreciate handmade crafts and enjoys DIY projects as ofter as she can. She is a beloved friend who makes everyone feel like home , her perfect day includes doing yoga, playing with Lucy and meeting friends for long talks over tea .
18
“This too shall pass, anyways there is always grandma to count on.”
Name : Candelaria Flores
She needs Ţ %PDUPS Ţ 'BSNBDZ Ţ (BSEFOJOH supply Ţ (BSEFO Ţ 1VCMJD transportation Ţ ,OJUUJOH store Ţ #BLJOH TUPSF Ţ $IVSDI
Background : 75 years old comes from Argentina, she is a widow and lives on her life savings and pension income more than €20.000 and her life savings. Goals : Spoil her two grandchilds help her daughter raise the kids grow rare orchids, go to heaven. Atributes : Needs to have public transportation, garden or a big balcony plus some extra space for the grandkids, she is also a devoted christian. Profile : Grandma Candelaria move to Berlin because her daughter lives in Berlin with her german husband and her two kids. After her husband died she decide to close her company and move to Berlin to help her daughter raise the family. She speaks perfect english but not a sigle word of german, but she is a beloved woman who will conquer anything with her knitting and baking habilities. Her grandkids have to spend many nights with her because of the work of their parents and because they love her cooking and stories.
19
He needs
“When the devil says dance, you better say fuck yeah !.”
Ţ 1VCMJD transportation Ţ $IFBQ SFOU Ţ #BST Ţ $MVCT Ţ %SVHT
Name : Berent Svensson Background : 23 years old, comes from Sweden, single, during the week he studies in UDK, income less than €7.000. Goals : Party all weekend non stop, finish his studies in germany. Atributes : He lives two lifes, the student during the week and the party monster during weekends, He rarely stays home on the weekends. Berent is a young party spirit who moved to Profile : Berlin because of his education and the famous party sceene. He takes his studies very seriously during the week but weekends are purely for party. He wants to move alone to a cheap flat, somewhere with comfortableacces to public transportation because he goes to UDK every weekday.
20
“It is away from everything where we can find ourselves.”
They need Ţ (FSNBO course Ţ 1VCMJD school Ţ (SFFO BSFBT Ţ 4QPSUT BSFBT Ţ 1VCMJD transportation
Name : Beaupre family Background : Thomas is a 45 year old father , Myriam is 42 years old mother, Bejamin is 10 and Alexey is 16 years old they come from France. The Father is computer scientist and the mother a nurse, together they share a total income of €35.000. Goals : Myriam needs to learn german and get a job Benjamin and Alexey need to go to public school. Atributes : They enjoy green areas and many sport related activities, they are users of public transportation and education. Profile : The Beaupres are moving to Berlin because of Thomas’s new job as a computer scientist for SAP , Myriam has to learn german to be able to work as a nurse in germany, so she needs to do the integration course as fast as possible, the four of them are currently living with the father’s income and social help.
21
Complete List The development and the choise of what is mentioned in this list, are based on the following sources : last census of Berlin, Amt fรผr Statistik Berlin-Brande nburg, Visitberlin.de, Berlin.de, Toytowngerm anyand last but not least Wikipedia.
Transportation Public ลข #VT ลข T CBIO ลข 5BYJ TUPQ ลข 5SBN ลข 6 CBIO Private ลข "JSQPSU ลข #VTT UFSNJOBM ลข 5SBJO TUBUJPO Rentals ลข #JLF SFOUBM ลข #PBU SFOUBM ลข $BS SFOUBM ลข $BS TIBSJOH TUBUJPO ลข %C CJLF TUBUJPO Shops ลข #JLF TUPSF ลข $BS TUPSF Energy ลข Electric car charging station ลข Gas station Repair ลข Car repair ลข Bike repair
Education Kids ลข /VSTFSZ ลข ,JOEFSHBSEFO ลข &MFNFOUBSZ ลข (FTBNUTDIVMF ลข (ZNOBTJVN ลข )BVQUTDIVMF ลข .POUFTTPSJ ลข 'SFJF TDIVMF ลข 8BMEPSG ลข 3FBMTDIVMF ลข 4QFDJBM FEVDBUJPO
22
Adults ลข Conference hall ลข Integration course ลข Driving school ลข Hochschule ลข Library ลข University ลข Volkshochschule
Eating & drinking out Restaurants ลข Brunch ลข Burgers ลข Cafeteria ลข Chinese ลข French ลข German ลข Greek ลข Indian ลข Italian ลข Korean ลข Mexican ลข Spanish ลข Kebab ลข Thai ลข Vegan ลข Vegetarian ลข Vietnamese ลข Sudanese ลข Middle East ลข Chicken Treats ลข Cakes ลข Ice cream ลข $SFQFT 8BGลนFT Drinking ลข Bar ลข Beer garden ลข Cafe ลข Wine bar ลข Cocktail bar
Leisure ลข Culture ลข Zoo ลข Cinemas ลข Circus ลข Memorial ลข Monument ลข Planetarium ลข .PWJFT .PWJF SFOUBM Museum ลข History ลข Modern art ลข Art ลข Industry ลข Technology ลข War ลข Natural history Nightlife ลข Casino ลข Club ลข Beach club ลข Disco club ลข Electro club ลข Funk club ลข Hip-hop club ลข Indie club ลข Minimal club ลข Pop club ลข Punk club ลข Reggae club ลข Rock club ลข Roof terrace ลข Salsa club ลข Swing club ลข Tango club ลข Gay club ลข Lesbian club ลข 5SBOT TFYVBM %SBH Shows ลข Cabarets ลข Opera ลข Theatre ลข Live music
Sex Ţ Brothel Ţ Erotic massage Ţ Escorts agency Ţ 'FUJTI CETN Ţ Pickup bar Ţ Sex club Ţ Sex shops Ţ Street walkers Ţ Strip club Ţ Swingers
Green Areas Ground Ţ Park Ţ Playground Ţ Dog park Ţ Grilling area Ţ Fkk area Ţ Forest Water Ţ Canal Ţ Lake Ţ River Ţ Fkk beach
Health Praxis Ţ Anesthesiology Ţ Cardiology Ţ Chiropractor Ţ Dentist Ţ Dermatology Ţ Endocrinology Ţ Diabetology Ţ Gastroenterology Ţ General praxis Ţ Gynecology Ţ Hematology Ţ Immunology Ţ Nephrology Ţ Neurology Ţ Oncology Ţ Ophthalmology
Ţ Orthopedics Ţ Otorhinolaryngology Ţ Pathology Ţ Pharmacology Ţ Phoniatrics Ţ Physical therapy Ţ Plastic surgery Ţ Pneumology Ţ Radiology Ţ Radiotherapy Ţ Reproductive Ţ Rheumatology Ţ Surgery Ţ Urology Ţ Venerology Ţ Visceral Ţ Pediatrics Ţ Obstetrics Mental Ţ Psychiatry Ţ Psychology Ţ 5IFSBQJTU Alternative Ţ Acupuncture Ţ Natural medicine Ţ Ayurvedic medicine Medical center Ţ Clinic Ţ Emergency Ţ Hospital Ţ Rehabilitation center
Services and Offices Ţ City hall Ţ Community center Ţ Court Ţ Customs Ţ Embassy Ţ Foreigners office Ţ Information Ţ Job center Ţ Police
Ţ Post office Ţ Prison Ţ Registration office Ţ Tax office Ţ Vehicle registration Ţ Public transportation
Money Ţ Atm Ţ Bank Ţ Currency exchange
Shopping Wardrobe Ţ Accessories Ţ Baby Ţ Department store Ţ Female Ţ Glasses Ţ Hats Ţ Jewelry Ţ Kids Ţ Male Ţ Second hand clothes Ţ Shoes Ţ Sneakers Ţ Tailor Ţ 6OEFSXFBS -JOHFSJF Home Ţ Flowers Ţ Furniture Ţ Gardening Ţ Home improvement Ţ Kitchen Ţ Lighting Ţ Second hand furniture Ţ Art supply Ţ Textiles Culture Ţ Art gallery Ţ Books Ţ Comics Ţ Record store
23
Hygine Ţ Droguerie Ţ Dry cleaning Ţ Laundromat Ţ Perfumery Games Ţ Modells Ţ Toys Ţ Video games Supermarkets Ţ Arabic Ţ Asian Ţ #JP 0SHBOJD Ţ Discount Ţ Convinience store Ţ 4upermarket Ţ Turkish Ţ Wholesale Food Stores Ţ Butcher Ţ Candy Ţ Cheese Ţ Bakery Ţ Deli Ţ Fish store Ţ Food hall Drinks Ţ Liquor store Ţ Tea store Markets Ţ Christmas Ţ Crafts Ţ Farmers Ţ Fea market Technology Ţ Computers Ţ Electronics Ţ Hi-fi Ţ Instrument store Ţ Phones Ţ Photography Ţ Tools
24
Beauty Ţ Barber Ţ Massage Ţ Nails Ţ Salon Ţ Sauna Ţ Spa Ţ Tattoos & Piercings
Sports High-Impact Ţ Athletics Ţ Basketball Ţ Box Ţ Cycling Ţ 'JUOFTT 5SBJOJOH Ţ Football Ţ Golf Ţ Handball Ţ Ice hockey Ţ Racquetball Ţ Rugby Ţ Squash Ţ Tennis Ţ Volleyball Low Impact sports Ţ Yoga Ţ Pilates Ţ Tai chi Ţ Golf Ţ Swimming Recreational Sports Ţ Billiard Ţ Bocha Ţ Bowling Ţ Paint ball Ţ Sailing Ţ Table-tennis Ţ Dart Ţ Fishing
Extreme sports Ţ Skateboarding Ţ Bmx Ţ Climbing Ţ Kite Ţ Inline skating
Religion Ţ Buddhist Ţ Evangelical Ţ Islam Ţ Jewish Ţ Roman catholic
Handicap Ţ Access Ţ Toilette
Pets Ţ Veterinarian Ţ Pet store
Drugs Legal Ţ pharmacy Ţ homeopathic Illegal Ţ Amphetamines Ţ Cannabis Ţ Cocaine Ţ Crack Ţ Ecstasy Ţ Heroine Ţ Ketamine Ţ Lsd Ţ Mdma Ţ Mushrooms Ţ Speed
Survey 20 persons who where born in different countries and cultures, including europe, south america, north america and asia, where ask to associate the concepts ofh the mother categories of the list with a possible icon, according to the most common answer the icons where developed. The most common answers where: Beauty ¾ Lipstick Drugs ¾ Pills Eating & drinking out ¾ Glass Education ¾ Book Green Areas ¾ Tree Health ¾ Cross Handicap ¾ Wheelchair Leisure ¾ Sun Money ¾ Bills Pets ¾ Dog Religeon ¾ Church Services & offices ¾ Building Shopping ¾ Bag Sports ¾ Football Transport ¾ Bus
Survey results
25
26
Icons The mother categories of the list are represented by icons wile the specific categories are represented with text. In order to represent the main categories of the list , a set of customised icon was designed. The challenge was to create a comunicative and fuctional and understandable set of icons for people of different origins.
“ Words divide, pictures unite.� — Otto Neurath
The icon design process started with the determination of style, which contains an analysis of sizes, formats and styles that are currently functional in web design. In a second instant the pictograms were defined based on a survey where people from different origines that live in Berlin were ask to freely associate the concepts and icons. The last and most important stage was creating the final design. The design of the icons for which the typography Stratrum 2 was chosen as a starting point for the basic shape repertoire.
27
Design To choose the best option for the visual aspects of the icons a table of different styles and sizes of icons was made in order to explore the multiple posibilities, in this process the icon of a camera was used as an example to visualize several possibilities for its representation.
Style:
styles
Graphic icons exist between three main parameters, style, abstraction and reality, and between them we can find abstract representations, illustrative representations, photorealistic representations and realistic representations.
abstraction
reality
Size:
The size on an Icon depends on the platform where they are presented, some standarize sizes are : 16x16, 24x24, 32x32, 48x48, 64x64, 128x128 256x256,512x512, 1024x1024.
16 px
64 px
28
24 px
32 px
128 px
48 px
Color:
The main colors of the icons and the Website were extracted from the logo of Berlin and the shield of Berlin mixed in a 50%.
Perspective:
The icon should be design in the most representative perspective , that changes from icon to icon.
Front
Isometric left
Side
Bottom
Frontal axis
Isometric right
Isometric top
Side axis
Top axis
Isometric bottom
29
Abstract representation
16 px
Classic \No stroke \1 Color \Basic geometric shapes \Svg format possible
Outline Icon \2 Stroke weight \1 Color \Basic geometric shapes \Svg format possible
Pixel \No Strokes \1 Color \Svg format possible
Ilustrative representation
Flat \No Strokes \Multiple colors,2 Tones of each color (shadow-light) \Svg format possible
Hand drawn \Irregular Strokes \Several colors possible
Realistic representation
Smooth \No Strokes \Multiple gradients \Svg format possible
Realism \Requires high resolution \No Strokes \Multiple gradients and textures
Photorealistic representation
Photo \Requires high resolution \No Strokes \Multiple colors, gradients, textures
Reality
30
24 px
32 px
48 px
64 px
128 px
256 px
16 px
24 px
32 px
48 px
64 px
128 px
256 px
Long Shadow \Classic Icon with a geometric background \No Strokes \3 Colors ( background, icon, shadow ) \.Ë~Ày · >ÁÀ¤ ¹¹ T m
The options of size and styles hilighted in grey are the most suitable ones for this project.
Outline Long Shadow \#ÅÁ mÀ ] ÀÌ Á À>À geometric background \2 Stroke weight \3 Colors ( background, icon, shadow ) \.Ë~Ày · >ÁÀ¤ ¹¹ T m
Pixel Color \No Strokes \Several color \Svg format possible
Rounded Flat \Flat icon with a geometric background \No Strokes \Multiple colors 2 Tones of each color (shadow-light) \Svg format possible
Wattercolor
(among other possible painting tecniques) \Irregular Strokes \Several colors possible
Smooth IOS App \Requires high resolution \No Strokes \Multiple gradients and textures \Frontal top common perspective
Realistic OS App \Requires high resolution \No Strokes \Multiple gradients and textures \Frontal top common perspective
Realistic 3D model \Requires high resolution \No Strokes \Multiple gradients and textures
Scale 1:5
31
Construction The options of size and styles hilighted with grey are the most suitable ones for this Web project according to their characteristic s.
Stratum 2 was designed by Eric Olson from Process Type Foundryand is based on the austere geometry inspired by the early 20th century display faces but includes lowercase. It is geometric, modern, sans-serif, square, contain no circle and it is a Web font. For the icons design this typography was the staring point and the process of the icons design constisted in the analysis of the typography shapes, selection of shapes, building the icons with those shapes on pictures of the objects or actions that will represent the categories, sellection of the better working icons and finaly the styling of the icons.
Stratrum 2 capitals shape analysis.
Typography contruction elements.
Shapes repertoire for the Icons.
32
Icons construction process
Icons sellection
Icons styling options in 32 pixels
33
Normal
Hover
Transportation
Education
Eating & dinking Out
Leisure
Green Areas
Health
Services & Offices
Money
Shopping
Beauty
Sport
Religion
Handicap
Pets
Drugs Icons and hovered icons for the Website.
34
Miniature pictures A series of pictures of miniatures in tipical berlin situation were made to be used as background for the icons in order to expand the icon meaning, unfortunately the pictures contain too much information and instead of helping clarifying , they did the complete opposite, therefor they were not use in the website but are worth showing. The pictures were made with a Canon 5D Camera and a 35mm lens to achieve a blurrynes in the background of the photo, with an average distance of 30 cm and manually focused because of the small size of the figures.
One of the settings
3 2 1
1 2 3
Real situation background Cropping area for the button Figure made in a scale of 1:100
Health Icon and Text
Health Miniature Picture
Categorie in Menu with hoover
35
Original picture and background button for Transportation
36
Original picture and background button for Education
37
Original picture and background button for Eating & Drinking out
38
Original picture and background button for Leisire
39
Original picture and background button for Green Areas
40
Original picture and background button for Health
41
Original picture and background button for Drugs
42
Original picture and background button for Services and Offices
43
Original picture and background button for Money
44
Original picture and background button for Shopping
45
Original picture and background button for Beauty
46
Original picture and background button for Sports
47
Original picture and background button for Religion
48
Original picture and background button for Handicap
49
Picture and button for Transportation
50
MAP The main and bigger part of the website consists in map that can be divided in three layers: 1 Heat Zones
The 5 selected categories are visualized as heatzones , each selected categorie will be represented in the map with one color in the same tone.
2 Borders
The map will be only strokes of the districts borders.
3 Names of Districts
When the user zooms into the heat zones, he/she will be able to view the name of the district that is the most suitable according to their sellection.
51
Heat Zones After trying with several shapes for heatmap to be easy to understand, the circular shape extracted from the Stratrum 2 typography was chosen . This shape will aprear in the map in diferent sizes according to the ammount of places related to this categorie, found in the area. The heatzones to generate contrast with the map will be presented in RGB screen blending mode with a transparency of 70% so the color will be recognizable once is blending with another This means that where more layes are stacked together, the colors will blend generating a lighter color. The warmer the zone is, the lighter the color will be.
Possible shapes for Heat Zones
Colors for the heat zones
52
Heat zone example
Heat zone example 2
Heat zone example chosen
53
54
Website Home
55
56
Website Languages Menu
57
58
Website Education icon hover
59
60
Website Education icon hover specific categories
61
62
Specific categorie infobox wile hover
63
64
First selected categorie
65
66
5 selected categories and closing icons menu
67
68
Closed icons menu
69
70
Hover legend lateral bar
71
72
Zoomed and hover in one district
73
74
BIBLIOGRAPHY
From hieroglyphics to isotype Otto Neurath
Graphic designer Gerd Arnrz
Thinking with type Ellen Lupton
Information Anxiety 2 Richard S. Wurman
Information Arquitecture Peter Morville, Louis Rosenfeld
75