fie că este pe telefoanele noastre, în cărți sau pe site-uri web, digerăm în mod constant cuvinte scrise. De la broșuri de instrucțiuni la fronturi de magazin, tipul este peste tot în jurul nostru. Adesea reflectăm asupra puterii cuvântului scris, dar rareori luăm în considerare rolul designerului în emularea tonului cuvântului sau propoziției.
în spatele scenei, un designer a luat timp să ia în considerare relația dintre aspectul textului și ceea ce spune textul. În realitate, diferite stări, atmosfere și emoții pot fi exprimate pur și simplu prin alegerea tipului. Dar ce este de fapt tipografia-și de ce este atât de vitală?
în acest articol, vom ridica capacul pe tot ce trebuie să știți despre tipografie. Vom începe cu definiția tipografiei, inclusiv o scurtă istorie a originilor sale. Vom aborda apoi beneficiile unei tipografii bune și impactul pe care îl poate avea asupra utilizatorilor dvs. În cele din urmă, vom analiza diferitele elemente care cuprind tipografia și ce înseamnă toate acestea.
Iată ce vom acoperi:
- ce este tipografia?
- de ce este importantă tipografia?
- diferitele elemente ale tipografiei
- Cum de a alege tipul corect pentru site-ul dvs.
- concluzie
gata? Să ne scufundăm!
ce este tipografia?
să începem cu elementele de bază: ce este de fapt tipografia? În esență, tipografia este arta aranjării literelor și a textului într-un mod care face copia lizibilă, clară și atrăgătoare vizual pentru cititor. Tipografia implică stilul, aspectul și structura fontului, care își propune să provoace anumite emoții și să transmită mesaje specifice. Pe scurt, tipografia este ceea ce aduce textul la viață.
în videoclipul de mai jos, CareerFoundry UI design mentor Olga ridică capacul de ce contează tipografia—și ce diferență face pentru utilizatorii dvs.
Tipografia poate fi datată din secolul al 11-lea, în timpul inovației de tip mobil. Înainte de era digitală, tipografia era o meserie specializată asociată cu cărți și reviste și, în cele din urmă, cu lucrări publice. Primul exemplu de tipografie poate fi văzut în Biblia Gutenberg, care a dat startul unei revoluții tipografice în Occident. Fapt amuzant: stilul de tip utilizat în Biblia Gutenberg este acum cunoscut sub numele de Textura, și veți găsi în meniul derulant font pe aplicații desktop majore de azi!
Fast forward până în zilele noastre, unde tipografia este asociată în cea mai mare parte atât cu lumea digitală, cât și cu cea tipărită. Odată cu nașterea internetului a apărut o explozie creativă a artei tipografiei. Dintr-o dată, designerii web au avut la dispoziție o abundență de fonturi și opțiuni de tip, făcând tipografia mai diversă din punct de vedere vizual ca niciodată.
De ce este importantă tipografia?
tipografia este mult mai mult decât alegerea fonturilor frumoase: este o componentă vitală a designului interfeței cu utilizatorul. Tipografia bună va stabili o ierarhie vizuală puternică, va oferi un echilibru Grafic site-ului web și va seta tonul general al produsului. Tipografia ar trebui să ghideze și să informeze utilizatorii, să optimizeze lizibilitatea și accesibilitatea și să asigure o experiență excelentă a utilizatorului.
Să aprofundăm puțin de ce tipografia este atât de importantă.
Tipografia construiește recunoașterea mărcii
nu numai că tipografia bună va spori personalitatea site-ului web, dar utilizatorii dvs. vor începe subliminal să asocieze fontul prezentat pe site-ul dvs. cu marca dvs. Tipografia unică și consecventă vă va ajuta să stabiliți un utilizator puternic, să construiți încredere cu utilizatorii dvs. și să vă ajutați să vă duceți marca înainte.
Tipografia influențează luarea deciziilor
Tipografia are un efect profund asupra modului în care utilizatorii digeră și percep informațiile transmise de text. Tipul atrăgător este mult mai convingător decât fonturile slabe care nu întăresc mesajul textului.
Tipografia atrage atenția cititorilor
tipografia bună ar putea fi diferența dintre cineva care stă pe site-ul dvs. timp de un minut sau o jumătate de oră. Este important ca site-ul dvs. să fie stimulant vizual și memorabil, iar tipografia joacă un rol imens în acest proces.
diferitele elemente ale tipografiei
pentru a începe tipografia, trebuie mai întâi să vă ocupați de cele opt elemente esențiale de design tipografic.
fonturi și fonturi
există o oarecare confuzie în jurul diferenței dintre fonturi și fonturi, mulți tratându-le pe cele două ca sinonime. Un font este un stil de design care cuprinde o multitudine de caractere de diferite dimensiuni și greutate, în timp ce un font este o reprezentare grafică a caracterului textului. Mai simplu spus, un font este o familie de fonturi conexe, în timp ce fonturile se referă la greutățile, lățimile și stilurile care constituie un font.
există trei tipuri de caractere de bază: serif, sans-serif și decorativ. Pentru a menține interfața ordonată și raționalizată, un designer bun nu va folosi niciodată mai mult de trei fonturi—și va menține fonturile decorative la minimum. Majoritatea designerilor UI vor asocia fonturi serif cu fonturi sans-serif, cum ar fi punerea textului corpului principal într-un font serif și punerea titlului într-un font sans-serif sau invers.
Contrast
la fel ca ierarhia, contrastul ajută la transmiterea ideilor sau mesajelor pe care doriți să le subliniați cititorilor. A petrece ceva timp pe contrast face ca textul dvs. să fie interesant, semnificativ și să atragă atenția. Majoritatea designerilor creează contrast jucându-se cu diferite tipuri de caractere, culori, stiluri și dimensiuni pentru a crea impact și a rupe pagina.
consistență
menținerea consistentă a caracterelor dvs. este esențială pentru evitarea unei interfețe confuze și dezordonate. Atunci când transmiteți informații, este esențial să respectați același stil de font, astfel încât cititorii dvs. să înțeleagă instantaneu ceea ce citesc și să înceapă să observe un model. Deși este în regulă să te joci cu niveluri de ierarhie într-o oarecare măsură, este o practică bună să stabilești o ierarhie consistentă a tipurilor de caractere (un font consistent pentru anteturi, altul pentru subpoziții) și să rămâi la el.
spațiu alb
adesea denumit ‘spațiu negativ’, spațiul alb este spațiul din jurul textului sau graficii. Este adesea trecut cu vederea și tinde să treacă neobservat de către utilizator, dar utilizarea corectă a spațiului alb asigură interfața este ordonată și textul poate fi citit. Spațiul alb poate chiar să atragă atenția asupra textului și oferă o experiență generală plăcută din punct de vedere estetic. Spațiul alb ia adesea forma de margini, umplutură sau doar zone fără text sau grafică.
alinierea
alinierea este procesul de unificare și compunere a textului, graficelor și imaginilor pentru a se asigura că există spațiu, dimensiune și distanțe egale între fiecare element. Mulți designeri UI creează margini pentru a se asigura că logo-ul, antetul și corpul textului sunt aliniate între ele. Atunci când vă aliniați interfața cu utilizatorul, este o practică bună să acordați atenție standardelor din industrie. De exemplu, alinierea textului la dreapta va părea contraintuitivă pentru cititorii care citesc de la stânga la dreapta.
culoarea
culoarea este unul dintre cele mai interesante elemente ale tipografiei. Aici designerii pot deveni cu adevărat creativi și pot ridica interfața la un nou nivel. Cu toate acestea, culoarea textului nu trebuie luată cu ușurință: cuie culoarea fontului poate face textul iasă în evidență și transmite tonul mesajului —dar obtinerea-l greșit poate duce la o interfață murdar și text care se ciocnește cu culorile site-ului.
culoarea are trei componente cheie: valoare, nuanță și saturație. Un designer bun va ști cum să echilibreze aceste trei componente pentru a face textul atât atrăgător, cât și clar lizibil, chiar și pentru cei cu deficiențe de vedere. Adesea, designerii vor testa acest lucru vizualizând textul în tonuri de gri (fără culoare) și făcând modificări dacă textul este prea întunecat sau prea deschis pe culoarea de fundal.
ierarhia
stabilirea ierarhiei este unul dintre principiile cele mai vitale ale tipografiei. Ierarhia tipografică își propune să creeze o distincție clară între piesele proeminente de copie care ar trebui observate și citite mai întâi și copia standard a textului. Într-o epocă de scurte întinderi de atenție aduse de social media, designerii sunt îndemnați să fie conciși și să creeze fonturi care să permită utilizatorilor să consume informațiile necesare într-un timp scurt.
ierarhia poate fi creată folosind dimensionarea, culoarea, contrastul și alinierea. De exemplu, dacă aveți o linie de copie cu o pictogramă de semn de exclamare la început, care este în roșu și mai mare decât copia anterioară, acesta este un indiciu vizual pentru cititori că este un apel la acțiune. Cel mai tipic exemplu de ierarhie tipografică este dimensiunea: titlurile trebuie să fie întotdeauna mai mari decât subpozițiile și textul standard.
cum alegi tipul potrivit pentru site-ul tău?
acum că ne-am familiarizat cu diferitele elemente de tipografie, să vorbim despre procesul de alegere a tipurilor de caractere pentru interfața dvs. Cu atât de multe fonturi și fonturi diferite din care să alegeți, este ușor să vă simțiți copleșiți. A face alegerea corectă depinde de mult mai mult decât de a vedea ceea ce arată frumos. Iată câteva considerații cheie:
gândiți-vă la personalitate
cum doriți ca utilizatorii dvs. să se simtă atunci când intră pentru prima dată pe site-ul dvs. web. Vrei să imite o atmosferă prietenoasă? Vrei ca site-ul să se simtă high-end, primitor, jucăuș sau serios? Este imperativ ca tipografia să reflecte personalitatea mărcii sau a produsului. Un bun punct de plecare atunci când vă confruntați cu această provocare este să definiți trăsăturile de bază ale mărcii dvs. și să începeți să adunați caractere care reflectă aceste trăsături. De acolo, puteți începe să observați o tendință.
reflectați asupra tonului
este la fel de important să luați în considerare modul în care fontul se armonizează cu tonul mesajului. De exemplu, dacă doriți să transmiteți informații serioase sau importante, alegeți un font mai puțin stilizat sau decorativ, care să fie clar lizibil și să limiteze distragerea atenției.
nu vă zgârciți la funcția
funcția este la fel de vitală ca și forma: nu este nimic mai rău decât un site web care arată frumos, dar este în întregime ilizibil, ceea ce vă face să faceți clic pe butonul greșit sau să luați o întorsătură greșită, deoarece instrucțiunile erau neclare. Atunci când decideți ce tipuri de caractere să includeți în interfața dvs., setați stilul, estetica și vocea deoparte și reflectați dacă fontul este lizibil, lizibil și accesibil. Poate textul să fie lizibil fără încordare? Sunt personajele destul de distincte?
luați în considerare performanța
Un lucru pe care mulți designeri îl ignoră adesea este alegerea tipurilor de caractere care sunt prietenoase cu browserul web. Bibliotecile de fonturi utilizate în mod obișnuit, cum ar fi fonturile Google, oferă fișiere de fonturi bazate pe web care pot fi redate perfect într-un browser fără probleme. Sfat Pro: când descărcați fonturi web, nu descărcați niciodată mai multe seturi de caractere decât aveți nevoie. În acest fel, veți evita excesul de greutate!
inspirați-vă
dacă nu sunteți sigur de unde să începeți, luați ceva timp pentru a vedea ce fac alte persoane. Deschide ochii la tipografia pe care o vezi în jurul tău. Puteți observa modele similare? Puteți vedea exemple bune și rele de tipografie? Chiar și urmărirea hashtagurilor tipografice pe rețelele de socializare sau căutarea tipografiei pe Pinterest vă va oferi câteva idei bune despre ceea ce este acolo. De asemenea, vă puteți uita la aceste opt tendințe tipografice pentru inspirație suplimentară.
ia ceva timp pentru a testa
cel mai bun mod de a descifra ce font pentru a utiliza pentru interfața dumneavoastră? Testați, testați și testați! Prin colectarea de feedback util de la utilizatori reali, veți obține o perspectivă mai clară asupra a ceea ce funcționează, ce nu, ce este lizibil și ce se simte contraintuitiv sau greoi.
concluzie
tipografia este adesea trecută cu vederea, dar este o componentă crucială a designului interfeței cu utilizatorul. Mastering tipografie vă va vedea bine pe cale de a deveni un designer UI fantastic! Dacă nu sunteți sigur de unde să începeți, de ce să nu vă îndreptați către site-urile dvs. preferate și să începeți să notați pentru ce tipuri de caractere au plecat.
dornici de a afla mai multe despre design UI? Consultați aceste postări de blog legate de:
- 10 Exemple de bloguri frumoase care și-au bătut în cuie designul UI
- 32 elemente de interfață utilizator pentru designerii UI: glosarul dvs. final
- Iată cum să proiectați o pictogramă de la zero: un ghid pas cu pas