FontUp: daily training through play by Claudia De Angelis

FontUp daily training through play

claudia de angelis relatore gillian crampton smith correlatore philip tabor universitĂ iuav di venezia corso di laurea magistrale in comunicazioni visive e multimediali

A b e b Q d g u m h i a n o f lZ pc v

FontUp daily training through play

claudia de angelis relatore gillian crampton smith correlatore philip tabor universitĂ iuav di venezia corso di laurea magistrale in comunicazioni visive e multimediali 31 marzo 2010

indice

abstract italiano abstract inglese

3 5

1. primi passi

2. invenzione e diffusione delle lettere

2.1 cos’è la scrittura 2.2 evoluzione della forma grazie alle tecniche di scrittura a mano e a stampa 2.3 tipografia moderna 3. caratteri tipografici e designer

3.1 la scelta giusta 3.2 il mondo delle font: dove trovarle 3.3 gestire ed utilizzare le proprie font 3.4 legame con visual reference 4. stato dell’arte

4.1 applicazioni online 4.2 applicazioni per iPhone 5. opportunità del progetto

5.1 scelta del supporto 6. nasce FontUp

6.1 riconoscere e collezionare 6.2 tecnologie di riconoscimento caratteri 6.3 database approfondimento: Primi wireframe 7. lo sviluppo di FontUp

7.1 imparare giocando 7.2 brain training 7.3 allenamento giornaliero 7.4 meccanismi di gioco di FontUp approfondimento: i giochi 83 8. design definitivo approfondimento: FontUp 9. prototipo

115

10. conclusioni

125

abstract italiano

Questo progetto di tesi descrive l'interaction design di FontUp, un'applicazione interattiva per iPhone che permette di aumentare le proprie competenze tipografiche attraverso dei videogiochi. Il numero dei caratteri tipografici disponibili oggi è in continua crescita: memorizzarli, riconoscerli ed identificarli per saperli utilizzare coscientemente è un compito arduo, specialmente per gli studenti. Esistono molti manuali di tipografia, basati sulla storia o sul disegno dei caratteri che propongono un metodo di apprendimento lineare. FontUp è un metodo alternativo da affiancare allo studio di testi con l'utilizzo del gioco come strumento di sedimentazione di alcuni concetti, grazie all'iterazione e ad un meccanismo intuitivo come quello del confronto visivo. L'ispirazione viene dalla serie Brain Training, videogiochi sviluppati da Nintendo. FontUp consiste di due parti: la prima composta da giochi pensati per memorizzare le caratteristiche delle varie font. Essi sono basati sull'associazione visiva, ricordare font diverse, ricostruirle e saperle confrontare. Tutto questo attraverso un allenamento quotidiano fatto di mini-giochi per mettere alla prova le proprie capacità, sfide tipografiche da fare con gli amici e grafici per visualizzare i propri miglioramenti, per acquisire via via una maggiore padronanza dei caratteri e dei loro utilizzi. L'altra parte dell'applicazione utilizza la fotocamera dell'iPhone per scattare foto di caratteri trovati in giro per costruirsi una personale libreria di font. La realtà in cui viviamo è ricca di ispirazioni a cui si può far riferimento durante il processo di design. FontUp permette di riconoscere le font fotografate utilizzando una combinazione di riconoscimento automatico ed umano. FontUp aiuta due aspetti fondamentali nella formazione di un designer: sviluppare la capacità a distinguere le differenze tra i vari caratteri e a memorizzarli e riconoscerli. Questo progetto di tesi ripercorre lo sviluppo storico della forma delle lettere fino all'utilizzo dei videogiochi come allenamento tipografico. Le tre iterazioni del progetto sono corredate da user test di carta e prototipi animati ed interattivi. FontUp accoglie le potenzialità insite nella tecnologia degli hendheld per fornire un'applicazione pratica e facile, utilizzando un metodo divertente per imparare i caratteri.

abstract inglese

This report describes the interaction design of FontUp, an interactive application for the iPhone that helps you to improve your typographic skills through playing videogames. Today available fonts are growing continously: memorizing, recognizing and identifying them in order to use them properly is difficult, especially for students. Typography manuals, based on the history or design of type, provide only a linear method of learning. Inspired by the Brain Training video games developed by Nintendo, FontUp is a new way to learn, an alternative method to be used in parallel with books. It consists in using play as an tool for memorizing complex forms using an intuitive visual approach based on comparison. FontUp has two parts: the first part consists of games designed to reinforce the memory of a fontâ&#x20AC;&#x2122;s characteristics. They are based on visual association, remembering different fonts and rebuilding them from scratch. You can master typographic nuances through a daily training based on minigames, typographic challenges with friends and diagrams to show your improvement. The real world is full of inspiration for the design process. The second part of the application uses the iPhone camera to shoot pictures of letterforms you find in order to develop your own personal font collection. FontUp allows you to work out which font you have photographed using a combination of automatic and human recognition. FontUp helps two different aspects of the graphic designerâ&#x20AC;&#x2122;s education: firstly it develops the capacity to distinguish between different type fonts and secondly to memorize and recognise them. FontUp embraces the potential of handheld technology to provide a practical, easy and fun method to learn about fonts. The report describes the historical development of typeforms and discusses the use of video games for training. The three iterations of the project are described as well as the user tests using paper, animated and interactive prototypes.

primi passi

mi passi Bembo designer: Monotype Staff (basato sul disegno originale di Francesco Griffo) anno: 1929

primi passi 9

primi passi

Nel corso degli anni mi sono resa conto che scegliere la font giusta per un determinato progetto è sempre uno scoglio difficile da superare per un progettista grafico. Infatti la conoscenza approfondita dell’argomento e una spiccata sensibilità sono doti che maturano solo con anni di studio e di lavoro. Il numero delle font disponibili oggi è in continua crescita grazie ai molti software a disposizione per la progettazione di caratteri tipografici. Questo rende tutto più complesso soprattutto per gli studenti, con ancora poca esperienza alle spalle, che vogliono avvicinarsi al mondo della tipografia, o comunque che vogliono fare della comunicazione il proprio mestiere. Memorizzarle, riconoscerle e saperle poi utilizzare coscientemente è un compito arduo. Il nostro lavoro non avviene soltanto di fronte ad un computer ma anche in movimento, osservando i particolari e memorizzando tutte le cose che attirano il nostro interesse, poiché ogni artefatto visto può essere la chiave di un progetto futuro. La primissima idea del progetto nasce proprio dalla volontà di fornire uno strumento aggiuntivo nelle mani di designer novelli, un’applicazione per collezionare foto di logotipi , banner, locandine, flyer, insegne e quant’altro per creare una personale collezione a cui poter accedere anche solo per condividerla con altre persone o per potervi trovare degli spunti per un lavoro futuro. In che modo? Scattare una foto di una carattere tipografico che abbiamo notato, attraverso la camera integrata di uno smartphone, e step-by-step riconoscere il nome della font fotografata per arricchire il proprio bagaglio culturale. Avere delle visual references legate al nome di ogni singolo carattere da cui siamo stati attirati. Disporre accanto al nome di una font esempi di utilizzi pratici per contestualizzarle e avere delle ispirazioni durante il processo di design. Partendo da questa idea è stato fondamentale per lo sviluppo del progetto effettuare una ricerca attraverso la storia della scrittura, lo sviluppo e l’evoluzione delle forme delle lettere grazie alle nuove tecniche di scrittura a mano e a stampa, il rapporto tra caratteri tipografici e designer, e in particolare l’analisi di alcune applicazioni fruibili tramite web e smartphone touchsceen, in particolare l’iPhone di Apple.

invenzione e diffusione delle lettere

nvenzi iffusio ettere Din, regular designer: Albert-Jan Pool anno: 1995

ione e one de e invenzione e diffusione delle lettere 13

invenzione e diffusione delle lettere

La scrittura è quella tecnologia che ha modellato e potenziato l’attività mentale dell’uomo moderno. Fu un’invenzione molto tarda nella storia dell’uomo. L’homo sapiens è vissuto sulla terra circa 50.000 anni, ma il primo esempio di scrittura risale intorno al 3500 a.C. sviluppatosi fra i Sumeri della Mesopotamia. Prima dell’avvento della scrittura gli esseri umani si erano espressi con disegni e varie società si erano servite di strumenti di memorizzazione diversi come bastoncini intagliati, file di sassolini e così via. Ma sicuramente un documento scritto è qualcosa di più di un semplice aiuto per la memoria, perchè anche quando ha un carattere pittografico è sempre più di un disegno.

1.1 cos’è la scrittura

“L’apertura verso nuovi mondi della conoscenza avvenne quando fu inventato un sistema codificato di marcatori visivi per mezzo del quale lo scrivente poteva determinare le parole esatte che il lettore avrebbe prodotto a partire dal testo. Questo è quanto noi oggi intendiamo per scrittura in senso stretto.” 1

Nel mondo si sono sviluppati molti sistemi di scrittura: il sistema cuneiforme in Mesopotamia nel 3500 a.C., i geroglifici egiziani nel 300 a.C., la scrittura lineare B minoica o micenea nel 1200 a.C., la scrittura della Valle dell’Indo dal 3000 al 2400 a.C., quella cinese del 1500 a.C., quella maya del 50 d.C., quella azteca del 1400 d.C. Il passaggio dal discorso orale a quello scritto si configura essenzialmente come uno spostamento da un ambito sonoro ad uno spazio visivo, è quindi necessario parlare degli effetti della stampa sull’uso dello spazio visivo. Per il contesto in cui siamo è impossibile elencare tutti gli effetti della stampa per quanto vasti e diversificati essi siano stati. Per migliaia di anni, l’umanità ha stampato disegni servendosi di superfici incise in vario modo; i coreani, i cinesi e i giapponesi hanno cominciato a stampare testi verbali fin dal VII o VIII secolo, usando blocchetti di legno incisi a rilievo, ma ciò che dette alla stampa un impulso determinante fu l’invenzione dei caratteri mobili, e questo avvenne nell’Europa del XV secolo. La scrittura alfabetica aveva sì suddiviso la parola negli equivalenti spaziali delle unità fonetiche, ma le lettere usate non preesistevano nel testo in cui apparivano. Con la stampa a caratteri mobili le cose stavano diversamente: i caratteri tipografici preesistono alle parole che andranno a formare. La stampa suggerisce che le parole sono cose, più di quanto la scrittura non abbia mai fatto. Prima della metà del XV secolo i coreani e i turchi Uigur avevano un alfabeto e anche caratteri mobili, ma questi non indicavano lettere separate, bensì intere parole. La stampa con caratteri alfabetici mobili, ossia l’incisione di ogni lettera su un pezzo diverso di metallo, o carattere tipografico, segnò una rottura con l’ordine precedente. Essa introdusse la parola nel processo industriale e la fece diventare una specie di prodotto: la prima catena di montaggio. La stampa impiegò del tempo per spazzar via l’elaborazione aurale, che continuò per un pò a dominare il testo visibile, stampato. I testi stampati sono di gran lunga più facili da leggere di quelli scritti a mano, e gli effetti di questa leggibilità sono numerosi. La cultura manoscritta è orientata verso il produttore, poichè ogni singola copia di un’opera comporta un grande dispendio di tempo da parte del copista. I manoscritti medievali sono colmi di abbreviazioni che favoriscono l’amanuense ma sono svantaggiose per il lettore. La stampa è invece orientata verso il consumatore, poiché le singole copie di uno stesso lavoro rappresentano una perdita

14 invenzione e diffusione delle lettere

di tempo molto minore: poche ore passate a rendere un testo miglioreranno immediatamente migliaia di copie. La scrittura aveva trasferito la parola orale originaria, parlata, in uno spazio visivo; la stampa radicò la parola nello spazio in modo ancora più definitivo. Una volta avvenuta l’interiorizzazione della stampa, il libro cominciò ad essere sentito come una specie d’oggetto che “conteneva” informazioni scientifiche, narrazioni o altro e non più, come avveniva in precedenza, la registrazione di un’espressione orale.2

