COMUNICAZIONE WEB PER UN ENTE NO PROFIT: LUNDIHER Laura Lanzoni
Laura Lanzoni - 776872 Relatore: Francesco Ermanno Guida Politecnico di Milano Scuola del Design Corso di Laurea in Design della Comunicazione Anno Accademico 2014/2015 23 febbraio 2015
0.1
I N D ICE
1 Introduzione 2 Parte uno: i casi studio 2.1 Il web design e i casi studio 2.2 Criteri di scelta dei casi studio 2.3 Conservation International 2.4 Open Knowledge 2.5 Croce rossa danese 2.6 Esercito svedese 3 Parte due: il progetto 3.1 Il brief 3.2 Il concept 3.3 Articolazione
5 8 14 15 20 24 28
Colori Tipografia Logotipo Variazioni Mimetica Applicazioni 4 Parte tre: approfondimento 4.1 Siti web: problematiche da affrontare 4.2 Sito promozionale 4.3 Sito istituzionale 5 Indici 5.1 Indice immagini 5.2 Bibliografia
3
34 36 39 40 41 42 45 47 53 74 76 80 96 97
1.1
I NTRO D UZ IO N E
Il progetto presentato in questo elaborato di laurea nasce all’interno del Laboratorio di Sintesi Finale, corso del terzo anno di Laurea in Design della Comunicazione al Politecnico di Milano. All’interno della sezione C1 il corso è incentrato sullo studio e la creazione di identità visive. Il concept di partenza dato all’interno del corso durante l’anno accademico 2013/2014 si basa sull’idea di creare una sorta di nazione della classe. Divisi in piccoli gruppi, agli studenti è stato dato il compito di occuparsi del branding di un aspetto della nazione, assegnato dai docenti. Gli enti nazionali ed associazioni assegnate ai singoli gruppi variano dai trasporti pubblici, al ministero dell’educazione, fino ad arrivare a partiti politici e aziende farmaceutiche. Il gruppo di cui facevo parte ha curato la parte riguardante l’esercito. La nazione che funge da contesto al progetto, scelta dagli studenti che si occupavano del nation branding, è l’arcipelago delle Isole Westman, in lingua locale Vestmannaeyjar, una serie di isole scarsamente abitate a sud dell’Islanda. La nazione è stata pensata come uno stato indipendente, fortemente informatizzato e con un’enfasi particolare sulla sicurezza informatica. Nello sviluppo del concept del nostro esercito, battezzato Lundiher, come verrà spiegato dettagliatamente più avanti, abbiamo tenuto in considerazione questi valori base della nazione e li abbiamo posti come punti di partenza. Una volta terminata, con l’esame di sintesi finale, la prima parte del progetto, ogni membro del gruppo ha lavorato individualmente ad un aspetto della comunicazione dell’esercito, approfondendolo e creando una nuova applicazione. La mia scelta è ricaduta sul web design, e mi sono quindi occupata della comunicazione online dell’esercito. Ho ritenuto interessante approfondire questo argomento nel contesto del nostro progetto in quanto, come si vedrà in seguito, si tratta di un’associazione con una forte enfasi sull’internazionalità, con necessità di farsi conoscere all’estero, e al giorno d’oggi internet è il modo più semplice e veloce per riuscirci. Inoltre una presenza web è utile anche per comunicazioni interne all’ente, come la gestione dei servizi interni. Tenendo in considerazione alcune delle problematiche che possono sorgere durante lo sviluppo del progetto, ho iniziato a cercare casi studio di siti web per considerare alcuni soluzioni possibili.
5
Nella pagina a fronte: una vista delle isole Vestmann. Sotto: la loro posizione geografica.
2.1 In basso e nella pagina affianco è evidenziata la posizione ricorrente del tasto di login in alcuni dei siti più visitati .
I L WE B D E S I G N E I C A S I STU D I O
L’analisi di casi studio è particolarmente utile nel campo del web design, in quanto ci permette di trovare pattern, funzioni e layout ricorrenti a cui fare riferimento. L’utente abituato a cercare informazioni sul web, infatti, sarà abituato, anche se inconsciamente, ad alcune pratiche di design diventate ormai standard 1. Ad esempio, nella maggior parte dei siti web la funzione di ricerca è collocata nella parte alta del sito, spesso sulla destra della pagina, come anche i tasti di login e logout. Una persona abituata a navigare su internet da anni che arrivi su un sito a lui nuovo riesce, grazie a queste pratiche standard, a muoversi all’interno del sito quasi istintivamente e così facendo trovare più velocemente e con meno fatica quello che cerca 2 . Se vuole iscriversi ad un social network sa di dovere compilare il modulo che gli appare al centro della pagina; se è già iscritto sa che il bottone da premere per modificare le sue impostazioni si trova nella parte alta del sito, la sua foto profilo è da qualche parte sulla destra, e così via. L’utilizzo di pratiche standard permette all’utente di sprecare meno tempo a cercare la funzione di cui ha bisogno.
1. Bank & Cao (2014), pag.68. 2. Boulton (2009), pag.245.
8
9
In basso: una mappa di calore tratta dallo studio di Nielsen Norman mostra il pattern ad F, visualizzando in rosso le zone del sito su cui l’occhio dei visitatori si posa più spesso. Nella pagina seguente: schematizzazione del pattern a Z.
Non è solo l’abitudine degli utenti a giustificare l’utilizzo di pratiche standard. Una persona posta davanti ad una pagina web tenderà ad utilizzare due pattern di lettura per analizzare la pagina. Il primo, studiato da una ricerca del gruppo Nielsen Norman che analizza il movimento degli occhi di 232 utenti posti davanti a migliaia di pagine web, è chiamato pattern ad F per la sua somiglianza con la lettera 3 . L’utente inizia a scorrere il sito con un movimento di occhi orizzontale sulla parte superiore della pagina; successivamente i suoi occhi si muovono leggermente più in basso ed iniziano a leggere la seconda riga di testo in un secondo movimento orizzontale, di solito più corto del primo. Infine scansionano la parte sinistra della pagina (se appartenenti ad una cultura con lettura da sinistra a destra) in un movimento verticale. Da questo studio possiamo dedurre che le informazioni più importanti vadano poste nei primi paragrafi in alto, e che l’utente medio non leggerà tutto il contenuto della pagina ma si soffermerà su parole chiavi, o scansionerà il testo per trovare le parole che cerca.
3. Nielsen (2006).
10
Il secondo pattern di lettura, diventato più comune negli ultimi anni e più ricorrente nelle pagine web meno focalizzate sul testo, è chiamato pattern a Z. L’utente scorre per prima cosa l’estremità superiore della pagina, da sinistra a destra. Giunti alla bordo destro della pagina, i suoi occhi salteranno in basso e a sinistra e inizieranno a compiere un altro movimento orizzontale analogo al primo4 . Questo movimento a zeta è applicabile alla maggior parte delle interfacce web in quanto soddisfa le principali necessità di una pagina web: il branding, la gerarchia delle informazioni, la struttura e la call to action, l’incitazione, rivolta all’utente, ad agire, che può essere un’iscrizione ad un servizio, una vendita o qualsiasi altra cosa i creatori della pagina web vogliano ottenere. Le informazioni principali o le call to action possono quindi essere messe alle quattro estremità di questa Z per massimizzare la possibilità che l’utente le noti. Un altro metodo per attrarre l’attenzione del lettore, come vedremo nei casi studio, è quello di enfatizzare gli elementi principali mettendoli in contrasto cromatico col resto della pagina.
1
2
3
4
4. Bank & Cao (2014), pag.34.
11
Sopra un’altra mappa di calore di un sito con pattern a F. Da notare come la presenza di immagini, soprattutto di volti umani, catturi l’attenzione dell’utente. Nella pagina di fianco, esempi di utilizzo del pattern a Z.
12
13
2.2
CR ITE R I D I SCE LTA D E I C A S I STU D I O
Essendo il web composto da un numero esorbitante di siti, si è scelto di limitare la ricerca di casi studio a pagine con un’affiliazione tematica al nostro progetto. Le categorie a cui ho fatto riferimento nella mia ricerca di esempi sono state quindi le seguenti: 1. Eserciti, a loro volta divisi in diverse categorie. Le presenze web di eserciti nazionali sono state considerate nella ricerca in quanto Lundiher è un’istituzione nazionale legata al governo. Molti eserciti odierni appartenenti a paesi in situazioni pacifiche, inoltre, hanno funzioni principalmente di difesa, cosa che li rende ancora più simili al nostro. Per questa ragione si è scelto anche di escludere dalla ricerca di casi studio i siti di contractor. Nonostante presentino elementi in comune con Lundiher per quanto riguarda l’arruolamento dei soldati (non è necessario essere di una certa nazionalità, ad esempio), hanno scopo principalmente offensivo e poco si prestano come esempio di comunicazione per un esercito non violento e ambientalista. 2. Associazioni no profit e organizzazioni non governative. Lundiher può essere considerato per certi versi un’associazione no profit, finanziata dallo stato e da donazioni esterne. Inoltre ha alcuni valori in comune con diverse no profit (ambientalismo, peacekeeping, etc). Un punto di ispirazione particolarmente interessante può essere il modo in cui i siti di no profit e associazioni di volontariato usano immagini e foto per esprimere valori, scopi, per istigare una call to action e via dicendo. Un altro elemento da integrare al sito è l’utilizzo di servizi online interni all’associazione. Come molte istituzioni (ad esempio università e banche), il nostro sito presenterà una pagina personale dove ogni soldato potrà avere accesso ai suoi dati personali, fare richieste, vedere lo storico delle sue missioni e soddisfare qualsiasi eventuale necessità burocratica che possa avere.
14
2.3
CO N S E RVATIO N I NTE R NATIO NAL
Studio Chermayeff & Geismar & Haviv conservation.org
Conservation International è un’organizzazione no profit ambientalista con sede negli Stati Uniti. Lavora sia indipendentemente, identificando zone dove la biodiversità è a rischio e agendo per proteggerle, sia offrendo sostegno a governi e istituzioni per accertarsi che le loro politiche siano ecosostenibili. Al momento è presente con scienziati in più di 24 paesi in 5 continenti, e collabora estensivamente con enti locali.
Lo scopo principale del loro sito, e della landing page in particolare, è quello di incitare l’utente a donare a Conservation International per finanziare uno dei loro numerosi progetti. Per ottenere questo risultato hanno creato una pagina web che illustra in maniera semplice e chiara chi sono, i loro valori, dove e in che contesti naturali agiscono. Utilizzando una struttura sempre più comune sul web ultimamente, Conservation International si serve di una home page a scorrimento verticale come strumento di narrazione. Il visitatore scorre lungo la pagina e viene guidato attraverso una breve ma concisa spiegazione degli scopi e dei metodi dell’associazione. L’esperienza è interattiva (l’utente può soffermarsi col cursore su alcuni paragrafi e immagini per fare apparire ulteriori informazioni) e presenta moltissime immagini di flora e fauna per meglio illustrare i risultati dell’associazione e per avere una connessione emozionale più forte, metodo scelto da molte no profit.Alla fine della pagina, e quindi della narrazione, si trova la call to action: un bottone di donazione. Una volta cliccato su di esso, l’utente può decidere quanto donare, se iscriversi alla newsletter e vedere grafici e resoconti che spiegano come sono stati utilizzati i soldi donati nei passati anni, così il donatore sa subito quale percentuale della propria donazione verrà usata per i programmi per l’ambiente e quale per gli aspetti burocratici.
15
A lato, il logo di Conservation International. Nella pagina successiva: i tasti di login e donazione in prominenza in alto a destra.
Il tasto di donazione e di iscrizione alla newsletter sono in prominenza anche nella prima pagina, in alto a destra (uno dei punti di incrocio del pattern a Z) e evidenziati cromaticamente con colori accesi. In questo modo l’attenzione del lettore è subito focalizzata sullo scopo principale del sito.
16
Nella pagina a sinistra e in quella prima: l’estensione verticale totale della home page, con form d’adesione in fondo. Sotto: la schermata che appare una volta premuto il link alle donazioni. Ancora sotto vediamo un esempio di come Conservation International usi la fotografia estensivamente per riaffermare il proprio legame con la natura; in questo caso come sfondo di un menÚ a tendina.
19
Studio johnson banks okfn.org
2.4
O P E N K N OWLE DG E
Open Knowledge è un’associazione no profit a sostegno del rilascio libero di informazioni, particolarmente a livello nazionale o in grande scala, e che controlla il livello di accesso alle informazioni statistiche nel mondo. I loro sforzi hanno creato un database dove nazioni e organizzazioni possono caricare le proprie statistiche. Open Knowledge si incarica inoltre di redigere l’Open Data Index, un indice che traccia l’accessibilità ai dati appartenenti a diverse categorie in 72 nazioni. Il loro logo è generativo e deriva appunto dall’Open Data Index. Estrapolando i dati dai database di 72 paesi e dal loro livello di accesso alle informazioni, hanno creato un simbolo che mostra
Sopra: il logo di Open Knowledge. A lato è visibile la struttura usata per trasformare i dati statistici di ogni paese nel logo: dieci cerchi concentrici servono da riferimento per le percentuali, e ad ogni linea corrisponde un paese, segnalato nell’immagine. Lo spazio vuoto tra i due set di dati forma una O, iniziale del nome dell’organizzazione. Nella pagina a fianco possiamo vedere il pattern a Z in azione nella pagina.
20
attraverso una barra colorata quanto accessibili (verde) o meno (rosso) siano i dati di ogni paese. Il risultato è un logo circolare formato da linee verdi e rosse di diverse lunghezze, che funge da piccolo monitor della libertà di accesso alle statistiche nei paesi monitorati 5.
1
2
3
4
5. Vit, Armin (2014), The Revolution will be Visualized. underconsideration.com/brandnew/archives/ new_logo_and_identity_for_open_knowledge_by_johnson_banks.php, [visitato il 2 dicembre 2014].
21
In questa pagina alcuni dei link ai Google Groups dell’associazione. Nella pagina a fronte vediamo una pagina del sito e il profilo Github del gruppo, da dove è possibile scaricare, modificare e commentare versioni open source dei codici usati da Open Knowledge.
Il loro sito presenta un perfetto esempio del pattern a Z in azione. Nei quattro incroci chiave troviamo infatti il logo (in alto a sinistra), le funzioni di ricerca, link a siti social e donazioni (in alto a destra), e una call to action che incita il visitatore ad iscriversi alla mailing list (in basso lungo tutta la pagina). Tra i quattro punti è presente un pannello dove appare il logo e una breve spiegazione degli scopi dell’associazione. Le altre pagine sono abbastanza semplici, usano come unici colori il bianco dello sfondo, il nero del testo e il verde istituzionale per i dettagli e i pannelli. Sono presenti pochissime fotografie, forse un richiamo alla trasparenza e ai valori di Open Knowledge. Interessante è il link al Google Group pubblico dell’associazione, dove i membri possono discutere apertamente i dati e i metodi di ricerca in message board divise per argomenti quali “lobbying transparency”, “open government data”, “open spending” e altri. L’associazione rende inoltre disponibili alcuni dei codici usati per il calcolo e il trattamento dei dati su GitHub, un servizio di web hosting per lo sviluppo di software open source con elementi di social network, in linea con gli ideali di trasparenza e collaborazione di Open Knowledge.
22
23
Studio Mustache
2.5
CROCE ROS SA DAN E S E
rodekors.dk
La branchia danese della croce rossa si occupa di offrire servizi sociali (aiuto alle famiglie, supporto psicologico, assistenza agli anziani, etc…), cliniche mediche, assistenza a persone in cerca di asilo, corsi di primo soccorso. La maggior parte dei fondi è diretta però a progetti di sostegno alla popolazione in aree disastrate e zone di guerra. Questa enfasi verso i programmi internazionali è evidente da un primo sguardo alla home page: a fine 2014, l’immagine principale della landing page promuove un progetto per aiutare i bambini siriani rifugiati durante l’inverno. L’uso della fotografia è estensivo attraverso tutto il sito e mostra principalmente i volti umani dei destinatari delle donazioni, per convincere l’utente a donare.
24
Nella home page ritroviamo il comune pattern a Z. In alto spiccano i tre tasti più importanti: dona, diventa volontario e cosa facciamo. Più in basso, sotto la foto del programma in evidenza, troviamo il pulsante di donazione in uno degli incroci critici della Z, affiancato alla scelta dell’ammontare da donare. L’utente può fare scorrere un cursore, aumentando la quantità di denaro da donare, e così facendo vengono visualizzati a fianco in tempo reale i risultati ottenibili con tale denaro. Se l’utente sceglie di donare 500 corone danesi, ad esempio, appaiono a lato dei pittogrammi che mostrano che la sua donazione può fornire 8 coperte e 2 pasti giornalieri; aumentando la donazione a 1000 corone il numero delle coperte diventa 16, quello dei pasti 3. L’uso di pittogrammi e infografiche è presente anche nel resto delle pagine per evidenziare i risultati ottenuti dall’associazione. Un altro pulsante, diverso a livello grafico ma con la stessa funzione di donazione, rimane presente in tutte le pagine del sito in posizione fissa sul margine sinistro della pagina, affinché il visitatore possa decidere di supportare uno dei molti programmi attivi in qualsiasi momento della sua visita, magari mentre sta leggendo dettagli sull’utilizzo dei fondi. Il pulsante è anche in prominenza cromatica in quanto è rosso su sfondo bianco (i colori classici della croce rossa ma anche della bandiera danese).
25
A fronte: la home page del sito. Sotto: la scelta dell’ammontare da donare. Con l’aumentare della cifra aumenta anche il numero di coperte e pasti donati. Il visitatore ha così un feedback immediato di quanto il suo contributo aiuti i recipienti delle donazioni. Il pulsante rosso riporta il testo “dona ora”.
26
1
2
Nella pagina a fronte vediamo due metodi per donare: la pagina dedicata, con slider e pittogrammi, e il pulsante fisso presente in tutte le pagine, che permette una donazione piÚ veloce. A sinistra è evidenziato il pattern a Z che termina con la call to action alla donazione.
3
4
27
Sotto un altro esempio dell’utilizzo della fotografia e dei pittogrammi e delle cifre per indurre l’utente a donare.
Studio DDB Stockholm forsvarsmakten.se
Sopra: il logo dell’esercito. Sotto: la home page della pagina istituzionale. Nelle due pagine successive: la pagina di recruitment a scorrimento verticale, con l’accesso al test.
2.6
E S E RCITO SVE D E S E
Secondo quello che scrivono nella sezione del loro sito “Why the Swedish armed forces exist”, le forze armate svedesi sono un esercito principalmente di difesa, che agisce in missioni di tutela dei confini e aiuto in caso di calamità sul suolo svedese, e in missioni di peacekeeping all’estero. Al momento si trovano truppe attive in Afghanistan, Bosnia, Kosovo, Mali, Repubblica Democratica del Congo, Somalia e Sudan del Sud. È il governo svedese a decidere in che condizioni utilizzare l’esercito, che dispone di una environmental policy, una serie di linee guida ambientali atte a ridurre la quantità di energia consumata, di rifuiti non riciclati e a tenere al minimo l’impatto ambientale delle proprie missioni. Per queste ragioni è da considerarsi uno degli eserciti nazionali attivi al momento che più si avvicina ai valori di Lundiher, nonostante le molte differenze strutturali. Il sito dell’esercito presenta una grafica in linea con i siti degli altri enti di governo svedesi. L’enfasi sugli aspetti di offesa dell’esercito è limitato alla presenza di militari in divisa mimetica nelle foto promozionali e all’uso di un carattere tipografico stile stencil che richiama quelli usati sui mezzi militari.
28
29
30
La parte più interessante del sito è forse la sezione promozionale di recruitment, rivolta al pubblico e nello specifico alle persone che stanno considerando l’arruolamento e vogliono avere ulteriori informazioni a riguardo, o più semplicemente sapere se la vita del soldato fa per loro. La landing page di questa sezione presenta una breve descrizione delle funzioni base e dei ruoli principali delle forze armate in una pagina a scorrimento verticale, con link ad informazioni più dettagliate. Una parte della home page è dedicata all’interattività, con una specie di test in cui l’utente può rispondere a quattro semplici domande: sai mantenere la calma in situazioni di stress? Sei interessato agli aspetti tecnici del lavoro? A quelli teorici? Ami il lavoro fisico? Il visitatore risponde a queste domande attraverso uno slider con risposte che vanno da uno a sei. In base alle sue risposte, il sito mostra quali ruoli all’interno dell’esercito potrebbero risultargli più appropriati, con percentuali. Ad esempio, se l’utente risponde che è molto interessato agli aspetti tecnici, il sito propone come primo risultato, che rispecchia le risposte dell’utente all’80%, il lavoro di meccanico all’interno dell’aeronautica. Cliccando sul risultato appare una breve descrizione delle funzioni svolte da quell’incarico, un piccolo grafico delle qualità richieste, dettagli sulle competenze necessarie e sui luoghi dove è possibile svolgere il lavoro. L’utente può scegliere fino a quattro risultati e contattare direttamente l’esercito per richiedere di arruolarsi. L’interattività della pagina permette al potenziale soldato di ricevere le informazioni che cerca secondo i suoi ritmi e fornisce una call to action finale che termina con la decisione di arruolarsi o meno
31
A lato vediamo la parte del sito che contiene il test attitudinale. Premendo il tasto arancione si ha accesso ai risultati. Sotto un esempio dei risultati: in questo caso il risultato corrisponde al 75% alle risposte dell’utente. Un piccolo grafico colorato mostra le qualità necessarie per il lavoro.
3.1
IL BRIEF
Come accennato nell’introduzione all’elaborato, la consegna dataci all’interno del laboratorio di sintesi consisteva nello sviluppare un concept e un’identità visiva per l’esercito delle Vestmannaeyjar. Il nostro gruppo non ha avuto vincoli per quanto riguarda il concept: siamo stati liberi di scegliere i caratteri dell’esercito, la sua struttura, i suoi valori, i suoi metodi di arruolamento e così via. L’unico limite datoci è stato a livello grafico: l’identità doveva essere dinamica. Per branding dinamico o generativo si intende un’identità visiva che può cambiare e generare nuove versioni di sé stessa in base a dati esterni 6. Un possibile esempio di identità dinamica può essere un logo per un’associazione locale il cui colore o la cui forma cambia in base a parametri quali la temperatura ambientale o il numero di membri in un dato momento. Il programma assegnatoci per aiutarci a rendere l’identità generativa è stato vvvv, un ambiente di programmazione open source con un motore di rendering video in tempo reale integrato. Usando vvvv è possibile assegnare parametri matematici ad un elemento visivo e modificarlo in base ad essi.
A lato: un esempio di identità dinamica. Nella pagina successivav: l’interfaccia e il logo di vvvv.
6. Van Nes (2012), pag.7.
34
Vvvv offre inoltre la possibilità di integrare elementi di physical computing attraverso l’uso schede elettroniche quali Arduino o Raspberry Pi, che permettono di importare dati di diverso tipo attraverso sensori, microfoni, telecamere e altri dispositivi. Questi dati possono essere utilizzati per modificare i parametri assegnati a diverse parti del progetto su vvvv in tempo reale.
35
3.2
CO N CE P T
Per definire le caratteristiche principali del nostro esercito siamo partiti dall’analisi del contesto geografico delle Vestmannaeyjar. Si tratta di un arcipelago con pochi abitanti (poco più di 4000 su una superficie di 17 km2) a sud dell’Islanda, con un ecosistema molto delicato. È presente un vulcano attivo, la cui ultima eruzione risale agli anni 70, e una popolazione animale elevata sia per numero di specie che per numero di individui. Più di otto milioni di puffin risiedono nell’arcipelago, il che ha reso questa specie di uccelli una sorta di mascotte non ufficiale di Vestmannaeyjar; il nome stesso dell’esercito prende spunto dalla parola islandese per puffin: Lundiher deriva infatti da lundi (puffin) e her (esercito). La nazione sviluppata dai nostri compagni è inoltre indipendente, con un forte spirito egalitario e non violento, e altamente informaticizzata. Per questi motivi si è scelto di creare un esercito che ponesse l’enfasi sulla tutela ambientale e sulla difesa dei confini nazionali, piuttosto che sull’aggressione militare. Il basso numero di abitanti inoltre rende difficile avere un pool di reclute locali sufficiente a coprire i bisogni ecologici della nazione. Da qui l’idea di un esercito internazionale, una sorta di legione straniera contemporanea che accoglie volontari da tutto il mondo. In linea coi valori della nazione non sono posti limiti per quanto riguarda la nazionalità, il genere, l’etnia o l’età (l’unico vincolo a riguardo è la maggiore età). Gli aderenti possono essere volontari interessati al progetto, persone in cerca di un futuro diverso o di asilo o rifugio politico. È quindi necessario che la struttura di Lundiher promuova il senso di comunità e aiuti l’integrazione tra i membri, ad esempio fornendo corsi di lingua, organizzando eventi e permettendogli di formare associazioni culturali. Dopo un certo numero di anni di servizio, il soldato straniero può richiedere la naturalizzazione. A lato un esempio di come il puffin sia diventato un simbolo per le isole. Nella pagina a fronte una veduta di Vestmannaeyjar.
36
Cereraes erum fuga. Vel ea quata veniste mporae pra plaborumet pratqui aliquides explate cuscimus voluptatur? Aqui ut quiam fugiae volla volupti ut fugiae num, sum volorrorit, apel est iuntiae is dolecerate imus in nonsequam, sequiderum aut odigent, inihit officipiet presend isint. Ficimusae. Et fuga. Evelibus derunt in pori odion cum qui istrum es aborporibus, ex et aut a sed eum dolo expla ad etur, offic te net, tem ulla sim quam, occum fuga. Aborenim di as non necabor rovidis eat ilit, teceat. Tiis molut aperere omnis earcitio qui optatin imillut quaturia as experrum eum dolupti aspella borrorecum faccatiam, unt. Ma volorum vite vollore stotatur simendisque la perovit exped magnis ea quam, omnimet et untisquunt. Evel mo tem aut fugia earum invel moluptature omnitas si omniatur rehendio. Numque perem verunt re eum hiliquis dolupta temporu mquundem nimossero invel et estruptatus debis sum quae ventis nis doluptio maximus, aliciati beatem es mi, quis estotatatur? Alis coreper umenis dit offictia de et que velibus dolut autet qui di ini a quam apid que peribus, officta cus nonsequiam inctus.
La base egalitaria dell’esercito ha influenzato anche la scelta della sua struttura interna: la gerarchia è limitata a tre gradi militari, nell’ordine quelli di soldato, colonnello e generale. Il soldato viene promosso al grado successivo dopo un dato numero di anni di servizio o di missioni compiute. A livello “orizzontale”, invece, l’esercito è diviso in sei sezioni, che riteniamo coprano le necessità base dell’isola: esercito di terra, marina, aeronautica, protezione animale, protezione ambientale e polizia postale.
37
38
3.3
AR TICO L A Z I O N E
Come fatto per il concept, anche per la scelta dei riferimenti visivi alla base dell’identità siamo partiti dall’ambiente dell’isola. In particolare ci siamo ispirati alla sua posizione geografica e al suo clima: le Vestmannaeyjar si trovano poco a sud del circolo polare artico, e hanno quindi un clima invernale rigido, con lunghe notti e temperature basse. Il colore predominante scelto per il brand è un blu scuro, associato al bianco per contrasto cromatico. I colori secondari, uno per ciascuna delle sei divisioni, sono stati scelti in base ad associazioni cromatiche col settore di cui si occupa la divisione, ad esempio il blu per la marina, il rosso del becco del puffin per la protezione animale e così via.
39
A lato, la struttura gerarchica dell’esercito. Nelle pagine successive: i colori e i font scelti per l’identità.
LU N D I H E R
CMYK RGB HEX
94 82 50 62 12 28 50 #0C1C33
E S E RCITO D I TE R R A
CMYK RGB HEX
53 50 51 16 118 110 107 #756D6A
MAR I NA
CMYK RGB HEX
87 54 14 1 36 110 164 #226EA3
AE RO NAUTICA
CMYK RGB HEX
5 5 28 0 242 233 192 #F2E9C1
P ROTE Z IO N E AN I MALE
CMYK RGB HEX
12 84 70 1 213 79 78 #D44E4D
P ROTE Z IO N E AM B I E NTALE
CMYK RGB HEX
59 27 83 8 114 144 82 #728F58
P O LIZ IA P OSTALE
CMY RGB HEX
29 49 2 0 181 140 87 #B58CBB
40
Gotham Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Gotham Black ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
FreightText Medium ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
FreightText Book Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
41
x
x
3x
42
La forma dell’esagono è stata scelta come tema ricorrente in tutta l’identità per due motivi. Il primo è il richiamo alle sei divisioni dell’esercito; il secondo è l’associazione con i fiocchi di neve, che presentano sempre una struttura esagonale e ci sembravano appropriati dato il clima delle isole. Il fiocco di neve, formato sommando diversi esagoni di dimensioni diverse, costituisce anche l’identificativo personale di ogni soldato, che cambia in base ai suoi dati personali, come vedremo più in dettaglio più avanti. Questo simbolo individuale è integrato nella divisa di ogni membro ed è presente sui tesserini e su ogni documento identificativo.
43
Il margine di tolleranza del logotipo equivale all’altezza dello stesso su tutti i lati. La parola her viene evidenziata cromaticamente nel caso il logotipo sia usato in una divisione specifica. Sotto: esempi di fiocchi di neve a struttura esagonale.
Sopra: l’interfaccia di vvvv. Cambiando i parametri evidenziati dall’etichetta scura è possibile modificare l’esagono in tempo reale. Il risultato appare nella viewport a lato. A fronte: come i parametri modificano le varie parti del fiocco.
La parte generativa dell’identità è costituita dal logo e identificativo personale del soldato. La sua struttura base è costituita da una serie di esagoni raggruppati che vanno a formare un fiocco di neve. In base ai parametri personali di ogni soldato il fiocco diventa un identificativo unico e diverso per ogni membro. L’esagono centrale aumenta di dimensione in base al numero di missioni svolte dal soldato, e indica quindi l’esperienza del soldato all’interno di Lundiher. I sei esagoni che lo circondano hanno dimensioni fisse ed equivalenti alla dimensione minima dell’esagono centrale, ma si spostano lungo i sei bracci del fiocco in base alla nazione di provenienza del soldato: più distante essa è da Vestmannaeyjar, più gli esagoni si spostano verso l’estremità del braccio. Ad esempio, un islandese, venendo da un posto molto vicino all’arcipelago, avrà uno spostamento minimo verso l’esterno; un neozelandese, invece, avrà lo spostamento massimo, e gli esagoni nel suo identificativo si troveranno alle estremità dei bracci. I bracci a loro volta hanno tre dimensioni fisse, che rappresentano i tre gradi gerarchici: si va dal più sottile, spesso il 20% della larghezza dell’esagono centrale, per il soldato base, ad uno medio per il colonnel-
44
lo (40% della larghezza), fino ad un massimo del 60% per il generale. I due rombi inclinati che circondano ogni braccio invece indicano l’età del soldato e aumentano di spessore in base ad essa. La divisione a cui appartiene il soldato è invece segnalata dal colore del fiocco.
E TÀ
PAE S E D ’ O R I G I N E
MISSIONI
G R ADO
45
46
Abbiamo anche sviluppato un pattern mimetico in quattro variazioni, in base a quattro possibili scenari di utilizzo: mare, terra, foresta e vegetazione, ghiaccio. Il pattern è costituito da un esagono ripetuto in una griglia modulare, formando macchie di tre diverse intensità cromatiche. I quattro pattern sono applicati alle divise dei soldati e ai mezzi di trasporto durante le missioni. Abbiamo creato diverse divise per una serie di usi sul campo, e una divisa comune a tutte le divisioni per le occasioni ufficiali, le cerimonie e le parate. Allo stesso pattern vengono applicate tre sfumature di colore per ognuno dei colori delle divisioni. I sei pattern cosÏ ottenuti sono puramente decorativi e sono utilizzati in alcune applicazioni.
47
Nella pagina di fronte, alcune variazioni di fiocchi. Qui sotto: i sei pattern con i colori delle divisioni.
Una tessera magnetica viene data a ciascun soldato, contenente i propri dati personali ed il fiocco personalizzato, aggiornato al momento dell’emissione della card. La tessera può venire bucata e portata al collo, in un richiamo alle piastrine identificative usate dagli eserciti tradizionali. Sul retro presenta il pattern della divisione di appartenenza del soldato.
52
53
P R O T E Z I O N E A M B I E N TA L E DIVISA MIMETICA MARE
P R O T E Z I O N E A M B I E N TA L E DIVISA MIMETICA T E R R AV
P R O T E Z I O N E A M B I E N TA L E DIVISA MIMETICA F O R E S TA
PROTEZIONE ANIMALE DIVISA MIMETICA MARE
PROTEZIONE ANIMALE DIVISA MIMETICA TERRA
PROTEZIONE ANIMALE DIVISA MIMETICA F O R E S TA
54
P R O T E Z I O N E A M B I E N TA L E DIVISA MIMETICA G H I AC C I O
P R O T E Z I O N E A M B I E N TA L E DIVISA D’ UFFICIO
P R O T E Z I O N E A M B I E N TA L E D I V I S A DA PA R ATA
PROTEZIONE ANIMALE DIVISA MIMETICA G H I AC C I O
PROTEZIONE ANIMALE DIVISA D’ UFFICIO
PROTEZIONE ANIMALE D I V I S A DA PA R ATAV
55
ESERCITO DI TERR A DIVISA MIMETICA TERRA
ESERCITO DI TERR A DIVISA MIMETICA F O R E S TA
ESERCITO DI TERR A DIVISA MIMETICA G H I AC C I O
P O L I Z I A P O S TA L E DIVISA D’ UFFICIO
P O L I Z I A P O S TA L E UNIFORME
P O L I Z I A P O S TA L E D I V I S A DA PA R ATA
56
ESERCITO DI TERR A UNIFORME
ESERCITO DI TERR A D I V I S A DA PA R ATA
57
MARINA DIVISA MIMETICA MARE
MARINA MARINAIO FRONTE
MARINA MARINAIO RETRO
AE RO NAUTICA UNIFORME
AE RO NAUTICA D I V I S A DA P I L O TA
AE RO NAUTICA D I V I S A DA PA R ATA
58
MARINA UNIFORME
MARINA D I V I S A DA PA R ATA
59
Nelle pagine precedenti sono visualizzate le varie divise di ogni sezione per diversi casi d’uso. Sotto vediamo il posizionamento del fiocco all’interno del pattern mimetico, per uso nelle divise. Una targetta riporta il nome dell’esercito. Nella pagina a fianco il fiocco e la divisa in azione.
60
Alcuni dei mezzi utilizzati da Lundiher, con la mimetica applicata.
62
63
Nelle prossime pagine vediamo alcune scene ipotetiche di vita quotidiana all’interno di Lundiher, con le divise e la mimetica in azione.
64
65
67
Sotto e nella pagina a fronte, i poster promozionali con il codice scansionabile. Ciascuno dei sei poster qui sotto corrisponde ad una divisione.
Abbiamo anche creato una campagna promozionale per fare conoscere Lundiher nel mondo. Ăˆ composta da due parti collegate: un sito, di cui parleremo piĂš in dettaglio nel prossimo capitolo, e una serie di poster. Ogni poster presenta un codice QR che, una volta scansionato con uno smartphone, reindirizza al sito promozionale, che a sua volta contiene un modulo di adesione. I poster sono pensati per essere utilizzati all’estero al fine di reclutare nuovi membri. In linea con gli ideali dell’organizzazione, presentano immagini non violente, per non alienare chi fugge da situazioni difficili.
70
71
4.1
S ITI WE B : P RO B LE MATICH E DA AF F RO NTAR E
Alla fine del laboratorio di sintesi, ogni membro del gruppo è stato incaricato di espandere il progetto creando una nuova applicazione a sua discrezione. Avendo già iniziato a creare il prototipo di un sito web durante la prima fase del corso, ho pensato di approfondire l’argomento realizzando due siti: uno è quello promozionale e di comunicazione esterna all’ente di cui si è parlato brevemente sopra; l’altro è un sito istituzionale ad uso interno dell’esercito, per avvisi, notifiche e servizi rivolti ai soldati già arruolati. I problemi da risolvere nell’affrontare l’argomento sono numerosi. Lundiher ha necessità di farsi conoscere a livello internazionale e si ritroverà ad avere a che fare con membri di nazionalità diversa; è quindi necessario che offra servizi online multilingue. Allo stesso tempo deve cercare di attrarre persone con valori simili, che abbiano a cuore i temi della non violenza, dell’ambientalismo e della multiculturalità. Tenderà quindi ad utilizzare immagini non violente nel suo materiale promozionale, per distaccarsi dall’immagine aggressiva degli eserciti tradizionali e mantenere una connessione visiva coi valori che vuole promuovere. Deve però proporsi come un’alternativa fattibile e effettivamente realizzabile, ed è quindi necessario chiarire ogni dubbio che un potenziale membro possa avere riguardo all’adesione, dalla paga mensile al trasporto verso Vestmannaeyjar e così via. Ogni dettaglio tecnico deve essere chiarito in modo semplice attraverso una pagina di FAQ, facilmente localizzabile all’interno del sito. È essenziale che un’associazione internazionale come Lundiher abbia un forte senso di comunità tra i membri, e quindi sorge la necessità di offrire spazi di integrazione e discorso e formare una struttura che possa favorire il cameratismo tra i soldati. Questi possono prendere la forma di forum di discussione, inclusi forum per praticare ed imparare la lingua locale, di eventi, articoli e interviste a singoli membri dell’esercito inclusi nella home page del sito. Il sito deve inoltre essere un luogo dove il soldato può risolvere questioni burocratiche: deve presentare una sezione personale di servizi attraverso la quale ogni membro può gestire le proprie finanze, il proprio account e i propri dati, fare richieste di alloggio o di equipaggiamento e così via.
74
75
4.2
S ITO P RO M OZ IO NALE
In questa pagina è presente il codice QR collegato al sito promozionale. Nella pagina a fronte la home page del sito su computer e su tablet, sotto l’ultima schermata con la call to action. Nelle prossime due pagine, l’estensione verticale del sito promozionale.
Lo scopo del sito promozionale è principalmente quello di fare conoscere Lundiher nel mondo e di aumentare il numero di aderenti. Per questo deve avere certe caratteristiche fondamentali. Deve essere multilingue; deve spiegare cos’è Lundiher in modo semplice e veloce, e deve fornire un modulo di adesione inviabile direttamente dalla pagina. L’accesso al sito è possibile attraverso il QR code presente nei poster, che compongono la prima parte della campagna promozionale. L’utilizzo del QR code è particolarmente utile al giorno d’oggi in quanto, soprattutto nei paesi in via di sviluppo, una grande percentuale della popolazione accede ad internet via mobile 8.
Per la home page, che è anche la pagina principale del sito, si è scelto di utilizzare il metodo dello scorrimento verticale, in quanto permette di fornire informazioni in modo semplice e chiaro. È un metodo narrativo che non richiede molto dall’utente ma gli permette di interagire con la pagina. La pagina è formata da schermate monocrome col blu istituzionale alternate a schermate con immagini a schermo intero, entrambe con testo informativo. Ogni schermata risponde brevemente ad una delle domande base su Lundiher: chi siamo? Dove siamo? Cosa facciamo? Puoi arruolarti? Alla fine della spiegazione, in fondo alla pagina, l’utente si trova di fronte a due link: uno, più in evidenza, che porta al modulo di arruolamento, scaricabile ma anche compilabile online; e uno di donazione, nel caso il visitatore non sia interessato a diventare un membro attivo di Lundiher ma voglia comunque sostenere le sue cause. Il sito include inoltre i link alle pagine social dell’associazione. 8. itu.int/en/ITU-D/Statistics/Documents/facts/ITCFactsFigures2013-e.pdf
76
77
79
4.3
S ITO I STITUZ IO NALE
La home page del sito, a destra nella sua interezza.
Il sito istituzionale, a differenza di quello promozionale, è ad uso principalmente interno all’associazione. Il soldato lo visita per vedere le ultime news, controllare il calendario degli eventi in programma o gli esiti delle missioni, accedere alla propria pagina personale, iscriversi al programma di tandem per imparare la lingua locale o accedere ai forum di discussione interni alle varie divisioni. La home page presenta il logo e la scelta della lingua in alto a sinistra. I pulsanti di login per accedere all’area personale e di donazione per chiunque voglia contribuire sono in bella vista in alto a destra, in uno degli incroci chiave del pattern a Z, sotto al tasto di ricerca. Sono inoltre messi in rilievo attraverso l’uso dei colori istituzionali secondari che più contrastano con quello principale. Il menu principale utilizza il bianco e i colori delle divisioni per differenziare le varie sezioni del sito. Subito sotto è presente uno slider con grandi immagini che trattano dei tre eventi o programmi più rilevanti al momento. L’utente può decidere di partecipare o di avere ulteriori informazioni attraverso i bottoni presenti sopra alle fotografie. Queste ultime presenteranno immagini non violente per riaffermare i valori di Lundiher. La fotografia verrà utilizzata estensivamente anche nel resto del sito.
80
81
82
Il corpo principale della pagina presenta link agli articoli più importanti e agli eventi più vicini nel tempo e significtativi. Passando col cursore sopra al titolo apparirà una breve descrizione del contenuto, su cui l’utente potrà cliccare per accedere all’articolo completo. Sarà presente inoltre una mappa degli eventi futuri, un link al forum di discussione e altri articoli più in basso: interviste ai membri, resoconti delle missioni, avvisi importanti e scadenze con reminder e così via. La pagina termina con un footer attraverso il quale l’utente può accedere alle varie sezioni del sito o iscriversi alla newsletter.
A fronte: dettagli del menù a tendina, della sezione principale della home page e del footer. Da notare la differenza tra le due notizie principali: la prima a sinistra, in questo screenshot, è mostrata come appare normalmente; la seconda come diventa passandoci sopra col cursore, con unabreve descrizione del contenuto dell’articolo. A lato, la mappa del sito.
83
84
La prima macro sezione del sito è composta da alcune pagine che spiegano in dettaglio gli scopi dell’esercito, la sua struttura generale e il suo mission statement. È possibile trovare anche una pagina con le specifiche riguardo l’adesione, una di domande frequenti e una pagina dedicata alla stampa. Attraverso il menu è possibile accedere alle pagine delle divisioni. Queste avranno una breve descrizione delle divisioni per eventuali visitatori esterni, con fotografie a tema, mentre per i membri appartenenti alla divisione sono presenti il link al forum e un calendario delle missioni e delle riunioni previste. Attraverso questa pagina si ha accesso anche agli articoli sulle missioni in corso e quelle passate.
85
A fronte la pagina della divisione della protezione animale. Sotto il dettaglio degli articoli delle missioni, col cursore sopra al titolo.
A lato le impostazioni scelte per il testo del corpo principale della maggior parte delle pagine. Per il titolo il font è Gotham Medium, a 18pt, per il corpo FreightText Medium a 12pt. A fronte, la pagina di una missione.
Ogni missione ha infatti una pagina dedicata in cui è possibile trovare informazioni dettagliate sugli esiti, gli obiettivi preposti, il tempo impiegato, l’equipaggiamento utilizzato e i membri che hanno partecipato, individuati dal loro nome e dal loro fiocco personale. Altra grande sezione del sito è quella dei servizi per i membri. Questi includono uffici, informazioni su stipendi e finanze, orari di lavoro, trasporti interni all’isola, alloggi e allocazione appartamenti, mense, corsi di lingua, richieste di equipaggiamento e divise, gruppi sportivi e associazioni dei soldati e palestre. È inoltre presente una sezione di emergenze e sostegno psicologico per i momenti di crisi. La quarta ed ultima parte del menu invece tratta di Vestmannaeyjar: il visitatore può trovare dati tecnici sulle isole e sul loro ecosistema, e può scoprire come arrivare nell’arcipelago e come muoversi al suo interno una volta recatosi sul luogo. Cliccando sul tasto di donazione presente nella home page appare una pagina dove l’utente può scegliere l’ammontare della donazione, se supportare un programma o una divisione in particolare e se fare una donazione ricorrente o unica.
86
87
La griglia a 12 colonne usata per il layout del sito. A fronte la vediamo sovrapposta alla homepage.
88
89
Per sviluppare il layout del sito è stata usata una griglia modulare composta da 12 colonne intervallate da spazi. Alle dimensioni massime dello schermo ogni colonna è larga 70 pixel e ogni margine 30 pixel, per un totale di 1200 pixel. La struttura è però responsive, cioè si adatta alle dimensioni dello schermo: a dimensioni schermo più piccole, quindi, le dimensioni assolute della colonna diminuiranno, ma la proporzione della stessa rispetto alla pagina rimane invariata.
90
Accedendo alla propria area personale invece l’utente si trova davanti una pagina dal layout completamente diverso dalle altre. In alto è presente il suo fiocco aggiornato insieme al suo nome, l’età e il grado. Sempre nella stessa sezione orizzontale, che presenta una fotografia di sfondo a tema che cambia in base alla divisione, sono presenti icone attraverso le quali il soldato può modificare i propri dati, mandare un messaggio privato ad un collega o allo staff, e aggiungere altri utenti alla propria lista di contatti. Sotto a tutto ciò si trova una barra bianca più sottile dove vengono visualizzati i “premi” attribuiti al soldato per le sue missioni, sotto forma di pittogramma contenuto all’interno di un esagono. Questi achievement non hanno uno scopo pratico vero e proprio ma sono un metodo divertente di visualizzare i risultati ottenuti durante la carriera. Alla loro destra è presente un piccolo grafico che visualizza il progresso nel tempo del soldato. Cliccando il bottone a lato del grafico il fiocco del soldato si anima e riproduce in sequenza tutti gli aspetti che ha avuto nel passato, quando il soldato era più giovane, aveva compiuto poche missioni o apparteneva ad un grado inferiore. In questo modo viene visualizzata in pochi secondi la carriera dell’utente, dall’adesione al giorno d’oggi. Più in basso troviamo il corpo principale della pagina, con le sezioni attraverso le quali il soldato può effettivamente gestire il proprio account. Una sezione permette di fare richieste allo staff, nel caso il soldato abbia problemi di qualsiasi tipo. Un’altra si occupa della sua salute, e permette di contattare un medico o di controllare lo status delle proprie vaccinazioni.
91
Nella pagina precedente alcuni dei pulsanti utilizzati per il sito, alcuni visualizzati prima in modalità normale e poi al passaggio del cursore.
Sotto la pagina personale di un membro della protezione ambientale. La fotografia di sfondo e i colori di accento cambiano in base alla divisione di appartenenza del soldato. A fronte un dettaglio della barra degli achievement e del progresso personale del soldato. Passando col cursore sopra all’icona appare una breve descrizione che spiega cosa rappresenta ciascuna immagine. Sotto, un particolare della chat, e l’icona utente nei tre status di chat: offline, away e online.
Una sezione visualizza lo stipendio mensile e le finanze del soldato, un’altra lista tutti i suoi colleghi. Ci sono sezioni dedicate agli eventi futuri, alle associazioni culturali e sportive, alle missioni in corso e quelle passate. Una sezione dedicata all’apprendimento delle lingue permette all’utente di iscriversi ad un corso o di richiedere un tandem partner, cioè una persona madrelingua con la quale parlare e praticare le nozioni apprese. La sezione dedicata all’alloggio permette di segnalare eventuali problemi tecnici e di richiedere l’assistenza di un idraulico o di un elettricista, o di chiedere di essere spostato in un altro appartamento. Sulla destra della pagina invece è presente una chat attraverso la quale l’utente può contattare in tempo reale chiunque appartenga alla sua lista di colleghi e amici.
92
93
5.1
I N D ICE I M MAG I N I
pag. 4: flickr.com/photos/krik/3295454801 pag. 10: business2community.com/seo/google-penguin-shows-uswho-the-real-seos-are-for-now-0508652 pag. 11: webdesign.tutsplus.com/articles/understanding-the-zlayout-in-web-design--webdesign-28 pag. 12: monetizepros.com/encyclopedia/heat-map pag. 15: topnonprofits.com/wp-content/uploads/2012/01/ Conservation-International-e1329711262719.png pag. 20: underconsideration.com/brandnew/archives/new_logo_ and_identity_for_open_knowledge_by_johnson_banks.php pag. 28: forsvarsmakten.se/siteassets/4-om-myndigheten/heraldiskavapen-logotyp/fm_cmyk_text.gif pag. 34: movingmultimedia.com/pdtv/images/report/dynamic/ nordkyn.jpg pag. 35: yetanotherscript.files.wordpress.com/2010/01/0.jpg pag. 36: commons.wikimedia.org/wiki/File:Vestmannaeyjar_-_ Cartelli.jpg pag. 37: ununsplash.imgix.net/photo-1415226355641-7f90f89def6a?q= 75&fm=jpg&s=fbdb385e30cd8fe4a1a152897f3538ca pag. 39: kenaicanvas.co.za/wp-content/uploads/2014/11/Hello1.jpg pag. 43: upload.wikimedia.org/wikipedia/commons/c/c2/ SnowflakesWilsonBentley.jpg
96
5.2
B I B LIOG R AFIA
Bank, Chris, & Zuberi, Waleed (2013). The Guide to Wireframing, Mountain View, UXPin. Bank, Chris, & Cao, Jerry (2014). Web UI Design Best Practices, Mountain View, UXPin. Bank, Chris, & Zuberi, Waleed (2014). Web UI Design Patterns 2014, Mountain View, UXPin. Boulton, Mark (2009). Five Simple Steps. A Practical Guide to Designing for the Web, Penarth, Mark Boulton Design Ltd. Bradley, Steven (2011). 3 Design Layouts: Guthenberg Diagram, Z-Pattern, and F-Pattern. vanseodesign.com/web-design/3-designlayouts, [visitato il 10 dicembre 2014]. Bringhurst, Robert (1992). The Elements of Typographic Style, Vancouver, Hartley & Marks. Cao, Jerry, & Ellis, Matt, & Khach, Narek (2014). The Guide to Mockups, Mountain View, UXPin. Cederholm, Dan (2010). CSS3 for Web Designers, New York, A Book Apart. Duckett, Jon (2011). HTML and CSS: Design and Build Websites, Indianapolis, John Wiley & Sons. Duckett, Jon (2014). Javascript and jQuery: Interactive Front-end Web Development, Indianapolis, John Wiley & Sons. Felsing, Ulrike (2009). Dynamic Identities in Cultural and Public Context, Baden, Lars M端ller Publishers. Keith, Jeremy (2010). HTML5 for Web Designers, New York, A Book Apart. Martin, Michael (2009). Typographic Design Pattern and Best Practices. smashingmagazine.com/2009/08/20/typographic-designsurvey-best-practices-from-the-best-blogs, [visitato il 15 dicembre 2014].
97
Nielsen, Jakob (2006). F-Shaped Pattern for Reading Web Content. nngroup.com/articles/f-shaped-pattern-reading-web-content, [visitato il 13 dicembre 2014]. Olins, Wally (2003). On Brand, London, Thames & Hudson. Olins, Wally (2008). The Brand Handbook, London, Thames & Hudson. Shiffman, Daniel (2012). The Nature of Code, autopubblicato. Sollenberger, Kyle (2012). 10 User Interface Design Fundamentals. blog. teamtreehouse.com/10-user-interface-design-fundamentals, [visitato il 3 gennaio 2015]. Van Nes, Irene (2012). Dynamic Identities. How to Create a Living Brand, Amsterdam, BIS. Vignelli, Massimo, & Laundy, Peter (1980). Graphic Design for Non-profit Organisations, New York, American Institute of Graphic Arts. Vinh, Khoi (2011). Ordering Disorder: Grid Principles for Web Design, Berkeley, New Riders.
98