Gastbeitrag von Valerie Djurin und Alexander Kouba: 15 Tipps für ein erfolgreiches Webseitenlayout

Eine Webseite ist das Aushängeschild im Internet und darum sind die Gestaltung und das Layout von entscheidender Bedeutung. Zum einen muss es zeitlos und elegant sein, zum anderen soll es aber zumindest so auffällig sein, dass es den Besuchern im Gedächtnis bleibt.
 
Die allerwichtigste Grundregel dabei ist, dass die Webseite nicht dir, sondern deiner Leserschaft gefallen muss.
 
Ein Webseitenlayout, dass die Zielgruppe anspricht erhöht massiv die Verweildauer der Besucher und führt dazu, dass die Seite wieder und wieder besucht wird, als positiv empfunden wird, Inhalte besser und angenehmer aufgenommen werden und in weiterer Folge natürlich mehr Umsatz entsteht. Kurz um, ein ansprechendes Webseitenlayout hat defakto nur Vorteile.
 
Es gibt kein Richtig und kein Falsch – Du musst dich mit deiner Seite identifizieren können, aber gleichzeitig den Geschmack deiner Zielgruppe treffen.

 
Um das zu optimieren, geben wir dir hier 15 Tipps für ein erfolgreiches Webseitenlayout.
 

1. Namesfindung und Domain

Zu Beginn jeder Webseite stehen natürlich die Namensgebung und die Domain. In der heutigen Zeit sind viele Namen und Domains bereits vergriffen, besonders dann, wenn man einen gängigen Namen hat. Darum empfiehlt es sich einen möglichen Webseitennamen mit einem Analysetool auf Verfügbarkeit zu überprüfen.
 
Auf den Seiten von knowem oder namechk kannst du deinen Namen oder Wunschnamen eingeben und die Tools überprüfen alle Domains und Social Media Portale im Netz auf Verfügbarkeit. So kannst du auf den ersten Blick abschätzen, ob dein gewählter Name ideal für das Netz ist.
 
2. Einheitliche Gestaltung

webdesign
Deine Webseite muss einheitlich gestaltet sein. Das bedeutet, dass sich Schriftarten, Farbgebung, Ausrichtung und Layouts einheitlich durch die gesamte Homepage ziehen müssen. Nicht gut sind eine Startseite in voller Breite und eine Unterseite mit einer Sidebar rechts, die nächste links und auf der dritten Seite gleich zwei Sidebars. Selbiges gilt natürlich auch für die Schriftart und dessen Farbe.
 
3. Grundgerüst

Je nach Webseitenart müssen verschiedene Grundstrukturen ausgewählt werden. Zwei Dinge sind beim Grundgerüst maßgeblich: Sidebar und Menü:
 
Sidebar: Bei Bloggern ist es üblich die Sidebar rechts anzulegen. Das hat folgenden Grund: Bei Blogs sind neue Beiträge am wichtigsten. Wenn man den Blog öffnet, will man den neuesten Beitrag lesen und später gegebenenfalls im Archiv nach weiteren Artikeln suchen. Da wir von links nach rechts lesen und sehen hat sich die Methode „Blogtext links und Sidebar rechts“ durchgesetzt.
 
Bei Informationsseiten ist es anders: Ich öffne die Seite, suche zunächst in der Themenliste, klicke dann und lese dann den Text. Ergo „Sidebar mit Kategorien links und Text rechts“. Bei Shops ist es ähnlich – Die Kategoriesuche erfolgt idealerweise in der links angelegten Sidebar und dann die Produktwahl auf der rechten Seite. Wichtig bei der Wahl des Grundgerüsts ist also die Reihenfolge der Handlungen der Besucher.
 

