Content
Aquest article va aparèixer per primera vegada al número 229 de la revista .net, la revista més venuda del món per a dissenyadors i desenvolupadors de webs.
Una de les coses més importants en què us podeu centrar a l’hora d’estendre una pàgina en HTML / CSS és el ritme vertical: el patró visual que formen els blocs de tipus o les línies de tipus a mesura que escanegeu la pàgina.
Altres coses poden afectar aquest ritme, com ara encapçalaments, elements de llista, imatges, etc. Tenir un bon ritme vertical és primordial perquè ajuda a la llegibilitat i capacitat d’escaneig de les vostres pàgines.
Hi ha uns quants tutorials fantàstics (vegeu aquí i aquí, per exemple) al web on podeu trobar informació sobre com aconseguir tècnicament un ritme vertical adequat mitjançant l’ems per a la vostra alçada de línia i aprendre sobre com mantenir el vostre tipus “en fase” significa.
Jerarquia
Les coses bàsiques a les quals cal prestar molta atenció són l'alçada de línia entre els elements i la jerarquia visual general de la pàgina. Establir proporcions adequades d’alçada de línia pot ser un exercici de disseny implicat, però és important dominar-lo. La jerarquia també és important, ja que les imatges i els elements de text haurien d’estar en harmonia entre ells visualment: les coses més importants són generalment més grans i són les primeres de la pàgina.
Els dissenyadors d’impressions han tractat la idea del ritme vertical durant molts anys i només en el passat recent els dissenyadors de webs han hagut d’entrar en aquestes coses. Amb la necessitat cada vegada més gran de construir llocs web mitjançant dissenys de quadrícula i prestar atenció a les implementacions sensibles per adaptar-se a diverses amplades de pantalla, ara és més important que mai des d’una perspectiva de disseny visual, probablement més que una tècnica.
Cinc exemples per veure
1. Els elements de l’estil tipogràfic Aquest llibre de Robert Bringhurst és l’estàndard per a l’estudi de la tipografia. Llegeix-lo, consumeix-lo, aboca-ho al cervell de la manera que puguis.
2. Frank Chimero A més de ser absolutament increïble en general, el recent disseny del lloc web personal del dissenyador Frank Chimero presenta un ritme vertical excel·lent. Utilitza un efecte de paral·laxi per ajudar a conduir el ritme cap a casa mentre també desplaçeu-vos per la pàgina.
3. Dan Cederholm Per obtenir un bon exemple de gran ritme vertical tipogràfic, mireu el bloc de Dan Cederholm. L’alçada de la línia de la còpia i dels titulars està en perfecta proporció.
4. Focus Lab L’empresa Focus Lab de disseny i marca web utilitza hàbilment la jerarquia per ajudar a comunicar allò que és més important per al visitant.
5. Tipofonderie El lloc web de Typography Studio Typofonderie té un gran ritme vertical amb les seves imatges i text. L'espai entre els elements és proporcional a tot el lloc web i la jerarquia entre la imatge principal i les imatges / seccions secundàries és perfecta.
Descobriu 10 exemples sorprenents de disseny experimental a Creative Bloq.
