Mappe illustrate
L’uso delle illustrazioni nel design di un sito è ormai una pratica molto comune; fondamentalmente perché il designer può dare libero sfogo alla sua creatività, aggiungendo al layout del template personalità e un fascino unico.
Dalle piccole icone illustrate fino a interi sfondi disegnati a mano, questi elementi sono un valore aggiunto e hanno la capacità di catturare l’attenzione di diversi tipi di visitatori che incuriositi rimarranno sul sito e sfoglieranno i contenuti per un tempo più lungo.
L’argomento di oggi riguarda un elemento in particolare: le mappe.
Tutti almeno una volta abbiamo fatto una sezione “dove siamo” e con poche righe di codice abbiamo risolto il problema aggiungendo Google Maps nel nostro sito. Semplice, veloce e… monotono. Sono tutte uguali e impersonali queste pagine, hai mai pensato che le mappe possono essere dei veri e propri elementi decorativi personalizzati?
Ecco alcuni esempi:
Ready Made Design
Dascola Barbers
Il frutteto
SolidSoup
Le mappe illustrate rappresentano un luogo secondo una propria interpretazione personale e il loro aspetto dipende molto dal creativo che le disegna. Possono essere molto semplici con pochi colori e forme stilizzate, oppure molte complesse ricche di particolari e talmente reali da sembrare delle fotografie scattate dal satellite.
C’è una caratteristica che le accomuna tutte: gli elementi che sono interessanti per l’utente o possono servire da punto di riferimento per orientarsi sono indicati in modo inconfondibile con disegni, simboli, scritte o icone.
Infatti, negli esempi di sopra, per aiutare il visitatore a trovare facilmente il luogo sono evidenziati alcuni punti d’interesse come semafori, altre attività e parcheggi.
Altro particolare da notare è il collegamento a Google Maps sotto ogni illustrazione. Infatti un elemento non deve escludere l’altro, sarebbe un errore personalizzare una mappa e togliere la possibilità di esplorarne una interattiva.
In alcuni casi le mappe diventano un vero e proprio background interattivo:
Taocommunity
Dez Villa Alpina
Tutti gli esempi riportati fino ad ora sono di siti interamente, o quasi, illustrati, ma anche nei casi meno decorati un tocco di creatività a un elemento della pagina non fa certo male!
Sta al creativo scegliere il modo più adatto di rappresentarlo in modo da farlo amalgamare a quello che lo circonda.
Rotondo
Cloudberry
Ma come realizzare una mappa illustrata?
Come prima cosa bisogna prendere una piantina della zona in cui è situata l’attività. Poi si può procedere in diversi modi.
Il più semplice è sicuramente importare l’immagine in Illustrator e ricalcarla, aggiungendo qualche elemento come nomi di strade, icone e naturalmente il punto dove si trova l’azienda.
Altrimenti si può prendere ispirazione dalla piantina e rappresentarla in modo stilizzato.
Il metodo sicuramente più laborioso è ricreare la mappa in modo tridimensionale utilizzando l’effetto 3D.
Per finire ecco una carrellata di risorse gratuite da utilizzare per le tue creazioni:
Animali
Simboli
Simboli2
Edifici
Edifici2
Alberi
Alberi2
Con quest’articolo ho voluto darti uno spunto con nozioni e risorse per realizzare qualcosa che riesca a sorprendere il cliente e il futuro visitatore del sito. Prova a creare una mappa illustrata e fammi sapere com’è andata.
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
16 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo
Sbalorditivo. Ottimi link davvero..Un tempo quando lavoravo in azienda ero il “mappista”, circa una decina di mappe al mese nei periodi clou…magari averle fatte belle così con mille elementi grafici. Invece dovevamo far le solite grigie mappe..Pazienza. Ottimi spunti comunque, grazie!
Grazie Ale :)
Secondo me spesso ci si concentra più sulla quantità che sulla qualità perdendo di vista l’originalità. Ad esempio nell’azienda dove lavoravi che gli costava realizzare alcuni template di mappe da utilizzare quando ne avevano bisogno?
Tempi..hai detto bene tempi… purtroppo e sopratutto qui nel nord i TEMPI son la cosa + importante.Alla fine si riduce tutto in una nostra paranoia grafica. Oggigiorno colleghi la pagina con le mappe a google maps ed è fatto. Forse ancora ancora per il cartaceo.. Forse! ;)
Ad avere il tempo, sarebbe bello, ma dal momento che ormai dobbiamo fare tutto da soli, le mappe lasciano il tempo che trovano… grande Google Map!! :D
Ciao Xeniweb, guarda che anch’io trovo Google Maps molto utile. Dico solo che utilizzare una mezz’ora per creare ogni tanto una cosa personalizzata potrebbe essere una buona idea ;)
Woooow da provare assolutamente!
Grazie per lo spunto interessantissimo ;)
E di che ;)
Fammi sapere come va
Bell’articolo, specialmente in questi ultimi tempi che mi stavo interessando alle mappe proprio personalizzate..! Interessanti risorse nei link e a proposito, giusto una curiosità , viste le diverse tipologie di mappe che si vedono in giro, ossia, viste dall’alto e piatte, oppure su vista 3D..sapete come si fa a creare quegli elementi grafici che sembrano 3D con tanto di ombre proiettate , ma che allo stesso tempo sembrano vettoriali in stile illustrato , detto in parole povere un disegno 3D .Potrebbe definirsi grafica vettoriale 3D? Esiste qualche programma in particolare? O sono giusto modelli 3D fatti con programmi per grafica 3D, ma elaborati poi in programmi tipo Illustrator o Photoshop?
Scusate la ripetizione di grafica, 3d , disegno eheh XD
Ciao Fabio, come programma per realizzare grafica vettoriale uso Illustrator quindi ti posso dire con certezza che ha un effetto 3D per creare oggetti tridimensionali.
La più bella è quella di Solid Soup, mi stra piace l’idea! :D
Sono geniali anche le bustine di zucchero, va beh.. :D
Devo dire che a trovare cose carine c’ho messo un po’…
Bello, molto bello! Brava!! ;)
Grazie Marco ;)
Ciao! Complimentoni! giusto quello che mi interessava. Ma per fare queste stupende mappe bisogna mettersi li di volontà buona o si parte da una mappa pronta della zona interessata? PErchè il mio problema sta proprio lì. Ho un cartellone pubblicitario da realizzare e google maps non mi esporta in vettoriale e neanche a una risoluzione decente. Dove posso andare a prendere la base per poi “decorare”?
Ciao Mattia, grazie!
Guarda, se vuoi partire da qualcosa di pronto ho trovato un paio di link che ti potrebbero esserti utili:
- http://www.openstreetmap.org (gratuito, ma il file è molto incasinato quando lo apri in Illustrator)
- http://www.edimap.it (a pagamento)
Cmq cercando su Google “cartine vettoriali” ti escono molti altri risultati.
Fammi sapere, se ti sono stata utile.
Ciao
Ciao,
grazie della tua risposta ma i link che mi hai fornito già li avevo visti ma non fanno al caso mio. Mi sà che devo procedere a manina :(