Die Elemente eines effektiven Website-Layouts - 99designs (2024)

Eigentlich sind effektive Website-Layouts nichts weiter als Puzzles, die aus vielen kleinen Teilen sorgfältig zusammengefügt sind. Mit den richtigen Elementen kannst du eine Website erstellen, die Conversions ankurbelt, eine Bindung zu deiner Zielgruppe aufbaut und deine Marke zu neuen Höhenflüge antreibt. Wähle die falschen Elemente oder setze sie falsch zusammen und schon kann deine Seite nicht mehr das, was sie können muss. Betrachten wir also die Bausteine, aus denen tolle Website-Layouts bestehen. Denn wenn du sie richtig zusammensetzt, können sich die Einzelteile deiner Website zu etwas Großartigem zusammenfügen.

Beginne mit den Grundbausteinen
—

Dein Layout ist die Struktur deiner Website. Und abhängig von der Art deines Unternehmens und deiner Inhalte funktionieren unterschiedliche Layouts für unterschiedliche Zwecke besser. Kombiniere die Elemente dieser Layouts basierend darauf, was zu dir und deinen Inhalten passt.

Das Featured Image

Wenn dein Unternehmen, deine Organisation oder dein Projekt nicht viele Bilder zu bieten hat, sollte Layout mit Featured Image(Titelbild) genau das Richtige für dich sein. Dieses Layout lenkt die Aufmerksamkeit auf ein Bild oder eine Grafik (das Featured Image… was sonst) während es den Rest der Seite schlicht und auf den Text fokussiert hält. Dies passt sehr gut zu Webseiten mit weniger Bildern und mehr Inhalt.

Das Gitter

Stell dir das Gitter-Layout als erweiterte Version des Featured-Image-Layouts vor. Dieses Layout hat einen großen Bereich für eine Grafik, gefolgt von einem Bereich, der in mehrere Blöcke unterschiedlicher Formen und Größen unterteilt ist. Du kannst dort jede erdenkliche Art von Content einfügen – Produktbilder, Textfelder, Blogartikel, wonach auch immer dir ist. Dieses Layout funktioniert super, wenn viele Inhalte dargestellt werden müssen.

Das Power-Gitter

Das Power-Gitter ist das Gitter-Layout auf Steroiden. Es beinhaltet verschiedene Quadrate, Rechtecke und freie Bereich innerhalb des Gitters. Dieses Layout ist eine großartige Lösung, wenn du zig verschiedene Arten von Content hast (Video, Text, Opt-in-Formulare, Bilder…), die du unterbringen musst.

Fixed Sidebar

In allen vorangegangenen Layouts findet sich die Navigationsleiste normalerweise im oberen Bereich der Seite. Beim Fixed-Sidebar-Layout findest du sie in der Seitenleiste, zusammen mit zusätzlichem Inhalt. Platziere die Seitenleiste auf der linken oder rechten Seite – beides funktioniert – und nutze Elemente von anderen Layouts, um die Seite abzurunden.

Ein Fixed-Sidebar-Layout präsentiert deine Navigationsleiste immer deutlich, unabhängig davon, wo auf der Seite ein Besucher sich gerade befindet. Das macht es super einfach, sich von Seite zu Seite zu bewegen. Wenn du eine besonders knifflige Website hast, mit mehreren verschiedenen Seiten, dann solltest du solch ein Layout in Erwägung ziehen.

Wann du die Layout-Elemente anwenden solltest

Du kannst keine Website ohne Layout haben. Aber du musst sie nicht alle verwenden. Kombiniere sie miteinander, um etwas zu gestalten, das für dich funktioniert.

Wo du die Layout-Elemente anwenden solltest

Nutze ein Template, um das Layout zu bekommen, nach dem du suchst. Oder, wenn du es individueller willst, lasse deinen Webdesigner etwas von Grund auf Neues erstellen.

Responsives Webdesign

In der heutigen Zeit betrachten immer weniger Menschen deine Website auf dem Computer.

2016 überstieg die Zahl der mobilen Nutzer erstmals die Zahl der Desktop-User. Das bedeutet: wenn du ein hochwertiges Erlebnis bieten willst, musst du sicherstellen, dass deine Website auf einem iPhone genauso toll aussieht, wie auf einem MacBook. Und wie machst du das? Mit Responsive Webdesign.

Wann du es anwenden solltest

Jede Website-Plattform hat responsive Themes und jeder Webdesigner, der sein Geld wert ist, kann dir eine responsive Website erstellen. Wenn er sagt, dass er das nicht kann, arbeitest du mit der falschen Person zusammen.

Wo du es anwenden solltest

