Web Design Basix De ce tipografia contează

Tipografia este una dintre cele mai importante abilități pe care un designer le poate avea? veteranii din industrie petrec ani de zile în tehnica lor și ați putea petrece cu ușurință ani de zile la o universitate care studiază tema; Dar unde este cel mai bun loc pentru a începe cu adevărat? Astăzi, în cea mai recentă completare a seriei noastre Basix, introducem tipografia pentru începători prin explicarea unui lucru simplu: de ce tipografia contează atât de mult în designul web.


Ce este Tipografia?

Tipografia este o disciplină antică care poate fi explicată cel mai simplu ca arta de aranjare și de proiectare a cuvântului scris. Cele mai vechi exemple de tipografie se întorc până în 1800 de ani. cu vechii greci, dar epoca modernă a tipografiei este legată de mijlocul secolului al XV-lea, când a fost inventată presa de tipărit.

Voi păstra aici scurta istorie: tipografia este importantă dintr-un singur motiv: pentru că este modul principal în care designerii pot comunica cu cititorii? dacă mediul este o carte, o publicitate tipărită, un panou publicitar sau o emisiune de televiziune, tipografia este importantă deoarece intruchiparea limbajului vizual.


Deci, ce inseamna atunci cand spunem "tipografie web"?

96% din Internet este alcătuit din informații scrise sau text. Acest text este distribuit în bucăți mari și mici de informații care sunt distribuite pe pagini diferite cu formate diferite.

Formatarea tuturor acestor informații scrise într-un design al unui site web este ceea ce noi numim "tipografie web".

Tipografia este cea mai importantă parte a unui design web, deoarece influențează modul în care un site web comunică cu cititorii. De la titluri mai mari și blocuri îndrăznețe la corpuri mici, diferitele utilizări ale textului pe web sunt metoda de comunicare de bază? astfel încât este firesc ca modul în care un web designer decide să aranjeze tipul pe o pagină web este esențial pentru eficiența acelui site.

Vedem utilizarea sa oriunde, deoarece toate site-urile se bazează pe tipografie pentru a-și transmite mesajul cititorilor. Cu toate acestea, există unii designeri web care tind să supra-arata importanța inevitabilă a tipografiei și să se concentreze numai pe partea vizuală sau grafică a designului web.


Cum este tipografia web diferită de tipografia tipărită?

Folosind tipografia pentru medii de imprimare, cum ar fi broșuri, pliante, reviste, cărți sau medii în aer liber, cum ar fi semnele de poli și panourile, este diferită de cea folosită pentru ecranul computerului. În ceea ce privește tipografia, ecranul este un mediu complet diferit? și ca și în cazul oricărui tip de design, trebuie să luați în considerare mediul pe care oamenii îl vor vedea prin design. Luați în considerare următoarele două imagini:

Imaginea de sus este un poster pentru trupa, The Black Keys. Imaginea de jos este site-ul lor. Aceeași bandă, abordare diferită față de tipografie. De ce? Deoarece mediul (și deci mesajul și intenția) pentru fiecare proiect este diferit. Unul este de a promova un concert, celălalt este un portal pentru tot felul de informații despre trupă.

Când utilizați tipografia într-un design tipărit pentru ceva de genul unei cărți, faptul că va fi văzut dintr-o apropiere relativ apropiată vă oferă posibilitatea de a juca cu fonturile destul de puțin, pentru că nu va afecta prea mult lizibilitatea. Dacă utilizați tipografia pentru medii de comunicare în aer liber, cum ar fi un panou sau un afiș, știți că cititorul are doar o fracțiune de timp pentru a vedea tabla și pentru a consuma ceea ce este comunicat și astfel nu vă confunda cu reglarea fină a tipografiei mult - în loc să vă concentrați asupra impresiei inițiale și asupra lizibilității tipului.

Cu toate acestea, cu un site web există obiective complet diferite în minte. Proiectarea tipografiei pentru computere și web presupune ca designerul să împartă o mulțime de informații în diferite segmente și sub-segmente (Micro și Macro-typografie). De asemenea, o pagină web nu este constantă, deoarece trebuie să apară pe diferite browsere, dispozitive de acces la Internet diferite și cu rezoluții diferite ale ecranului. Deci, tipografia web are de a face cu un număr mare de probleme în comparație cu alte medii. Deci, în timp ce alegeți tipografia pentru site-ul lor, un designer trebuie să ia în considerare compatibilitatea și lizibilitatea între platforme. Acestea sunt doar câteva dintre preocupările pe care un web designer trebuie să le țină cont atunci când se apropie de un site web.


Tipografia web este "Designul de informații"

Când vine vorba de designul web, tipografia nu se limitează la alegerea unui font și la alcătuirea acestuia; Este arta divizării pachetelor de informații astfel încât cititorul să aibă o șansă bună să găsească ceea ce îi interesează? aceasta este locul în care tipografia de pe web devine mai mult ca designul de informații.

