Homepage Baukasten Webdesign-Ratgeber feat. Influencer Chris Hortsch

Eines der zeitlosen Themen für Betreiber von Webseiten ist das Webdesign. Deine Seite kann inhaltlich großartig sein, doch niemand wird lange auf ihr verweilen, wenn sie aussieht wie Kraut und Rüben. Nun ist gutes Design eine subjektive Sache, doch es gibt durchaus einige Richtlinien, an die man sich halten sollte.

Kostenlose Homepage erstellen

Die folgenden 10 Kniffe helfen dir, eine optisch und funktional ansprechende Seite zu erstellen, deren Design deine Besucher bindet und nicht verscheucht. Am Ende des Artikels findest du zudem die aktuellsten Trends im Jahr 2017, also die neuesten Entwicklungen auf dem Gebiet des Webdesigns, mit denen du sicher in die Zukunft fährst.

10 grundlegende Tipps für gutes Webdesign

1. Struktur

Absolute Priorität bei der Gestaltung der eigenen Webseite sollte die Fokussierung auf eine verständliche und simple Struktur der Webseite haben. Auf keinen Fall solltest du die Homepage überladen. Sicherlich möchtest du viele Informationen unterbringen, doch gehe dabei strukturiert und überlegt vor. Vermeide einen Salat aus verschiedenen Boxen, in unterschiedlichen Größen, die nicht sauber miteinander abschließen. Dadurch werden zwar die Boxen für sich genommen einzigartig, doch das Gesamtbild ist ein visueller Brei, bei dem nichts mehr heraussticht. Deshalb stelle sicher, dass der Aufbau deiner Seite auf den ersten Blick klar wird und keine unruhigen Elemente das Auge ablenken.

2. Konzentriere dich auf das Wesentliche

Soll deine Webseite dein Geschäft repräsentieren oder ein bestimmtes Produkt verkaufen? Oder handelt es sich um ein reines Hobby, welches beispielsweise deine Leidenschaft für Pferde oder Videospiele behandeln soll? Was auch immer das Hauptthema ist, sorge dafür, dass es im Mittelpunkt deiner Seite steht. Gerade bei Business-Seiten ist es jedoch wichtig, dass der wesentliche Inhalt den prominenten Platz einnimmt und weniger relevante Dinge nachrangig behandelt werden.

Ein weiteres, oft unterschätztes Element des Webdesigns ist die Platzierung von Werbung. Sie sollte nicht direkt in das Gesicht des Kunden springen – zumindest nicht ständig. Ein gesundes Verhältnis zwischen Werbung und relevanten Inhalten muss gewährleistet sein, um die Nutzer nicht zu verscheuchen. Besteht die Seite aus zu viel Werbung, so ist die Wahrscheinlichkeit hoch, dass ein interessierter Besucher abspringt und nie wieder zurückkehrt. Deshalb lege den Fokus auf den Inhalt und binde Werbung sichtbar aber vergleichsweise subtil ein.

3. Die richtigen Farben wählen

Auch die Wahl der Farben kann Auswirkungen auf die Attraktivität deines Webauftritts haben. Mache dir zunächst über die Emotionalität deiner Seite Gedanken. Soll es eine entspannte Seite zum Thema Yoga werden? Dann sind aggressive Farben wie rot wohl die falsche Wahl. Geht es um emotionale Themen, wie Reisen, dann darf es gerne etwas bunter sein. Soll der Fokus auf Lesbarkeit bestehen, da du viele Texte schreiben wirst? Dann halte die Textflächen simpel und überlade sie nicht mit ablenkenden Farben. Es gibt Gründe, warum Nachrichtenseiten oft recht schlicht eingefärbt sind.

Wichtig ist auch die Kombination der verschiedenen Farbtöne. Gute Designer wählen eine Farbpalette aus, an die sie sich halten. Doch keine Sorge, auch du kannst in Sekunden zum Profi werden, indem du dir eine Hauptfarbe aussuchst und dir dann mit Tools wie Paletton passende Farben anzeigen lässt. So kannst du gewährleisten, dass die Farbkombinationen zueinander passen, harmonisch wirken und das Auge des Betrachters nicht unbewusst überfordern. Wähle nicht mehr als fünf verschiedene Farben für deine Webseite. Besser sind 3 oder 4.

4. Sorge für Übersicht in deinen Beiträgen