Die Responsivität deiner Website hat mit dem Code zu tun, daher wird er entweder automatisch im Code deines Themes implementiert oder manuell von deinem Webdesigner. Bevor du die Seite veröffentlichst, solltest du dich durch Testen vergewissern, dass sie in verschiedenen Browsern und Geräten funktioniert. So stellst du sicher, dass deine Zielgruppe eine großartige Nutzererfahrung hat, egal wie und wo sie deine Seite betrachten.

Erweitere deine Elemente
—

Mit deinem vorhandenen Grundgerüst ist es nun an der Zeit, jeden Layout-Block mit tollem Inhalt zu füllen. Jede Website beinhaltet einen Mix aus den folgenden Arten von Inhalten.

Navigationsleiste

Wäre deine Website ein Land, dann wäre deine Navigationsleiste die Landkarte – daher das Wort „Navigation“. Nutze dieses Element, um deiner Zielgruppe zu zeigen, wohin sie gehen können und wie deine Inhalte organisiert sind. Wenn sie sich verlaufen, sollte deine Navigationsleiste ihnen den richtigen Weg zeigen.

Wann du sie anwenden solltest

Du brauchst auf 100% der Seiten eine Navigationsleiste – wortwörtlich auf jeder einzelnen. Denn wenn Nutzer nicht wissen, wo deine Inhalte zu finden sind, ist deine Website im Grunde nutzlos.

Wo du sie platzieren solltest

Zwei Orte funktionieren wirklich gut für die Navigationsleiste: der obere Bereich deiner Seite oder die linke Seitenleiste. Typische Navigationsleisten finden sich am oberen Rand der Seite, aber wenn du viele Seiten hast, ziehe die linke Seitenleiste in Betracht, da es vertikal mehr Platz für Kategorien gibt als horizontal.

Bilder

Kein Website-Layout wäre komplett ohne gut platzierte Bilder, welche vielen verschiedenen Zwecke dienen.

• Bilder können die Ideen deiner Texte veranschaulichen.
• Fotos können eine emotionale Bindung zu deiner Zielgruppe aufbauen.
• Portraits stellen dich oder dein Team deiner Zielgruppe vor (lächeln!).
• Bildmaterial kann ein optischer Hingucker sein.
• Illustrationen verstärken dein Branding.
• Grafiken können Aufmerksamkeit auf die wichtigsten Elemente deiner Website lenken.

Wann du sie anwenden solltest

Wenn es um Bilder geht, wende das Prinzip aus „Goldlöckchen und die drei Bären“ an: nicht zu viel, nicht zu wenig, sondern genau richtig. Nutze genügend Bilder, um die Seite visuell interessant zu gestalten, aber übertreibe es nicht. Zu viele Bilder oder solche, die keinen Sinn ergeben, werden deinem Inhalt schaden, statt ihm Mehrwert zu verleihen.

Wo du sie anwenden solltest

Es gibt unendlich viele Orte, an denen du auf deiner Website Bilder zeigen kannst:

• Featured Images (Titelbilder) für Blogartikel
• Bildergalerien
• Autoren/Biografie-Bilder
• Kopfzeilen-Bilder
• Produkt-Seiten

Um zu entscheiden, wo du deine Bilder platzieren willst, versuche den Prozess in umgekehrter Reihenfolge anzugehen. Was willst du mit den Bildern erreichen? Sobald du das weißt, wirst du ein besseres Gespür dafür haben, wo ein Bild hingehört. Wenn du beispielsweise willst, dass Leute deinen Blogartikel lesen, würde es Sinn machen, ein fesselndes Foto oder eine Grafik als Titelbild zu verwenden.

Typografie

Egal, wie visuell dein Unternehmen sein mag, man kann keine Website ohne Text haben. Punkt.

Der Text ist ein essenzielles Element deiner Website, das unbedingt stimmen muss. Indem du typografische Hierarchien richtig einsetzt, kannst du Aufmerksamkeit auf wichtige Botschaften lenken, deinen Inhalt lesbarer machen und deine Leser ansprechen.

Hier sind die Grundregeln, nach denen du vorgehen solltest, um einen großartigen Text zu erhalten:

• Vermeide es, zu viele Schriftarten zu verwenden.Eine wirkt super. Zwei sind gut. Mehr als zwei und deine Leser bekommen Kopfschmerzen.
• Mache sie groß genug, um sie lesen zu können. Rate mal was passiert, wenn Besucher die Augen zusammenkneifen müssen, um den Text deines Blogartikels zu erkennen. Sie werden ihn nicht lesen. Für normalen Text ist Größe 12-14 eine sichere Sache.
• Deine Schrift muss zu deiner Marke passen. Wenn du ein knallhartes Aktivsport-Unternehmen hast, ist Comic Sans wahrscheinlich nicht die richtige Wahl. Um genau zu sein, egal was für ein Unternehmen du hast, lass die Finger von Comic Sans. Igitt!
• Vermeide große Textblöcke. Sie sind visuell überfordernd und das Design-Äquivalent zu einem „Bitte nicht lesen“-Schild, das über deinem Text hängt.

