Conţinut
Acest articol a apărut pentru prima dată în numărul 229 al revistei .net - cea mai vândută revistă din lume pentru designeri și dezvoltatori de web.
Unul dintre cele mai importante lucruri pe care vă puteți concentra atunci când vine vorba de așezarea unei pagini în HTML / CSS este ritmul vertical - modelul vizual în care se formează blocurile de tip sau liniile de tip pe măsură ce scanați pagina.
Alte lucruri pot afecta acest ritm, cum ar fi titluri, elemente de listă, imagini și așa mai departe. A avea un ritm vertical bun este esențial, deoarece ajută la lizibilitate și capacitatea de scanare a paginilor dvs.
Există destul de multe tutoriale minunate (a se vedea aici și aici, de exemplu) pe web, unde puteți afla cum să realizați tehnic un ritm vertical adecvat folosind ems pentru înălțimea liniei și să aflați ce vă menține tipul „în fază” mijloace.
Ierarhie
Lucrurile de bază cărora trebuie să le acordați o atenție deosebită sunt înălțimea liniei dintre elemente și ierarhia vizuală generală de pe pagină. Setarea proporțiilor corespunzătoare înălțimii liniei poate fi un exercițiu de proiectare implicat, dar este important să îl stăpânești. Ierarhia este, de asemenea, importantă, prin faptul că imaginile și elementele de text ar trebui să fie în armonie unele cu altele vizual - cele mai importante lucruri sunt, în general, mai mari și sunt primele pe pagină.
Designerii de tipar s-au ocupat de ideea ritmului vertical de mulți ani și doar în trecutul recent, designerii de web au trebuit să intre cu adevărat în aceste lucruri. Având nevoie din ce în ce mai mare de a construi site-uri web utilizând planuri de rețea și de a acorda atenție implementărilor receptive pentru a găzdui lățimi multiple ale ecranului, este mai important acum decât oricând din perspectiva designului vizual, probabil mai mult decât unul tehnic.
Cinci exemple de verificat
1. Elementele stilului tipografic Această carte a lui Robert Bringhurst este standardul pentru studiul tipografiei. Citiți-l, consumați-l, turnați-l în creier în orice fel puteți.
2. Frank Chimero În afară de a fi absolut uimitor, în general, recentul reproiectare a site-ului personal al designerului Frank Chimero prezintă un ritm vertical superb. El folosește un efect de paralaxă pentru a ajuta la conducerea ritmului acasă, în timp ce derulați și pagina în jos.
3. Dan Cederholm Pentru un bun exemplu de mare ritm vertical tipografic, aruncați o privire la blogul lui Dan Cederholm. Înălțimea liniei copiei și a titlurilor este în proporție perfectă.
4. Focus Lab Firma de design web și branding Focus Lab folosește ierarhia cu abilitate pentru a ajuta la comunicarea a ceea ce este cel mai important pentru vizitator.
5. Tipofonderie Site-ul pentru Studio de tipografie Typofonderie are un ritm vertical excelent cu imaginile și textul său. Distanța dintre elemente este proporțională pe tot site-ul, iar ierarhia dintre imaginea principală și imaginile / secțiunile secundare este perfectă.
Descoperiți 10 exemple uimitoare de design experimental la Creative Bloq.