Tipografia pe web are la fel de mult despre organizarea tipului în layout-uri eficiente și semnificative, deoarece este vorba despre folosirea unei tipărite excelente.

Atragerea atenției asupra unui anumit bloc de text, ajutarea utilizatorilor să găsească conținutul pe care îl caută sau potrivirea unei largi varietăți de conținut pe o singură pagină se face prin abilități tipografice.

Ideea de proiectare a tipului este mai mult decât lizibilă, dar de asemenea să fie plin de înțeles face parte din ceea ce confundă o mulțime de oameni despre tipografia web. Oricine poate scrie un paragraf de text; mai puțini oameni pot folosi lucruri cum ar fi spațierea literelor, înălțimea liniei și mărimea fontului pentru a le da un sentiment de caracter; dar cei mai buni designeri web pot organiza un tip într-un aspect întreg într-un mod care conferă sens cititorilor și îi ajută să-i îndrume pe un întreg site.

Aceasta este ceea ce înțelegem prin tipografia fiind proiectarea de informații.


Macro-tipografie și micro-tipografie


De la I Love Typography

Este adesea util să începeți sistemul tipografic pentru un design prin ruperea acestuia în două segmente diferite:

  • Macro-tipografie, care cuprinde structura textului general al documentului
  • Micro-tipografie, care acoperă aspecte mai mici și mult mai detaliate, cum ar fi tipul fontului, înălțimea liniei și spațierea etc..

Prin abordarea mai întâi a tipografiei macro, poate fi ușor să schițați elementele "mai mari" ale tipului de sistem într-un design. Unde va fi navigația? Cum va fi prezentat tipul de site? O coloană? Două? Mai Mult? Toate regulile structurale generale ar trebui definite mai întâi. În acest moment poți folosi doar orice tip de text pe care îl vrei? dar puteți începe să obțineți un simț pentru dimensiunea și amploarea unui design.

Odată ce ați prezentat "imaginea de ansamblu", este timpul să abordați microtipografia. Aici veți începe să perfecționați într-adevăr sistemul dvs. de tip prin definirea elementelor stilistice, cum ar fi chipul dvs. primar (și eventual secundar), cât de mari vor fi titlurile mari, dimensiunea implicită a lucrurilor cum ar fi titlurile bara laterală, textul paragrafului, culoarea linkului, etc.


Sfaturi tipografice web

Dacă sunteți doar începând ca un web designer, uita-te în jurul la toate lucrurile sălbatice și nebun lucruri care se întâmplă cu web tipografie poate fi descurajantă. S-ar putea să aveți o serie de întrebări, cum ar fi: De unde să începeți? Ce este bine și nu? Există reguli pe care trebuie să le urmez? Vestea bună este că, la baza sa, tipografia web are într-adevăr câteva reguli coerente pe care ar trebui să le cunoașteți. Ce urmează sunt câteva sfaturi utile pe care le-am colectat pentru crearea de sisteme eficiente de tip pentru web:

Ierarhia curată și clară


De la gândirea cu tipul

Ierarhia de tipografie este foarte importantă într-un design web. Gândiți-vă la toate locurile diferite pe care le utilizați pe un site web: navigarea, titlurile, paragrafele, subtitrările imaginii, barele laterale etc. Șansele sunt bune că există o mulțime de text! Cum o să transformi toate acestea într-un sistem de tip logic? Prin dezvoltarea unei ierarhii de tip.

O ierarhie bine dezvoltată vă permite să știți de unde să începeți să citiți, cum să continuați să citiți în continuare și diferența dintre informațiile cele mai importante și cele mai puțin importante pe o pagină. Cu o ierarhie eficientă de tip, nu mai trebuie să vă bazați pe plasarea textului pentru a evidenția ceea ce doriți cititorilor să treacă mai întâi.

Aflați mai multe despre înțelegerea ierarhiei


Cascading Tipography - Fii consistenta

Lipsa consecvenței în tipografie este una dintre cele mai comune și mai repetate greșeli pe care designerii web le comit în aceste zile. Un designer de imprimare deseori va proiecta cu meticulozitate fiecare litera dintr-o pagină? dar acest lucru nu este necesar pentru designul web.

În loc să încercați să proiectați manual fiecare tip de pe un site, proiectați-l cu ideea de CSS (Cascading Style Sheets) în minte. Utilizați binecuvântarea CSS și setați fontul, mărimea, culoarea, spațiile liniare, înălțimea și alte caracteristici ale tipografiei dvs. pe întregul site.


Du-te prin text