1.2 evoluzione della forma grazie alle tecniche di scrittura a mano e a stampa

Lo sviluppo più significativo della storia della scrittura si ebbe nel primo millennio a.C. attraverso l’elaborazione dell’alfabeto greco e latino nell’Europa occidentale. Si è sempre avuto da una parte lo stile monumentale che veniva utilizzato per la segnaletica stradale, sui palazzi o anche sulle pareti di roccia; dall’altra, la scrittura quotidiana, eseguita a mano. Entrambe le scritture si sono evolute attraverso strumenti e materiali diversi, dando vita a forme diverse. La scrittura monumentale, cioè quella della maiuscola ha mantenuto più o meno inalterato il suo aspetto; la scrittura a mano invece si è modificata notevolmente nel corso dei secoli diminuendo le difficoltà esecutive. Nonostante la scrittura occidentale sia formata da un solo alfabeto di 26 segni fonetici, le lettere minuscole non hanno mai sostituito le maiuscole, quindi possiamo dire che oggi abbiamo a disposizione due alfabeti potenziando notevolmente la comunicazione. Il diverso impiego nella storia della scrittura di materiali e tecniche varie forse non ha creato dei grandissimi cambiamenti per quanto riguarda la morfologia delle lettere ma ha sicuramente attribuito, in relazione ad ogni differente periodo storico, profonde novità per quanto concerne l’aspetto e lo stile. Lo strumento più utilizzato dai calligrafi è stato la penna cava, utilizzato per circa duemila anni. E’ facile intuire come l’utilizzo di uno strumento del genere per così tanti anni possa aver influito sullo sviluppo delle forme delle lettere. Inizialmente fatta di canna, è stata in un secondo momento sostituita dalla penna d’oca che permette allo scriba di scrivere molto più veloce utilizzando il corpo tubolare della penna come serbatoio senza dover ricorrere ripetutamente al calamaio. Inoltre grazie alla flessibilità del pennino e al controllo del flusso in base alla pressione esercitata, è possibile differire nei tratti ingrossandoli o assottigliandoli. La variazione dei tratti è dovuta anche al taglio del pennino e alla sua inclinazione. La tecnica di stampa, messa a punto da Gutenberg, comincia ad influenzare lo sviluppo morfologico delle lettere (analisi riferita al carattere romano, oggi standard universale). Per quanto riguarda la stampa tipografica, ovvero quella attribuita a Gutenberg, le parti stampanti sono in rilievo. La forma della lettera viene incisa in rilievo su un punzone in acciaio, il punzone viene poi temprato e battuto su un blocchetto di metallo più tenero lasciando la forma incavata della lettera che viene detta matrice. Successivamente nella matrice vengono fusi i caratteri da stampa, nuovamente in rilievo. Un processo del genere necessita di lettere con un disegno ben marcato. Infatti dalla prima stampa del XVI secolo derivano caratteri con forme solide e fortemente disegnate. Effetti notevoli sulla forma delle lettere vengono nel XVIII secolo grazie alla calcografia, una tecnica di incisione su lastre

invenzione e diffusione delle lettere 15

di rame. Le lettere venivano scavate su lastre di rame ben levigate, veniva poi applicato l’inchiostro sulla lastra stando attenti che rimanesse solo nelle incisioni. La carta umida, con una leggera pressione tirava su l’inchiostro dalle lettere incise e ne riproduceva la forma. Con questa tecnica nacquero tutti quei disegni di lettere con forti contrasti tra raccordi sottili e aste pesanti (Bodoni, Walbaum, Didot ecc..). La tecnica di incisione sul rame unita a continui miglioramenti dei metodi di levigazione della carta, hanno prodotto caratteri tipografici che ancora oggi hanno un diffuso utilizzo. Del XVIII secolo è invece la nascita di una nuova tecnica di stampa: la litografia. Viene utilizzata una lastra di calcare levigata su cui, utilizzando un inchiostro grasso è possibile disegnare utilizzando strumenti come penna, pennello, riga e compasso o, volendo, a mano libera. Una volta realizzato il disegno viene fissato chimicamente potendo essere stampato secondo il principio dell’inchiostro da stampa idrorepellente. Grazie a questa tecnica ci fu una trasformazione notevole nella progettazione di caratteri, tratti e grazie furono ingrossati (caratteri egizi) o addirittura scomparvero dando vita ai caratteri senza grazie (bastoni).3 “Risultò che la pagina che poteva essere letta dalla distanza maggiore era quella stampata nello stile di Garamond, e che questa era ancora leggibile diversi passi dopo che i caratteri di Didot erano diventati indistinguibili.” 1.3 tipografia moderna

Il primo esperimento sulla leggibilità di qui ci è giunta notizia5 ad opera di Anisson è anche un evento simbolo di quello che sarà il dibattito sulla tipografia del ‘900. Pur essendo un esperimento del settecento, la contrapposizione tra i caratteri antichi e nuovi caratteri sarà il vero cardine della produzione e critica della tipografia dal movimento Arts and Crafts fino ai giorni nostri. Il fenomeno di maggiore rilievo dell’Ottocento può essere attribuito all’introduzione delle macchine alimentate a motore nella stampa. La prima macchina per la produzione di carta, azionata da un mulino ad acqua fu brevettata in Francia nel 1799 e successivamente in Inghilterra, 1801. Le stampanti a mano con cilindro metallico furono sviluppate a partire dal 1800. Una macchina per l’incisione di punzoni fu sviluppata nel 1884. La composizione dei caratteri era sempre stato di tipo manuale, con il solo aiuto di un calibro: il compositoio. Con un crescente sviluppo della stampa a vapore e delle macchine per fondere i caratteri (macchina di Bruce), arrivarono dopo il 1880 le prime macchine per la composizione dei caratteri: linea per linea (Linotype) oppure carattere per carattere (Monotype). Entrambe le macchine compositrici erano di origine americana, la prima inventata da un tedesco emigrato Ottmar Mergenthaler; la seconda da Tolbert Lanston di Washington. Il fenomeno della meccanizzazione porta ad una contrapposizione mai incontrata prima tra produzione artigianale e produzione seriale, con il design che via via assurge al ruolo di disciplina cuscinetto tra l’esigenza della produzione fordista con la necessità di un buon progetto. Senza entrare nel merito delle esperienze dell’Arts and Crafts, della scuola Bauhaus e del modernismo europeo, basta dire che la generale pulsione del modernismo a creare nuovi modelli classici coinvolse anche la tipografia: infatti il maggiore sforzo del movimento moderno fu di superare il revival stilistico di William

16 invenzione e diffusione delle lettere

Morris (che pure faceva suoi metodi semimeccanizzati) ricercando un nuovo canone sans serif da sostituire ai caratteri romani cari alla Kelmscott Press di Morris. Il movimento moderno ha il merito della presa di coscienza dell’utilità sociale del design tout court, rimanendo però confinato nell’ideologia. Jan Tschichold (1902-1974), tipografo e designer tedesco, è l’uomo simbolo dell’inevitabile superamento delle regole moderne. “Finché non esisteranno forme esaurientemente elementari (i caratteri bastoni, ndr) che siano leggibili anche nella composizione dei testi, è meglio scegliere la forma meno invadente del Mediaeval-Antiqua.”5 Questo estratto delle regole della tipografia elementare scritte dallo stesso Tschichold fanno capire quanto la presa di posizione rispetto ai canoni antichi fosse ideologica. Infatti, progressivamente, né Tschichold né la generazione di designer venuta fuori dalla Bauhaus, Max Bill su tutti, riuscì mai a proporre un testo sans serif efficace per l’uso comune nelle pagine dei libri. Il carattere senza grazie, che pure visse il suo splendore nella tipografia svizzera dopo la seconda guerra mondiale, anche nelle sue vette più alte come Univers e Helvetica fu sempre frutto da una parte di attento disegno artigianale e dall’altra efficace in svariati ambiti, protagonista di segnaletica e corporate identity senza mai intaccare la supremazia del classico minuscolo romano quando ci si confronta con la lettura di un semplice libro. Il postmodernismo e le tecniche di elaborazione dell’immagine diedero vita ad un’esplosione della produzione tipografica, portandoci al panorama odierno dove coesistono tipi classici e moderni di tutte le sorti. Per piccolo o grande che sia, per locale o internazionale che possa essere un progetto di design, ci saranno sempre decine di tipi adatti allo scopo: la cosa che conta è che nessun carattere è veramente staccato dall’ambiente e dalle persone che lo producono, non fissando quindi delle regole immutabili quanto piuttosto ponendo l’accento sulla formazione della nostra cultura.

invenzione e diffusione delle lettere 17

18 invenzione e diffusione delle lettere

invenzione e diffusione delle lettere 19

20 invenzione e diffusione delle lettere

invenzione e diffusione delle lettere 21

22 invenzione e diffusione delle lettere

invenzione e diffusione delle lettere 23

24 invenzione e diffusione delle lettere

invenzione e diffusione delle lettere 25

caratteri tipografici e designer

ratter pografi designe Bodoni, book

designers: Giambattista Bodoni e Morris Fuller Benton anno: 1790, 1911

ri fic e

caratteri tipografici e designer 29

caratteri tipografici e designer

Come precedentemente detto, il numero di caratteri tipografici a disposizione oggi può sembrare illimitato. Questa crescita è il risultato della nuova tecnologia informatica. Sono stati disegnati caratteri per schermi digitali a bassa risoluzione, per il web, per interfacce PDA, caratteri per cartelli stradali, per quotidiani e font per un particolare pubblico come ad esempio bambini che stanno imparando a leggere, dislessici ecc... Non esiste un corretto processo per disegnare caratteri, ogni designer trova il metodo a lui più congeniale. La parte più complessa è quella dell’ispirazione iniziale, infatti dalle ultime stime fatte nel 1996 i caratteri a disposizione sarebbero 50-60.000 e questo effettivamente potrebbe intimidire soprattutto i novelli designer. La nascita di recenti caratteri non sono guidati soltanto da marketing, tecnologia o aspetti puramente funzionali, ma provengono anche da una domanda più storica, intellettuale o culturale. In molti casi l’ispirazione dietro i nuovi caratteri è puramente di tipo visivo. La delizia di vedere ed usare nuovi e ben progettati caratteri è per il tipografo pari al piacere che prova un compositore o un direttore d’orchestra avendo a disposizione un nuovo strumento. La font adatta aggiunge una sottile ma importante nuance alla comunicazione di tipo testuale. La facilità nel progettare nuove font è data anche dai molti software a disposizione: programmi per il disegno vettoriale come Adobe Illustrator o Macromedia Freehand) o programmi più specializzati come Fontlab, Fontographer o DTL FontMaster1.

3.1 la scelta giusta

I caratteri tipografici fanno parte e ci accompagnano in tutta la nostra vita e sono sicuramente fondamentali per chi si occupa anche di comunicazione visiva. Scegliere un carattere anziché un altro è una scelta importante anche se spesso queste scelte sono invisibili al pubblico per la naturalezza e abitudine con cui leggiamo una parola ma soprattutto anche da una notevole ignoranza di fondo riguardo le complesse norme che regolano forme e composizioni. Scegliere un carattere sbagliato può affaticare la lettura o creare in alcuni casi addirittura illeggibilità, non bisogna quindi sottovalutarne la scelta, è invece indispensabile avvicinarsi ad un progetto con una buona conoscenza dei caratteri e delle varie differenze che esistono tra di essi. Ogni particolare forma suscita nel lettore reazioni differenti. Un carattere può piacere o meno in relazione alla sua forma e all’atmosfera che crea nella pagina: a parità di corpo, di giustezza e di interlinea, caratteri diversi ci restituiscono immagini diverse dello stesso testo. Bruno Munari, nell’introduzione al libro di Hermann Zapf “Dalla calligrafia alla fotocomposizione” afferma che esiste una forma ottimale per ogni tipo di messaggio e suggerisce un esercizio molto semplice per verificare il legame tra forma e contenuto. Egli dice: “Prendiamo una poesia (forse la più breve) conosciuta: m’illumino d’immenso. Proviamo a stamparla in diversi caratteri: in gotico, in corsivo inglese, in romano, in bastone nero tondissimo. Il significato cambia.” 2 Essendo le font al centro di ogni progetto grafico, e al centro di questo progetto, è fondamentale sapere come e soprattutto dove è possibile trovarle, come possono essere gestite all’interno del computer (essendo un prodotto digitale), e come vengono poi visualizzate ed utilizzate nei principali programmi per la progettazione grafica ed editoriale.