Textbeiträge können schnell unübersichtlich werden, sofern sie unstrukturiert sind. Ebenso wie deine Seite selbst sollten sie deshalb nicht in Buchstabensalat enden. Deine Beiträge sollten inhaltlich einer klaren Linie folgen und dabei visuell ebenso klare Anhaltspunkte geben. Nutze dafür Überschriften und Zwischenüberschriften, welche neue Absätze markieren und sich klar vom restlichen Text abheben. Und achte vor allem darauf, dass Blogposts nicht in Textwürsten ohne Absätze enden. Ähnlich wie in diesem Beitrag, den du gerade liest, sollten die Absätze in hübsche kleine Portionen verpackt sein. Stelle dir vor, alle Informationen, die du gerade gelesen hast, wären am Stück geschrieben – du hättest sicherlich schon lange das Weite gesucht!

Ein gutes Mittel, um Texte aufzulockern, sind neben Bildern auch Zitate. Sie sind nicht nur visuell angenehm und sorgen für einen luftigeren Artikel, sondern können auch wichtige Aussagen aus dem Text nochmals verdeutlichen. Bei allen Überschriften, Zwischenüberschriften und auch Fotos, Bildern, Infografiken und Zitaten gilt jedoch auch: Sie müssen Sinn ergeben. Sobald sie keinen oder wenig Bezug zum Text selbst haben, wird der Leser argwöhnisch. Schlimmer noch: Sollte er durch den Artikel scrollen und anhand der Überschriften entweder nicht schlau werden oder einen falschen Eindruck vom Inhalt erhalten, könnte er abspringen.

5. Einfach ist besser

Egal ob es um ein Formular für einen email-Newsletter geht, oder das Schreiben von neuen Texten für deine Webseite: Je komplizierter und ausführlicher der Vorgang ist oder der Text ist, desto weniger User werden darauf anspringen. Ein Formular sollte nicht mehr als drei Zeilen beinhalten. Normalerweise handelt es sich dabei um den Namen, die Mailadresse und noch ein weiteres Element. Alles was darüber liegt, wird dazu führen, dass die Nutzer sich abwenden. Ähnliches gilt für die Texte deiner Webseite: Halte sie relevant und einfach. Verschachtelte Sätze sorgen für Verwirrung, die exzessive Nutzung von Smileys, GIFs und LOLs für entnervte Leser. Halte die Inhalte einfach und versuche nach Möglichkeit auch komplizierte Sachverhalte so verständlich wie möglich zu erklären. Dazu kommt es auch auf gute Überschriften und Satzlängen an.

Auch die Aktionsbuttons, Links und Navigationselemente wollen beschriftet werden und sollten nach Möglichkeit mit Worten versehen werden, welche die Nutzer anziehen. Das ist nicht unbedingt einfach zu bewerkstelligen und erfordert ein wenig Arbeit, doch letztlich kann ein knackiger Satz den Unterschied machen, ob ein Link, ein Artikel oder ein Call-to-Action-Button angeklickt wird, oder eben nicht. Denke beim Texten auch an die Keywords. Im Zuge der Suchmaschinenoptimierung empfiehlt es sich zwar mit Keywords zu arbeiten (mehr dazu hier). Aber denke daran, dass Google nicht ausgetrickst werden kann. Wenn du deine Seite mit Keywords vollstopfst, dann liest sich dein Beitrag nicht nur schlecht, sondern Google wird die Seite auch herabstufen.

6. Die richtige Navigation

User auf deiner Seite sollen sich schnell zurechtfinden. Klar Strukturen sind deshalb essenziell. Das gilt auch für die Navigationsleisten und die Call-to-Action-Buttons. Die Navigationsleiste sollte klar zu erkennen und sinnvoll beschriftet, sowie logisch unterteilt sein. Die Leser sollen gleich erkennen, was sie hinter den einzelnen Menüpunkten erwartet. Solltest du Buttons, wie ein Anmeldeformular integrieren, empfiehlt es sich, dieses farblich vom Rest der Seite abzuheben. So ist es leicht zu finden.

Teste die Navigation an Personen, welche die Seite zum ersten Mal sehen und bitte sie nach bestimmten Elementen der Seite zu suchen. Sie sollten innerhalb von wenigen Sekunden in der Lage sein, sämtliche Elemente zu finden. Keinesfalls darf es eine halbe Minute dauern, bis sie sich durch Menüs gehangelt oder sich durch mehrere Unterseiten geklickt haben, bis sie die gewüschte Funktion gefunden haben. Wichtige Elemente sollten stets schnell und ohne großen Aufwand zu erreichen sein. Last but not least sollte die Webseite unbedingt über ein Suchfeld verfügen! Egal wie schnell die User ein Element finden können, über die Suche geht es fast immer schneller.

7. Optimiere die Ladezeiten

