Tartalom
Ez a cikk először a .net magazin 229. számában jelent meg - ez a világ legkeresettebb weblaptervezők és -fejlesztők magazinja.
Az egyik legfontosabb dolog, amire összpontosíthat, amikor egy oldalt kell kitenni a HTML / CSS-be, a függőleges ritmus - az a vizuális minta, amelybe a típusú blokkok vagy típusú vonalak képződnek az oldal lefelé pásztázásakor.
Más dolgok is befolyásolhatják ezt a ritmust, például címsorok, listaelemek, képek stb. A jó függőleges ritmus a legfontosabb, mert elősegíti az oldal (ok) olvashatóságát és beolvashatóságát.
Van egy jó néhány nagyszerű oktatóanyag (lásd például itt és itt) az interneten, ahol megtudhatja, hogyan lehet technikailag elérni a megfelelő függőleges ritmust azáltal, hogy em-eket használ a vonalmagasságához, és megtudhatja, mi tartja a típusát „fázisban” eszközök.
Hierarchia
Alapvető figyelmet kell fordítani az elemek közötti vonalmagasságra és az oldal általános vizuális hierarchiájára. Megfelelő vonalvezetési magasság arányok meghatározása magában foglalhatja a tervezési gyakorlatot, de fontos elsajátítani. A hierarchia azért is fontos, hogy a képeknek és a szövegelemeknek vizuálisan összhangban kell lenniük egymással - a legfontosabbak általában nagyobbak és az első helyen állnak az oldalon.
A nyomtatási tervezők hosszú évek óta foglalkoznak a vertikális ritmus gondolatával, és a webdesignereknek csak a közelmúltban kellett igazán belemenniük ebbe a dologba. Mivel folyamatosan növekszik a webhelyek kiépítésének szükségessége rács elrendezéssel, és figyelni kell az adaptív megvalósításokra, hogy több képernyős szélességet be lehessen fogadni, vizuális tervezés szempontjából minden eddiginél fontosabb, valószínűleg nem csak technikai szempontból.
Öt példa, hogy ellenőrizze
1. A tipográfiai stílus elemei Robert Bringhurst e könyve a tipográfiai tanulmányok mércéje. Olvassa el, fogyassza el, öntse bele az agyába bármilyen módon.
2. Frank Chimero Eltekintve attól, hogy általában teljesen lenyűgöző, Frank Chimero tervező személyes honlapjának közelmúltbeli átalakítása remek függőleges ritmust mutat. Parallaxis effektust használ, hogy elősegítse a ritmus hazafelé vezetését, miközben Ön is lefelé görgeti az oldalt.
3. Dan Cederholm A nagy tipográfiai vertikális ritmus jó példájához nézze meg Dan Cederholm blogját. A másolat és a címsorok magassága tökéletes arányban van.
4. Fókuszlabor A Focus Lab web design és márkanév cég ügyesen használja a hierarchiát, hogy kommunikálja a látogató számára legfontosabbakat.
5. Typofonderie A Typography Studio Typofonderie webhelyének vertikális ritmusa van a képekkel és a szöveggel. Az elemek közötti távolság arányos az egész weboldalon, és a fő kép és a másodlagos képek / szakaszok közötti hierarchia tökéletes.
Fedezze fel a kísérleti tervezés 10 csodálatos példáját a Creative Bloq-nál.