30 caratteri tipografici e designer

caratteri tipografici e designer 31

3.2 il mondo delle font: dove trovarle

Una fonderia di tipi (type foundry) è una compagnia che disegna e/o distribuisce tipi. Originariamente le fonderie si occupavano della manifattura e della vendita dei tipi in metallo o in legno, o matrici per le macchine come la Linotype e la Monotype. Oggi le fonderie accumulano e distribuiscono tipi (sottoforma di font digitali) creati da type designers.3 Ci sono numerose fonderie dove poter trovare caratteri, ovviamente a pagamento e legate ad un copyright. Quello che voglio analizzare in questa parte di ricerca è come alcune fonderie visualizzano il proprio catalogo font online e come aiutano sempre di più a distinguere ed imparare a riconoscere le diverse forme delle font e gli utilizzi che se ne possono fare. Alcune fonderie hanno arricchito la ricerca dei caratteri in vendita con immagini di progetti in cui sono stati utilizzati e con una descrizione degli usi raccomandati. Questo è un aspetto molto importante perché guida gli utenti attraverso una ricerca efficente spiegando se il carattere è stato progettato principalmente per quotidiani, per la segnaletica...e fornendo la storia della font, da l’anno di progettazione, il designer e altro ancora. Ci sono diverse fonderie interessanti da segnalare: tra le più famose troviamo sicuramente Lineto4, Emigre5, Hoefler & Frere-Jones6 e piuttosto interessanti per quanto riguarda la visualizzazione del catalogo font Underware7, Font Bureau8 e Veer9. Non possono non essere ricordate alcune storiche fonderie come Linotype10, che ha inventato le prime macchine per la composizione del testo in piombo per il New York Tribune nel 1886 e responsabile dell’uscita, nel corso degli anni, dei caratteri più belli; Bitstream Inc.11, fondata nel 1981 da Matthew Carter e Mike Parker; Adobe12, da segnalare in quanto considerata la più importante realtà nella produzione delle font sia per quantità che qualità, ricordiamo che sono gli inventori del Postscript. Con l’invezione del Postscript le font non erano più legate, come succedeva precedentemente,a dispositivi di stampa o di impaginazione. “[...] era un linguaggio di descrizione di pagina che potesse essere il terreno comune tra computer e stampante. Il testo e le immagini erano trattati negli stessi termini descrittivi.”13 Lineto. La fonderia Lineto visualizza il catalogo online attraverso un elenco casuale delle font in vendita scritte nel font stesso. Molto interessante è la divisione in categorie: Text Fonts, Headline Fonts, Typewriter Fonts, Historic Fonts, Graphic Fonts, Modular Fonts, Script Fonts (scritte con un font rappresentante la categoria stessa). Altra cosa interessante è la sezione TypeWriter per poter vedere e confrontare in tempo reale le diverse font in vendita. Molto facile ed intuitivo, l’unica nota negativa è quella di non poter visualizzare delle anteprime nella scelta della font. Emigre. Altra fonderia digitale famosa è Emigre situata nel Nord della California. Venne fondata nel 1984, anno della nascita del Macintosh ed è stata una delle prime fonderie indipendenti. Emigre detiene oltre 300 differenti typefaces (es. Garamond Roman, Italic and Bold in 8, 10, 12 e 14 punti). La sezione fonts non è assolutamente interessante né innovativa, vi sono infatti soltanto due colonne sulla destra con un elenco in ordine alfabetico delle font in vendita senza alcuna anteprima. Per poter avere una categorizzazione più interessante bisogna accedere alla

32 caratteri tipografici e designer

sezione view by style. All’interno per aiutare nella ricerca vi è una suddivisione secondo alcune categorie: Text Fonts (Geometric, Traditional, Others), Display Fonts (Geometric, Others), Picture Fonts (Illustration and Patterns). Il font può essere chiaramente identificato grazie all’anteprima di una lettera maiuscola ed una minuscola del font in questione, sotto vi è scritto per esteso il nome del carattere. Hoefler & Frere-Jones. Influente fonderia di New York City creata dai designer Jonathan Hoefler e Tobias Frere-Jones nel 1989. Da allora hanno aiutato alcune tra le più importanti pubblicazioni, corporazioni ed istituzioni a crescere e svilupparsi utilizzando la tipografia come mezzo fondamentale. Anche nel sito si percepisce il carattere convenzionale ed istituzionale dato da una veste grafica sul tono del grigio. Anche se rinnovato da non molto tempo, il catalogo online è rimasto praticamente il medesimo, con una divisione secondo le categorie più classiche e con un elenco di tutte le varianti della famiglia14. Underware. Per il mio percorso di ricerca è stato molto importante scoprire la fonderia Underware per la sezione examples a cui è possibile accedere una volta selezionato la font desiderata. È possibile trovare infatti numerose immagini di vari artefatti comunicativi che hanno utilizzato nel loro progetto il carattere. Vedere le varie applicazioni aiuta la ricerca poiché ogni font può essere molto più indicata da utilizzare su libri stampati piuttosto che per la segnaletica. Font Bureau. Azienda americana nata nel 1989 con lo scopo di realizzare font per vesti grafiche uniche soprattutto per riviste o giornali. La ricerca delle font è molto chiara, infatti una volta effettuato l’accesso alla sezione fonts è possibile avere una chiara descrizione della font, gli usi raccomandati, la declinazione della font scelta in tutte le sue varianti (scritto nel carattere scelto), poi vi è la sezione in use dove anche qui si possono trovare vari esempi di utilizzo. Free font. Oltre alle fonderie è possibile trovare caratteri anche su numerosi siti dove si possono scaricare gratuitamente. Qui infatti le font non sono protette da copyright poiché nella maggior parte dei casi sono font disegnate non da professionisti. Queste persone, grazie alle varie applicazioni per il type design, si misurano nel disegno di caratteri spinti anche dalla volontà di condividere qualcosa online gratuitamente. Uno dei siti più conosciuti è sicuramente Dafont15 ma in rete se ne trovano tantissimi altri. La cosa più importante è che questi siti crescono a ritmo sostenuto perché il database è continuamente aggiornato ed incrementato dagli utenti.

3.3 gestire ed utilizzare le proprie font

Un font management software è una utility per il computer che permette di gestire le font all’interno del proprio computer. Le principali funzionalità sono quelle di cercare font, attivarle/ disattivarle (centinaia di font attivate inutilmente rallentano le prestazioni del computer e possono creare conflitti), organizzarle

caratteri tipografici e designer 33

34 caratteri tipografici e designer

in gruppi o categorie, vedere o anche stampare un’anteprima, acquistare le font mancanti. Le piattaforme Mac, Windows e Linux hanno una propria font management utility ma queste spesso non sono sufficientemente specializzate. Il font manager Libro Font, prodotto alla Apple Computer, è incluso con il Mac OS X dalla versione 10.3 (Panther).16 Con Libro Font è possibile attivare e disattivare alcune font, avere le anteprime e anche organizzarle in cartelle, è semplice ed intuitivo e, anche se limitato nelle funzioni, racchiude tutte le principali operazioni, l’ideale per chi non ha particolari esigenze. Molto più sofisticati e più completi sono Linotype FontExplorer17 e Suitcase Fusion18,entrambi disponibili sia per Mac che per Windows. Vantano potenza, velocità e chiarezza. Simili nell’interfaccia, che ricorda iTunes, hanno, oltre le caratteristiche di base, anche una funzione molto importante che è quella dell’auto attivazione delle font19. I due software più utilizzati per la progettazione grafica ed editoriale vengono da Adobe: Illustrator ed InDesign (versione CS4). La visualizzazione delle font e la successiva scelta effettuata all’interno di questi due programmi non è assolutamente delle migliori. Attualmente siamo giunti alla Adobe Creative Suite CS420. L’utente può effettuare la sua scelta andando nella barra del menu, si apre una lunga lista delle font presenti nel proprio computer in modalità preview. Anche se apparentemente sembra un cosa utilissima in realtà dopo poco è possibile rendersi conto dei notevoli problemi di navigazione, soprattutto se abbiamo parecchie font attive. La ricerca diventa quindi molto lenta e noiosa. 3.4 legame con visual reference

Quando ho capito che il mio progetto di tesi sarebbe stato influenzato notevolmente dalla tipografia, ho cominciato a guardare con occhio critico alla storia dei caratteri e al loro utilizzo ma anche a come e in che misura le persone sono attirate e, in qualche modo condizionate dalla tipografia che ci assale nel mondo reale di tutti i giorni. E’ sicuramente indispensabile nella crescita e formazione di ogni designer l’attenzione agli artefatti che ci circondano per prendere ispirazione da questi attraverso l’utile strumento della tipografia. Ho scoperto che ci sono parecchie iniziative online volte al collezionismo. Quelle da cui sono stata attirata maggiormente sono state: The Visual Dictionary21, Preserve22 e Letterpool23. The Visual Dictionary. Progetto nato nel 2006 con lo scopo di collezionare parole che troviamo nel mondo reale. Ci sono fotografie di tatuaggi, pubblicità, segnaletiche, graffiti che vengono catalogate in base a come le rinominiamo nell’upload. Ci sono più di 7.500 immagini di circa 4.000 parole diverse. Nella home page del sito vi è, in alto a destra, il search dove si può scrivere la parola che vogliamo cercare, il sistema trova tutte le immagini nel sistema che corrispondono alla parola e abbiamo così delle anteprime disponibili. Importante è la sezione stats dove è possibile avere delle statistiche su le parole con il maggior numero di immagini e il nome degli utenti che hanno uplodato più immagini. Preserve. Archivio fotografico di segnaletica dipinta a mano sui palazzi. Molti infatti non esistono più perché sono stati cancellati nel tempo, oppure i palazzi sono stati ridipinti o addirittura demoliti o semplicemente la segnaletica è stata sostituita da una più moderna. Il sito è aggiornato regolarmente ed è possibile

caratteri tipografici e designer 35

contribuire a Preserve mandando le immagini per email in formato Jpeg. Preserve si distingue per una selezione di immagini davvero evocative. Letterpool. Celebra la tipografia di Liverpool attraverso insegne, segnaletiche stradali...attraverso centinaia di scatti di fotografi professionisti o amatoriali, catturando cosĂŹ il linguaggio creativo di Liverpool. Recentemente Letterpool.com ha vinto il Gold Award 2009 per Fresh Creative Awards for the Best Use of Typography.

36 caratteri tipografici e designer

caratteri tipografici e designer 37

stato dellâ&#x20AC;&#x2122;arte

stato dellâ&#x20AC;&#x2122;art Adobe Garamond, regular designers: Claude Garamond e Robert Slimbach anno: 1499-1561, 1989

stato dell'arte 41

stato dell’arte

Partendo dall’analisi delle cose necessarie allo sviluppo di una certa sensibilità nella scelta di una font, vanno presentate alcune applicazioni online e per iPhone (smartphone touch screen prodotto da Apple, presentato per la prima volta da Steve Jobs, amministratore delegato della società, durante la conferenza del Macworld del gennaio 2007) disponibili oggigiorno.