Wahrscheinlich kannst du dir inzwischen schon selbst denken, dass viele der hier aufgeführten Maßnahmen darauf hinauslaufen, ungeduldige Nutzer bei der Stange zu halten und zu vermeiden, dass diese abspringen. Ein wichtiges Element hierbei ist die Optimierung deiner Seitenladezeiten. Die Seite sollte in 1-2 Sekunden geladen sein. Überlade deshalb deine Seite nicht mit Inhalten, die viel Platz fressen. Das können zu große Bilder sein (hier kommt es vor allem auf den Speicherplatz an und nicht zwingend auf die Auflösung), Videos, die von deiner eigenen Seite aus laden und einiges mehr.

Je schneller die Seite lädt, desto entspannter surft der User auf ihr und desto höher kann auch das Google-Ranking ausfallen, denn auch die Ladezeiten von Seiten sind ein nicht unwesentlicher Bestandteil der Indexierung. Ein Anfängerfehler, der jedoch noch recht häufig begangen wird und der die Performance stark beeinträchtigt, sind Texte, die als Bilder hochgeladen werden. Textflächen sollten stets mit nativem Text befüllt werden und nicht über Bilder, die den Text abbilden. Diese verbrauchen stets mehr Speicherplatz und werden die Ladegeschwindigkeiten verlangsamen.

8. Nutze die richtigen Fonts

Was sind Fonts? Font ist ein Synonym für Schriftart. Die richtige Schriftart oder Typographie zu finden, kann der Lesbarkeit der Seite enorm zugute kommen. Verschiedenste Fonts können verschiedenste Stimmungen erzeugen. Ein Extrembeispiel: Dicke, bauchige Überschriften im Comicstil wirken um einiges verspielter Schriftarten, bei denen die Buchstaben aus schmalen, hohe Linien bestehen. Nimm dir genügend Zeit, um verschiedene Schriftarten durchzusehen und die Unterschiede in Stimmungen und Lesbarkeit zu entdecken. Grundsätzlich solltest du für die Texte selbst einen Hauptfont verwenden und kannst dir offen lassen, in den Überschriften andere Fonts einzusetzen. Auch hier gilt jedoch: Beschränke dich auf ein oder zwei Fonts. Eine Flut an verschiedenen Schriftarten resultiert in Chaos.

Das größte No-Go sind zu viele Fonts und dann auch noch in verschiedenen Größen. Beispielsweise die Überschrift in Times New Roman, die Texte in Arial und die Navigationsleiste in Comic Sans. Das sieht einfach schrecklich aus und selbst Nutzer, die mit Design nichts am Hut haben, werden schnell ein unangenehmes Gefühl beim Lesen entwickeln.

9. Sorge für visuelle Akzente

Gut, das klingt nun etwas zu allgemein gehalten. Was ist damit genau gemeint? Mit interessanten Farbverläufen im Hintergrund oder interessanten Texturen kannst du deiner Webseite Tiefe verleihen und das schöne Design unterstreichen. Gehe damit jedoch mit Bedacht vor. Es wird niemandem etwas bringen, wenn du einfach irgendetwas zusammenschmeißt und hoffst, dass das Ergebnis gut aussehen wird. Vermeide Spielereien wie animierte GIFs im Hintergrund, die aussehen als wäre der Besucher auf einer Webseite des Web 1.0 gelandet. Falls du Inspiration für gutes Design benötigst, suche große Seiten, die ähnliche Themen behandeln wie du und versuche auf deren Designelemente zu achten.

10. Profi-Tipps von Webdesign-Influencer Chris Hortsch

Webdesign-Influencer Chris Hortsch. Seit 2004 ist der Berliner (okay zugezogen) als Konzeptioner, Webdesigner und Entwickler tätig, verwandelt digitale Ideen in klickbare Abenteuer und bringt sie auf die Bildschirme dieser Welt.

„Es klingt schon etwas gestrig, wenn man das Thema Responsive Webdesign Jahr für Jahr als ‚Trend‘ für das kommende Jahr ausruft. Aber auch für 2017 werden sich Webdesigner und Gestalter mehr und mehr technischen Parametern unterwerfen müssen die das Ziel haben Ihre Designs auch auf mobilen Geräten optimal aussehen zu lassen. Eine klarer Trend, der damit schon seit einiger Zeit einhergeht und den wir 2017 noch verstärkt wahrnehmen werden ist eine möglichst plakative Gestaltung, die statt auf verschachtelte (Unter-)Seiten und kleinteilige Elemente auf großzügige Flächen und teilweise noch großzügigere Typografe setzt.“

„Das bedeutet: Jede Menge scrolling – auf dem Desktop, wie auch auf dem mobilen Geräten. Was sieht auf dem Desktop gut aus und kommt responsive / mobil erst so richtig schick zur Geltung? Richtig: ‚Hero Images’, also plakative und großflächige Bilder, meist schon im Headerbereich, die beim User Aufmerksamkeit wecken und für jeden Designer eine willkommene Bühne zur Darstellung von Texten und anderem Content sind.“