Dein Text muss auch richtig angeordnet sein. Wende verschiedene Textstile und Größen an, um mehr Aufmerksamkeit auf die wichtigsten Teile deines Textes zu lenken. Es gibt drei Hauptgrößen, die du nutzen solltest:

• Header (Überschriften): Header signalisieren die größten Bereiche mit Titeln, um die Aufmerksamkeit deiner Leser zu erregen und sie wissen zu lassen, worum es in deinem Text geht.
• Subheader (Zwischenüberschriften): Subheader markieren kleinere Bereiche, um die gesamte Seite überschaubarer für den Leser zu machen.
• Textkörper: Alles andere von deinem Inhalt ist der Textkörper oder Fließtext. Er macht die Masse deines Textes aus.

Wann du Text anwenden solltest

Immer. Es gibt keinen Fall, in dem du keinen Text auf deiner Website benötigst.

Wo du Text anwenden solltest

Überall. Jede einzelne Seite und jeder Bereich deiner Website sollte lesbaren Text haben, der eine klare Hierarchie hat.

Farbe

Genauso wie Smarties, M&Ms und Skittles, braucht auch deine Website Farbe. Farbe ist ein extrem wirkungsvolles Design-Tool und kann, wenn sie richtig genutzt wird, dabei helfen, deine Zielgruppe zu beeinflussen und handfeste Resultate zu erzielen. Mehr dazu, wie man Farbe verwendet, findest du in unserem tollen Artikel über Farbpsychologieim Webdesign.

Wann du sie anwenden solltest

Du solltest vom ersten Tag an eine feste Farbpalette für deine Marke haben. Nutze diese Farben, um deiner Website eine Markenidentität zu geben und die Ergebnisse zu erzielen, die du dir vorstellst.

Wo du sie anwenden solltest

Überall, aber übertreibe es nicht. Belasse deine Farbpalette bei drei Farben oder weniger. Mehr als drei und es sieht aus, als hätte sich eine Tüte Gummibärchen auf deiner Website übergeben. Und vergiss nicht, dass das Fehlen von Farbe manchmal genauso wirkungsvoll ist. Weißraum ist ein effektives Tool, um verschiedene Bereiche deiner Website visuell voneinander zu trennen und Aufmerksamkeit auf wichtige Botschaften, Bilder oder CTAs zu lenken.

Fußzeile

Die meisten Leute stellen sich die Fußzeile als eine Art Nachsatz vor, aber sie ist tatsächlich ein wirklich wichtiger Teil deiner Website. Zu den Dingen, die in der Fußzeile hervorgehoben werden, gehören:

• Links zu den wichtigsten Seiten deiner Navigation, wie „Über uns“ oder „Kontakt“
• Wichtige rechtliche Hinweise, wie deine Datenschutzerklärung oder Geschäftsbedingungen
• Adresse, Telefonnummer und ein Google Maps-Link zu deinem Büro
• Social Media Buttons

Wann du sie anwenden solltest

Jede Website braucht eine Fußzeile. Sie ist nicht nur der Ort für wichtige Informationen, sie ist auch ein visueller Hinweis darauf, dass dies das Ende deiner Website ist.

Wo du sie anwenden solltest

Am unteren Ende der Seite… du weißt schon, im Bereich der Fußzeile.

Lasse deinen Inhalt für dich arbeiten
—

Mit dem richtigen Inhalt am richtigen Ort, hast du nun die Gelegenheit deine Zielgruppe anzusprechen. Bringe sie dazu, zu klicken, zu liken und mit deiner Seite zu interagieren.

Call-to-Action

Keine Website wäre ohne einen Call-to-Action (CTA) komplett. Der CTA deiner Website ist deine Gelegenheit, die Ergebnisse einzufahren, die du dir wünscht, indem du deiner Zielgruppe genau sagst, was sie tun soll.

Es gibt 8 verschiedene Arten von CTAs, die du auf deiner Website einbinden kannst:

