Share
Sunteți gata pentru doza din această lună de design de web awesomeness? Pun pariu că ești! Connor conduce această lună cu Brandon făcând niște curații de rezervă - și avem o listă cu 17 site-uri care prezintă unele dintre cele mai bune tipografii pentru băieții voștri pentru a fi verificați. În această lună, avem chiar o secțiune specială dedicată unor instrumente noi de tipografie (tip "ish") și a layout-ului pentru a vă ușura viața. Hai să intrăm!
Vorbind despre regulile tehnice ale tipografiei potrivite este grozavă? dar unde cauciucul atinge într-adevăr drumul este atunci când putem începe să aruncăm o privire asupra exemplelor de tipografie în acțiune și să analizăm de ce funcționează. Unul dintre lucrurile frumoase despre tipografie este că, la fel ca limbile pe care le folosim pentru a comunica între ele, modul în care folosiți tipul într-un design îi dă o voce. Puteți să țipați și să țipați sau să puteți șopti liniștit? totul depinde de dvs. și de modul în care doriți ca mesajul dvs. să fie auzit.
În fiecare lună, vom analiza între 10 și 20 de exemple de tipografie excelentă în designul web? dar, mai important, vom analiza, de asemenea, de ce funcționează tipografia. Să ne aruncăm în oferta din această lună:
SquareSpace de fapt are o istorie de tipografie bine concepută pe site-urile lor, dar au scos toate opririle pentru evenimentul SXSW de anul acesta. Conținutul site-ului se referă la persoanele care postează fotografii de la eveniment, dar aruncă o privire la cât de bine este prezentat. Frumos setat titluri? o mulțime de varietate în aspect? și imagini subțiri de fundal / texturi care tipografia de referință a vechiului. Șoldul, ilustrația craniului ultramodernă nu dă naștere fie lucrurilor.
Site-ul nu este imens, unele SS s-au descurcat bine pentru a păstra lucrurile proaspete și interesante pe măsură ce defilați pagina în jos. Dacă acordați atenție, într-adevăr nu există un standard stabilit pentru tipografie (dincolo de aceleași familii de fonturi) - dimensiunile sunt peste tot și așa este plasarea? Dar acest lucru este perfect acceptabil în acest caz, deoarece fiecare secțiune individuală (ceea ce este vizibil pe ecran în același punct) funcționează în armonie cu ea însăși. Culorile sunt toate de pe aceeași paletă generală și totul se simte ca și cum ar fi încastrat pe o rețea, chiar dacă nu o poți înghiți.
Grip Limited este unul dintre acele site-uri pe care le întâlniți din când în când, care este atât de incredibil de out-of-the-box pe care tocmai trebuie să stați și să-l ia pentru un minut sau două. Am senzația ciudată că doar mă uit la asta mă face un tipograf mai bun. Varietatea tipului este atât de diversă încât, fără paleta monocromă unificată, site-ul ar fi greu să se uite. Heck, majoritatea experților de uzabilitate ar putea spune că acest lucru este un gunoi absolut chiar și în starea sa actuală, dar voi argumenta că acest tip de distracție, "shotgun" de abordare a tipului este exact ceea ce web designerii trebuie să se deda din când în când.
Veți recicla acest aspect în mod repetat pentru proiecte de afaceri sau corporative? Bineînțeles că nu, ci doar a lua o mică mușcătură de tip off de pe acest site ar face minuni pentru a condimenteze un alt mod de obișnuit de proiect pe care ați putea fi de lucru pe. De exemplu?
Burton este un fel / sorta pe spectrul opus ca site-ul Grip Limited. Este extrem de organizat, amplasat într-o structură rigidă a blocului, și ușor de utilizat. Aruncați o privire mai atentă și probabil veți vedea ce am plasat aceste două site-uri împreună în această listă. În timp ce aspectul în sine este destul de bine blocat în ceea ce privește structura, tipografia reală pe acest site este departe de ceea ce vedeți în mod normal pe web - și mult mai mult cu ceea ce ați putea vedea într-o revistă sau catalog de snowboard. Tipul este setat în cercuri și în alte forme web neobișnuite pentru a da fiecărei pagini valoarea corectă a interesului vizual. De asemenea, s-au împrăștiat în grafica informativă și alte ilustrații simplificate în unele dintre blocurile obișnuite ale rețelei pentru a distruge monotonia și ritmul fiecărei pagini.
Această versiune a site-ului Burton a fost în jur de ceva timp? și totuși se simte mereu nou și proaspăt de fiecare dată când verific. Prin schimbarea pur și simplu a fotografiilor și culorilor cheie, ei pot obține mult mai mult kilometraj din site pentru fiecare nou sezon.
Impact Media folosește diferite fonturi, culori și dimensiuni în cursorul său principal și pe întreg site-ul lor. Ca și fontul - Impact - alegerea tipografiei pe întreg site-ul respectiv este cu litere aldine, fonturi mari, care se deosebesc foarte mult de fundalul lor.
Îmi place stilul actual al fonturilor de caractere îndrăznețe de pe web chiar acum și Impact Media îl folosește în linia a doua pentru a genera un efect minunat și primitor.
Gaz Battersby este un designer grafic cu sediul in Leeds, Marea Britanie, site-ul minimalist fiind portofoliul sau. Site-ul folosește un font de serif în întregul său design, dar contrastează elementele doar prin schimbarea stilului fontului (în italice) în loc de un font întreg nou. Aceasta are ca rezultat o schemă de tipografie mai simplă și mai curată.
Site-ul lui Battersby folosește de asemenea culoarea pentru a construi un heirachim, cu titlurile sale încadrate în cercuri turcoaz pentru a atrage atenția utilizatorului.
Nu voi spune prea multe despre SURROUND, pentru că nu prea ai de spus. Este un memento că, uneori, o abordare simplă a aspectului și a tipografiei funcționează perfect. Nu există nicio bibelă inutilă, nimic între vizitator și conținut. Doar tehnici simple de funcționare care oferă un mesaj.
Creatura invizibilă este de fapt una dintre studiourile mele preferate din lume? plecând până când au fost asociați Asterik Studio. Poveste lungă scurt: ei creează postere kickass, opera de artă și alte lucruri distractive. Ceea ce îmi place despre acest site este controlul și disciplina. Ca un studio de top "rock / metal", puteau proiecta la fel de ușor un site care să acopere acea parte a muncii lor: sălbatic, abraziv, haotic. În schimb, au optat pentru utilizarea de linii curate, culori simple și fonturi sans-serif - care, în cele din urmă, le permite să vorbească singuri.
Feed Me este un design web de o pagină care utilizează tipografia pentru a crea o schemă de culori curată pe pagină. Contrastul dintre fontul său standard și cel mai îndrăzneț, cu peria creează un heirachim simplu, care pune accentul pe termenii cheie.
Feed Me are propriile merite ca un design web întreg și tipografia este un ingredient cheie pentru succesul său. Fonturile verzi curbate colaborează cu tema naturii a designului web pe care îl iubesc.
Este greu de subliniat motivul exact pentru efectul generat de site-ul acestui designer grafic, dar stiu ca este unul grozav!
Dă-mi seful în nordul Capului este un site interesant. O companie belgiană de web design - și anume Inventis - încearcă să exploateze un ciclu de 545 km, pentru a obține niște plănuri Facebook. Site-ul în sine folosește o gamă interesantă de tipografie și folosește culoarea pentru a sublinia cele mai importante părți ale fiecărei instrucțiuni (de exemplu, "5000 plăceri" și "biciclete 545 km").
Culoarea textului de pe această pagină se coordonează cu fundalul pe care se află, așa cum se vede în textul maro utilizat pe semnele de titlu. Inventis utilizează, de asemenea, umbra interioară pentru a distinge textul de fundal în cazurile în care acest lucru este necesar, dar nu și în cazul în care nu este (cum ar fi etapele de pe pista de ciclism).
La fel ca site-ul lui Gaz Battersby, Wes Bos folosește câteva fonturi diferite în designul său și în schimb optează pentru utilizarea unui fundal de panglică pe editorii săi pentru a-și crea ierarhia. Foarte simplu, îmi place contrastul de la fontul de scenariu la cel de serif și accentul pus pe toate titlurile de locuri de muncă.
Deși nu este un site nou, site-ul cu logo-ul HTML5 al site-ului W3C este încă un exemplu excelent de tipografie bună în joc din mai multe motive, inclusiv folosirea unui font minunat și condensat în titluri,.
Paragrafele de pe pagină sunt de asemenea distanțate corespunzător pentru o citire mai ușoară pentru utilizatorul final.
După cum probabil puteți ghici din captura de ecran, acesta nu este un site nou. Cu toate acestea, a continuat să apară pe alte tipuri de tipărire la o frecvență atât de mare, mă gândeam la ea ca la o omisiune flagrantă, dacă nu ar trebui să o aleg să nu o includ. Chrip a fost conferința oficială a dezvoltatorilor Twitter care sa întâmplat în acest moment anul trecut.
Odată am învățat o regulă despre tipografie: nu folosiți mai mult de trei tipuri de fonturi. În timp ce Chrip dă impresia unei mulțimi de activități (ceva ce chiar vrei să creezi pentru o conferință), pot conta doar trei fonturi diferite, dacă ignoră logo-ul.
Îmi place mai ales titlul din portofoliul lui Jeremy Church. Accentul pe "The" arată minunat, dar atrage mai mult atenția asupra unui scop principal de a "reduce zgomotul". În afară de titlurile îndrăznețe și umbrite, restul designului folosește un font foarte simplu, sans serif care atrage mai mult atenția asupra contrastului său principal.
Black Ant Media folosește o serie de fețe foarte netede care arată uimitor, dar este greu de stabilit de ce. Black Ant Media optează pentru utilizarea aceluiași font în loc de multe și variază doar dimensiunea, culoarea și greutatea pentru a distinge proeminențele diferitelor elemente.
Ca și alte exemple în acest sens, Black Ant Media folosește de asemenea culori de fundal colorate în loc de scală pentru a împușca titlurile până la ierarhia vizuală.
Pixel Premium este o temă WordPress care face lista datorită relevanței sale pentru unele dintre standardele actuale de tipografie discutate în recentul articol al lui Brandon despre tipografie. Fundalul zgomot este în contrast cu textul de pe pagină datorită unei umbre de text alb care îi oferă un sentiment de profunzime. Fiecare postare de pe pagină este, de asemenea, intitulată cu un font compact, cu caractere aldine.
Fiecare dintre postările din această temă WordPress are spațiere mare, astfel încât este mult mai ușor să citiți ochiul și etica plăcuțelor mari este evidentă în fiecare element al paginii.
Subtil, există și o față serifă aruncată între datele de meta din fiecare post.
Ca o notă laterală, reproiectarea celui mai nou site al lui Orman Clark este, de asemenea, demnă de menționat în această listă, deoarece exemplifică câteva principii mari de tipografie. Curată, simplă și bine organizată. aici sunt câteva screenshot-uri:
Web designerii vorbesc mult despre recrearea "esteticii tipărite" pe web? dar, de obicei, designerii iau asta pentru a însemna pur și simplu utilizarea texturilor bogate, aranjamentele nestructurate și multe colțuri sau trompe l'oeil efecte. Rar, designerii își amintesc cu adevărat că tipografia tipărită este adesea la fel de structurată ca și tipul de pe web. Pelicanfly îmbină cele mai bune din ambele lumi (în opinia mea), folosind structuri simple de coloane, simboluri tipografice și efecte CSS contemporane pentru a crea un site memorabil. Voi ghici că a fost proiectat și cu tablete în minte, pentru că există câteva cazuri în care trebuie să vă răsturnați ecranul pentru a citi.
Instrument gratuit: Acesta este un instrument destul de nou pe care l-am fugit de-a doua zi. Acesta vă permite să faceți în mod esențial tipografia de bază pentru un proiect până când obțineți totul perfect - apoi scutură CSS (3) care generează stilul pe care l-ați creat. Sunt sigur că există o mulțime de aplicații web similare, dar acest lucru ma lovit ca fiind unul dintre cele mai valoroase, pur și simplu din cauza cantității mari de tinkering pe care le puteți face și este ușor de utilizat.
Accentsconagua