4.1 applicazioni online

Un notevole peso hanno avuto l’analisi di due applicazioni: Identifont1 e WhatTheFont2, quest’ultimo è un servizio offerto da myfonts.com. Nell’iter progettuale è stato molto importante il forte desiderio di creare uno strumento per poter riconoscere l’enorme quantità di caratteri a cui siamo sottoposti ogni giorno. Un problema frequente è quello di capire che font è quello che un nostro cliente ci mostra, che vediamo su un’insegna, su un flyer, o su qualsiasi altro supporto per poterlo poi riutilizzare avendo magari ben chiaro il principale utilizzo che se ne può fare (ad es. carattere più indicato per i testi, carattere più indicato per presentazioni, per la segnaletica e così via...). Identifont, lanciato nel 2000, utilizza un sistema contenente informazioni su un gran numero di caratteri. Attraverso una serie di domande il sistema cerca di riconosce il carattere, ad esempio un tipo di domanda è: “Does the upper-case J descend below the baseline?”. Con circa 20 passaggi si possono avere buone possibilità di sapere il nome della font che stiamo cercando. Tra le varie domande c’è sempre l’opzione “Not sure”, perché spesso non è possibile rispondere in modo esatto alle domande. Il problema più grosso è che nella maggior parte dei casi abbiamo poche lettere a disposizione come ad esempio un logo e quindi il sistema potrebbe richiedere molti più passaggi e non riuscire nell’identificazione. Uno dei punti forti è quello di arrivare ad identificare una font lentamente, passo dopo passo, cercando di capire quali sono le piccole caratteristiche importanti da osservare, magari munendosi addirittura di una lente d’ingrandimento nel caso di caratteri di piccole dimensioni. In questo modo è possibile identificare imparando. My Fonts con una libreria in continua crescita, con più di 62.000 typefaces proveniente da più di 400 tra fonderie e designer, è stato uno dei più vasti luoghi online dove fare acquisti da quando è stato lanciato (1999). Nel 2008 è finalmente uscito con un nuovo restyling di logo e sito. All’interno oltre alla sezione Find Fonts c’è il servizio WhatTheFont. Grazie a questo servizio è possibile riconoscere una font partendo dalla sua immagine. Nella pagina del servizio troviamo i soliti campi da dove è possibile effettuare l’upload dal proprio hard disk oppure possiamo inserire l’url di una immagine che abbiamo trovato in rete. Al massimo possiamo uplodare immagini di 2 MB e per un miglior riconoscimento del carattere è importante avere un testo il più orizzontale possibile (magari sistemandolo in Adobe Photoshop), se possibile avere l’altezza delle lettere di 100 pixel e lettere separate. Nella fase successiva il sistema chiede di controllare che le lettere riconosciute dal sistema corrispondano esattamente a quelle del testo dell’immagine uplodata dopodiché il servizio stila un elenco delle font più simili. In caso di mancato riconoscimento è possibile chiedere l’aiuto di un esperto inserendo l’immagine nel forum. Font Trainer è un gioco online per testare e migliorare le proprie conoscenze tipografiche nel riconoscimento font. Semplice ed intuitivo. Viene presentata una frase famosa come ad esempio “Two things are infinite: the universe and human stupidity; and

42 stato dell'arte

I’m not sure about the universe.” (Albert Einstein), ed ogni singola parola viene scritta con un colore e una font differente, cliccando sulla singola parola si apre un elenco di nomi di possibili font tra cui scegliere. Il nome del carattere selezionato viene scritto sopra la parola come promemoria della scelta effettuata, attraverso il check è possibile vedere se le risposte date sono giuste o sbagliate. Funzionale è l’help che da la possibilità di visualizzare un esempio di tutti le font utilizzate all’interno della frase. Font Game,3 altro gioco online per riconoscimento font. Viene visualizzato un carattere e si deve indovinare il nome tra i quattro presentati. Bisogna identificare 34 differenti caratteri. Concluso il gioco-test è possibile pubblicare il proprio punteggio all’interno della sezione “Hall of Fame”. Deep Font Challenge,4 gioco a tempo sempre per il riconoscimento font. Il campo di gioco simula il tiro a segno dove il mouse è il mirino e bisogna “sparare” alla font giusta che viene presentata di round in round. Ci sono tre vite, alla fine del gioco si può pubblicare il punteggio raggiunto.

stato dell'arte 43

fig. 1 Identifont. Schermata dell'applicazione online durante la fase di identificazione di un carattere.

fig.1

fig. 2 WhatTheFont. Applicazione per identificare un carattere tipografico utilizzato in un'immagine.

fig. 2

fig. 3 Effettuato l'upload di una immagine, questo Ă¨ il risultato ottenuto: dieci matches.

fig. 3

44 stato dell'arte

fig. 4 FontTrainer. Gioco online per riconoscere le font. Ogni parola Ă¨ scritta con un carattere differente, basta scorrere la lista per individuare quello corrispondente.

fig.1

fig. 5 Font Game. Gioco online per riconoscere i caratteri.

fig. 2

fig. 6 Deep Font Challenge. Gioco online a tempo per riconoscere i caratteri.

fig. 3

stato dell'arte 45

4.2 applicazioni per iPhone

In continua crescita sono le applicazioni per iPhone a sfondo tipografico. Molte nascono da applicazioni già presenti online che vogliono ampliare il proprio bacino di utenza soprattutto visto il notevole incremento nelle vendite, “secondo una ricerca della società Nielsen, l’iPhone 3G risulta essere il cellulare più utilizzato in USA, con il 4% dell’intero mercato della telefonia mobile”.6

Basato sul corrispettivo online nasce The Font Game7 per iPhone, dedicato a tutti coloro che sono amanti delle font. Gioco a quiz con tre differenti livelli di difficoltà, con 650 differenti font disponibili e la possibilità di condividere il proprio punteggio su Twitter. Molto semplice, consiste nel dover indovinare il nome delle font scegliendo tra le risposte disponibili proprio come quello online. Da gennaio 2009 WhatTheFont è disponibile anche per iPhone8, basta infatti scaricare l’applicazione gratuita e, appena lanciata l’applicazione è possibile scegliere tra fare una nuova foto o effettuare il riconoscimento partendo da una immagine già salvata sull’iPhone. Come nel servizio online anche qui ci sono delle piccole accortezze da seguire per avere un migliore risultato, in primis avere meno di 20 lettere e abbastanza grandi, avere un testo orizzontale, non avere lettere con legature come avviene spesso nel caso di loghi o scritture a mano, avere infine un buon contrasto tra testo e sfondo. Con lo strumento crop image facciamo una selezione del testo che vogliamo riconoscere e passiamo così alla fase successiva, controllare le singole lettere riconosciute dal sistema con la possibilità di cambiarle in caso di errori. Una volta effettuato il check, è possibile procedere con l’identificazione toccando il pulsante Identify! nell’angolo in alto a destra. Il risultato corrisponde ad una lista con le font ritenute più simili e quindi più probabili. FontShuffle9 è una guida nella ricerca delle font. Non è un gioco ma un catalogo constantemente aggiornato dei migliori caratteri che la fonderia FontShop seleziona dal suo enorme assortimento. Sono raggruppate più di 650 famiglie di font. La ricerca tra le diverse categorie è semplice e il confronto tra font diverse risulta molto utile. ShakeFONT11 è una applicazione per ricercare font in modo veloce, scuotendo l’iPhone è possibile trovare diversi font partendo da divertenti categorie tipo holiday halloween.

stato dell'arte

opportunitĂ del progetto

oppor rogett Serifa (BT), roman designer: Adrian Frutiger anno: 1967

opportunità del progetto

rtunit to opportunità del progetto

Dopo la fase di ricerca ed analisi è cominciato il vero e proprio sviluppo dell’idea. Come già è stato detto, il numero delle font a disposizione oggi è enorme e capire quale font utilizzare è la sfida di ogni grafico. Acquisire nozioni da libri e insegnanti spesso non è abbastanza, soprattutto perché ci vengono proposte alternativamente l’analisi dei tipi, la loro storia, le basi della progettazione o ancora esempi di artefatti da attribuire a prestigiosi designer, dandoci così si una procedura efficace ma solo nell’arco di molti anni di apprendimento. Partendo proprio da queste riflessioni ho fatto si che il mio progetto evolvesse in un strumento per studenti con una spiccata voglia di divenire designer e con questo voglio dire interaction designer, graphic designer, web designer, video maker... tutte quelle aree in cui è necessario comunicare e saper comunicare bene anche grazie ad un utilizzo cosciente di questo potente strumento nelle nostre mani che si chiama tipografia. Cosa servirebbe?

• riconoscere una font vista su una locandina, flyer.... • conoscere le differenze tra un carattere e l’altro • aumentare le proprie competenze • giocare con le font • collezionare foto tipografiche che possano ispirare il nostro design • avere dei modelli

L’applicazione ideale dovrebbe aiutare i novelli designer ad aumentare le proprie competenze, per essere in grado di vedere le differenze tra font di famiglie diverse e font che fanno parte delle stesse categorie, dando un buon procedimento (capire quali sono gli step da seguire e le particolarità da osservare per riconoscere un carattere). Tutto questo però potrebbe essere incredibilmente noioso: ecco che la procedura si deve fare gioco, nel senso che qualsiasi apprendimento è reso migliore dall’intrattenimento. Il primo passo nel progetto è proprio quello di trovare delle soluzioni attraenti per imparare senza accorgersene.

52 opportunitĂ del progetto

opportunità del progetto

5.1 scelta del supporto

Un’applicazione di supporto alla propria conoscenza è pensata innanzi tutto per la portabilità: perciò il mercato di riferimento è quello degli handheld o degli smartphone. Console portatili e telefoni cellulari di ultima generazione stanno sempre più convergendo dal punto di vista tecnico, ecco che quindi una piattaforma come iPhone di Apple è ideale per ospitarvi un gioco: da una parte il suo schermo è superiore in risoluzione e precisione rispetto a console similari, dall’altra promuove un tipo di interazione interamente basata sul riconoscimento tattile. Sensori di movimento e connessione ad internet completano una gamma di caratteristiche peculiari. Le caratteristiche richieste dal design sono: • portabilità • grande schermo e alta risoluzione • touchscreen • presenza di una fotocamera • connessione ad internet Se analizziamo queste qualità, è evidente come il mercato di riferimento sia quello delle console portatili e dei cellulari touchscreen. Sebbene mediamente dotati di caratteristiche di trattamento dell’immagine superiore, gli handheld non sono nativamente dei dispositivi crossmediali. Se guardiamo l'iPhone, ci si accorge che riunisce in una sola piattaforma notevoli performance grafiche ad un hardware capace di catturare immagini e navigare su internet, il tutto con uno schermo superiore per qualità a qualsiasi console portatile. La scelta di uno smartphone inoltre permette di non dover costringere gli utenti a portare con sé un ulteriore dispositivo, favorendo così la vocazione on the go dell’applicazione.

fig. 1 iPhone 3G prodotto da Apple. fig. 1 Blackberry Bold 9000.

fig.1

fig.2

nasce FontUp

e FontU Officina Sans, bold designer: Erik Spiekermann anno: 1990

nasce FontUp

Up 6.1 riconoscere e collezionare

