BEHOME

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