5 Webdesign-Fehler, die du niemals machen solltest!

Wow, da ist jetzt deine Website. Weiß. Viel weiß. Zu viel weiß! Versteh mich nicht falsch. Weiß ist gut. Deine Website braucht weiß. Aber sie braucht mehr. Sie braucht das richtige Webdesign.

Warst du schon einmal auf einer Seite, die so aussah? Schwarze Schrift auf weißem Hintergrund. Keine Bilder. Keine Farbe. Kein Leben.

Hast du dich auf dieser Seite wohl gefühlt?

Wahrscheinlich nicht. Denn schwarz und weiß ist nüchtern. Und nüchtern ist definitiv nicht das, was du willst! Du willst deine Nutzer mitnehmen auf eine Reise zu deinen Produkten oder Dienstleistungen. Du willst ihnen zeigen, was dich ausmacht. Dafür brauchst du mehr als schwarz und weiß. Zeig ihnen ein sonnengelb, dass so warm ist, dass es deinem Nutzer einen wohligen Schauer den Rücken runterlaufen lässt. Oder ein blau, das so tief ist, dass man das Meer riechen kann. Oder ein rot, das sofort an diesen wunderbaren Rosengarten erinnert.

Farben sind aber noch nicht alles. Dein gesamtes Design muss stimmen, um deine Nutzer zu fesseln. Du musst sie so aufrütteln, dass ihre kurze Aufmerksamkeitsspanne nahezu unendlich wird. Du musst sie ansprechen und bei dir behalten. Dafür müssen sie sich auf deinen Seiten wohlfühlen.

Bei der Gestaltung deiner Website solltest du deshalb diese fünf Fehler vermeiden!

1. Deine Navigation ist verschachtelter als das verrückte Labyrinth.

Ein Großteil deiner Nutzer wird zuerst auf deiner Startseite landen. Von da aus geht seine Reise durch deine Website los. Aber wie kommt er eigentlich von Seite 1 zu deiner Produktseite oder zum Kontakt? Oder von einem Blog-Beitrag zum nächsten? Oder oder oder…

Ohne eine klare und gut strukturierte Navigation läuft auf deiner Website gar nichts. Damit meine ich vor allem die Haupt-Navigation. Die sollte immer sichtbar sein, damit man schnell zwischen den Seiten wechseln kann. Vor allem bei tiefen Seiten (die viele Klicks von der Startseite entfernt sind) solltest du ein Breadcrumb haben:

Darin siehst du immer den Weg, den du von der Startseite gegangen bist und kannst schnell zu einer der übergeordneten Seiten zurück.

Der letzte Punkt für eine gute Navigationsstruktur ist die interne Verlinkung. Um es deinem Nutzer besonders einfach zu machen sich über ein Thema von A bis Z zu informieren, solltest du alle inhaltlich passenden Seiten untereinander verlinken.

Befindet sich dein Nutzer auf der Seite „Die 10 besten Orte zum Meditieren“, sollte er auch Link zu Beiträgen wie „So meditierst du richtig“, „Warum du nicht überall meditieren kannst“ oder „Meine Meditations-Playlist“ finden. So kann er in diese Themen direkt mit einsteigen.

2. Was? Man braucht eine mobile Seite?

Ja, die brauchst du definitiv. Es gibt nichts Schlimmeres als mobil zu surfen und dann auf Website zu kommen, auf der man Krämpfe in den Fingern bekommt vom ständigen rein- und rauszoomen. Viele deiner Nutzer werden sich die Mühe erst gar nicht machen und lieber auf einer anderen Website schauen.

Wenn sie überhaupt zu dir kommen. Denn auch Google legt seit der Umstellung auf „mobile-first“ größten Wert auf mobil optimierte Seiten.

Nicht-mobil-optimierte Seiten kosten dich also bares Geld.

3. Man braucht Adleraugen, um deinen Text lesen zu können.

Und die hat definitiv nicht jeder. Mehr als ein Drittel aller Deutschen trägt ständig eine Brille. Fast ein weiteres Drittel braucht die Brille immerhin gelegentlich.

Was bedeutet das für dich?

Das allerwichtigste, das alles andere ins Abseits stellt, ist die Lesbarkeit. Das bedeutet die Schrift muss

• Groß genug sein: Schriftgröße 11 oder 12 wie bei gedruckten Texten reicht online nicht aus, weil man weiter vom Bildschirm entfernt ist als von Büchern oder einer Zeitung. Die Empfehlung liegt bei um die 16 px. Das hängt aber auch immer ein wenig von der Schriftart ab.

Oder wie gut kannst du das hier lesen? Das ist Schriftgröße 11.

• Sich gut vom Hintergrund abheben: Hellgraue Schrift auf hellgrauem Hintergrund lässt sich nur schlecht lesen. Du musst für einen guten Kontrast zwischen Hintergrund und Schrift sorgen Ansonsten hast du bei der Schriftfarbe alle Freiheiten. Aber! Jede Farbe bringt auch ihre eigene Stimmung mit sich. Aber dazu kommen wir noch.

Wenn du das hier lesen kannst, hast du ziemlich gute Augen.