Lo sviluppo di FontUp parte proprio dall’idea di riconoscere tutte le font che ci circondano attraverso l’utilizzo della camera integrata nell’iPhone. Quando ci troviamo di fronte un nuovo progetto spendiamo molto tempo a ricercare la font giusta da poter utilizzare oppure ricadiamo sempre nei soliti tre o quattro caratteri che utilizziamo per qualsiasi cosa, forse perché è sempre più difficile memorizzare le tantissime nuove font che vengono progettate ogni giorno (certamente non tutte meritano di essere ricordate). Il nostro lavoro non avviene soltanto di fronte ad un computer ma anche in movimento, osservando i particolari e memorizzando tutte le cose che attirano il nostro interesse, ogni artefatto visto può essere la chiave di un progetto futuro. Questa sezione dell’applicazione nasce quindi dalla precisa volontà di creare un’applicazione per collezionare foto di logotipi, banner, locandine, flyer, insegne e quant’altro per creare una nostra personale collezione a cui poter accedere anche solo per condividerla con altre persone o per potervi trovare degli spunti per un progetto. Collezionare serve anche a memorizzare, a creare quindi un nostro bagaglio a disposizione in qualsiasi momento. FontUp è rivolta quindi principalmente a studenti che vogliono accrescere le proprie competenze tipografiche, partendo proprio dalle cose che preferiscono e da cui sono attirati nella vita di tutti giorni. Perchè non aiutarli e guidarli nel riconoscimento di una font che hanno voluto collezionare? Questo è proprio quello che fa la sezione Recognize (riconoscere): partendo da un’immagine scattata guida verso il riconoscimento della font presente nell’immagine. Una volta scattata la foto si ritaglia la parte di testo di cui vogliamo riconoscere la font. Il sistema ci propone delle domande tecniche per analizzare il carattere in questione e dopo una serie di quesiti, di numero variabile a seconda del tipo di font, dalla nostra precisione nelle risposte ma anche dalla risoluzione dell’immagine, si arriva ad una lista di possibili nomi del carattere. A questo punto si passa ad una fase di riconoscimento molto più intuitiva, cioè è possibile trascinare (drag) e quindi verificare sull’immagine la selezione di font uscita dalla prima fase di analisi. In modo facile ed intuitivo si possono notare le varie differenze tra un carattere e l’altro, facendo attenzione a dei dettagli a cui probabilmente non sempre diamo peso, questo grazie alla sovrapposizione effettiva dei caratteri. Voglio sottolineare che lo scopo principale non è quello di riconoscere esattamente la font che abbiamo fotografato, ma piuttosto l’accento è sul processo di riconoscimento stesso. Infatti esistono numerose font con caratteristiche simili, soprattutto se tentiamo di riconoscere un limitato set di lettere, come ad esempio in un logo. Quello che voglio è far acquisire agli studenti un buon metodo, per avere ben chiaro quali siano i passi fondamentali da seguire nel riconoscimento di un carattere. Avere un approccio possibilista ci fa comprendere la complessità del mondo tipografico e ci stimola ad allargare la conoscenza dell’argomento. Costruire questa conoscenza ci tutela dall’imbarazzante errore di presentare un progetto con una font sbagliata.

Le ispirazioni sono da trovare in Identifont, applicazione online, e WhatTheFont, applicazione online e disponibile anche per iPhone (vedi pag. 43-45).

nasce FontUp

6.2 tecnologie di riconoscimento carratteri

I sistemi di Optical Character Recognition (riconoscimento ottico dei caratteri detti anche OCR) sono programmi dedicati alla conversione di un’immagine contenente testo, solitamente acquisite tramite scanner, in testo digitale modificabile con un normale editor. Il testo può essere convertito in formato ASCII semplice, Unicode o, nel caso dei sistemi più avanzati, in un formato contenente anche l’impaginazione del documento.24 Alla base del riconoscimento c’è un sistema di confronto che opera con il metodo “vicino più prossimo”: il segno viene confrontato con tutti i possibili risultati e viene assegnato al carattere alfabetico con la forma più attinente. Il riconoscimento dei caratteri è la base anche del riconoscimento delle font: innanzi tutto c’è quindi il riconoscimento del segno per poi passare ad una valutazione discriminante. I tratti salienti del carattere alfabetico (grazie, raccordi, spessore dei tratti e loro congiungimento) vengono confrontati con la libreria di tipi a disposizione, proponendo un ristretto ventaglio di possibilità, spesso molto simili tra loro.

6.3 database

Il termine database, tradotto in italiano con banca dati, indica un “archivio strutturato” in modo tale da consentire l’accesso e la gestione dei dati stessi (l’inserimento, la ricerca, la cancellazione ed il loro aggiornamento) da parte di particolari applicazioni software ad essi dedicate. Il database è un insieme di informazioni, di dati che vengono suddivisi per argomenti in ordine logico (tabelle) e poi tali argomenti vengono suddivisi per categorie (campi). Come visto precedentemente, la sezione recognize di FontUp propone il riconoscimento di una font fotografata attraverso l’utilizzo della fotocamera integrata dell’iPhone. Per fare questo l’applicazione si appoggia ad un database di font con cui si confronta per cercare il carattere con i tratti più simili. Più si ha una database ricco con cui interfacciarsi, più le possibiltà di trovare la font dell’immagine scattata, si fanno concrete (ovviamente unito ad un’alta qualità dell’immagine). Il presupposto per sviluppare questa sezione è quello di condividere i database online delle fonderie di caratteri, come partner ufficiali.

primi wireframe recognize e collection

nasce FontUp

sezione: collection

primi wireframe

1. Font Up! (parole chiave: migliorare, evolversi, allenarsi, giocare, imparare; keywords: improve, evolve, training, play, learn). Il nome deriva dal termine inglese utilizzato nel mondo dei videogiochi: power up.

3. Immagini organizzate secondo differenti parametri per facilitare la ricerca.

2. Collezione di immagini allâ&#x20AC;&#x2122;interno di Typefaces.

4. Anteprime delle foto allâ&#x20AC;&#x2122;interno di Adobe Garamond.

nasce FontUp

sezione: riconoscimento

1. Scattare lâ&#x20AC;&#x2122;immagine attraverso la fotocamera dellâ&#x20AC;&#x2122;iPhone.

4. Inizia il training (allenamento).

2. Utilizzare la foto appena scattat oppure scattarne unâ&#x20AC;&#x2122;altra.

5. Scegliere la parte da riconoscere (crop).

3. Use per procedere con il riconoscimento.

6. Scalare con due dita.

primi wireframe 63

7. Scegliere il livello di difficoltĂ .

10. Si possono avere degli aiuti toccando le parole sottolineate. Si apre una popup che spiega il significato del termine.

8. Ogni livello si differenzia per la quantitĂ di aiuti offerti dal sistema.

11. Aiuto visivo.

9. ModalitĂ di gioco, basato su Identify a font! di Identifont. Ad ogni risposta data corrisponde un restringimento delle font possibili.

12. Per procedere basta dare la risposta (si spera quella giusta!)

64 nasce FontUp

sezione: riconoscimento

13. È possibile utilizzare il comando Not Sure passando alla domanda successiva.

16. Visualizzazione dello specimen di ogni font (solo nella modalità easy).

14. Help per condividere la domanda con altri utenti online che cercheranno di dare la risposta giusta al posto del giocatore.

17. Seconda fase del riconoscimento: molto più intuitiva.

15. Sintesi delle risposte date e un’anteprima delle possibili font.

18. Ogni anteprima può essere trascinata (drag) sull’immagine.

primi wireframe 65

19. PuĂ˛ essere spostata per scegliere dove testarla.

22. Si torna alla schermata precedente per cercare la font giusta.

20. Una volta rilasciata la lettera appare con una diversa opacitĂ .

23. La font sbagliata viene oscurata

21. Utilizzare i comandi iPhone (due dita) per scalare la lettera. Le due lettere sovrapposte non coincidono.

24. Viene tracinata una seconda font.

66 nasce FontUp

sezione: riconoscimento

25.

28. Effettuando la prova visualizziamo che la scelta Ă¨ corretta.

26.

29. Il colore della font cambia confermando che la font dellâ&#x20AC;&#x2122;immagine Ă¨ un Bodoni roman.

27.

primi wireframe 67

Livello di gioco

Analisi tecnica: domande

Analisi intuitiva: ‘prova font’

Anteprima del font + il nome del font.

Easy

Suggerimenti intelligenti: possibilità di capire meglio alcuni termini, utilizzati in tipografia, all’interno delle domande.

Possibilità di visualizzare il Type Specimen.

Help in tutte le domande: chiedere l’aiuto di altri utenti FontUp, inviando l’immagine e la domanda a cui non si sa rispondere.

Suggerimenti intelligenti: numero limitato.

Anteprima e nome del font.

Medium Help (a disposizione soltanto 3)

Suggerimenti intelligenti: nessuno. Hard Help: nessuno

Soltanto nome del font senza nessuna anteprima.

68 nasce FontUp

prove grafiche dellâ&#x20AC;&#x2122;applicazione e del logo

primi wireframe 69

Progettare la grafica Ă¨ stato un compito complesso, con continue modifiche lungo tutto il percorso di progettazione. Non volevo che il suo aspetto influenzasse troppo durante lâ&#x20AC;&#x2122;apprendimento, anche se sono ben evidenti alcuni riferimenti a quella che comunemente viene definita come tipografia svizzera.

lo sviluppo di FontUp

svilupp FontUp Joanna, regular designers: Eric Gill anno: 1937

lo sviluppo di FontUp

po p lo sviluppo di FontUp

Lo sviluppo del progetto definitivo di FontUp arriva ad una svolta dopo aver ripensato e rimesso in discussione l’intero progetto. L’applicazione che si stava sviluppando era sempre più vicina a quel genere di giochi educativi che sfruttano la tecnologia in maniera marginale, senza coglierne le potenzialità. La sola analisi di font fotografate non è di per sé una procedura innovativa tale da giustificare l’uso di un handeld tipo iPhone. La vera opportunità sta invece nelle potenzialità ludiche della piattaforma. Nasce quindi la sezione di allenamento di FontUp (training), dove l’obiettivo preponderante diventa quello di imparare attraverso il gioco, che considero una delle attività più serie e istruttive. Se il normale imparare è una procedura lunga e tediosa, ecco che la si decostruisce in elementi più piccoli, i livelli di un videogioco.

7.1 imparare giocando

Il gioco è un comportamento evolutivo innato. Nel corso della storia, psicologi, biologi e sociologi hanno dato diverse spiegazioni dell’utilità del gioco, basate tutte sull’assunto che esso debba servire a qualcosa: un comportamento imitativo, una simulazione, uno sfogo, un modo per rilassarsi. Il livello di attenzione e di piacere che il giocatore raggiunge nell’atto stesso di giocare, va invece oltre ogni spiegazione utilitaristica.6 Quello che è certo, è che il gioco non è altro che un processo: dato un insieme di regole e un obiettivo, il gioco consiste nel trovare il procedimento corretto per compierlo. La caratteristica più evidente del gioco è la performanza:7 il giocatore, via via che itera il processo di gioco, con un meccanismo di prova e ritenta, diventa sempre più bravo e abile nel gioco stesso, tanto che ai tentativi si sostituiscono gesti semiautomatici, esattamente come avviene nell’allenamento di un gesto atletico (il cui fine non è prettamente muscolare, ma quello di allenare e rendere automatici gli impulsi che governano i muscoli). Questa tesi riguarda la tipografia. In particolare, il conoscere, discernere e apprezzare lo sterminato panorama del type design. La mole di informazioni è innumerevole: non esiste un algoritmo migliore di un altro che ci consenta di imparare velocemente le font, siamo costretti ad un apprendimento lineare. Il fatto che siano dei segni complessi, ancorati a stili e periodi storici, ci aiuta nella memorizzazione, poiché riusciamo a metterli in relazione con altri oggetti visivi nel nostro cervello, ma se non fosse per questo essi sarebbero un semplice ed astratto archivio di nomi. I caratteri, sono essenzialmente un problema visivo, di percezione. Le loro singole e minute caratteristiche sono di gran lunga troppe per poter solo da esse risalire alla natura del segno intero: tratti, grazie e occhi presentano tali e tante variazioni che essi assumono un significato esclusivamente nel segno alfabetico totale, e a volte abbisognano anche di più segni dello stesso stile posti vicino perché venga fuori l’agognata etichetta, il nome e l’identità della font. La psicologia della percezione ci aiuta nello stabilire il metodo adatto per affrontare i problemi, appunto, della percezione. Il metodo fenomenologico-sperimentale consiste nel “presentare una situazione, descrivibile in termini operazionali, ad un osservatore ed apportare ad essa variazioni sistematiche su alcuni parametri al fine di scoprire […] le relazioni di dipendenza e indipendenza presenti all’interno delle configurazioni”.8 Costruire un videogioco che soddisfi questo approccio è proprio il fine di FontUp. Infatti è solo proponendo dei giochi di composizione e scomposizione dei segni-font che la complessità

