Share
La tipografia è una delle abilità più importanti che un designer può avere? i veterani del settore trascorrono anni ad affinare la loro tecnica e potresti facilmente passare anni in un'università a studiare l'argomento; Ma dov'è il posto migliore per iniziare veramente? Oggi, nell'ultima aggiunta alla nostra serie Basix, stiamo introducendo la tipografia per principianti spiegando una cosa semplice: perché la tipografia è così importante nel web design.
La tipografia è un'antica disciplina che può essere più semplicemente spiegata come l'arte di organizzare e progettare la parola scritta. I primi esempi di tipografia risalgono al 1800 a.C. con gli antichi greci, ma l'era moderna della tipografia è legata alla metà del XV secolo, quando fu inventata la stampa.
Terrò qui brevemente la lezione di storia: la tipografia è importante per una ragione: perché è il modo principale con cui i designer possono comunicare con i lettori? se il mezzo è un libro, una pubblicità stampata, un cartellone pubblicitario o uno show televisivo, la tipografia è importante perché è l'incarnazione del linguaggio visivo.
Il 96% di Internet è composto da informazioni o testi scritti. Questo testo è distribuito in pezzi grandi e piccoli di informazioni che si diffondono su pagine diverse con formati diversi.
La formattazione di tutte queste informazioni scritte nel design di un sito Web è ciò che chiamiamo "Web Typography".
La tipografia è la parte più importante di un web design perché influenza il modo in cui un sito web comunica con i lettori. Dai titoli più grandi e dai blocchi audaci al corpo piccolo, i vari usi del testo sul web sono il metodo di comunicazione principale? quindi è naturale che il modo in cui un web designer decide di organizzare il tipo su una pagina web sia cruciale per l'efficacia di quel sito.
Vediamo il suo utilizzo ovunque poiché tutti i siti web si basano sulla tipografia per trasmettere il loro messaggio ai lettori. Tuttavia, ci sono alcuni web designer che tendono a sovra-guardare l'inevitabile importanza della tipografia e si concentrano solo sulla parte grafica o visiva del web design.
L'uso della tipografia per supporti di stampa come brochure, volantini, riviste, libri o supporti esterni come cartelli e cartelloni pubblicitari è diverso da quello utilizzato per lo schermo del computer. In termini di tipografia, lo schermo è un mezzo completamente diverso? e come con qualsiasi tipo di design, devi veramente considerare il mezzo attraverso il quale le persone visualizzeranno il tuo design. Considera le seguenti due immagini:
L'immagine in alto è un poster per la band, The Black Keys. L'immagine in basso è il loro sito web. Stessa fascia, approccio diverso alla tipografia. Perché? Perché il mezzo (e quindi il messaggio e l'intento) per ogni progetto è diverso. Uno è quello di promuovere un concerto, l'altro è un portale per ogni tipo di informazione sulla band.
Quando si utilizza la tipografia in un progetto di stampa per qualcosa di simile a un libro, il fatto che venga visualizzato da una distanza relativamente ravvicinata ti dà la possibilità di giocare con i caratteri un po 'perché non danneggerà molto la leggibilità. Se stai usando la tipografia per mezzi di comunicazione esterni come un cartellone pubblicitario o un poster, sai che il lettore ha solo una frazione di tempo per visualizzare la lavagna e consumare ciò che viene comunicato e quindi non si scherza con la messa a punto della tipografia molto - invece potresti concentrarti sull'impressione iniziale di una leggibilità del tipo.
Tuttavia, con un sito web ci sono obiettivi totalmente diversi in mente. Progettare la tipografia per computer e il web richiede al progettista di dividere molte informazioni in diversi segmenti e sotto-segmenti (Micro e Macro-tipografia). Inoltre, una pagina web non è costante in quanto deve apparire su diversi browser, diversi dispositivi di accesso a Internet e con diverse risoluzioni dello schermo. Quindi la tipografia web ha a che fare con un buon numero di problemi rispetto ad altri mezzi. Quindi, mentre si sceglie la tipografia per il proprio sito Web, un progettista deve considerare la compatibilità e la leggibilità multipiattaforma. Queste sono solo alcune delle preoccupazioni che un web designer deve tenere a mente quando si avvicina a un sito web.
Quando si parla di web design, la tipografia non si limita a scegliere un font e ad estenderlo; È il arte di dividere fasci di informazioni in modo tale che il lettore abbia una buona possibilità di trovare ciò che gli interessa? è qui che la tipografia sul web diventa più come progettazione di informazioni.
La tipografia sul Web riguarda tanto l'organizzazione del testo in layout efficaci e significativi quanto l'uso di un grande carattere tipografico.
Attirare l'attenzione su un determinato blocco di testo, aiutando gli utenti a trovare il contenuto che stanno cercando o adattando un'ampia varietà di contenuti su un'unica pagina, tutto avviene attraverso abilità tipografiche.
L'idea di progettare il testo è più che leggibile, ma anche essere significativo fa parte di ciò che confonde molte persone sulla tipografia web. Chiunque può digitare un paragrafo di testo; un numero minore di persone può utilizzare elementi come spaziatura delle lettere, altezza della linea e dimensione del carattere per conferirgli un senso di carattere ;? ma i migliori web designer possono organizzare il tipo attraverso un intero layout in un modo che dia significato ai lettori e li aiuti a guidarli attraverso un intero sito web.
Questo è ciò che intendiamo per tipografia come design dell'informazione.
Spesso è utile iniziare il sistema tipografico per un progetto suddividendolo in due diversi segmenti:
Avvicinandoci alla macro-tipografia, può essere facile delineare gli elementi di "immagine più grande" del sistema di tipi in un progetto. Dove sarà la navigazione? Come sarà scritto il testo sul sito? Una colonna? Due? Di Più? Tutte le regole strutturali generali dovrebbero essere definite per prime. A questo punto puoi usare praticamente qualsiasi tipo di carattere che vuoi? ma puoi iniziare a farti un'idea delle dimensioni e della scala di un disegno.
Una volta definita la "grande immagine", è ora di avvicinarsi alla Micro-tipografia. Questo è il punto in cui inizierai a perfezionare il tuo sistema di tipi definendo gli elementi stilistici come il tuo carattere principale (e possibilmente secondario), quanto grandi saranno i titoli, la dimensione predefinita di elementi come i titoli della barra laterale, il testo del paragrafo, link a colori, ecc.
Se stai appena iniziando come web designer, osservare tutte le cose folli e folli che accadono con la tipografia web può essere scoraggiante. Potresti avere una serie di domande, ad esempio: da dove cominciare? Cosa è giusto e sbagliato? Ci sono delle regole che devo seguire? La buona notizia è che, al suo centro, la tipografia web ha in effetti alcune regole coerenti di cui dovresti essere a conoscenza. Quello che segue sono alcuni suggerimenti utili che ho raccolto per creare sistemi di tipi efficaci per il web:
La gerarchia della tipografia è molto importante in un web design. Pensa a tutti i diversi luoghi in cui usi il testo su un sito web: la navigazione, i titoli, i paragrafi, le didascalie delle immagini, le barre laterali, ecc.? È probabile che ci sia un sacco di testo! Come hai intenzione di trasformare tutto questo in un sistema di tipo logico? Sviluppando una gerarchia di tipi.
Una gerarchia ben sviluppata consente di sapere da dove iniziare a leggere, come procedere a leggere ulteriormente e la differenza tra le informazioni più importanti e meno importanti su una pagina. Con un'efficace gerarchia di tipi, non è più necessario fare affidamento sul posizionamento di testo per evidenziare ciò che i tuoi lettori devono passare per primi.
Maggiori informazioni su Understanding Hierarchy
La mancanza di coerenza nella tipografia è uno degli errori più comuni e ripetuti che i web designer commettono in questi giorni. Un tipografo spesso disegna meticolosamente ogni singola lettera su una pagina? ma questo non è necessario con il web design.
Invece di provare a progettare manualmente ogni singolo tipo di testo su un sito, progetta con l'idea di Cascading Style Sheets (CSS). Usa la benedizione dei CSS e imposta font, dimensioni, colori, spaziatura delle linee, altezza e altre caratteristiche della tua tipografia in tutto il sito web.
Ne ho parlato prima, ma vorrei sottolineare il punto: i grandi web designer non si limitano a inserire immagini e incollare testo in un layout web. Occorrono buone abitudini professionali per realizzare un design di siti Web vincente; Una delle migliori abitudini professionali che un web designer dovrebbe avere è leggi il prossimo prima di posizionarlo nel layout web. Se hai accesso ai contenuti di testo che utilizzerai, evita di incollarli tutti alla cieca. Passando attraverso e leggendo il testo attuale, sarete in grado di stabilire una migliore connessione tra il contenuto e il design.
Inoltre, quando hai finito di posizionare il testo e gli altri elementi nel disegno, rendi un punto di nuovo attraverso di esso come una pratica di correzione per evitare errori o cose lasciate fuori. È sorprendente quanto spesso i progettisti dimentichino di disegnare cose semplici come elenchi di proiettili perché si sono affrettati a passare attraverso la fase di progettazione.
Per un web design di successo, un web designer dovrebbe prestare attenzione sia alla macro che alla micro tipografia. Anche i migliori layout possono cadere a pezzi se mancano cose sul lato "micro" delle cose? e anche la migliore micro-tipografia non sarà utile ai lettori se non è strutturata usando i principi della macro-tipografia corretta. Entrambi sono importanti!
Molti designer sono particolarmente bravi su uno o l'altro? quindi prenditi un po 'di tempo per considerare qual è il tuo vestito più forte: macro o micro? Quindi fai del tuo meglio per rafforzare le tue abilità (attraverso la pratica e l'attenzione ai dettagli!) Nel tuo skillset più debole.
Questo è ovvio per molti designer, ma il colore del testo è un'altra cosa importante da considerare. Esistono centinaia di siti Web che danno per scontato questo punto e utilizzano i colori dei caratteri che:
Non è necessario andare a spruzzare l'intero arcobaleno sulla pagina e non è necessario utilizzare qualcosa di terribile come il testo rosso su uno sfondo verde? usa semplicemente una teoria dei colori semplice e ragionevole per scegliere i colori per i tuoi caratteri che sono leggibili e interessanti. Ricorda, i link dovrebbero essere colorati nella maggior parte dei casi? dice alla gente che possono cliccarli!
Maggiori informazioni sulla Teoria del colore del Web design.
Smetti di usare Lorem Ipsum! Non c'è alcun sostituto per il testo reale durante la progettazione di un sito web. Mentre puoi usare il dummy text per farti un'idea di come appariranno le cose nel layout, non appena il tuo web design sta per concludersi, prova a usare il testo reale che tu o il tuo cliente intendete usare nel sito web live . Solo allora sarai in grado di sincronizzare il design con il testo e determinare l'impatto di come sarà il sito web generale? anche piccole sviste in questo processo possono portare a punti deboli in un progetto, quindi prenditi il tempo di usare il testo dal vivo prima di chiamare un progetto 'completo'!
La cosa meravigliosa della tipografia del web è che ci sono molti modi per approcciarlo: ogni designer avrà il proprio stile per fare le cose, e non c'è davvero un singolo modo "giusto" di tipo di layout sul web. Type ha personalità, proprio come te o il cliente per cui lavori, quindi non aver paura di giocare con le tue variazioni creative una volta inchiodato il fondamento di un design del sito.
Maggiori informazioni sulla scelta del font giusto
Il web design richiede di padroneggiare una serie di cose per creare un layout davvero eccezionale, e la tipografia è sicuramente una di queste cose. Un web designer che capisce veramente l'importanza della tipografia sarà in grado di colpire il fattore di successo il più delle volte? e tutto ciò che serve veramente è allenare la mente a vedere il modo migliore di disporre ogni tipo di pezzo! La tipografia non è scienza missilistica, ma richiede molto lavoro per scoprire il modo migliore di fare le cose per ogni progetto.
Prenditi un po 'di tempo ogni giorno per esercitarti - prova a prendere un articolo che ti piace davvero e riprogettarlo; Progetta il tuo curriculum personale, portfolio, qualunque cosa tu possa trovare? usa solo le idee che puoi praticare e ti ritroverai a stare meglio in un attimo! Fidati di me, non appena capisci le basi, diventerà un pezzo di torta!
Questo articolo è stato co-scritto da Arfa Mizra e Brandon Jones. Grazie per aver letto!
Accentsconagua