Share
Pronto per la dose di questo mese di suggestione tipografica del web design? Scommetto che lo sei! Connor è in testa questo mese con Brandon che si occupa di backup e abbiamo una lista di 17 siti che mostrano alcune delle migliori tipografie per voi ragazzi e ragazze da controllare. Questo mese abbiamo anche una sezione speciale dedicata ad alcuni nuovi (ish) strumenti di tipografia e layout basati sul web per rendere la vita un po 'più semplice. Scaviamo dentro!
Parlare delle regole tecniche della tipografia corretta è grandioso? ma dove la gomma colpisce davvero la strada è quando possiamo iniziare a guardare esempi di tipografia in azione e analizzare il motivo per cui 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 tranquillamente? dipende da te e da 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:
SquareSpace in realtà ha una storia di tipografia ben progettata sui propri siti, ma ha tirato fuori il massimo per l'evento SXSW di quest'anno. Il contenuto del sito è incentrato sulle persone che pubblicano foto dell'evento, ma date un'altra occhiata a come è strutturato. Titoli meravigliosamente impostati? un sacco di varietà nel layout? e sottili immagini di sfondo / trame che fanno riferimento alla tipografia del passato. L'anca, l'illustrazione ultra moderna del cranio non danneggia nulla.
Il sito non è enorme, alcune SS hanno fatto bene a mantenere le cose fresche e interessanti mentre scorri verso il basso la pagina. Se presti attenzione, non c'è davvero uno standard per la tipografia (oltre alle stesse famiglie di caratteri) - le dimensioni sono dappertutto e lo stesso vale per il posizionamento? Ma è perfettamente accettabile in questo caso perché ogni singola sezione (quella che è visibile su uno schermo nello stesso punto) funziona in armonia con se stessa. I colori sono tutti della stessa tavolozza generale, e tutto sembra essere incardinato su una griglia, anche se non riesci a inchiodarlo.
Grip Limited è uno di quei siti in cui ci si imbatte di tanto in tanto che è così incredibilmente fuori dalla scatola che devi semplicemente sederti e prenderlo per un minuto o due. Ho la strana sensazione che solo guardarlo mi rende un tipografo migliore. La varietà di tipo è così diversa che senza la tavolozza monocromatica unificante, il sito sarebbe probabilmente difficile da guardare. Diamine, la maggior parte degli esperti di usabilità potrebbero dire che questa è una vera e propria spazzatura anche nel suo stato attuale, ma sosterrò che questo tipo di approccio "shotgun" divertente è esattamente ciò di cui i web designer devono dedicarsi di volta in volta.
Riuscirai a riciclare questo layout più e più volte per progetti aziendali o aziendali? Certo che no, ma solo prendere un piccolo morso di tipo fuori da questo sito farebbe miracoli per ravvivare un progetto altrimenti ordinario su cui si potrebbe lavorare. Per esempio?
Burton è un genere / tipo sullo spettro opposto del sito Grip Limited. È altamente organizzato, impostato in un layout di blocco rigido e super-duper facile da usare. Dai un'occhiata però e probabilmente puoi vedere cosa ho messo insieme questi due siti in questa lista. Mentre il layout stesso è abbastanza ben bloccato in termini di struttura, la tipografia effettiva in tutto il sito è lontana da ciò che normalmente si vede sul web - e molto più simile a ciò che si potrebbe vedere in una rivista o catalogo di snowboard. Tipo è impostato in cerchi e altre forme di web non ordinarie per dare ad ogni pagina la giusta quantità di interesse visivo. Hanno anche sparso in informazioni grafiche e altre illustrazioni semplificate in alcuni dei normali blocchi di griglia per spezzare la monotonia e il ritmo di ogni pagina.
Questa versione del sito Burton è in circolazione da un po '? eppure sembra sempre nuovo e fresco ogni volta che lo controllo. Scambiando semplicemente le foto e i colori chiave, possono ottenere molto più chilometraggio dal sito per ogni nuova stagione.
Impact Media utilizza diversi tipi di carattere, colori e dimensioni nel suo dispositivo di scorrimento principale e in tutto il loro sito web. Come il carattere - Impatto - la scelta della tipografia in questo particolare sito è audace, caratteri grandi che contrastano molto con i loro sfondi.
Adoro lo stile attuale dei font di script in grassetto sul Web in questo momento e Impact Media lo utilizza nella loro seconda linea per generare un effetto piacevole e accogliente.
Gaz Battersby è un grafico con sede a Leeds, Regno Unito, il cui sito minimalista funge da portafoglio. Il sito utilizza un font serif in tutto il suo design, ma contrasta gli elementi solo cambiando lo stile del font (in corsivo) invece di un font completamente nuovo. Ciò si traduce in uno schema tipografico più semplice e pulito.
Il sito di Battersby usa anche il colore per costruire un heirachy con i suoi titoli racchiusi in cerchi turchesi per catturare l'attenzione dell'utente.
Non dirò troppo di SURROUND perché, beh, non c'è molto da dire. È un promemoria che a volte un semplice approccio al layout e alla tipografia funziona perfettamente. Nessun fronzolo inutile, niente tra il visitatore e il contenuto. Solo semplici tecniche di funzionamento che consegnano un messaggio.
Invisible Creature è in realtà uno dei miei studi preferiti nel mondo? tornando indietro fino a quando sono stati raggruppati come Asterik Studio. Per farla breve: creano poster, materiale illustrativo e altre cose divertenti. Quello che mi piace di questo sito è il controllo e la disciplina. Essendo uno studio di primo piano "rock / metal", hanno potuto facilmente progettare un sito che si rivolge a quel lato del loro lavoro: selvaggio, abrasivo, caotico. Invece, hanno scelto di usare linee pulite, colori semplici e caratteri sans-serif - che alla fine lasciano che il loro lavoro parli da solo.
Feed Me è un design web di una pagina che utilizza la tipografia per creare una combinazione di colori pulita attraverso la pagina. Il contrasto tra il suo font standard e uno più audace, in stile pennello, crea una semplice reindirizzamento che mette l'accento sui termini chiave.
Feed Me ha i suoi pregi come un intero web design e la tipografia è un ingrediente chiave per il suo successo. I caratteri verdi curvi coordinano con il tema della natura del web design che adoro.
È difficile indicare il motivo esatto dell'effetto generato dal sito di questo grafico, ma so che è fantastico!
Porta il mio capo a Capo Nord è un sito interessante Una società belga di web design - vale a dire, Inventis - sta cercando di sfruttare un ciclo di 545 km per ottenere qualche aggiunta di Facebook. Il sito stesso utilizza un'interessante gamma di tipografia e utilizza il colore per enfatizzare le parti più importanti di ogni affermazione (ad esempio "5000 mi piace" e "bici 545 km").
Il colore del testo in questa pagina è coordinato con lo sfondo su cui risiede come visto nel testo marrone utilizzato nella segnaletica del titolo. Inventis usa anche lo shadowing interno per distinguere il testo dal suo sfondo nei casi in cui è necessario, ma non dove non lo è (come le pietre miliari sulla pista ciclabile).
Come il sito di Gaz Battersby, Wes Bos utilizza pochi caratteri diversi nel suo design e sceglie invece di usare uno sfondo a nastro sui suoi editor per creare la sua gerarchia. Molto semplicemente, adoro il contrasto tra il carattere dello script e quello serif e l'enfasi totale sui titoli di lavoro.
Sebbene non sia un nuovo sito, il sito del logo HTML5 di W3C è ancora un ottimo esempio di buona tipografia in gioco per una serie di motivi, tra cui l'uso di un bel carattere grassetto e condensato nei titoli per corrispondere a quello dell'omonimo della pagina.
I grafici della pagina sono anche distanziati in modo appropriato per facilitare la lettura per l'utente finale.
Come puoi probabilmente intuire dallo screenshot, questo non è un nuovo sito. Tuttavia, continuava a comparire su altre raccolte di tipografie con una frequenza così elevata, io la penserei come un'omissione evidente se dovessi scegliere di non includerla. Chrip è stata la conferenza degli sviluppatori ufficiale di Twitter, avvenuta all'incirca in questo periodo lo scorso anno.
Una volta ho imparato una regola empirica sulla tipografia: non usare più di tre caratteri tipografici. Mentre Chrip dà l'impressione di molta attività (qualcosa che si vuole davvero creare per una conferenza), posso contare solo tre font diversi se si ignora il logo.
In particolare, adoro il titolo nel portfolio di Jeremy Church. L'enfasi sul "the" sembra impressionante ma richiama l'attenzione su un obiettivo principale di "ridurre il rumore". A parte i suoi titoli in grassetto e in ombra, il resto del design usa un carattere semplicistico, sans-serif che attira maggiormente l'attenzione sul suo contrasto principale.
Black Ant Media utilizza una gamma di facce molto lisce che sembrano incredibili, ma è difficile da individuare perché. Black Ant Media sceglie di usare lo stesso font invece di molti e solo di variare le dimensioni, il colore e il peso per distinguere le prominenze degli elementi diversi.
Come alcuni degli altri esempi su questo, Black Ant Media usa anche sfondi colorati anziché scala per rimbalzare i titoli sulla sua gerarchia visiva.
Premium Pixels è un tema WordPress che rende la lista grazie alla sua pertinenza ad alcuni degli attuali standard di tipografia discussi nel recente articolo di Brandon su Typography. Lo sfondo rumoroso è in contrasto con il testo sulla pagina grazie all'ombra di un testo bianco che offre un senso di profondità. Ogni post sulla pagina è anche intitolato con un carattere compatto e grassetto.
Ognuno dei post in questo tema WordPress ha una grande spaziatura delle linee, quindi è molto più facile da leggere per gli occhi e l'etica del grande padding è evidente in ogni elemento della pagina.
Sottilmente, c'è anche una faccia serif gettata tra i meta dati di ogni post.
Come nota a margine, anche la nuova riprogettazione del sito Web di Orman Clark merita di essere menzionata in questo elenco, in quanto esemplifica alcuni grandi principi di layout tipografico. Pulito, semplice e ben organizzato. ecco alcuni screenshot:
I web designer parlano molto di ricreare "l'estetica della stampa" sul web? ma di solito i designer considerano semplicemente l'utilizzo di trame ricche, layout non strutturati e molte ombre d'angolo o inganna l'occhio effetti. Raramente i designer ricordano davvero che la tipografia di stampa è spesso strutturata esattamente come il tipo sul web. Pelicanfly unisce il meglio di entrambi i mondi (a mio parere), utilizzando strutture di colonne semplici, simboli tipografici e effetti CSS contemporanei per creare un sito che sia memorabile. Immagino che sia stato progettato pensando anche ai tablet, perché ci sono un paio di casi in cui dovresti girare lo schermo per leggere.
Strumento gratuito: Questo è uno strumento abbastanza nuovo che ho incontrato l'altro giorno. Ti permette di armeggiare essenzialmente con la tipografia di base per un progetto fino a quando non ottieni tutto perfetto - poi sputa il CSS (3) che genera lo stile che hai creato. Sono sicuro che ci sono una manciata di applicazioni web simili là fuori, ma questo mi ha colpito come uno dei più preziosi semplicemente a causa dell'enorme quantità di ritocchi che puoi fare ed è facile da usare.
Accentsconagua