fig.1

fig.1 La logica della ripetizione: trial and error

lo sviluppo di FontUp

di questi segni diventa riducibile. Grazie all’iterazione e ad un meccanismo intuitivo come quello del confronto visivo riusciamo a sedimentare le caratteristiche salienti dei diversi caratteri tipografici, perché si uniscono differenti stimoli in un solo gesto di gioco. Ecco che, ai dati storico-stilistici si aggiungono quelli geometrici, l’analisi e il confronto: ad un ritmo serrato, un problema di stile e disegno diventa per esempio un problema di ricomposizione di un puzzle. Nel ricostruire due lettere di font diversi scomposte in un mosaico, al tempo stesso visualizzo geometricamente la lettera, confronto degli stili diversi e rifletto sulle relazioni che intercorrono tra le parti stesse di uno stesso carattere.

7.2 brain training

fig. 2 More Brain Training. Nintendo DS.

Un ruolo fondamentale nell’evoluzione di questa sezione del progetto è da attribuire a Brain Training. Quest’ultimo è un gioco educativo sviluppato per Nintendo DS e presentato nel 2006 in Europa. Il giocatore deve giornalmente eseguire dei semplici esercizi aritmetici, quesiti di sudoku (gioco di logica), prove mnemoniche ed altro ancora con lo scopo di stimolare il cervello mantenendolo in forma. Il gioco è stato creato dal dottor Ryuta Kawashima, laureato in medicina e direttore del dipartimento di neuroscienze dell’università Tohoku in Giappone. Questo gioco e il successore More Brain Training from Dr. Kawashima: How Old Is Your Brain? hanno venduto più di 17 milioni di copie in tutto il mondo.3 Brain Training include più di una dozzina di diversi esercizi pensati per essere giocati per pochi minuti al giorno e un calendario integrato tiene conto dei tuoi progressi.4 Brain training è un buon esempio di proceduralizzazione di attività complesse come la matematica, il linguaggio, la logica e la musica. Tutte queste attività stimolano il cervello, ma padroneggiarle richiede uno studio applicato di anni. Per livelli crescenti di difficoltà, propone piccole sfide che hanno come risultato il significativo aumento dell’agilità mentale, la chiave prevedibilmente è il gioco. Le font non sono segni puri, con significato univoco, ma oggetti complessi, con differenti strati di lettura. I tipi sono quindi sia

fig. 2

lo sviluppo di FontUp

entità analizzabili strutturalmente sia dei segni compiuti nella loro totalità. Sono le modifiche alla loro struttura che li rendono diversi gli uni dagli altri, ma queste modifiche sono tali e tante, ognuna con un significato preciso, che non è possibile costruirci un modello veloce di apprendimento. Quello che possiamo fare però è sfruttare il meccanismo di gioco, che per definizione è pluri-iterativo, per accelerare e migliorare la nostra memoria visiva.

7.3 allenamento giornaliero

Partendo da questa analisi si sviluppa in un secondo momento la sezione di allenamento di FontUp (training), quando l’obiettivo diventa quello di creare uno strumento di apprendimento da affiancare a libri ed insegnanti. Un allenamento quotidiano fatto di mini-giochi divertenti ed intuitivi senza perdere mai di vista l’importanza di osservare il mondo di artefatti che ci circonda utilizzando un potente strumento, la fotografia. Collezionare, riconoscere, allenarsi diventano concetti fondamentali su cui si basa FontUp. L’apprendimento è sviluppato attraverso dei mini-giochi tipografici all’interno di quattro differenti categorie: pensa (think), identifica (identify), memorizza (memorize) e confronta (compare). La nostra memoria funziona in tre differenti modi: sensoriale, a breve termine e a lungo termine. La memoria sensoriale viene utilizzata per catturare un’informazione nel momento in cui viene fornita e dura pochi secondi. L’informazione passa poi ad un magazzino sensoriale, memoria a breve termine dove l’informazione può essere ricordata per qualche minuto. Ma se vogliamo veramente ricordare qualcosa, allora deve essere catturata nella memoria a lungo termine, dove può rimanere per giorni o addirittura per anni. Proprio sulla base di queste differenze ricordiamo a memoria il numero di telefono del nostro migliore amico ma dimentichiamo subito il nome di una persona appena conosciuta. Il modo migliore per ricordare un numero di telefono è quello di usarlo regolarmente, poichè ripetendolo spesso il cervello lo ricorda meglio5. Questo metodo di memorizzazione è quello che sfrutta FontUp training, che consta appunto di piccoli giochi da fare quotidianamente per sviluppare la memoria a lungo termine attraverso l’utilizzo di ricordi visivi e cioè basati su qualcosa che abbiamo visto ripetutamente. Avvenuto l’accesso al training il menu ci offre diverse possibilità: Test, vengono scelti casualmente dal sistema tre giochi per testare le conoscenze del giocatore. Daily training, allenamento giornaliero per tenerci in forma, si accede ai diversi giochi scegliendo tra le differenti categorie. Challenge, la sfida: se il clou del gioco è l’allenamento del giocatore singolo (single player) la sfida con gli amici (multiplayer) è un’ulteriore stimolo all’apprendimento, oltre che fonte di nuovi obiettivi e divertimento. Options, opzioni di gioco, grafici di avanzamento delle proprie conoscenze tipografiche, calendario per visualizzare la costanza al gioco. All’interno del training la parte a cui ho dato maggiore importanza e sviluppo è stata la progettazione di alcuni giochi tipografici, all’interno dei quali è inserita la variante tempo e la possibilità di mettere il gioco in modalità stop per consultare la guida ricca di esempi, descrizioni e nozioni.

76 FontUp: daily training through play

7.4 meccanismi di gioco di FontUp

Le modalità principali all’interno del training sono due: il test e il daily training. Il test si compone di tre prove, scelte a caso (random) dal sistema tra le varie disponibili. Ogni gioco è ha tempo, meno tempo si impiega più il punteggio e quindi i miglioramenti saranno soddisfacenti. Essendo un test la modalità pausa non è disponibile. Sarà quindi compito del giocatore assicurarsi di avere tempo sufficiente per lo svolgimeno dei giochi senza dover ricorre all’interruzione. Ovviamente il test può essere svolto più volte durante la giornata, ma soltanto il primo della giornata sarà memorizzato e visualizzato all’interno del calendario, dove è possibile tenere memoria di quante volte abbiamo giocato durante le ultime settimane, e all’interno della sezione training possono essere visualizzati i grafici relativi al proprio andamento, giorno per giorno. Questo è di grande aiuto per i giocatori che possono essere stimolati da un miglioramento ma anche da un possibile peggioramento. In base al punteggio ottenuto FontUp suggerisce come accrescere le proprie competenze tipografiche, allenandosi in alcune particolari categorie dove i risultati risultano più scarsi. Nell’altra modalità, daily training (ideale come preparazione al test) si può scegliere la categoria che più si desidera (think, memorize, identify, compare), avendo ben chiaro che tutti i giochi presenti nelle diverse categorie servono a sviluppare una conoscenza via via più completa. Nell’allenamento i giochi possono essere messi in stop, è infatti concepito per essere utilizzato in qualsiasi momento della giornata, risulta difficile prevedere interruzioni. Inoltre, mettendo il gioco in pausa si può accedere al learn per avere nozioni tipografiche riguardanti il gioco specifico, uscire dal gioco scegliendo altre differenti categorie, accedere alle altre due sezioni dell’applicazione (ricordiamo che le sezioni di FontUp sono appunto training, recognize e collection). I giochi effetuati durante l’allenamento non hanno lo stress del tempo che scade, essendo un allenamento è importante lasciare ai giocatori tutto il tempo necessario, che però verrà calcolato ed utilizzato per la scheda di valutazione di fine gioco, con la possibilità di accedere al learn e la visualizzazione degli errori commessi. In FontUp lo svolgimento dei giochi è molto intuitivo grazie anche alla piattaforma capacitiva (che riconosce il dito sullo schermo) utilizzata. Tutto è strutturato intorno ad un semplice tocco.

i giochi sezione training: navigazione menu e giochi

78 lo sviluppo di FontUp

prove grafiche del menu

1. Accedere alla sezione training.

3. Recognize e collection a scomparsa. Ă&#x2C6; possibile richiamarle toccando il triangolo bianco. In qualsiasi momento si puĂ˛ passare da una sezione allâ&#x20AC;&#x2122;altra.

2. Attraverso un'animazione il pulsante sale.

4. Sottomenu di training, allenamento quotidiano.

lo sviluppo di FontUp 79

5. Visualizzazione delle quattro categorie di gioco.

7. Gioco: puzzle

6. All’interno di ogni categoria si può scegliere tra tre differenti giochi.

8. È possibile tornare indietro senza mai uscire dall’applicazione.

80 lo sviluppo di FontUp

giochi: puzzle, classification, font memory, zoom identify

puzzle

classification

1. Vengono pesentati due font scomposti da ricostruire.

1. Diverse font scorrono in alto, il giocatore deve trascinarle nella categoria giusta.

2. I pezzi di font possono essere trascinati nella posizione giusta e ruotati.

2. Il carattere trascinato si modifica nel colore e dimensione per essere trascinato all'interno della categoria.

3. Sintesi delle risposte date e unâ&#x20AC;&#x2122;anteprima delle possibili font.

3. I caratteri inseriti nella categoria giusta vengono visualuĂŹizzati con un numero di fianco.

lo sviluppo di FontUp 81

font memory

identify me

1. Diciotto carte dove sono rappresentate le anteprimedi diverse font con stili e pesi differenti.

1. Il gioco inizia con lo zoom su un particolare di una font.

2. Il giocatore ha 2 minuti per memorizzare il nome e la posizione di ciascuna font, dopodichè le carte si girano.

2. Con lo scorrere del tempo si ha sempre più uno zoom out sull’intera lettera e poi sull’intera parola. Quattro possibili risposte.

3. Una volta attivata la carta si sceglie il nome del carattere corrispondente.

3. Quattro possibili risposte. Gioco a tempo, si deve cercare di rispondere prima di vedere l’intera parola.

design definitivo

sign finit Times New Roman, regular designers: Stanley Morison e Victor Lardent anno: 1932

n tivo

design definitivo