Menü: Das Menü kann als Top-Menü (quer über die ganze Breite mit Drop-Downs) und/oder als Sidebarmenü ausgeführt sein. Wichtig ist hier: Je mehr Buttons, Dropdowns, Untermenüs, etc. zur Auswahl stehen, desto mehr ist der Besucher verwirrt, was er klicken soll. Oft ist die Menüführung so überfüllt, dass Besucher die Seite eher wieder verlassen, bevor Sie die richtige Auswahl suchen.
 

4. Themeauswahl

Steht die Struktur der Sidebar und die Menüführung fest, kann ein entsprechendes Style-Sheet (bei WordPress „Theme“) ausgewählt werden. Für den Einstieg und das Kennenlernen der Software ist ein zunächst kostenloses Standard-Theme ausreichend. Es sollte jedoch ehestmöglich nach Vertrautwerden mit der Software auf ein kostenpflichtiges Theme umgestiegen werden. Der Grund ist einfach: Jeder, der eine Webseite baut, beginnt mit den Standard-Themes. Verwendest du nun auch dieses, hebt sich deine Seite nicht von anderen Seiten ab. Kostenpflichtge Themes verwenden deutlich weniger Webseitenbetreiber und darüber hinaus haben Sie zahlreiche Umgestaltungsmöglichkeiten, sodass kaum zwei Webseiten gleich aussehen.
 
5. Farbgebung

colors
Je nach Branche oder Zielgruppe muss die Farbgebung passend sein. Grundsätzlich empfiehlt sich ein Layout, das dem Großteil aller Besucher im Netz gefallen würde. Das bedeutet: hell, freundlich, einladend, seriös. Zu vermeiden sind aggressive, grelle und durchdringende Farbtöne und ebenso knallige Farben. So erweckst du zwar Aufmerksamkeit, dennoch ist eine derartige Farbgebung für das Auge anstrengend und auch nicht zielführend.
 

6. Schriftarten

Oft gilt „Je mehr, desto besser“. Oft tummeln sich zehn verschiedene Schriftarten auf einer Internetseite. Unserer Meinung nach ist das unbedingt zu vermeiden. Eine Schriftart sollte sich durch die ganze Internetseite ziehen (Logo ausgenommen). Hier gibt es allerdings auch viele Vertreter der Ansicht, dass mehrere Schriftarten empfehlenswert sind. Wir sind gespannt, ob dazu einige Kommentare aufkommen werden.
 

7. Navigation (Menüs, etc.)

Es gilt: Je einfacher, desto besser. Wenn ein User erst suchen muss, wo sich die nötige Information befindet, ist die Struktur und damit das Thema oder der Inhalt der Webseite nicht klar erkenntlich. Gehe immer davon aus, als würdest du deine Seite von einem mobilen Endgerät aus besuchen. Wenn hier aus zahlreichen Untermenüs und –seiten ausgewählt werden muss, beginnt die Hälfte der Handys (und Nutzer) bereits zu streiken.
 

8. Berücksichtigung der Auflösung bzw. der Bildschirmgröße

Passend zu diesem Punkt spielt die Anzeige auf dem Bildschirm eine maßgebende Rolle. Beim Designen deiner Internetseite musst du überprüfen, wie deine Internetseite auf unterschiedlichen Bildschirmgrößen aussieht. Zwar sind die meisten Themes und Style-Sheets bereits responsive und damit Fit-to-Screen. Dennoch gibt es immer wieder Elemente, welche aus der Reihe tanzen und manuell adaptiert werden müssen. Überprüfen kannst du das am auf zahlreichen Plattformen im Netz.
 

9. Nicht überladen

colors (1)
Wieder gilt: Weniger ist mehr. Gehe immer davon aus, du müsstest selbst auf deiner Seite lesen. Was würde dich ansprechen? Speziell Online-Zeitungen sind massiv mit Werbe-Bannern, Pop-Ups und flimmernden Elementen überladen und ein klassisches Negativ-Beispiel für ein Webseitenlayout. Werbung muss dezent gehalten werden. Der Nutzen der Seite, darf nicht in den Hintergrund geraten. Der Leser muss sich wohlfühlen und nicht ständig ein Pop-Up wegklicken müssen um weiterzulesen.
 