Außerdem ist wichtig, dass du genug Abstand zwischen den Zeilen lässt, damit dein Text nicht zu gedrungen wirkt und der Nutzer Schwierigkeiten hat die einzelnen Zeilen voneinander zu trennen.

Eine wichtige Frage ist: Mit oder ohne Serifen?

Serifen? Was ist das? Das sind die kleinen Häkchen an den Buchstaben. Guckt dir diese beiden Schriften an:

Oben hat keine Serifen, unten schon. Für Bücher & Co. werden oft Schriftarten mit Serifen genommen. Das ist online anders. Denn ohne Serifen sind die Schriften meist einfacher zu lesen, weil sie schärfer wirken.

Nutze für deinen Fließtext also am besten eine serifenlose Schriftart. Damit wirkt dein Text optisch klar und einfach zu lesen. Bei Überschriften kannst du dich dann voll austoben. Durch die Nutzung von Serifen kannst du die Überschriften gut hervorheben. Gerade der Mix aus beidem lässt Websites spannend und lebendig wirken. Durch das Zusammenspiel der Schriftarten bleibt dein Lesen beim Überfliegen automatisch hängen. Ich persönlich mag klare Strukturen und bin deshalb auch bei den Überschriften bei den serifenlosen geblieben. Das ist am Ende aber Geschmackssache.

Keine Geschmackssache ist Anzahl an Schriftarten, die du nutzen solltest. Denn viel hilft nicht immer viel. Zwei oder drei verschiedene Schriftarten reichen in der Regel schon aus, um deine Webseiten schön zu machen.

4. Ein kunterbunter Hund wäre neidisch auf deine Seiten.

Deine Website sollte nicht aussehen als hätte jemand einen Farbeimer drüber geschüttet: ein bisschen blau, ein bisschen rot, dazwischen lila, daneben noch ein grün – vergiss es! In den meisten Fällen erreichst du damit nur eins: Deine Nutzer hauen sofort wieder ab.

Du solltest dich für eine Hauptfarbe entscheiden. Wenn du schon ein Logo oder eine Unternehmensfarbe hast, sollte Farbe, die du da benutzt hast, auf jeden Fall die Hauptfarbe sein.

Bedenke immer, dass Farben eine bestimmte psychologische Wirkung haben. Hier nur ein Auszug, wofür Farben stehen können:

Blau:

• Ruhe und Vernunft
• Sehnsucht, Melancholie, Kühle
• Unternehmen: Vertrauen, Kompetenz und Seriosität

Gelb

• Heiterkeit, Wärme, Optimismus
• Neid, Egoismus, Geiz
• Unternehmen: Fröhlich, hart arbeitend, energiegeladen

Rot

• Warnsignal: Gefahr, Wut, Zorn
• Macht, Liebe, Leidenschaft, Feuer
• Unternehmen: Energie, Bewegung und Liebe

Grün

• Hoffnung, Leben, Natur, Zufriedenheit
• Unreife, Gift
• Unternehmen: Harmonie und Entspannung

Grau

• Sachlichkeit, Eintönigkeit, Langeweile
• Formalität, Design, Luxus
• Unternehmen: Luxus

Wie du schon siehst, haben viele Farben sehr unterschiedliche Bedeutungen. Trotzdem schadet es nie sich mit so etwas mal auseinanderzusetzen. Denke auch daran, dass manche Menschen unter einer Rot-Grün-Schwäche leiden. Mehr zur Wirkung von Farben gibt es im Webdesign Journal.

Zu deiner Hauptfarbe wählst du dann ein paar wenige Nebenfarben. Diese sollten mit deiner Hauptfarbe eine harmonische Beziehung eingehen. Dein Farbschema ziehst du dann über alle Seiten und wenn möglich auch bei den Fotos durch.

Nutze auffällige Farben, um die Augen deiner Nutzer gezielt dahin zu lenken, wo du sie haben willst: Bei deinen Angeboten, deinen Projekten, deiner Newsletter-Anmeldung oder was sonst Aufmerksamkeit erzielen soll.

Gerade bei Call-To-Action Buttons solltest du eine starke Farbe wählen, die sich sowohl vom Text als auch vom Hintergrund abhebt. Das Thema „Kontraste“ haben wir ja oben schon abgefrühstückt.

5. Du vergisst deine Zielgruppe.

Für wen machst du das alles eigentlich? Nicht für dich selbst! Trotzdem musst du dich in deinem Design wiederfinden. Das kann eine schmale Gratwanderung sein. In erster Linie designst du jedoch für deine Zielgruppe. Denen willst du deine Produkte / dein Angebot verkaufen.

Jemand, der kreative Produkte und Dienstleistungen verkauft, ist in seiner Gestaltung sicher etwas freier als jemand aus einem konservativeren Bereich.

Heißt das jetzt, dass ich zum Beispiel als Steuerberater nüchtern und seriös designen muss?

Nein! Wer ist deine Zielgruppe? Andere Steuerberater? Kunden ab 50? Kunden zwischen 20 und 30?