La prima cosa che si nota nel design definitivo e la ridefinizione della gerarchia degli elementi della grafica. Infatti tutte quelle informazioni utili al giocatore per capire il meccanismo di gioco sono state utleriormente semplificate e rese chiare. In generale, a partire dal menu si nota come l’identità grafica sia più consistente e omogenea: un esempio su tutti è l’adozione del formato landscape per tutta la durata dell’applicazione. Non è raro nel processo di design passare dei periodi concentrati su un singolo particolare, e in FontUp questi sono stati i giochi: hanno richiesto gran parte del lavoro di sviluppo. Siccome il menu e i giochi sono due classi di oggetti ben differenti, all’inizio per me era naturale tenerli separati e con due visualizzazioni distinte, come se il ruotare dell’iPhone sottolineasse il passaggio da una modalità all’altra. Inutile dire che questo approccio è fin troppo schematico se visto a posteriori e non permette la costruzione di un’identità visiva forte e caratteristica. Mantenere il formato landscape per menu e gioco mi ha invece permesso di rendere omogenea la navigazione e l’interazione in generale. Progettata una migliore pianificazione dell’interazione, gli elementi grafici sono venuti di conseguenza: il nuovo disegno privilegia un aspetto più unitario. I triangoli che univano le voci di menu, per esempio, sono spariti in favore di un tratto simile alla grafica dei giochi che è fatta di forme chiuse ancora più semplici ed essenzialmente rettangolari. Ultimo, ma non in ordine di importanza, il gioco stesso ha beneficiato di un approccio più razionale: gli spazi effettivi di gioco sono aumentati di dimensione, a beneficio della chiarezza visiva, dell’immediata interpretazione e della facilità di utilizzo. Se ancora ce ne fosse bisogno, tutto questo intenso processo di iterazione dimostra quanto il design beneficia della capacità di generare numerose soluzioni nel tempo, un design che si costruisce sulle spalle di quello precedente. La continua messa in discussione del proprio lavoro è l’unico modo di produrre un design efficace nel tempo, e nel caso di un’applicazione interattiva non è solo il divertimento ad essere il metro di valutazione, ma anche la longevità.

FontUp: daily training through play

design definitivo design definitivo dell'intera applicazione

design definitivo

navigazione menu sezione training

Accesso alla sezione training.

Primo sottomenu di training. Test: mettersi alla prova attraverso tre giochi scelti random dal sistema; daily training: allenamento giornaliero seguendo differenti categorie di gioco; challenge: sfida utilizzando il multiplayer; options: visualizzare grafici, calendario e progressi collegati allâ&#x20AC;&#x2122;apprendimento tipografico.

Allenamento quotidiano.

design definitivo

Visualizzazione delle quattro differenti categorie di gioco: pensa, identifica, memorizza, confronta.

Scelta della categoria think (pensa).

Allâ&#x20AC;&#x2122;interno di ogni categoria si possono scegliere differenti giochi disponibili subito, ed altri con il lucchetto che possono essere sbloccati nel corso dellâ&#x20AC;&#x2122;allenamento.

90 design definitivo

accesso ai giochi

Accesso ai giochi.

All’interno dei giochi la grafica è quasi del tutto azzerata, sono mantenuti soltanto i colori rappresentativi. Questo per avere il massimo spazio durante la modalità gioco.

Prima di iniziare il gioco c’è il classico 3..2..1... start! Necessario per dare al giocatore il tempo di prepararsi.

design definitivo 91

92 design definitivo

gioco: puzzle

Il giocatore deve trascinare la parte della font da ricomporre nella giusta parte dello schermo. Questo gioco fa concentrare sulle forme delle grazie e i dettagli delle font con caratteristiche simili, ad esempio tra Bodoni e Didot.

Le varie parti delle font possono essere ruotate toccandole: ogni tocco sul pezzettino lo ruota di 45째.

Bisogna far attenzione a ricostruire i caratteri nel giusto spazio dedicato.

design definitivo 93

A fine, in base ai secondi impiegati al completamento del gioco, viene data una valutazione. Tutte le valutazioni di fine gioco andranno ad arricchire i grafici relativi al proprio andamento.

94 design definitivo

gioco: Q game

Il giocatore deve di volta in volta associare la coda della q alla rispettiva forma: aiuta a concentrarsi sulle curve interne ed esterne.

Far scorrere la parte sopra e la parte sotto per trovare il giusto match.

design definitivo 95

Trovata la giusta combinazione.

A fine gioco vengono visualizzate le font correttamente accoppiatte, e quelle sbagliate o non combinate.

Valutazione di fine gioco.

96 design definitivo

gioco: classification

In alto scorrono le anteprime dei caratteri che devono essere trascinate allâ&#x20AC;&#x2122;interno della categoria giusta. La classificazione dei caratteri Ă¨ necessaria per individuare dei modelli dietro ogni disegno. Per quanto complessa, alimentando un dibattito ininterrotto, permette di individuare i tratti caratteristici di ogni forma.

Se il carattere viene classificato correttamente si hanno informazioni riguardanti il nome del carattere, il designer che lo ha progettato e lâ&#x20AC;&#x2122;anno. La categoria ingurgita la font e viene segnato il numero delle font trascinate e appartenenti alla specifica categoria.

design definitivo 97

Scelta della categoria think (pensa).

Resoconto.

98 design definitivo

gioco: zoomify

Il giocatore deve identificare il nome della font tra le quattro possibili risposte. Aiuta a concentrarsi su alcuni particolari del disegno dei caratteri che permettono il loro riconoscimento.

Il gioco inizia con un particolare zoomato, con lo scorrere del tempo si ha sempre piĂš uno zoom out prima sulla lettera fino allâ&#x20AC;&#x2122;intera parola.

La parola zoomata Ă¨ Hamburgerfons, utilizzata perchĂ¨ contiene un set di lettere con tratti importanti da osservare nel riconoscimento di una font.

design definitivo 99

Anche questo gioco, come tutti gli altri, Ă¨ a tempo. Ă&#x2C6; importante cercare di rispondere nel minore tempo possibile e prima che la parola sia tutta riconoscibile.

Una volta riconosciuta la font viene presentata lâ&#x20AC;&#x2122;intera parola con la font appena riconosciuta.

100 design definitivo

gioco: font memory

Il giocatore si trova di fronte diciotto carte sopra le quali vi Ă¨ nome, stile, peso e anteprima di differenti font. Si hanno a disposizione 2 minuti per memorizzare posizione e nome. Lo scopo principale Ă¨ quello di sviluppare lâ&#x20AC;&#x2122;associazione tra forma e nome del carattere.

Trascorso il tempo le carte diventano nere.

La carta si attiva toccandola.

design definitivo 101

Una volta attivata si sceglie tra le varie possibilitĂ .

Posizione della carta e nome della font corretti.

Visualizzazione di fine gioco.

102 design definitivo

Sottomenu di training.

design definitivo 103

Scegliendo calendar si apre un piccolo calendario del mese corrente. I cerchietti sui giorni rappresentano le volte che ci si Ă¨ allenati con FontUp.

Graphics. Grafici per visualizzare le proprie competenze tipografiche acquisite nelle categorie di gioco.

Un tipo di grafico. Con un range che va da 0 a 100 mostra lâ&#x20AC;&#x2122;aumento o il peggioramento allâ&#x20AC;&#x2122;interno di ciascuna categoria.

104 design definitivo

sezione: recognize

Accesso alla sezione recognize.

Si attiva la fotocamera dell’iPhone. Attraverso l’icona della macchina fotografica si può scattare la foto.

A questo punto possiamo decidere se iniziare il riconoscimento (start recognize), se salvare l’immagine, mettendola in uno stato di stop per effettuare il riconoscimento in un secondo momento (put in queue), oppure se eliminare l’immagine (delete).

design definitivo 105

Inizia il riconoscimento.

Selezionare la parte da riconoscere (crop).

Grazie ai comandi iPhone si puĂ˛ scalare la parte dellâ&#x20AC;&#x2122;immagine selezionata (avvicinando o allontanando due dita sullo schermo).

106 design definitivo

riconoscimento

Come appare la modalità di gioco. Basato sulla sezione Identify a font di Identifont, il sistema fornisce delle domande a cui il giocatore deve dare una risposta. Ad ogni risposta data corrisponde un restringimento del nome delle font possibili.

Si possono scovare degli aiuti come ad esempio la sottolineatura di alcuni termini all’interno della domanda. In questo caso toccando la parola serif si apre una piccola popup che spiega il significato della parola, di uso diffuso in tipografia, fornendo inoltre degli esempi.

Tra gli aiuti offerti dal sistema vi è una modalità puramente visiva per spiegare la domanda, dei cerchietti rossi lampeggiano sull’immagine.

design definitivo 107

Se non è possibile rispondere, perchè non conosciamo la risposta o perchè non visualizziamo bene alcuni particolari dell’immagine scattata, si utilizza il comando Not sure passando così alla domanda successiva.

Dopo una serie di domande si ha una sintesi delle risposte date e un’anteprima delle possibili font. Il numero delle domande è variabile e dipendente dalla qualità dell’immagine, dalla font che si sta cercando di riconoscere e dalla correttezza delle risposte date.

108

design definitivo

Questa fase del riconoscimento è molto più intuitiva.

Ogni anteprima può essere trascinata (drag) sull’immagine stessa.

La scermata precedente scompare per poter spostare l’anteprima nella posizione migliore dove provarla.

design definitivo

Una volta rilasciata la letterina appare con una diversa opacità.

Utilizzando i soliti comandi iPhone si scala la lettera e intuitivamente verifichiamo l’esattezza o meno. In questo caso la scelta effettuata (Didot bold) non è corretta. Le due lettere sovrapposte non coincidono.

Si ritorna alla schermata precedente, cercando la font corrispondente. Su quella sbagliata si visualizza una “x”.

109

110 design definitivo

Ă&#x2C6; possibile scorrere la fascia dedicata e ricercare la font giusta.

Viene trascinata una seconda font (Bodoni roman).

design definitivo 111

Come per la precedente prova lâ&#x20AC;&#x2122;anteprima viene trascinata e posizionata nel punto giusto dellâ&#x20AC;&#x2122;immagine.

Effettuando la prova visualizziamo immediatamente la correttezza della scelta.

Il colore della font cambia confermando che il carattere dellâ&#x20AC;&#x2122;immagine Ă¨ un Bodoni roman.

112 design definitivo

sezione: collection

Accesso alla sezione collection.

Sottomenu di collection: le immagini salvate sono organizzate per: ultimi salvataggi (last saved), dalla A alla Z (from A to Z), typefaces, luoghi dove Ă¨ stata scattata lâ&#x20AC;&#x2122;immagine (place).

design definitivo 113

Anteprima delle immagini salvate, dalla A alla Z.

Si sfoglia la galleria di immagin

Immagine selezionata.

prototipo

pro Courier, regular designer: Howard Kettler anno: 1956

prototipo 117

otot prototipo

Fare dei prototipi è fondamentale per vagliare il design di quello che si sta progettando, e fin dalle prime fasi del progetto ho utilizzato Keynote (programma di presentazione sviluppato da Apple per la piattaforma Mac OSX) per fare veloci prove di interazione passoper-passo scorrendo le slides. Ad ogni nuova idea il prototipo si arricchiva, e pur rimanendo grezzo era fondamentale per testare le interazioni, valutare le scelte grafiche e condividere ogni progresso con relatori e compagni di tesi. È importante poter scorrere una slide dopo l’altra per simulare pulsanti accesi o spenti, scattare immagini, trascinare oggetti (drag) e tanto altro senza scrivere una riga di codice. Molto utile è stato inoltre creare dei mockup di alcuni giochi da far provare agli studenti dell’Università Iuav di Venezia, dove io ho frequentato il corso di laurea specialistica in Comunicazione Visiva e Multimediale. Ai ragazzi che hanno partecipato al test è stato chiesto di portare a termine alcuni giochi per capire ed analizzare i movimenti e il grado di comprensibilità dell’architettura dell’applicazione. Il test è stato effettuato utilizzando un prototipo cartaceo: un iPhone di dimensioni maggiori riprodotto su carta all’interno del quale, sempre su carta, vi erano tutte le componenti necessarie al gioco. È un metodo molto veloce ed economico per testare il design. Quello che ho notato è che le persone messe di fronte ad un prototipo di questo tipo sono molto più disposte a fornire commenti e suggerimenti. Non c’è stato bisogno di spiegare loro alcuna regola, in modo del tutto naturale hanno cominciato a giocare cercando di arrivare alla soluzione nel minor tempo possibile. Soddisfacente è stato vedere le espressioni, incuriositi e pronti a mettersi alla prova. Dopo aver testato, analizzato e disegnato tutte le sezioni dell’applicazione, il progetto è stato integrato con un prototipo sviluppato in ActionScript 3.0. Il prototipo segue gli step di un giocatore che accede all’applicazione, effettua le diverse scelte all’interno del menu e allena le proprie abilità attraverso il gioco del puzzle. L’utilizzo di questa piattaforma è molto efficace per simulare la reale interazione dell’utente/giocatore con il dispositivo. È stato fondementale visualizzare le animazioni durante la navigazione del menu e all’interno del gioco. Un’altra parte della prototipazione è stata gestita con Adobe After Effects sotto forma di filmati. Piattaforma a me molto più familiare grazie a cui ho sviluppato i video di tutti i giochi progettati. I video sono infatti sufficienti per delineare lo scenario di FontUp e far immaginare alle persone l’intero progetto. Pur avendo studiato nel dettaglio le interazioni che accadono nei video rispetto alla dimensione dello schermo di iPhone, la quantità di informazioni richiesta al giocatore per completare i minigames di FontUp è minima. Questo grazie ai clichées su cui si basano i videogochi, fatti di interazioni facilmente interpretabili dal pubblico.

