Web Design  »  Articoli  »  Web design 

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?

Figura 1 - Creazione di un pulsante a partire dal font Omnes Pro

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.

Figura 2 - Creazione di un pulsante a partire dal font Brothers

Altri articoli

Altre guide

Altre newsletter