Inhalt
Dieser Artikel erschien erstmals in Ausgabe 229 des .net-Magazins - dem weltweit meistverkauften Magazin für Webdesigner und -entwickler.
Eines der wichtigsten Dinge, auf die Sie sich beim Layout einer Seite in HTML / CSS konzentrieren können, ist der vertikale Rhythmus - das visuelle Muster, in das sich die Typblöcke oder Typzeilen beim Scannen der Seite bilden.
Andere Dinge können diesen Rhythmus beeinflussen, wie Überschriften, Listenelemente, Bilder usw. Ein guter vertikaler Rhythmus ist von größter Bedeutung, da er die Lesbarkeit und Scanfähigkeit Ihrer Seite (n) verbessert.
Es gibt einige großartige Tutorials (siehe hier und hier zum Beispiel) im Internet, in denen Sie erfahren, wie Sie technisch den richtigen vertikalen Rhythmus erreichen, indem Sie ems für Ihre Zeilenhöhe verwenden und lernen, wie Sie Ihren Typ "in Phase" halten. meint.
Hierarchie
Die grundlegenden Dinge, auf die Sie besonders achten sollten, sind die Zeilenhöhe zwischen den Elementen und die gesamte visuelle Hierarchie auf der Seite. Das Einstellen der richtigen Proportionen für die Linienhöhe kann eine aufwändige Entwurfsübung sein, die jedoch beherrscht werden muss. Hierarchie ist auch insofern wichtig, als die Bilder und Textelemente optisch miteinander harmonieren sollten - die wichtigsten Dinge sind im Allgemeinen größer und stehen auf der Seite an erster Stelle.
Druckdesigner beschäftigen sich seit vielen Jahren mit der Idee des vertikalen Rhythmus, und erst in der jüngeren Vergangenheit mussten sich Webdesigner wirklich mit diesem Thema befassen. Angesichts der ständig wachsenden Notwendigkeit, Websites mithilfe von Rasterlayouts zu erstellen und auf reaktionsschnelle Implementierungen zu achten, um mehrere Bildschirmbreiten zu berücksichtigen, ist dies aus Sicht des visuellen Designs heute wichtiger als je zuvor, wahrscheinlich mehr als nur aus technischer Sicht.
Fünf Beispiele zum Auschecken
1. Die Elemente des typografischen Stils Dieses Buch von Robert Bringhurst ist der Standard für Typografiestudien. Lesen Sie es, konsumieren Sie es, gießen Sie es auf jede erdenkliche Weise in Ihr Gehirn.
2. Frank Chimero Abgesehen davon, dass die persönliche Neugestaltung der persönlichen Website von Designer Frank Chimero im Allgemeinen absolut erstaunlich ist, weist sie einen hervorragenden vertikalen Rhythmus auf. Er verwendet einen Parallaxeeffekt, um den Rhythmus nach Hause zu bringen, während Sie auch die Seite nach unten scrollen.
3. Dan Cederholm Ein gutes Beispiel für einen großartigen typografischen vertikalen Rhythmus finden Sie in Dan Cederholms Blog. Die Zeilenhöhe der Kopie und der Überschriften ist in perfektem Verhältnis.
4. Fokuslabor Die Webdesign- und Markenfirma Focus Lab verwendet geschickt Hierarchien, um dem Besucher zu vermitteln, was am wichtigsten ist.
5. Typofonderie Die Website für das Typography Studio Typofonderie hat einen großartigen vertikalen Rhythmus mit Bildern und Text. Der Abstand zwischen den Elementen ist auf der gesamten Website proportional und die Hierarchie zwischen dem Hauptbild und den Nebenbildern / -abschnitten ist perfekt.
Entdecken Sie 10 erstaunliche Beispiele für experimentelles Design bei Creative Bloq.