118 prototipo

User testing. Prototipo cartaceo di alcuni giochi. Dimensioni maggiorate rispetto alla realtĂ .

prototipo 119

120 prototipo

prototipo 121

122 prototipo

Schermate dell'applicazione FontUp su l'iPhone: accesso, visualizzazione menu, gioco classification, gioco puzzle.

prototipo 123

conclusioni

onclu Bureau Grotesque One Seven designers: David Berlow anno: 1989-93

conclusioni 127

conclusioni

FontUp è stata intenzionalmente una sfida progettuale. Il mio percorso universitario è infatti stato ambivalente: da una parte la passione per la cosiddetta grafica tradizionale e dall’altra l’interesse per le metodologie e le implicazioni dell’interaction design. I caratteri tipografici sono un’arma nelle mani di noi progettisti e il suo utilizzo non deve essere improprio. Ogni font è un progetto e racconta qualcosa di diverso: per capire questo, esistono da sempre libri e manuali di tipografia che propongono un metodo di apprendimento lineare e che necessita di parecchia esperienza. FontUp propone invece un metodo integrativo ai manuali basato sul gioco, comportamento evolutivo innato, per sedimentare tutto questo sapere. Definire il target, cioè gli studenti, è stato fondamentale. Per una volta, volevo progettare un’applicazione per me stessa e per le persone con interessi simili, non per un utente generico. FontUp non è pensato per la scrivania: è un gioco portatile, con una struttura che consente una fruizione frammentata ma sempre accattivante. Potrebbe risiedere potenzialmente su qualsiasi handheld: la scelta di iPhone è per le sue spiccate caratteristiche crossmediali e la sua interazione gestuale. Lo sviluppo è stato segnato da difficoltà concettuali e tecniche: ciononostante sono soddisfatta del risultato. Considero infatti questo progetto di tesi come punto d’inizio per sviluppi futuri. La mia ricerca, quanto al potenziale educativo, prova l’esistenza di un’opportunità importante: le continue rifiniture, i prototipi e i test lo dimostrano.

usioni

128

note

1. invenzione e diffusione delle lettere 1. Ong,Walter J., Oralità e scrittura. Le tecnologie della parola, il Mulino, Bologna, 2004 2.per una completa trattazione dell’argomento vedasi: Ong, Walter J, Oralità e scrittura [nota1] 3. Frutiger, Adrian, Segni e simboli, Roma 1998, pp. 134-140 4. Updike, A translation, in R. Kinross, Tipografia Moderna, pag. 35, Nuovi equilibri, Viterbo, 2005 5. Robert, Kinross, Tipografia Moderna, pag. 119, Nuovi Equilibri, Viterbo, 2005 2. caratteri tipografici e designer 1. Cheng,Karen, Designing type, Laurence King, Londra, 2006 2. Tubaro, Antonio e Ivana, Letteing, Hoepli, Milano 2002 p. 60 3. http://en.wikipedia.org/wiki/Type_foundry 4. http://www.lineto.com/ 5. http://www.emigre.com/ 6. http://www.typography.com/ 7. http://www.underware.nl/ 8. http://www.fontbureau.com/ 9. http://www.veer.com/ 10. http://www.linotype.com/ 11. http://www.bitstream.com/ 12. http://www.adobe.com/type/ 13. Kinross, Robin, Tipografia moderna, Stampa Alternativa&Graffiti, Viterbo 2005 p. 188-189 14. http://en.wikipedia.org/wiki/Hoefler_&_Frere-Jones 15. http://www.dafont.com/ 16. http://it.wikipedia.org/wiki/Libro_Font 17. http://www.fontexplorerx.com/ 18. http://www.extensis.com/ 19. http://www.smashingmagazine.com/2008/09/05/25-fontmanagement-tools-reviewed/ 20. http://www.adobe.com/ 21. http://thevisualdictionary.net/ 22. http://www.preserve.co.nz/ 23. http://www.letterpool.com/

4. stato dell’arte 1. http://www.identifont.com/ 2. http://new.myfonts.com/WhatTheFont/ 3. http://ft.vremenno.net/en/ 4. http://fontgame.ilovetypography.com/ 5. http://www.deep.co.uk/games/font_game/ 6. http://www.iphoneitalia.com/liphone-3g-e-il-telefono-piuutilizzato-in-usa-75390.html#more-75390 7. http://fontgameapp.com/ 8. http://new.myfonts.com/WhatTheFont/iPhone/ 9. FONTSHUFFLE 10. http://formationalliance.com/index.php?id=39 11. http://i-shake.com/?page_id=29 12. http://it.wikipedia.org/wiki/Optical_Character_Recognition 13. http://www.melablog.it/post/8289/jotnot-e-liphone-diventauno-scanner

129

7. lo sviluppo di FontUp 1. http://it.wikipedia.org/wiki/Database 2. http://it.wikipedia.org/wiki/Optical_Character_Recognition 3. http://it.wikipedia.org/wiki/Dr._Kawashima%27s_Brain_ Training 4. http://www.nintendo.it/NOE/it_IT/games/nds/esercizi_9770. html 5. http://www.touchgenerations.com/itIT/games_DS_TGP/brain_ training/memory_matters.php 6. Huizinga, Johan, Homo Ludens, cap. I, The Beacon Press, Boston, 1955 7. . Greimas chiama performanza la prova che il protagonista di una favola deve compiere per poter sconfiggere in seguito l’antagonista. 8. Parovel, Giulia, Psicologia della percezione, pag. 35, Cicero Editore, Venezia, 2004

immagini tipografiche utilizzate

Per le immagini tipografiche utilizzate si ringraziano gli utenti Flickr. In particolare al set Typography & Signs di halvorbodin. Diseño I (Cátedra Gabriele) inserita su Flickr da ajfaggiani.

Galleria di immagini di caratteri nel primo capitolo: De Jong, Cees, Type. A Visual History of Typefaces & Graphic Styles, 1628-1900. Immagini di font scattate da Nicola Plaisant.

130

bibliografia

Bringhurst, Robert, Gli elementi dello stile tipografico, Edizioni Sylvestre Bonnard, 2006 Brandinelli, Angiolo e al., Farsi un libro, Prima edizione Biblioteca Alternativa/Stampa Alternativa, 1990 Cheng, Karen, Designing Type, Luarence King, Londra, 2005 Frutiger, Adrian, Segni & simboli, Stampa Alternativa/Graffiti, Roma, 1998 Huizinga, Johan, Homo Ludens: a Study of the Play Element in Culture, Roy Publishing, New York, 1950 Moggridge, Bill, Designing Interactions, MIT Press, Cambridge, 2007 Ong, Walter J., OralitĂ e scrittura. Le tecnologie della parola, Il Mulino Intersezioni, Bologna, 2004 Parovel, Giulia, Psicologia della percezione, Cicero, Venezia, 2008 Rossi, Fabrizio M., Caratteri e comunicazione visiva, Seconda edizione. Libreria al Ferro di Cavallo, Roma, 2007 Studio 7.5, Designing for Small Screens, AVA Publishing SA, Switzerland, 2005 Tubaro, Antonio e Ivana, Lettering, Hoepli, Milano, 2006

131

fonderie di caratteri/designer

Adobe System Incorporated www.adobe.com/type Berthold www.bertholdtypes.com Dalton Maag www.daltonmaag.com Device Fonts/Rian Hughes www.devicefonts.co.uk Dutch Type Library www.dutchtypelibrary.nl Elsner-Flake www.elsner-flake.com Emigre www.emigre.com Font Bureau www.fontbureau.com Font Shop www.fontshop.com Gerard Unger www.gerardunger.com Hoefler & Frere-Jones www.typography.com International Typeface Corporation www.itcfonts.com LettError/Erik van Blokland www.letterror.com Jeremy Tankard Typography www.typography.net Keith Tam www.keithtam.net Kent Lew www.kentlew.com Lineto www.lineto.com Linotype www.linotype.com Lucas Fonts/Luc(as) de Groot www.lucasfonts.com Monotype www.monotype.com MVBfonts/Mark Van Bronkhorst www.MVBfonts.com Our Type/Fred Smeijers www.ourtype.com P22 - www.p22.com Shift www.shiftype.com Shinn Type www.shinntype.com Storm Type Foundry/Frantisek Storm www.stormtype.com T26/Carlos Segura www.t26.com Thirstype/Rick Valcenti www.thirstype.com Typotheque/Peter Bilâ&#x20AC;&#x2122;ak www.typotheque.com Underware www.underware.nl Veer www.veer.com Virus Fonts/Jonathan Barnbrook www.virusfonts.com

link tipografici utili

briem.ismennt.is www.typeculture.com www.typographi.com www.typophile.com www.typoteque.com www.microsoft.com/typography www.typeworkshop.com www.typo.cz/euro

132

ringraziamenti

È difficile scrivere i ringraziamenti per diversi motivi: in particolare perchè sono molte le persone che hanno contribuito a formare la persona che oggi sono ed è sicuramente difficile elencarle tutte all’interno di una pagina, quindi un grazie generale a tutti coloro che mi sono stati sempre vicino. Ringrazio innanzitutto i miei relatori Gillian Crampton Smith e Philip Tabor per aver creduto in FontUp e nelle mie capacità, per aver contribuito in modo sostanziale alla mia crescita personale e professionale. Un sentito ringraziamento va al Prof. Enrico Camplani per la sua immensa disponibilità e per tutti i consigli dispensati durante il progetto di tesi. “Vecchio amico” piuttosto che professore, è stata una piacevole scoperta conoscerlo. Grazie! Ringrazio il Prof. Leonardo Sonnoli per aver dedicato il suo tempo a rivedere le opportunità del progetto. Ringrazio tutte le persone che hanno aiutato a rendere questa esperienza veneziana unica, tutti coloro con cui ho condiviso progetti, nottate di lavoro e questo percorso di tesi. Un particolare grazie va a Davide Cocchi per il grande aiuto durante la fase di prototipazione, fondamentale per lo sviluppo di FontUp. Ringrazio inoltre Luca De Rosso per le molteplici consulenze. Grazie a Lorenzo Cercelletta e a Maria Chiara Toncich con la quale ho condiviso quest’esperienza, dividendo, tra consigli ed ansie, spesso lo stesso tavolo di tesisti. Il grazie più grande lo dedico alle persone che amo di più nella mia vita, mio padre, mia madre e mio fratello che mi hanno sempre supportata e spronata, a cui sono profondamente legata e a cui dedico ogni mio traguardo. Infine, il grazie più sentito è per Nicola Plaisant, sempre presente e di grande aiuto in tutte le fasi del progetto. Grazie per aver creduto in me, per non aver mai messo in dubbio le mie competenze, per avermi fatto riflettere anche nei momenti più difficili. Senza il suo supporto FontUp non esisterebbe.