Sitzt du vielleicht im Co-Working-Space und schielst auf den Computer neben dir? Deine Tischnachbarin hat ihre Website geöffnet und du bist etwas neidisch. Das sieht doch viel besser aus als dein eigener Webauftritt!
Du öffnest das Google-Suchfenster. Vielleicht brauchst du doch einen Profi für Webdesign? Während du noch überlegst, wen du fragen kannst und woher eigentlich das Budget kommen soll, hast du einen Geistesblitz. Energisch tippst du auf deiner Tastatur rum und bestätigst die Suchanfrage: „Webdesign-Tipps.“
7 Webdesign-Tipps fürs Optische
2. Nutze nicht mehr als 3 Farben
3. Baue Pausen für die Augen ein
4. Wähle lesbare Schriften aus
6. Mache klickbare Elemente sichtbar
7. Nutze die visuelle Hierarchie
4 Webdesign-Tipps für die Technik
1. Responsive Webdesign ist Pflicht
4. Logo-Klick zurück zur Startseite
Webdesign kann nur ein Profi?
Das steht ungelogen in jeder zweiten Einleitung. Trotzdem folgen danach Tipps. Aber nicht, um dir zu helfen, sondern “damit du besser weißt, was du deiner oder deinem Webdesigner:in im Briefing sagen sollst.”
Joa, kann man so schreiben, muss man aber nicht!
Ich habe bereits in meinem Artikel zum Thema Webseitengestaltung geschrieben, dass ich viele Selbstständige kenne, die ein sehr gutes Auge für Design haben sowie das nötige Interesse und die Zeit mitbringen, um den Webauftritt selbst zu gestalten. Und die gehören dafür gefeiert!
Daher gebe ich dir heute meine 15 praktischen Webdesign-Tipps, damit dein Internetauftritt noch besser aussieht und funktioniert.
Ich unterteile die Tipps in drei Gruppen: optisch, technisch und inhaltlich.
Die Tipps sollen für dich eine kleine Checkliste darstellen, wenn du mit deiner Website noch nicht ganz zufrieden bist. Keine Panik und keine Schnappatmung: Du wirst beim Lesen merken, dass du nicht alle umsetzen musst. Picke dir nur die heraus, die für dich relevant sind, um deine Website zu optimieren.
7 Webdesign-Tipps fürs Optische
1. Halte dein Design einfach
Du hast deine erste Website online gestellt? Top – gute Arbeit!
Als Anfängerin hast du sehr wahrscheinlich eine Vorlage, bei WordPress auch Theme genannt, verwendet. Das ist eine gute Möglichkeit für den Anfang. Jetzt geht es jedoch noch an die Feinheiten, denn die meisten fertigen Themes sind etwas überladen.
Nicht, weil die Designer:innen dahinter keine Ahnung haben, sondern weil sie dir zeigen möchten, was alles mit deinem neuen Theme möglich ist. Das bedeutet aber nicht, dass du auch wirklich alle Funktionen, Slider, Bilder, Grafiken, Formulare und Co. nutzen solltest.
Schaue dir deine Website kritisch mit der Frage im Hinterkopf an: Wie kann ich das Design noch einfacher machen, ohne den Inhalt zu verändern?
Je “simpler” deine Webauftritt aussieht, desto weniger läufst du Gefahr, durch optische Spielereien Besucher:innen vom Wesentlichen abzulenken.
2. Nutze nicht mehr als 3 Farben
Es gibt Webdesigns, die mit mehr als drei Farben gestaltet sind und wundervoll aussehen. Aber die meisten Webauftritte wirken dadurch eher unprofessionell und unentschieden.
Farben für die Website zu finden, ist nicht einfach. Auf der einen Seite steht dein persönlicher Geschmack, auf der anderen Seite deine Zielgruppe, die vielleicht von deinen Lieblingsfarben nicht angesprochen wird.
Wenn du noch Hilfe bei der Entscheidung brauchst, dann lies dazu auch diesen Artikel: Farbchaos Website: 6 Tipps, mit denen du deine Website Farben findest.
Hast du dich für deine drei Farben entschieden, dann ist die 60/30/10 Regel ein guter Anfangspunkt. 60 % deiner Website solltest du in einer “Hauptfarbe” gestalten. Da wird es jetzt eher einfach, denn in der Regel ist das weiß oder schwarz.
30 % gestaltest du mit deiner Sekundärfarbe. Du kannst Hintergründe damit einfärben, Ränder für deine Bilder machen, Übergänge designen und noch anderes.
10 % sind für deine Signalfarbe reserviert. Damit erzielst du Aufmerksamkeit auf bestimmte Bereiche. Zum Beispiel Buttons, Links oder andere Handlungsaufrufe. So sehen Besucher:innen direkt, was sie auf deiner Website machen sollen.
“Aber ist das jetzt nicht zu einfach?” fragst du dich wahrscheinlich. Ja, das ist recht simpel, aber du erinnerst dich an Punkt 1: Einfach halten.
Wenn du geübter im Design bist oder sogar mit einer Branddesignerin zusammenarbeitest, dann werden sich die Farben sicher verändern und mehr werden. Für den Anfang reichen drei aber völlig aus.
3. Webdesign-Tipp: Baue Pausen für die Augen ein
Die meisten Besucher:innen lesen deine Unterseiten gar nicht richtig, sondern scannen sie mit dem Auge ab und bleiben nur an den Inhalten hängen, die sie interessieren.
Nutze das! Baue optische “Eye-Breaker” ein, die das Auge automatisch zum Stoppen bringen. Das können andersfarbige Boxen sein, ein Call To Action Banner, mit Bildern unterlegte Absätze oder andere Elemente.
Ich finde es hilfreich, sich eine fertige Seite ganz anzusehen. Mit einer Browser-Erweiterung, wie zum Beispiel Go Full Page für Chrome, kannst du einen Screenshot von deiner gesamten Unterseite erstellen und so auf einen Blick sehen, an welcher Stelle du mit einem Eye-Breaker arbeiten kannst.
4. Wähle lesbare Schriften aus
Arbeite auf deiner Website mit maximal zwei Schriftarten, die harmonisch zueinanderpassen.
Eine nutzt du für Überschriften und/oder Zitate, die andere für deinen Fließtext. Beide müssen jedoch gut lesbar sein – und zwar auf allen Geräten!
Solltest du dich daher für eine Handschrift entscheiden, dann prüfe zunächst
- ob sie alle Sonderzeichen hat, die wir brauchen (manche Schriftarten, die von auländischen Designer:innen entworfen werden, haben kein ä,ö oder ß).
- wie sie auf deinem Smartphone aussehen, denn oft werden solche Schriften schnell unleserlich, wenn sie klein sind.
Zusätzlich braucht deine Schriftfarbe einen guten Kontrast zum Hintergrund. Die meisten Website nutze dafür Schwarz oder ein helles Grau. Aus gutem Grund, denn das ist für die meisten Menschen gut lesbar.
Mein Webdesign-Tipp: Werde da nicht zu kreativ und verlasse dich auf Altbewährtes.
5. Verwende Weißraum
Das ist mein absoluter Lieblingstipp!
Lass deiner Website Platz zum Atmen. Heißt konkret: Jeder Abschnitt sollte ober- und unterhalb des eigentlichen Inhalts (also Text, Bild, Formular, etc) Abstand bekommen.
Damit wirken die einzelnen Bausteine nicht gedrückt und das Auge der Betrachtenden kann in Ruhe die Inhalte scannen.
Trotzdem gilt: Übertreibe es nicht! Besucher:innen sollen nicht das Gefühl bekommen, dass weiter unten nichts mehr kommt, weil der Abstand zum nächsten Elemente zu groß ist.
Und überprüfe es auch auf deinem Tablet und dem Smartphone. In der kleineren Ansicht musst du die Abstände oft etwas verkleinern.
6. Mache klickbare Elemente sichtbar
Mittlerweile weiß natürlich jede:r User:in, dass Buttons klickbar sind und Links im Text andersfarbig dargestellt werden.
Daher solltest du das auch genauso auf deiner Website umsetzen.
Bei Buttons kannst du zusätzlich mit einer anderen Farbe arbeiten, sobald jemand mit der Maus darüber schwebt. Oder einem Symbol, wie einem Pfeil, das beim Hovern erscheint. Funktioniert natürlich nur in der Desktop-Variante deiner Website.
Links im Text sollten unbedingt eine andere Farbe bekommen. Zusätzlich kannst du sie auch fett markieren oder sogar unterstreichen – je nachdem, was besser zu deinem Webdesign passt.
Bleibe bei der Gestaltung konsistent. Entscheide dich für einen Stil und behalte das über deinen kompletten Webauftritt bei.
7. Webdesign-Tipp: Nutze die visuelle Hierarchie, um Besucher:innen zu lenken
Du kannst mit Größe und Farben die Augen deiner Besucher:innen bewusst auf die wichtigen Informationen lenken.
Zum Beispiel sind Call To Actions, also Handlungsaufforderungen, wichtiger, als deine Über-Mich-Beschreibung auf der Startseite.
Im Kombination mit genügend Weißraum ist es fast schon einfach, deiner Website optisch eine Art Gebrauchsanweisung zu geben.
4 Webdesign-Tipps für die Technik
1. Responsive Webdesign ist nicht mehr “nice-to-have”
Deine Website muss als erstes auf dem Smartphone und dem Tablet funktionieren!
Vielleicht rufst du jetzt laut, dass deine Zielgruppe aber gar nicht mit dem Handy ins Internet geht.
Das stimmt wahrscheinlich nicht, denn mittlerweile hat eigentlich jede:r ein Smartphone, aber noch längst nicht jede:r einen Laptop oder Computer.
Aber gehen wir mal davon aus, dass du Recht hast.
Dann ist da immer noch Google. Und Google sagt: Mobile first! Egal, was deine Zielgruppe nun macht oder nicht.
Als erstes guckt sich Google immer die mobile Version deiner Website an. Überzeugt die nicht, kann deine Desktop-Version noch so schön sein, Google wird dir keine gute Platzierung in den Suchergebnissen zuweisen.
Auch wenn es (meiner Meinung nach) nicht wirklich Spaß macht, mobil zu optimieren, ist es 2022 trotzdem Pflicht!
2. Achte auf deinen Pagespeed
Leider auch ein Faktor, der für Google wichtig ist.
Deine Website muss sich schnell aufbauen und Besuchende nicht vor einem leeren Bildschirm warten lassen.
Testen kannst du das unter anderem hier: PageSpeed Insights.
Ganz neu habe ich ein Tool entdeckt, bei dem du direkt mehrere Unterseiten auf die Geschwindigkeit testen kannst: Page Speed Test.
In den meisten Fällen sind zu große Bilder oder zu viele Animationen für langsame Ladezeiten verantwortlich.
Denke wieder an den ersten Webdesign-Tipp fürs Optische: Halte deine Seite einfach. Wahrscheinlich braucht es nicht an jeder Stelle Content, der von der Seite “einfliegt” oder sich beim Scrollen “dreht”.
Bildergrößen sollten übrigens zwischen 150 und 200 KB groß sein, bei Grafiken und Logo reichen sogar 50 KB.
3. Suchmaschinenoptimierung
Technische Suchmaschinenoptimierung ist ebenfalls ein wichtiger Faktor, wenn du langfristig über Google gefunden werden willst.
Dazu gehören unter anderem:
- Schnelle Ladezeiten (Tipp 2)
- Responsive Webdesign (Tipp 1)
- Strukturierter Aufbau, der logisch ist (lies dazu auch diesen Artikel: Website-Struktur: 5 Schritte für mehr Ordnung (und mehr Kund:innen)
- Meta-Beschreibungen für deine Unterseiten.
Falls du noch Optimierungsbedarf hast, kannst du dir auch diesen Artikel durchlesen, indem ich dir noch weitere SEO-Tipps verrate: Wie kommt deine Website bei Google nach vorne?
4. Logo-Klick zurück zur Startseite
Eine Sache, die sich mittlerweile total durchgesetzt hat und die die meisten Besucher:innen erwarten: Mit einem Klick auf das Logo kommen sie wieder zurück zur Startseite.
Überprüfe, ob das auch bei dir so ist.
Zum Abschluss: 4 inhaltliche Webdesign-Tipps
1. Weniger ist mehr
Menschen sind entscheidungsfaul.
Je mehr du ihnen zur Auswahl bietest, desto weniger können sie eine Entscheidung treffen und desto höher ist das Risiko, dass sie deine Website wieder verlassen.
Je zielgerichteter dein Aufbau und deine Inhalte sind, desto eher steigen die Chancen, dass Besucher:innen einen Schritt weitergehen.
Daher gilt:
- Deine Texte sollten so lang wie nötig, aber so kurz wie möglich sein.
- Jede Unterseite hat nur ein Ziel.
- Verwende im Menü so wenig Punkte wie möglich!
2. Impressum & Datenschutz gehören in den Footer
Impressum und die Datenschutzerklärung sind wichtige Seiten, die du natürlich unbedingt brauchst.
Aber sie sind nicht wichtig genug, um im Menü einen Platz zu finden.
Es reicht völlig aus, wenn du beide in deinem Footer verlinkst und im Menü nur die wirklich wichtigen Inhalte aufzeigst.
3. Besucher:innen sind wie Herdentiere
“Immer der Masse nach” gilt nicht nur auf dem Weg von der Haltestelle zur Konzerthalle in der fremden Stadt.
Auch auf deiner Seite kannst du es dir Zunutze machen, dass Menschen gerne das tun, was andere Menschen ebenfalls tun oder getan haben.
Zeige daher unbedingt Testimonials, Bewertungen oder andere Beweise für dein Angebot. Die überzeugen viel mehr, als jede schöne Website.
4. Kein Beamtendeutsch
Es gibt nichts schlimmeres, als wenn ich auf einer Website nach einer Lösung suche, aber von Fachausdrücken und geschwollenen Formulierungen erschlagen werde.
Denke daran: Deine Besucher:innen brauchen dich, weil sie Sache X nicht alleine schaffen können oder wollen. Sie haben in der Regel nicht die tiefe Kenntnisse, die du hast.
Sie kennen daher wahrscheinlich nicht die Fachausdrücke, die in deiner Branche üblich sind. Erkläre daher alles so einfach wie möglich. Am besten, dass es auch deine 6-jährige Nichte versteht.
Gleiches gilt für geschwollene Sprache. Nein, du wirkst dadurch nicht klüger. Eher das Gegenteil. Schreibe in einfachen Worten und einfachen Sätzen.
Stephen King hat mal folgendes gesagt: Ich schreibe einfache Geschichten für einfache Leute.(Nicht das originale Zitat, daher nicht in “” gesetzt).
Und er verkauft haufenweise – HAUFENWEISE – Bücher!
Sei daher ruhig ein bisschen mehr wie Stephen King.
Du kannst das!
Klar ist es eine gute Idee, deine Website von einem Profi erstellen oder überarbeiten zu lassen. Aber nicht immer ist das nötige Budget da.
Mit meinen 15 Webdesign-Tipps kannst du deinem Webauftritt auch ohne Design-Ausbildung und jahrelange Erfahrung einen professionellen Touch verleihen, bis es irgendwann Zeit für einen Relaunch wird.
Professionelle Website-Analyse selbst gemacht!
Finde schnell & einfach heraus, wie der Zustand deiner Website ist und wie du sie überarbeiten kannst. In Zukunft bekommst du außerdem regelmäßig Tipps, Wissenswertes, Anleitungen und Angebote, um deine Website weiter verbessern zu können. Meine Website-Analyse erhältst du als Dankeschön direkt nach der Anmeldung.
0 Kommentare