Deine Website erfüllt die Rolle eines Schaufensters und einer Verkäuferin in einem. Um erfolgreich zu sein, ist es unerlässlich, dass sich deine Lieblingskunden von Anfang an angesprochen fühlen.
Das gelingt mit dem passenden Design. Denn durch das Design kommunizierst du mit den Menschen, die deine Website aufrufen.
Bevor wir uns den Tipps für gelungenes Webdesign widmen, lass uns kurz den Begriff "Design" klarstellen.
Was ist eigentlich Design?
Wenn du bei "Design" nur an "Schönheit" denkst, dann fehlt da noch eine wichtige Dimension.
Design vereint Funktionalität und Optik. Seine Aufgabe ist es, Botschaften an bestimmte Menschen zu vermitteln. Daher ist es unabdingbar, sich zuerst ausgiebig mit deinen Lieblingskunden zu beschäftigen. Denn die sollen sich durch das Design angesprochen fühlen.
Damit dir das gelingt, habe ich verschiedene Tipps mit ganz konkreten Beispielen für dich vorbereitet.
Aber fangen wir ganz am Anfang an.
Das Webdesign-Konzept
Um eine Website zu gestalten, die genau deine Lieblingskunden anspricht und mit der du dich auch rundum wohlfühlst ist ein Konzept das A und O.
Bevor du überhaupt an das Design denkst, solltest du dir klar darüber sein:
- Wer genau deine Lieblingskunden sind und was sie bewegt.
- Welche Werte für dich von Bedeutung sind.
- Welches Ziel du mit deiner Website verfolgst.
Nimm dir Zeit für diese Schritte, bevor du dich ans Design machst. Erst danach ist der richtige Zeitpunkt, um ein Moodboard zu erstellen und loszulegen.
Und jetzt starten wir mit dem Beispiel für eine schlechte Homepage. Du findest danach natürlich auch noch eine Beispiel-Homepage, die zeigt, wie es besser geht.
Schlechtes Webdesign: Und was du daraus lernen kannst
Ich habe als Anschauungsobjekt eine schlechte Homepage erstellt.
Hier kannst du sie dir ansehen.
Hast du sie dir angesehen?
Super, dann nehmen wir sie einmal auseinander:
Der erste Eindruck
Unprofessionell und wirr. Der hellblaue Hintergrund mit den Wölkchen, der so überhaupt nicht zum Businessthema passt und dann dieser enge Text und die Schrift im Kopfbereich. Damit wäre ich (und die meisten Besucher) gleich wieder weg.
Aber jetzt sehen wir uns jeden Bereich einzeln an.
Der Kopfbereich
Der Kopfbereich muss sofort überzeugen
Wenn ich die Website besuche, sollte ich innerhalb von maximal 3 Sekunden sofort erkennen, dass ich am richtigen Ort bin.
Ich muss verstehen, dass es sich für mich lohnt zu bleiben und weitere Zeit zu investieren.
Im Beispiel oben ist das jedoch nicht der Fall. Hier passt nichts zusammen:
Das Logo
Das Dreieck ist eine lebendige Form, die oft mit Bewegung und Richtung verbunden wird. Die Linien in einem Dreieck führen unsere Augen automatisch zur Spitze oder in die Richtung, in die das Dreieck zeigt.
Das bedeutet, dass wir hier nicht auf den Text daneben sehen, sondern unser Blick aus der Website hinausgeführt wird.
Dazu kommen die Linien, die wiederum Bewegung andeuten, aber hin zum Text. Das widerspricht sich.
Die Schrift
Die verwendete Schriftart auf der Website passt überhaupt nicht zum Thema Business-Coaching. Sie würde eher auf eine Geburtstagseinladung gehören.
Das erzeugt von Anfang an ein Misstrauen im Kopf des Websitebesuchers. Und diesen allerersten Eindruck kann man praktisch nicht mehr revidieren, wie Untersuchungen gezeigt haben.
Unser Gehirn versucht nur eine Bestätigung des ersten Eindrucks zu finden.
Die Navigation
Auch hier stört die unprofessionell wirkende Schrift. Sie ist außerdem recht klein. In der Navigationsleiste sind auch die Einträge "Impressum" und "Datenschutzerklärung" aufgeführt, obwohl sie in der Fußzeile platziert werden sollten.
Der Inhaltsbereich
Das Erste, was ins Auge fällt, ist die eng aneinander stehende Schrift. Dies liegt daran, dass der Zeilenabstand zu knapp bemessen ist, was den Text schwer lesbar macht. So habe ich als Besucherin überhaupt keine Lust ihn zu lesen.
Dann kommt eine Überschrift in Pink, dass hier mit dem Orange zusammen auch sehr eigenartig wirkt. Vor allem ist es noch eine weitere Farbe.
Zudem fallen die "Weiteren Informationen" auf, die weder durch eine Linie noch eine andere Hintergrundfarbe vom Haupttext abgesetzt sind. Dies trägt dazu bei, dass die gesamte Seite unstrukturiert und schwer verständlich wirkt.
Dass der Text am Rand klebt, verstärkt den Eindruck von Unprofessionalität.
Der unterste Bereich
Selbst dieser Abschnitt wirkt ungeordnet, und es ist schwierig, die wesentlichen Informationen auf den ersten Blick zu erfassen.
Wenn ich dann trotzdem genauer hinsehe, fällt mir die gmail-Adresse auf. Diese passt perfekt zum unprofessionellen Gesamteindruck.
Definitiv niemand, zu dem ich genug Vertrauen hätte, um ein Business-Coaching zu buchen. Ich habe ja auch immer noch nicht herausgefunden, für WEN sie WAS genau anbietet. Denn Business-Coaching ist ein weites Feld.
Schauen wir uns nun an, wie du es besser machen kannst.
So geht gutes Webdesign
Auch die «gute» Homepage ist eine Testseite, die von mir erstellt wurde. Du kannst sie dir ansehen, wenn du hier klickst.
Der erste Eindruck
Die Website wirkt angenehm aufgeräumt und professionell. Möglicherweise etwas langweilig, weil andere Websites genauso aufgebaut sind.
Sehen wir uns jetzt ebenfalls die verschiedenen Bereiche an:
Der oberste Bereich (Kopfbereich)
Hier haben wir ein klares Logo, aus dem ich gleich erkenne, was meine «Silvia Testerin» macht und die Überschrift.
Die Farben aus dem Logo wiederholen sich auf der Website dann auch immer wieder.
Die Quadrate stehen für Stabilität und Sicherheit. Sie wiederholen sich danach ebenfalls auf der Website.
Die Navigation ist klar, übersichtlich und gut lesbar.
Das Foto mit klarer Ansage
Als nächstes, immer noch im wichtigsten Bereich der Website (Above the fold) sehen wir ein Foto von «Silvia Testerin» und ein klares Statement von ihr.
Wenn ich das sehe und zu ihren Lieblingskundinnen gehöre, dann ist für mich sofort klar: Hier bin ich richtig. Andernfalls klicke ich wieder weg.
Diesen Eindruck gewinne ich innerhalb von Sekundenbruchteilen.
Auch der Text unter dem Foto bekräftigt nochmals, mit WEM sie arbeitet und um WAS es in ihrer Arbeit geht.
Dank des Raums zwischen den Elementen haben diese ausreichend Platz, um zu wirken.
Die verschiedenen Schriftgrössen helfen die Bedeutung der Texte richtig einzuschätzen.
*Der Begriff "Weissraum" bezieht sich auf den Raum zwischen den verschiedenen Elementen und muss nicht weiss sein.
Die Angebote – Knapp und übersichtlich
Als nächstes erfahre ich genau, welche Dienstleistungen ich buchen kann.
Dank des blauen Hintergrunds ist sofort ersichtlich, dass die Boxen zusammengehören, und dennoch fungiert jede von ihnen als ein eigenständiges "Behältnis" für weiteren zusammengehörenden Inhalt.
Dadurch lassen sich die Informationen rasch erfassen.
Zusätzlich gibt der Text auf den Buttons nochmals deutlich an, wohin mich ein Klick führt und was ich erwarten kann.
Mehr Vertrauen dank der Kundenstimme
Das Design, das Foto und der Text haben dafür gesorgt, dass der Besucher bis hierher gelesen hat.
Nun wird durch Kundenbewertungen gezeigt, dass das entgegengebrachte Vertrauen gerechtfertigt ist und die Zusammenarbeit hält, was sie verspricht.
Auch die Kundenstimme ist klar und übersichtlich gestaltet und hebt sich trotzdem vom anderen Text ab.
Mehr über «Silvia Testerin»
Hier sehen wir erneut einen ansprechend gestalteten Abschnitt, der sich deutlich von den anderen abhebt.
Hier erfahren die Besucher mehr über "Silvia Testerin" und können eine Verbindung zu ihr herstellen. Überdies besteht die Möglichkeit, von hier aus direkt zur "Über mich"-Seite zu gelangen.
Der unterste Bereich - Footer
Dank der übersichtlichen Blockstruktur sind die Informationen leicht verständlich dargestellt. In diesem Abschnitt sind sowohl die Anschrift als auch eine professionelle E-Mail-Adresse gut sichtbar platziert.
Ausserdem sind hier Links und die aktuellen Termine aufgeführt. Dieser Footer ermöglicht es, die Schlüsselbereiche der Website hervorzuheben.
Auch das Impressum und der Datenschutz haben hier ihren Platz gefunden, optisch durch eine Trennlinie vom übrigen Inhalt abgesetzt.
Die wichtigsten (Web)Designprinzipien
Damit du den Überblick behältst, führe ich hier die wichtigsten Designprinzipien nochmals auf, inklusive Video:
- Sorge dafür, dass in den ersten Sekunden klar wird, was du für wen anbietest.
Zum Video - Nutze den Weissraum effektiv, um die Aufmerksamkeit des Lesers auf wichtige Elemente zu lenken. Zum Video
- Lenke das Auge des Benutzers durch eine visuelle, hierarchische Anordnung der Inhalte. Zum Video
- Trenne verschiedene Bereiche voneinander, indem du zwei oder drei Hintergrundfarben verwendest. Zum Video
- Verwende Blöcke, um zusammengehörige Inhalte deutlich voneinander abzugrenzen. Zum Video
- Begrenze die Anzahl der verwendeten Schriftarten auf maximal 2 oder 3.
- Nutze deine Markenfarben, um ein konsistentes Design zu gewährleisten.
Gutes Webdesign ist lernbar
Wenn du bis hierhin gelesen hast, hast du bereits die ersten Schritte gemacht. Jetzt ist es an der Zeit, dein Auge zu schulen. Nimm dir ab und zu die Zeit, Websites beim Surfen genauer anzusehen.
Macht dir auch Notizen, wenn du etwas siehst, das besonders gelungen ist. Schreib dir auch auf, WARUM du davon begeistert bist.
Mit der Zeit wirst du feststellen, wie du ein Auge für gutes Design entwickelst. Ich wünsche dir viel Spass dabei.