Am menționat acest lucru mai devreme, dar permiteți-mi să subliniez punctul: marii designeri web fac mai mult decât să plaseze imagini și să insereze text într-un aspect web. Este nevoie de obiceiuri profesionale bune pentru a face un design site-ul câștigător; Unul dintre cele mai bune obiceiuri profesionale pe care un web designer ar trebui să le aibă este Citeste textul înainte de al plasa în structura web. Dacă aveți acces la conținutul de text pe care îl veți folosi, evitați să le lipiți totul orbește. Trecând prin și citiți textul real, veți putea crea o legătură mai bună între conținut și design.

De asemenea, când ați terminat plasarea textului și a altor elemente în design, faceți-i un punct să îl treceți din nou ca o practică de corectură pentru a evita orice greșeli sau lucruri lăsate afară. Este uimitor cât de des designerii uită să modeleze lucruri simple precum liste de glonte, deoarece s-au grabit prin faza de proiectare.


Macro și tipografie micro - ambele materie!

Pentru un design web de succes, un designer web ar trebui să acorde atenție atât macro, cât și microtipografiei. Chiar și cele mai bune machete se pot destrăma dacă lucrurile lipsesc din partea "micro" a lucrurilor? și chiar cea mai bună microtipografie nu va fi utilă cititorilor dacă nu este prevăzută cu principiile macro-tipografice corespunzătoare. Ambele sunt importante!

Mulți designeri sunt deosebit de buni unul sau altul? astfel încât să ia ceva timp să ia în considerare ceea ce costum mai puternic este: macro sau micro? Apoi faceți tot posibilul pentru a-ți consolida abilitățile (prin practică și atenție la detalii!) În abilitățile tale mai slabe.


Culori și tipografie

Acest lucru este de la sine înțeles pentru o mulțime de designeri, dar culoarea textului este un alt lucru important de luat în considerare. Există sute de site-uri web care iau acest punct de acord și utilizează culori de fonturi care fie:

  • Faceți tipografie extrem de dificil de citit
  • sau? sunt plictisitoare! (și culorile plictisitoare sunt culori pierdute)

Nu este nevoie să mergeți și să străpungeți întregul curcubeu pe pagină și nu aveți nevoie să folosiți ceva îngrozitor ca un text roșu pe fundal verde? utilizați simplu teoria culorii simplă pentru a alege culorile pentru fonturile dvs. care sunt ușor de citit și interesante. Amintiți-vă, legăturile ar trebui să fie colorate în majoritatea cazurilor? le spune oamenilor că le pot face clic pe ele!

Citiți mai multe despre Teoria culorilor Web Design.


Design cu "textul live"

Opriți utilizarea Lorem Ipsum! Nu există nici un substitut pentru textul real în timp ce se proiectează un site web. În timp ce puteți utiliza un text fictiv pentru a obține o idee despre modul în care vor arăta lucrurile în layout, imediat ce designul dvs. de web se apropie de final, încercați să utilizați textul real pe care dvs. sau planul clientului îl utilizați în site-ul live . Numai atunci veți putea să sincronizați designul cu textul și să determinați impactul cum va arăta site-ul global? chiar și mici supraveghiri în acest proces pot duce la puncte slabe într-un design, deci ia timp pentru a utiliza textul live înainte de a apela un proiect "complet"!


Arătați personalitatea dvs. tipografică

Lucru minunat despre tipografia web este că există o mare varietate de modalități de abordare - fiecare designer va avea stilul său propriu pentru a face lucrurile și într-adevăr nu există nici o singură modalitate "corectă" de aranjare tip pe web. Tipul are personalitate, la fel ca tu sau clientul pentru care lucrezi, așa că nu-ți fie frică să te joci cu propriile variante de creație odată ce ai unghiile bazicului unui design al site-ului.

Citiți mai multe despre Alegerea fontului drept


Concluzie: Practica este perfectă

Designul web vă cere să stăpânești mai multe lucruri pentru a face un aspect foarte bun, iar tipografia este cu siguranță unul dintre aceste lucruri. Un designer de web care înțelege cu adevărat importanța tipografiei va putea să atingă factorul de succes mai des decât nu? și tot ceea ce este nevoie este practica de a vă antrena mintea pentru a vedea cea mai bună modalitate posibilă de a întocmi o anumită bucată de tip! Tipografia nu este știința rachetelor, însă este nevoie de multă muncă pentru a descoperi modul cel mai bun de a face lucrurile pentru un anumit proiect.

Ia ceva timp în fiecare zi pentru a practica - încercați să luați un articol care vă place foarte mult și să-l re-proiectați; Proiectați propriul CV, portofoliu, tot ce puteți găsi? utilizați doar ideile pe care le puteți folosi pentru a vă exersa și veți fi mai bine în cel mai scurt timp! Crede-mă, de îndată ce înțelegi elementele de bază, va deveni o bucată de prăjitură!

Acest articol a fost co-scris de Arfa Mizra și Brandon Jones. Vă mulțumim pentru lectură!