Carina Heckmann zum Beispiel ist Steuerberaterin. Ihre Website ist trotzdem alles andere als nüchtern. Mich (als Mitglied ihrer Zielgruppe) überzeugt das warme, moderne und eher weibliche Design. Und obwohl es anders ist als bei vielen anderen Steuerberatern, stelle ich ihre Kompetenz zu keinem Zeitpunkt in Frage.

Und wie setze ich das um?

Die gute Nachricht ist, all diese Punkte hast DU in der Hand. Dafür musst du kein bisschen programmieren können oder dich mit sonst irgendwelchem technischen Schnickschnack auskennen. (Fast) alles, was du brauchst ist dein Theme.

Ein Theme oder auch Template ist einfach gesagt eine Vorlage für deine Website. Ohne ein Theme ist deine Website nackt. Du kannst jetzt entscheiden, welchen Stil sie haben soll und welche Farben ihr am besten stehen.

Aber nicht nur das. Das Theme bringt auch viele Funktionen mit, wie zum Beispiel die mobile Optimierung. Damit musst du dich um viele Dinge nicht mehr kümmern, sondern kannst dich auf die Gestaltung konzentrieren.

Eine Entscheidung musst du aber vorher noch treffen:

Kostenloses oder kostenpflichtiges Theme?

Die Antwort darauf kann ich dir nicht geben. Das hängt ganz davon ab, was du dir wünschst. Pluspunkte bei kostenpflichtigen Themes sind, dass sie einen größeren Funktionsumfang mitbringen und regelmäßig überarbeitet werden. Die Wahrscheinlichkeit, dass dein Theme irgendwann „ausstirbt“ ist daher eher gering. Dafür musst du eben bezahlen. Die Kosten halten sich aber meist in Grenzen.

Ich persönlich bin mit meinem kostenlosen Theme bisher sehr zufrieden. Ich weiß aber auch, dass ich auf die Premium-Variante umsteigen werde, sobald ich hier mehr als nur Artikel schreiben möchte. Da du bei einem Wechsel viele Grundeinstellungen neu einrichten musst, solltest du dir für die Theme-Auswahl ein bisschen Zeit lassen.

Wenn du an deinem Theme dann noch kleine Design-Veränderungen vornehmen willst, kannst du das meistens über die sogenannte CSS-Datei. Darin wird ganz einfach gesagt dein Design in Programmiersprache aufgeschrieben.

In der Regel kannst du in WordPress über Design > Customizer > Zusätzliche CSS ganz einfach Ergänzungen angeben.

Du kennst dich schon ein bisschen aus und willst mehr als nur ein paar Design-Veränderungen vornehmen? Dann leg dir am besten ein Child-Theme an. Das würde hier jetzt aber zu weit führen.

Design vs. Usability

Design ist schön und gut und wichtig. Aber es ist nicht alles. Deshalb solltest du bei allen Ideen, die du hast, um herauszustechen, überlegen, ob sie deinem Nutzer den Besuch auf deiner Seite so einfach wie möglich machen. Das schaffst du mit einer guten Usability bzw. Benutzerfreundlichkeit.

Fast noch wichtiger ist aber die User Experience (UX), also die Nutzererfahrung. Ganz einfach gesagt kommen hier die Emotionen mit ins Spiel. Wir erweitern also die Usability um das Subjektive. Dein Nutzer muss sich schnell und einfach zurechtfinden UND dabei ein gutes Gefühl haben.

Was genau ein gutes Gefühl hervorruft ist natürlich von Person zu Person unterschiedlich. Deshalb ist es besonders wichtig, dass du deine Zielgruppe im Hinterkopf behältst. Denn oft haben viele Nutzer einer Zielgruppe eine ähnliche Vorstellung davon, was als positiv empfunden wird.

Wenn du mehr zum Thema User Experience und Usability wissen willst, kannst du auf der Website von uid weiterlesen.

Du solltest kontinuierlich daran arbeiten, dass sich deine Nutzer bei dir wohlfühlen (sowohl technisch, als auch emotional). Was funktioniert findest du heraus, indem du deine Zielgruppe fragst oder einfach testest und dir die Statistiken anguckst.

Fazit

Im Webdesign warten einige Tücken. Ist die Gestaltung deiner Website nicht ansprechend, ist dein Nutzer schneller wieder weg als du „Hallo“ sagen kannst.

Dabei ist das Design weit mehr, als ein paar süße und nette Farben auf deine Seiten zu klatschen. Wenn deine Website wirklich rocken soll und du deinen Nutzer bei dir behalten willst, müssen fünf Punkte stimmen:

• Deine Navigation ist übersichtlich
• Deine Website ist mobil optimiert
• Deine Schriften sind lesbar
• Deine Farben passen zu deinem Business und werden sparsam eingesetzt
• Du designst für deine Zielgruppe, nicht für dich

Wenn du das umsetzt, reicht die kurze Aufmerksamkeitsspanne deiner Nutzer aus, um sie in deinen Bann zu ziehen. Und wenn du das Design dann auch noch durch alle deine (Online)Kanäle durchziehst, machst du dich unverwechselbar!

Übrigens, das Team von onlinemarketing.de hat gerade erst einen Beitrag zu den Webdesign-Trends 2019 veröffentlicht.