Questa è la traduzione dell'articolo Type-Inspired Interfaces di Dan Mall pubblicato originariamente su 24 Ways il 7 Dicembre 2009.
Una delle cose che più mi spaventa in un nuovo progetto è il momento iniziale. Come definire il layout? Quali colori scegliere? Una volta che ho preso delle decisioni su questi aspetti, diviene molto più semplice lavorare sul design, ma è sulla pagina bianca che passo più tempo.
In genere, inizio facendo delle scelte sulla tipografia. Non ho bisogno di preoccuparmi dei colori o del layout o di qualsiasi altra cosa... mi concentro sui caratteri tipografici giusti, quelli che possono supportare al meglio la mia idea (questo articolo non si occuperà di come scegliere un font, ci sono davvero grandi risorse se siete interessati all'argomento).
Dopo aver fatto questo passo, tutto il vostro lavoro è fatto. "Aspetta un attimo!" potrebbe dire qualcuno di voi". "Ho solo scelto un carattere tipografico. Devo ancora fare il resto".
A questa osservazione potrei rispondere così: "Ma no! Hai fatto davvero tutto il lavoro!". La scelta del carattere giusto vi porta davvero avanti nel lavoro, più di quanto potreste pensare. Ecco alcuni suggerimenti su come prendere le mosse dalla tipografia per progettare l'interfaccia e gli elementi dell'interfaccia.
Perfezionare il Web 2.0
Se andate in cerca di quel look and feel fatto tutto di angoli arrotondati che va tanto di moda, potreste rendere il tutto più accattivante scegliendo un font meraviglioso come Omnes Pro di Joshua Darden. Dal momento che il font ha già in sé uno stile arrotondato, creare dei pulsanti che si adattano allo stile dovrebbe essere molto semplice.
Ho scoperto che usare dei multipli aiuta a mantenere l'aspetto dell'interfaccia bilanciato e proporzionale. Dopo aver notato che la parte superiore sinistra della lettera "P" ha un raggio dell'angolo pari più o meno a 12px, scegliamo un raggio di 24px per i nostri pulsanti (un multiplo di 2). Così otteniamo angoli arrotondati adeguati. Prendendo misure matematiche a partire dai caratteri tipografici, il nostro pulsante apparirà più armonioso di un semplice "piazza del testo su un pulsante qualsiasi". Semplice no?
Come tutti sapete, i pulsanti arrotondati sono molto popolari attualmente. Proviamo a creare qualcosa di più stiloso.
Date un'occhiata a Brothers, un bel font, dall'aspetto molto solido, creato da Emigre. I bordi cesellati ci danno uno spunto perfetto per un bel pulsante. Usando lo stesso metodo visto sopra, potrete creare dei pulsanti che imitano l'aspetto di una targhetta e che si adattano eventualmente ad uno stile diverso.
Titoli
Potrete prendere buoni spunti dallo stile stesso del font. I serif Didone (Bodoniani) sono noti per la mancanza di raccordi graduali tra l'asta verticale e la grazia. Tipicamente, queste parti sono collegate ad angolo retto. Un'altra caratteristica è l'elevato contrasto nelle aste, ovvero, aste molto spesse, grazie molto sottili.
Così, quando usiamo un carattere ad alto contrasto, possiamo usarlo a nostro vantaggio per evidenziare la gerarchia. Seguendo le linee guida dei multipli, una misura di 12px dalle aste ci aiuta a creare un righello superiore alto 24px (un multiplo di 2). Possiamo anche prendere la misura esatta di 1px dalla grazia (un multiplo di 1) per creare un righello in basso. Voilà! Io uso molto questa tecnica.
Non dimenticate mai, poi, l'importanza di certi elementi visuali per spezzare lunghe porzioni di testo. Un bel font come il Ministry Script di Alejandro Paul comprende oltre mille caratteri che possono essere manipolati o combinati per creare eleganti elementi di interfaccia. Modificando un carattere come (∂), riusciamo ad ottenere un delizioso ornamento che può aiutare a guidare l'occhi di chi legge nel contesto del contenuto.
E il layout? Come possiamo usare la tipografia per dare un principio organizzativo al modo in cui il contenuto viene visualizzato?
Prendiamo un font come Assembler. Potremmo usarlo per un design che debba trasmettere un senso di disagio. In termini di design, ciò potrebbe tradursi nell'uso di forme irregolari e nel ricorso all'asimmetria. Usando le distanze proporzionali e i gradi dalle perpendicolari, potremmo facilmente creare un layout a più colonne che si adatti al tono generale. Per quanti tra voi siano scettici rispetto al fatto che un layout come questo non possa essere adattato al web, ecco un esempio di come spesso possano accadere cose davvero strane.
La texture per lo sfondo è stata gentilmente offerta da Bittbox.
La direzione generale del design
Dunque, la tipografia potrebbe avere un grande impatto sul look del sito, dalla navigazione all'interazione fino a tutto quello che c'è in mezzo. Date un'occhiata al sito (ora dismesso) di Nike Free, osservate come la tipografia riecheggia il prodotto stesso, e come a sua volta influenzi la navigazione.
Trovate i vostri font
Con migliaia di font tra cui scegliere, le possibilità sono infinite. Dagli angoli ai raggi, fino ai colori e al peso avete davanti un universo da esplorare. I grandi designer di font hanno speso ore sui dettagli delle loro creazioni: sfruttate questo lavoro! Non pensate di dovervi sentire limitati al vecchio Helevetica... a meno che il vostro design non lo richieda.
Buona caccia!