10. Bildmaterial verwenden

Jeder Text kann mit Überschriften oder Absätzen optisch gut gestaltet werden. Dennoch empfiehlt es sich hin und wieder ein Bild einzustreuen. Bilder und Grafiken findest du auf den Plattformen von Pixabay, Fotolia, Shutterstock oder Creative Commons. Achte hier auf das Stichwort „Public Domain“. Bilder, die unter diesem Begriff zu finden sind, sind kostenlos und für jeden ohne Verletzung von Bildrechten verwendbar.
 

11. Texte klar und verständlich

Je mehr man mit einer Thematik vertraut ist, desto eher neigt man dazu in Fachjargon abzugleiten. Viele User verstehen diese Fremdbegriffe und komplizierten Ausdrücke allerdings nicht. Versuche daher Fachbegriffe zu vermeiden und Texte so zu formulieren, dass der Großteil Sie versteht. Ist dennoch ein Begriff unbedingt notwendig, erkläre ihn gegebenenfalls.
 

12. Storytelling betreiben

Texte wirken lebendig, wenn du Storytelling betreibst. Das bedeutet, dass du dein Thema anhand einer Geschichte erklärst, welche dir selbst passiert sein könnte. Schreibst du beispielsweise einen Artikel über drei gute Kochrezepte, beschreibe wie dir die Gerichte schmecken, bzw. wie es dir beim Kochen ergangen ist. Ist etwas im Ofen verbrannt, nicht so geworden wie es sollte, etc. Das lockert den Text auf und schafft einen persönlichen Bezug.
 

13. Newsletter anbieten

newsletter
Uns ergeht es oft so, dass wir eine wichtige Information auf einer Seite finden und später wieder abrufen möchten und den Seitennamen vergessen haben. Wir suchen und suchen, doch finden wir die Seite nicht mehr. Wie hilfreich wäre es da, wenn wir uns zuvor in einen Newsletter eingetragen hätten, der uns hin und wieder an die Seite erinnert. Ein Newsletter schafft einen laufenden Bezug und bindet die Seitenbesucher stärker an die Seite. Biete daher einen Newsletter an.
 

14. Aktualisierung von Daten

Daten müssen aktuell sein. Viele Seiten tummeln sich im Netz, bei denen viele offensichtliche Daten veraltet sind. Klassisch sind Alters- oder Zeitangaben oder auch diese zwingend erforderliche Angabe auf jeder Webseite „©2009 – Firmenname “.
 

15. „Above“ und „under the fold“ berücksichtigen

Diese zwei Bereiche bedeuten „über“ und „unter der Hälfte“ des Bildschirms. Dabei gilt: Wichtige Elemente müssen stets im oberen Bildschirmteil platziert werden. Sie sind auch ohne Scrollen immer sichtbar und werden daher öfter geklickt. Ein Newsletter-Eintragungsformular ist ein klassisches Beispiel dafür.
 
Ein Streitthema sind die Social Media Buttons. Oft sind diese rechts oben in der Sidebar platziert, also der Platz mit der größten Aufmerksamkeit. Das führt aber dazu, dass diese auch häufig geklickt werden und die Seitenbesucher damit sofort wieder von der Seite weggeführt werden. Unserer Meinung nach, sollten die Social Media Buttons daher dort nicht angeordnet werden. Social Media ist zwar wichtig, aber der Traffic auf dem Blog dagegen wichtiger. Dieser Punkt ist ebenfalls interessant für die Kommentare.
 

Fazit:

Durch ein zeitloses, elegantes Webdesign kannst du bereits auf den ersten Augenblick überzeugen und einen bleibenden Eindruck hinterlassen. Ein freundlich wirkender Eindruck und eine übersichtliche Anordnung laden zum Verweilen ein. Das erhöht maßgeblich die Attraktivität deiner Seite.
 

