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.

http://www.thedesigncubicle.com/

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.

http://theswishlife.com/

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.

http://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.

http://eventures.ie/

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

http://www.bottlerocketcreative.com/

http://www.questionablecharacters.com/

http://37signals.com/

http://galp.in/

http://eventures.ie/

http://www.dannykeane.co.uk/

http://www.vinceangeloni.com/

http://savvybelfast.com/

http://finaleyes.org/

http://design-swap.com/

http://www.awesomejs.com/

http://www.brandclay.com/

14 Kommentare

  1. KChristoph
    18. Oktober 2010 um 07:31 Uhr

    Danke.
    Ich werde die Inspirationen, nicht alle, mitnehmen, nicht nur in’s „Web“, auch direkt hinein in’s greifbare Leben …

  2. Marius
    18. Oktober 2010 um 11:15 Uhr

    Sehr interessant. Schön geschrieben und nicht zu viel Text – angenehm!

  3. Chrissy
    18. Oktober 2010 um 17:59 Uhr

    Für Kurze Texte geht Zentrierung sicherlich 🙂 Aber für Lange ist es echt nicht zu gebrauchen.
    Hübsche Zusammenstellung und guter Beitrag übrigens.

  4. Bärbel Loy
    18. Oktober 2010 um 18:37 Uhr

    Guter Artikel – gut und verständlich erklärend beschrieben.

  5. Webdesign Olpe
    19. Oktober 2010 um 14:36 Uhr

    Sieht echt schick aus mit den zentrierten Elementen. Wir sind auch Freunde der Zentrierung. Mittig sieht immer gut aus. Manche Kunden wollen es halt nicht.

    Super Beitrag, danke! Vor allem die Beispieldesigns sind stimmig.

  6. Martin
    20. Oktober 2010 um 08:55 Uhr

    Lustig, diese Entwicklung beobachte ich zunehmend gerade in der Bloggosphäre. Ich glaube ich habe einen der wenigen Blogs der sich dagegen noch ein wenig sträubt obwohl es natürlich sehr gut aussieht.

    Ich denke es ist ein Trend der seine Anhänger hat aber auch irgendwann wieder verfliegen wird.

    Gruß
    Martin

  7. Lennart Prange
    20. Oktober 2010 um 11:42 Uhr

    Vielen Dank für euer Feedback 🙂

  8. viseto
    20. Oktober 2010 um 17:29 Uhr

    Finde die Zetrierung von Objekten für eine tolle Idee. Macht bespielesweise die Internationalisierung von Seiten viel einfacher. Auch Elemente die von rechts nach links gelesen werden (z.b. bei Arbabisch-Übersetzungen), können so designtechnisch an ihrem Platz bleiben.

  9. Software-Webblog
    22. Oktober 2010 um 14:36 Uhr

    Zentrierung von Objekten vereinfacht die Verteilung von Informationen und ist es auch Benutzerfreudlich. Wir entwickeln unsere Projekte nach diesem Prinzip und auch der sogennante S theorie damit haben user von Online-Shops keine Probleme die Warenkorb zu finden, ist das nicht Genial

  10. DIMCO Webdesign
    26. Oktober 2010 um 16:33 Uhr

    Toller Artikel.
    Und auf jeden Fall gute Inspirationen, wovon ich sicher einige mitnehmen werde.

  11. Michael
    29. Oktober 2010 um 16:33 Uhr

    Ja, ein toller Artikel und super Inputs – vielen Dank!

Trackbacks/Pingbacks