Im Webdesign kommt alles auf die Präsentation an. Natürlich spielt auch die Qualität deines Contents eine Rolle, aber Kunden und Kundinnen werden deine Artikel, Produkte oder perfekt geschriebenen Service-Seiten nicht zu schätzen wissen, wenn sie als Erstes Chaos auf deiner Website sehen. Die Art und Weise, wie du deine Webseiten strukturierst, macht einen großen Unterschied aus; und manche Website-Layouts funktionieren besser als andere.
Die besten Guidelines für Website-Layouts unterscheiden sich je nach Branche, Branding und technischen Möglichkeiten; es kann schwierig sein, das richtige Layout für dich zu finden. Daher haben wir für dich die 5 häufigsten und wirkungsvollsten Website-Layouts zusammengetragen, mit Beispielen und Profi-Tipps, um dir dabei zu helfen, dich richtig zu präsentieren.
1. Stelle einen Aspekt in den Mittelpunkt
—
Empfohlen für:
- Landingpages, bei denen es um einen einzelnen, wichtigen Call-to-Action geht
- Homepages, die sich auf ein einzelnes Bild oder einen einzelnen Call-to-Action konzentrieren
- radiale, kreisrunde oder spiralförmige Muster
Unsere ersten Layout-Guidelines sind für einfache Seiten gedacht, die über einen bestimmten Teil verfügen, der die komplette Aufmerksamkeit erfordert. Alle anderen Elemente auf der Seite werden so positioniert, dass sie ein Hauptelement in den Fokus rücken; sei es ein Call-to-Action (CTA), um sich etwa für einen Newsletter anzumelden, oder ein Bild wie beispielsweise ein Logo oder ein Produktfoto.
Diese Art von Website-Layout ist typisch für Homepages und Landingpages – das Erste, was man sieht, ist die vorgeschlagene Aktion oder ein hervorgehobenes Bild, wobei alles andere (einschließlich Navigationsmenüs) nebensächlich ist. Im Design von Visuable Ltd für Angela Gorrell (siehe oben) steht „Latest Lectures” im Mittelpunkt, aufgrund der zentralen Position und des großen Leerraums um den Button herum.
Bei diesem Stil werden Grafikdesign-Prinzipien wie Führungslinien, Komposition, die Verwendung von Leerraum und Farbkontrast verwendet, um die Aufmerksamkeit auf ein einzelnes Element zu richten. Er eignet sich perfekt für Seiten, deren einziges Ziel darin besteht, die Conversions zu steigern. Alle sekundären Elemente, wie etwa zusätzlicher Text, werden so platziert, dass der Fokus auf dem Hauptelement liegt.
Das Design von Limuntus für BedroomVillas (siehe oben) ermuntert die User beispielsweise dazu, direkt ihr gewünschtes Reiseziel sowie die Daten einzugeben, und lockt sie mit einer entspannten Optik auf ihre Seite. Durch das auffällig platzierte Formular motiviert auch das Design von Ananya Roy für Copper Compass die User dazu, sich direkt anzumelden.
Beide Website-Layouts setzen auf eine ähnliche Strategie: Das wichtigste Element wird durch einen eingerahmten Hintergrund in einer kontrastierenden Farbe hervorgehoben. Der primäre CTA-Button wird ebenfalls durch eine kräftige, Aufmerksamkeit erregende Farbe wie beispielsweise Dunkelblau hervorgehoben, um sich vom helleren Orange abzuheben.
Dieser Layout-Stil eignet sich auch gut für radiale, kreisrunde oder spiralförmige Muster. In diesem Fall kannst du deine sekundären Seitenelemente um ein primäres Element wie beispielsweise ein Logo oder ein Bild herum anordnen. Schau dir an, wie Wikipedia die verschiedenen Sprachen um das Logo herum anordnet, während gleichzeitig die Aufmerksamkeit auf die Suchleiste, dem wichtigsten CTA, gelenkt wird.
2. Hebe mehrere Optionen durch ein strukturiertes Raster hervor
—
Empfohlen für:
- Produktkataloge für Onlineshops
- große Content-Galerien wie Artikel, Blogs oder Arbeitsproben
Das Spotlight-Layout funktioniert hervorragend, wenn du nur eine Sache bewirbst. Doch was, wenn du viele Dinge gleichzeitig bewerben möchtest? Dafür eignet sich ein strukturiertes Raster am besten: Du kannst mehrere Dinge gleichzeitig anzeigen und die User nach ihrem gewünschten Produkt suchen lassen.
Raster verwenden in der Regel ein Designelement namens „Cards”, bei denen es sich um separate Kästchen handelt, die alle notwendigen Infos enthalten. Meistens enthalten diese Cards ein interessantes Bild oder eine Überschrift und manchmal eine kurze Beschreibung.
Darüber hinaus eignen sich Layouts mit Cards und strukturierten Rastern perfekt für responsives Design, was ihnen einen großen Vorteil für Mobilgeräte verschafft. Cards sind äußerst flexibel und lassen sich daher leicht neu anordnen, um sich unabhängig vom Gerät jeder Bildschirmgröße anzupassen, im Gegensatz zu Layouts mit festen Größen, die für jeden neuen Bildschirm in ihrer Größe verändert werden müssen.
Bei Onlineshops wie dem Design von ThyDesigns für Ninth Avenue zeigen die Cards oftmals auch den Verkaufspreis. Der Beautyshop Bliss zeigt sogar die Produktbewertung, um den Usern bei ihrer Kaufentscheidung zu helfen.
Der Nachteil an Rastern ist, dass sie ein wenig langweilig aussehen können, vor allem wenn man durch viele Cards scrollen muss. Du kannst dein Raster-Layout aber mit ein wenig Kreativität aufpeppen.
Die Konditorei Bon Bon Bon verzichtet beispielsweise komplett auf Linien, damit jede Card mit dem Hintergrund verschmilzt und so ein leichteres, freieres Gefühl entsteht. Manche Marken können auch Raster mit einem asymmetrischen Layout kreuzen (Erklärung unten), um einen ausgefalleneren und dynamischeren Look zu erzeugen.
Du musst keine E-Commerce-Seite haben, um ein Raster-Layout nutzen zu können. Schau dir nur mal die Seite unten für das Brain Wellness Institute von Smashing Boys an. Die Seite ordnet typische Seiten wie „Mission” und „Services” in einem übersichtlichen Raster an und nutzt für jeden Bereich aussagekräftige Bilder. Diese Art Layout hilft ihnen nicht nur dabei, sich von anderen kommerziellen Websites abzuheben, sondern unterstreicht auch, dass sich das Unternehmen mit geistiger Gesundheit beschäftigt.
3. Sorge mit Z-Mustern für eine bessere Lesbarkeit
—
Empfohlen für:
- Websites von Unternehmen
- Websites, die neue Ideen erklären oder vorstellen sollen
Das Z-Muster hat seinen Namen aus den Studien zur Blickerfassung aus der Anfangszeit des Webdesigns. Als man beobachtete, wie Menschen eine Website betrachteten, stellte man fest, dass die meisten User eine Zeile von links nach rechts lesen, dann nach unten schauen und dann wieder in einer neuen Zeile von links nach rechts lesen.
Bildlich dargestellt schienen ihre Augen ein Z zu zeichnen, und zwar immer wieder von der oberen zur unteren Zeile. Dieses Verhalten ahmt unsere Augenbewegung beim Lesen nach, wenn wir von links nach rechts lesen und am Ende eine Zeile nach unten gehen, um wieder von links zu beginnen.
Webdesigner und -designerinnen haben herausgefunden, dass sie sich diese natürliche Augenbewegung zunutze machen können, indem sie entsprechende Website-Layouts entwerfen. Informationen werden in einer Zeile von links nach rechts dargestellt, ehe eine kleine „Pause” zwischen den Zeilen eintritt, während die User nach unten schauen, um in einer neuen Zeile zu beginnen. Das funktioniert gut, um auf natürliche Weise Informationen in kleine, leicht verdauliche Teile zu gliedern.
Es gibt verschiedene Ansätze, um die Zeilen voneinander zu trennen, abhängig von deinem persönlichen Stil. Das Design von Denisa M. für Silex kombiniert Bilder mit Text in einer Zeile, wobei der Text immer auf einer anderen Seite steht, um die Seite dynamischer zu gestalten. Das Webdesign von KR Designs verfolgt einen ähnlichen Ansatz, wobei sich die Art der Information in jeder Zeile unterscheidet, um für interessante Bilder zu sorgen.
Alternativ kannst du jede Zeile anders nutzen und dennoch das Z-Muster beibehalten, solange die User weiterhin von links nach rechts lesen, bevor ihr Blick nach unten geht. Das Design von DSKY für Figgy & Plum trennt die Zeilen mit Hilfe verschiedener Hintergrundfarben; darüber hinaus wird der Content so immer auf eine andere Weise dargestellt. In dem Design von Mica Porto für DirectNine ist jede Zeile anders aufgebaut, um deutlich zu machen, an welcher Stelle der Umbruch erfolgt.
4. Unterstütze das Browsen mit einer einspaltigen Seite
—
Empfohlen für:
- Social Media und Foren
- lange Websites von Unternehmen
- Websites mit Listen wie Benachrichtigungen oder Nachrichten
Noch eine weit verbreitete Art des Website-Layouts sind einspaltige Seiten, die bei den meisten Social-Media-Seiten wie Twitter, Instagram und Facebook sehr beliebt sind, weil sie langes Browsen erleichtern. Wenn dir ein Content nicht gefällt, scrollst du einfach zum nächsten! Es ist ein simpler Mechanismus, der aber Wunder wirkt, da er die Menschen stundenlang beschäftigt.
Normalerweise wird der Content vertikal mit Hilfe von Cards angeordnet, wobei jeweils nur eine Card vollständig auf dem Bildschirm zu sehen ist. Das sorgt dafür, dass sich die User nur auf jeweils einen Inhalt konzentrieren, ohne dass es sie überfordert. Das macht auch responsives Design einfacher, da alle Cards dieselbe Breite haben. Daher musst du dir keine Gedanken darüber machen, welche Geräte die User nutzen.
Dieses Layout funktioniert für Social Media so gut, dass es mittlerweile von Unternehmen und kommerziellen Websites übernommen wurde. Auch wenn diese Websites keine Cards mit Posts anzeigen, unterteilen sie dennoch ihren Content in einzelne Bildschirme, die jeweils nur einzeln sichtbar sind. Das ermöglicht es Unternehmen, das zu vermitteln, was sie vermitteln möchten (wer sie sind, was sie tun, weshalb du sie brauchst) – ohne die User zu überfordern.
Die Websites TheraVape von arosto und Tu Biomics von Yagnik K. sind hervorragende Beispiele dafür, wie man dieses Layout nutzen kann. Beide unterteilen ihren Text in kleine, gut lesbare Abschnitte und trennen dann diese Abschnitte durch unterschiedliche Hintergrundfarben und Bilder voneinander. So können die User die einzelnen Punkte auf sich wirken lassen, was wiederum die Einprägsamkeit und den Wiedererkennungswert steigert.
Websites von Unternehmen können mit diesem Layout noch einen Schritt weiter gehen, indem sie jeden Inhalt mit einem visuellen Element verbinden. Matt Browns Portfolio-Seite von 2ché nutzt ein wissenschaftliches Motiv; das verbindende Bild ist ein Laborröhrchen, das an jedem Haltepunkt durch die verschiedenen Laborgeräte verläuft. Der Designer Tushar K∎ nutzt eine ähnliche Technik für die Website von 2bak und verbindet jedes Bild mit einer stilisierten Straße, inklusive Minifahrzeugen.
5. Steche mit einem asymmetrischen Layout heraus
Empfohlen für:
- ausgefallene oder innovative Marken
Zum Schluss haben wir noch ein Website-Layout, das auf Ordnung verzichtet und stattdessen auf Chaos setzt. Asymmetrie erzeugt der Definition nach eine bewusst unausgeglichene oder chaotische Atmosphäre. Dieses Website-Layout ist eine schlechte Wahl für traditionelle und förmliche Marken; doch für Marken, die ausgefallen, gegenkulturell oder ihrer Zeit voraus wirken wollen, ist es die perfekte Wahl.
Schau dir beispielsweise an, wie The New Yorker die Storys auf der Homepage anordnet. Das Magazin hat den Ruf, ein „alternatives” Mainstream-Medium zu sein (trotz seiner Beliebtheit), und daher hilft das asymmetrische Layout, die gewünschte Atmosphäre zu erzeugen.
Kleinere Unternehmen, die auffallen wollen, können sich diesen Layout-Stil ebenfalls zunutze machen. Sowohl das Design von arostofür Agency X als auch das Design von Infinityデザイナー für Si Vales Valeo nutzen dieselbe Methode – ein aussagekräftiges Hero Image im Hintergrund mit darüber gelegten, asymmetrischen Diamantmustern. Das lässt ihre Marken innovativ und modern wirken, auch wenn es konservativere User eher nicht anspricht.
Das Layout für Geo Waves von Adam Muflihun verleiht dem asymmetrischen Layout durch animierte Effekte etwas ganz Besonderes. Das statische Layout selbst ist asymmetrisch, mit einem großen Block auf der linken und zwei kleineren Blöcken auf der rechten Seite. Durch die Animationen und Bewegungseffekte an verschiedenen Stellen und zu verschiedenen Zeiten wirkt die gesamte Seite dynamischer und lebhafter. Es macht einfach Spaß, sie anzusehen – und das ist in jedem Webdesign von großem Vorteil.
Website-Layouts für andere Anforderungen
—
Es gibt nicht das beste Website-Layout. Welches das richtige ist, hängt von deinen Zielen und deinem Branding ab. Überlege, wie viel Content du darstellen musst; für kleinere Websites genügt das Spotlight oder das Z-Muster, aber wenn du viel zu sagen hast, solltest du vielleicht eher ein Raster-Layout oder ein einspaltiges Layout nutzen. Auch deine Markenpersönlichkeit sollte dein Layout mitbestimmen, ebenso wie den Stil, den du in deinem Layout verwendest.
Wenn du Schwierigkeiten hast dich zu entscheiden, sieh dich im Netz um und notiere, welche Layouts von Websites genutzt werden, die dir gefallen. Vielleicht findest du heraus, dass dir eine Art besonders gefällt – und vielleicht wird es deiner Zielgruppe genauso gehen.
Du möchtest die perfekte Website für dein Unternehmen?
Dann arbeite mit unserer talentierten Design-Community.
Los geht's!
