Worauf muss man bei zentrierten Elementen besonders achten? Dieser Artikel liefert viele Tipps und massig Inspiration zum Thema.
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.
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.
KChristoph
18. Oktober 2010 um 07:31 UhrDanke.
Ich werde die Inspirationen, nicht alle, mitnehmen, nicht nur in’s “Web”, auch direkt hinein in’s greifbare Leben …
Marius
18. Oktober 2010 um 11:15 UhrSehr interessant. Schön geschrieben und nicht zu viel Text – angenehm!
Chrissy
18. Oktober 2010 um 17:59 UhrFür Kurze Texte geht Zentrierung sicherlich 🙂 Aber für Lange ist es echt nicht zu gebrauchen.
Hübsche Zusammenstellung und guter Beitrag übrigens.
Bärbel Loy
18. Oktober 2010 um 18:37 UhrGuter Artikel – gut und verständlich erklärend beschrieben.
Webdesign Olpe
19. Oktober 2010 um 14:36 UhrSieht 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.
Martin
20. Oktober 2010 um 08:55 UhrLustig, 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
Lennart Prange
20. Oktober 2010 um 11:42 UhrVielen Dank für euer Feedback 🙂
viseto
20. Oktober 2010 um 17:29 UhrFinde 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.
Software-Webblog
22. Oktober 2010 um 14:36 UhrZentrierung 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
DIMCO Webdesign
26. Oktober 2010 um 16:33 UhrToller Artikel.
Und auf jeden Fall gute Inspirationen, wovon ich sicher einige mitnehmen werde.
Michael
29. Oktober 2010 um 16:33 UhrJa, ein toller Artikel und super Inputs – vielen Dank!