Über die Autoren
Gastbeitrag
Valerie Djurin und Alexander Kouba sind die Autoren des Online Marketing Blogs http://alexundvalerie.com
Seit Juni 2014 schreiben Sie laufend über unterschiedliche Bereiche des Online-Marketings wie Traffic, Webseitengestaltung, Social Media, E-Mail Marketing und Ähnliches. Ihr Blog beinhaltet mehr als 100 Artikel, Trainings, Videos und vieles mehr.
 
In diesem Beitrag enthaltene Links:

Knowem

Namechk

Pixabay

Fotolia

Shutterstock
 
 

webdesign

Hinterlass deinen Senf!

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

10 comments

  • Super tipps, werde ich sicher versuchen. Vielen Dank für diesen sehr interessanten Artikel!

  • Vielen Dank für diese Super Tipps,

    Gebe ich so an unseren Grafikdesigner weiter. 🙂

  • Da ihr ja gespannt auf die Kommentare zu Schriften seid. Ich empfehle maximal 2 – 3 verschiedene Schriftarten. Auf meinem Blog nutze ich sogar nur eine. Zumindest bei den Texten. Bei meinen Grafiken bin ich da eher flexibel, versuche aber trotzdem nicht zu viele unterschiedliche zu verwenden.

    Bilder benutze ich nur von Pixabay und gestalte meine Artikelgrafiken selbst und individuell passend zum Thema. Der Grund ist, das die meisten Fotos von den gleichen Anbietern benutzen und ich mich dadurch besser abheben kann.

    Salu2 @ndy der Ninja von Fachchinesisch 😉

    • Hallo Andy!

      Danke für den Kommentar! Ja mit den Schriftarten ist das so eine Sache. 2-3 sind in jedem Fall noch vertretbar. Oft ist man ja allein durch die Aufschriften auf Buttons, die Schriften von sichtbaren Plugins wie beispielsweise „Related Posts“ oder Bannern ja bereits an gewisse Vorgaben gebunden, die man händisch nicht extra ändern möchte/kann. Nur eine Schriftart ist demnach, muss ich zugeben, sehr selten.

      Kompliment, dass du die Artikelgrafiken selber erstellst. Das ist natürlich ein entscheidender Vorteil gegenüber den Bildern von Pixabay, die mit Sicherheit anderswo ebenfalls zu finden sein könnten.

      Liebe Grüße
      Alexander Kouba

  • Es soll sofort für jeden Besucher zu sehen sein um was es hier auf der Webseite eigentlich geht. Habe gerade selbst das Problem auf meiner Seite.

    Auch bei Euch sieht man es nur klein geschrieben unter dem Logo und beim Newsletter besteht kein Grund sich dort anzumelden weil man nicht weiß was einen erwartet.

    Ich steh aber vor denselben Problemen und werd das aber outsourcen.

    Hoffe Ihr versteht das als konstruktive Kritik und bin schon gespannt auf Eure Antwort.

    Arbeite weniger & Outsource mehr!
    Thomas

    • Hallo Thomas!

      Vielen Dank für deinen Kommentar! Wir nehmen uns jede konstruktive Kritik gerne zu Herzen, denn manchmal ist man selber sozusagen „Betriebsblind“. Deshalb wäre es ja für jede Webseite empfehlenswert einen „Benutzerfreundlichkeits“-Test durchzuführen, insbesondere mit Personen, die vorerst keine Ahnung haben worum es auf der Seite geht 🙂
      Die Informationen zu unserem Newsletter haben wir unter dem Eingabefeld verlinkt. Damit wollten wir einerseits auf der Startseite Platz sparen und uns andererseits die Möglichkeit offen lassen, einen ausführlicheren Text zu unserem Newsletter zu schreiben. Falls diese Rechnung nicht ganz aufgegangen ist nehmen wr gerne Tipps an. Hast du denn schon jemanden gefunden?

      Liebe Grüße
      Valerie Djurin