„Hero Images sind ein optimales Beispiel für eine Gestaltungsmöglichkeit, die Responsive und Desktop Lösungen vereint und gleichzeitig dem fortwährend Webdesign Trend, Mobile First, auch 2017 Rechnung trägt.“

„Ein weiteres Kernelement des Webdesigns werden Imagevideos! Imagevideos als elementarer, wenn nicht sogar zentraler Bestandteil einer Webseite, sind an sich kein ganz neuer Trend. Videos als ‚Hintergrundrauschen‘ werden wir 2017 verstärkt auf vielen Webseiten finden. Das heißt, ein Bewegtbild, das statt einer klaren Aussage, inklusive Storyboard und Einleitung, Hauptteil, Schluss eine ganz andere Aufgaben haben wird, nämlich ein dezentes Hintergrundelement zu sein, das beim User Emotionen weckt, ohne ihn aktiv vom eigentlichen Content abzulenken. Vielmehr wird die Aufgabe dieser Hintergrundvideos darin bestehen, die sonst häufig eindimensionale Gestaltung mit echtem Leben zu füllen.“

Drei große Trends der letzten Jahre

Damit sind wir auch bei der Abschlusssektion des Artikels angekommen, die sich den Trends der letzten Jahre und auch den aktuellsten Entwicklungen widmet.

1. Responsive Design

Chris Hortsch hat es bereits angeschnitten: Responsive Design wurde in den letzen Jahren seit 2014 immer wichtiger und ist heute absolute Pflicht. Die Templates von Homepage-Baukasten.de sind von Grund auf responsive und damit auf dem aktuellen Stand. Doch daneben gab es noch zwei weitere Entwicklungen, die inzwischen zum guten Ton geworden sind.

2. Flat und Material

Google etablierte 2015 eine minimalistische Designphilosophie, die sich durch sein Betriebssystem Android, bis hin zu seinen Online-Diensten stringent hindurchzog. Das sogenannte Material Design erweitert bekannte Muster um eine natürliche Ebene, wie Schatten und Bewegungseffekte.

3. Große Bilder und Texte

Ein zweischneidiges Schwert ist dieser Trend, der sich wohl 2017 verstärken wird. Große Bilder und Typographie sorgen auf Webseiten für Aufmerksamkeit. Flächendeckende Bilder und One-Page-Seiten, bei denen viel gescrollt wird, haben vielerorts Einzug gehalten, besonders bei Firmenseiten und Portfolioseiten. Ob dieser Trend sich längerfristig halten kann, ist ungewiss. Er birgt jedoch neben schönen großen Flächen und Texten auch Komforteinbußen und eignet sich damit nicht für jede Art von Webseite.

Drei Webdesigntrends 2017

1. Parallax Webdesign

Das Parallax-Webdesign wird immer beliebter. Die übereinanderliegenden Ebenen, die sich durch Scrolling verschieben, sind gut nutzbar, um Geschichten zu erzählen und eine Seite, auf der viel gescrollt wird, interessanter zu gestalten. Storytelling, bei dem eine Seite nicht verlassen werden muss, wird sich vermehrt dieser Methode bedienen. Parallax sollte nicht auf jeder Unterseite angewendet werden, doch die Möglichkeit sollte genutzt werden, wo sie Sinn macht.

2. Hamburger-Menü

Das Hamburger-Menü-Icon ist vor allem von Mobile-Seiten bekannt und zeigt drei übereinander liegende Ebenen, die auf einen Klick hin das Navigationsmenü auffächern. Das galt lange als unkomfortabel auf Desktops und war eigentlich dem begrenzten Platz auf Screens von Mobilgeräten geschuldet, hält nun jedoch vermehrt Einzug auf Desktopseiten – Responsive Design sei Dank. Daneben werden wir künftig auch vermehrt mit Design-Experimenten rechnen können, die neue Wege der Menüführung ausprobieren.

3. Card-Design

Pinterest hat es vorgemacht. Karten sind im Netz inzwischen weit verbreitet und ein beliebtes Designelement, welches Infos häppchenweise und leicht verdaulich aufbereitet. Individuelle, optisch ansprechende Typografie und Bilder machen jede Karte zu einem einzigartigen Bestandteil der Seite. Doch auch den Headerbildern wird künftig eine höhere Bedeutung zukommen. Wo bisher Stock-Fotos dominierten, werden künftig vermehrt individuelle Illustrationen und eigens angefragt Fotografien zu erblicken sein.