• Lead Generation: „Gib mir deine E-Mail-Adresse und ich gebe dir im Gegenzug etwas“
• Formulare: „Fülle dieses Formular aus und ich gebe dir im Gegenzug etwas.“
• Erfahre mehr: „Klicke hier, um mehr zu erfahren.“
• Produkt oder Service-Erkundung: „Lerne mehr darüber, was wir machen, indem du hier klickst.“
• Social Sharing: „Dir gefällt dieser Inhalt? Teile ihn mit deinen Freunden!“
• Lead Nurturing: „Du bist bereits interessiert, aber ich mache es mit diesem Angebot noch interessanter…“
• Kaufabschluss: „Kaufe jetzt!“
• Event Promotion: „Registriere dich hier.“

Welche CTAs du benutzt, hängt ganz davon ab, worauf du aus bist. Und habe nicht das Gefühl, du müsstest dich auf einen beschränken. Es ist vollkommen in Ordnung, mehrere CTAs auf deiner Website zu kombinieren, um die Wirkung zu maximieren. Sie alle sollten ein paar Dinge gemeinsam haben:

• Errege Aufmerksamkeit. Die Nutzer deiner Seite zu Handlungen zu bewegen, ist eine der wichtigsten Funktionen auf deiner Website. Stelle sicher, dass deine Botschaft leicht zu finden ist und sofort die Aufmerksamkeit des Besuchers auf sich zieht.
• Sei deutlich. Wenn deine Zielgruppe erraten muss, was du von ihnen willst, wird dein CTA scheitern.
• Mach es einfach. Zwinge deine Zielgruppe nicht, sich zu verbiegen, einen Button zu klicken, 30 Formulare auszufüllen, eine E-Mail zu beantworten und dir ihr Erstgeborenes zu überlassen, um erfolgreich dein CTA abzuschließen. Je mehr Schritte involviert sind, umso mehr Leute wirst du verlieren.

Wann du es anwenden solltest

Immer wenn deine Zielgruppe tätig werden und etwas tun soll.

Wo du es anwenden solltest

Überlege, ein CTA zu deiner Verkaufsseite hinzuzufügen. Oder am Ende eines Blogposts. Oder in deiner Seitenleiste. Oder in einem Pop-up. Die Liste geht noch weiter. Teste verschiedene Orte, um zu sehen, welcher am besten funktioniert und dir die höchsten Conversion Rates gibt.

Pop-ups

Oh, Pop-ups. Betrachte sie als das nervige-kleine-Schwester-Element deiner Website. Sie gehen sicher einigen Leuten auf die Nerven, aber sie sind vielleicht perfekt für dich.

Pop-ups sind ein fantastisches Tool, um Leads einzufangen und deinen E-Mail-Verteiler aufzubauen. Und seien wir ehrlich, das ist so ziemlich das mächtigste Marketing-Tool, das man im Unternehmen haben kann. Diese kleinen Dinger gibt es in verschiedenen Varianten:

• Zeitlich festgelegte Pop-ups: Erscheinen in einem bestimmten Intervall.
• Klick-Pop-ups: Erscheinen, wenn ein Besucher einen bestimmten Bereich deiner Seite anklickt.
• Scroll-Pop-ups: Erscheinen nachdem ein Besucher an einem bestimmten Punkt der Seite vorbeigescrollt hat.
• Entry-Pop-ups: Erscheinen sobald deine Website lädt.
• Exit-Pop-ups: Erscheinen, wenn jemand deine Website verlassen will.

Jede Art ist auf verschiedene Weise wirkungsvoll und das Pop-up deiner Wahl, hängt von deiner Botschaft und deinen Zielen ab. Wenn dein Pop-up sagt: „Warte! Bevor du gehst, melde dich für den E-Mail-Verteiler an, um exklusive Angebote zu erhalten!“, dann solltest du ein Exit-Pop-up verwenden.

Wann du es anwenden solltest

So wendest du Pop-ups erfolgreich an, um E-Mail-Adressen zu sammeln: Übertreibe es nicht. Wenn alle zehn Sekunden von irgendwoher ein Pop-up auftaucht, wird deine Zielgruppe frustriert sein und schnell verschwinden. Je unaufdringlicher du sein kannst, umso besser.

Wo du es anwenden solltest

Deine Pop-ups können aus verschiedenen Richtungen kommen:

• Ein Pop-up, das den ganzen Bildschirm einnimmt
• Ein Pop-up, das über der Mitte der Seite erscheint
• Ein Pop-up, das sich von außerhalb des Bildschirms einschiebt

Experimentiere, um zu sehen, welcher Stil und Ort am besten bei deiner Zielgruppe und mit deiner Botschaft funktioniert.

Leg los und erstelle großartige Website-Layouts!
—

Mit diesen Elementen steht dir alles zur Verfügung, was du benötigst, um die Website deiner Träume zu kreieren. Nun mach dich an die Arbeit und fange an sie zu erstellen!