Trend – Zentrierte Elemente auf Webseiten: Beispiele und Tipps

Worauf muss man bei zentrierten Elementen besonders achten? Dieser Artikel liefert viele Tipps und massig Inspiration zum Thema.

• von Lennart Prange

Es kommt mal wieder etwas Leben in die Bude! Momentan sehe ich immer mehr Webseiten, die mit zentrierten Elementen arbeiten und damit den Grundsatz “Klare Kanten gehören zu einem guten Design” ignorieren (ist das überhaupt ein Grundsatz? Ich habe es jedenfalls häufig gelesen).

Wenn man mit zentrierten Elementen richtig umgeht, kann man wirklich schöne Webseiten erstellen und ein bisschen mehr Vielfalt schadet ja nie. Ich bin jedenfalls froh über dieses “neue” Gestaltungselement. In diesem Beitrag habe ich mal Beispiele zusammengestellt, die sehr deutlich zeigen, was ich meine und euch sicherlich inspirieren werden. Vielleicht sehen wir in nächster Zeit ja mehr Designs, die zentrierte Elemente nutzen.

Neben den Beispielen habe ich natürlich auch wieder einige Tipps zusammengetragen. Viel Spaß damit.

Tipps

Der Großteil der Informationen, die wir im Web konsumieren, liegt in Textform vor. Wenn ich also von zentrierten Elementen reden, meine ich damit auch zentrierten Text und hier stoßen wir sofort auf ein massives Problem: Zentrierter Text ist eine Katastrophe. Schon mal ein Magazin gesehen, in dem der Fließtext zentriert war? Bestimmt nicht. Denn das ist einfach nicht lesbar.

Das Auge muss ständig nach dem Zeilenanfang suchen und findet keinen Halt an der linken Seite. Das macht das schnelle, effektive Lesen von Texten eigentlich unmöglich. Je länger der Text wird, umso nerviger und anstrengender wird es auch für den Leser. Ich halte zentrierten Text ab 5 Zeilen für unzumutbar. Aber das ist nur eine persönliche Einschätzung. Eine naheliegende Idee ist natürlich beispielsweise Überschriften oder Einleitungen zu zentrieren und den Fließtext dann linksbündig darzustellen. Damit schafft man durch Abwechslung ein interessanteres Layout. Allerdings wirkt diese Kombination meistens nicht harmonisch.

Das Ergebnis ist keine Katastrophe, wirklich ansehnlich ist es aber auch nicht. Durch kleine Tricks kann man aber etwas nachhelfen.

Beim Designcubicle wurde die Überschrift clever vom Text getrennt.  So sieht es insgesamt etwas besser aus. Das ist nicht immer ratsam, denn der Leser könnte die Überschrift durch einen Trennstrich falsch zuordnen. In diesem Fall ist das Risiko aber minimal: Der Trennstrich ist an den Seiten verkürzt worden, über der Überschrift steht der Autorennamen und darunter ist der Fließtext. Verwechselungen sind ausgeschlossen.

Brian Hoff ist aber wirklich ein sehr guter Webdesigner und weiß, was er tut. Stellt euch zum Beispiel vor, die kleinen, zentrierten Überschriften bei the Swish Life wären durch einen Trennstrich vom dazugehörigen Content getrennt worden.

Das würde wahrscheinlich in reiner Verwirrung enden, da die verschiedenen Inhalte hier bereits durch Striche getrennt werden. Natürlich geht es trotzdem, das sieht man, wenn man ein bisschen nach unten scrollt. Toll sieht es meiner Meinung nach aber nicht aus.

Insgesamt ist the Swish Life sicherlich streitbar, denn die Verwendung von zentriertem und linksbündigem Text wirkt etwas willkürlich. Dafür ist hier aber Abwechslung angesagt. Mir gefällt die Seite ganz gut.

Sehr schön gelingt die harmonische Verbindung zweier verschiedener Ausrichtungen in einem Element bei colly.com.

Die Bilder ersetzen hier einen Trennstrich und machen das Gesamtbild sehr angenehm. Die Vermischung der Ausrichtungen stört nicht.

Nun, es gibt meistens nicht nur einen Beitrag/einen Artikel/ein Textelement auf Webseiten. Man sollte innerhalb eines Elements vorsichtig mit der Änderung von Ausrichtungen sein, aber man kann natürlich verschiedenen Elementen auch verschiedene Ausrichtungen zuordnen. Das macht zum Beispiels eventures.

Sehr wichtig und für die meisten von euch sicherlich selbstverständlich ist das Prinzip der Gleichheit: Wenn ich 3 Inhaltsboxen unter dem Titel “Aktuelle Beiträge” habe, sollten sie alle das gleiche Layout haben.

Wenn darunter jetzt zum Beispiel “Über mich” und “Archiv” kommt, können diese Elemente wieder linksbündig ausgerichtet werden.

Als letztes möchte ich noch hinzufügen, dass zentrierte Elemente zwar sehr harmonisch und perfekt wirken, gleichzeitig aber auch sehr langweilig sein können. Außerdem kann das Fehlen von klaren Kanten auch wirklich schlecht aussehen und alles sehr schwammig wirken lassen. Ich rate daher davon ab, zentrierte Elemente exzessiv zu verwenden. Ausgewählte und durchdachte Verwendungen können aber wirklich klasse aussehen und für angenehme Abwechslung sorgen.

Beispiele

14 Kommentare