Share
Pronto per la dose di questo mese di suggestione tipografica del web design? Scommetto che lo sei! Max sta prendendo il mese libero, ma ci ha dato una lista di 15 siti che mostrano alcune delle migliori tipografie per voi ragazzi e ragazze da controllare. Scaviamo dentro!
Parlare delle regole tecniche della tipografia corretta è fantastico ... ma dove la gomma colpisce davvero la strada è quando possiamo iniziare a guardare esempi di tipografia in azione e analizzare perché funziona. Una delle cose belle della tipografia è che, proprio come i linguaggi che usiamo per comunicare tra loro, il modo in cui si usa digitare in un disegno gli dà una voce. Puoi urlare e urlare o puoi sussurrare in silenzio ... dipende tutto da te e come vuoi che il tuo messaggio sia ascoltato.
Ogni mese, vedremo tra 10 e 20 esempi di tipografia eccellente nel web design ... ma ancora più importante, analizzeremo anche il motivo per cui la tipografia funziona. Diamo un'occhiata all'offerta di questo mese:
È troppo raro che io incontri siti come questo ... onestamente. È un approccio che si tende a vedere molto nel design della stampa, ma raramente portato sul web. Quali sono i componenti?
Guarda come è semplice il design ... non c'è un singolo elemento che uno studente di design del primo anno non può creare ... ma quanto è elegante e sofisticato sentire sullo schermo? Questo è ciò di cui stiamo parlando quando discutiamo di tipografia ispiratrice. Utilizzando un layout semplice e ben strutturato, il designer riesce ad esprimere un senso di sicurezza e professionalità prima ancora che il visitatore legga il testo.
A volte un design richiede qualcosa di straordinario per attirare l'attenzione del visitatore. Questo è ciò che il sito Amazee Labs fa così bene. Amazee non solo non usa i caratteri web standard, ma fonde anche il tipo di set HTML e il tipo basato su immagine per offrire un alto livello di creatività ed eccitazione. In molti modi, Amazee infrange le regole ... ma è come lo fanno a farlo brillare:
Tutto ciò aiuta a preservare il senso dell'ordine, anche quando la selezione del tipo è su tutta la mappa.
Il sito Finch è sorprendentemente minimale nel suo tipo di utilizzo. Non lasciarti ingannare dall'enorme logo in prima pagina ... tutto in questo design è sottovalutato (in senso buono).
Il fatto di usare il tipo su una pagina vuota è che, se fatto correttamente, la pagina sembra avere molto più in avanti del semplice testo.
Abbiamo menzionato Image Mechanics nel nostro post annuale Web Design Trends, ma vale la pena riportarlo di nuovo perché oscilla. Il design si discosta dal paradigma di navigazione dell'interfaccia utente standard rendendo i blocchi di testo effettivi la navigazione (al contrario delle singole parole o dei pulsanti). Questo attira il visitatore, ricordando loro che ci sono idee reali dietro ogni link. Anche il contenuto corporeo all'interno del design è straordinariamente ben progettato: sembra quasi una rivista, con un testo di intestazione grande, grassetto, illustrazioni ben abbinate e sottili cambiamenti di colore (un po 'come i colori spot in una stampa zine). Mi piace anche l'enorme logo nella pagina "Meet the Makers"!
Va bene, ammetto che sono immediatamente attratto dall'enorme e sexy illustrazione color-wheel-erif ... tanto che la tipografia potrebbe anche essere orribile senza di essa (non lo è), e probabilmente non me ne accorgerei. Il punto che sto cercando di fare con questo è che l'abbinamento corretto dell'immagine con il tipo (attraverso dimensioni, stile, colore, ecc.) Può fare miracoli per creare un design del sito memorabile. Vuoi fare un'impressione duratura? Prendi alcune note sull'approccio audace di Kaleidoscope.
Il sito Fe.rocious è un'istanza in cui ogni parte del sito si sente "progettata". Il che vuol dire che non è stato lasciato nulla alle impostazioni predefinite del browser per lo stile ... Questo può spesso essere un aspetto negativo quando non è fatto bene, ma nelle mani dei designer Fe.rocious, sembra intelligente ed elegante.
Non ho intenzione di dire troppo su questo design perché penso che parli abbastanza bene da solo. L'uso del layout e del tipo è piuttosto ordinario, ma dove diventa interessante sono le grandi immagini utilizzate nel dispositivo di scorrimento. Ricorda, la tipografia web può esistere anche nelle immagini ... la creazione di uno stile visivo distinto per la tipografia basata su immagini può portare molto a un layout altrimenti ordinario.
Sarò il primo ad ammettere che adoro i font Type Condensed Sans-Serif ... ma possono andare oh-so-wrong se non usati correttamente. Qui, prendono il centro della scena come un incrocio tra un titolo e carattere accento. Il risultato: la giusta quantità di urla. L'integrazione del carattere di script di fantasia aiuta a dare un po 'di stile alle rigide forme del volto di Gothic League. Nota come i due caratteri si bilanciano a vicenda. Buono? Sì, è grandioso.
La struttura del sito di Infinvision è semplice e sottotono ... il che aiuta a sottolineare e attirare l'attenzione sulle fantastiche illustrazioni a caratteri piccoli che usano per presentare la loro azienda. Lo spazio bianco funziona sorprendentemente bene qui - ha detto nuff.
King Size è l'unico modello in questa lista - Quello che mi piace su di esso tipograficamente è che non sembra affatto un tema WordPress. Il grande nastro, combinato con il design alloro, rende questa sensazione spoglia e romana nell'estetica ... qualcosa che non si vede spesso (se non del tutto) in modelli che di solito si sentono rigidi e prevedibili.
Il logo di Devin's Heaven è fantastico, ma quello che mi piace di più del sito è il modo in cui il tipo è disposto per i post del blog. Il paragrafo introduttivo è a larghezza intera e il resto dei post torna all'approccio standard di contenuto / barra laterale a 2 colonne. È così semplice ... ma questo paragrafo introduttivo a tutta larghezza ti fa sentire come se l'intera pagina fosse dedicata a quel singolo articolo. Laddove gli altri layout del blog si sentono come modelli in cui gli articoli si inseriscono facilmente, questo sembra che tutto riguardi l'articolo prima di tutto.
Il sito della Greater Dunnellon Historical Society è semplicemente divertente. Considera in primo luogo lo scopo del sito: preservare la storia di Dennelon per la comunità. In quanto tale, la tipografia all'interno del sito riproduce molte delle caratteristiche della società che stanno preservando. Non c'è nulla di selvaggio e pazzo ... ma tutto dalle multi-colonne, la copia del corpo ispirata da newpaper ai pulsanti si sente autentico nella storia (con alcuni aggiornamenti moderni). La modanatura della corona, le illustrazioni stravaganti e le scaffalature aggiungono la giusta profondità per rendere questo sito davvero una capsula mini-time per questa community.
Il layout del sito di Stuart Hobday è una boccata d'aria fresca dopo aver visto alcuni di questi siti altamente illustrativi. Il suo rigido approccio minimalista è semplice e senza pretese. Tutto è sistemato logicamente e senza abbellimenti ... a volte con cosa può fare un designer Di meno dice molto di più sulla sua maturità e disciplina. In un mondo di portafogli stravaganti e concorrenza aspra, ci vuole un po 'di serietà e visione per realizzare un design sobrio come questo.
Abbiamo coperto il nuovo sito di Ryan nel nostro articolo di Web Trends del 2011, ma è onestamente abbastanza bello da poterlo menzionare di nuovo. Ryan fonde perfettamente tipo e illustrazione in un bellissimo sito a scorrimento verticale. L'effetto combinato è quello che crea un senso di avventura e di esplorazione creativa ... che funziona perfettamente come metodo per promuovere se stesso ai potenziali clienti.
Il sito di Pat Dryburgh è in contrasto con quello di Ryan Scherf ... ma non nel modo sbagliato. Pat utilizza un layout strutturale rigido e ben progettato, una sofisticata selezione di caratteri tipografici e un'interessante combinazione di spazio positivo e negativo per creare un'estetica generale che sia sicura e professionale. Mi piacciono particolarmente le grandi colonne di spazi bianchi lasciati sul lato sinistro delle grandi aree di testo (sotto l'immagine principale). Potrebbe aver riempito quello spazio con qualcosa? Certo ... ma quello che ha deciso di lasciare fuori dal design parla dei suoi limiti come designer.
Bene, è quel momento del post di nuovo. Abbiamo avuto delle risate, delle grida, ma insieme siamo arrivati alla conclusione, e qui devo lasciarti. Come ho detto sopra, se non avessi colpito il tuo preferito questo mese, assicurati di condividerlo in basso nella sezione dei commenti! Sarò sicuro di dare un'occhiata al post il prossimo mese!
Maggiori informazioni sulla tipografia Web al mio post su Scegliere il carattere giusto: una guida pratica alla tipografia sul web!
Abbiamo anche iniziato una grande lista di articoli nella categoria Web Typography ... quindi dai un'occhiata anche a loro!
Accentsconagua