Meine Top 20 Webdesign Tipps

Achte auf Mobile – mache deine Website responsive

Dies ist vermutlich einer der wichtigsten Webdesign Tipps, den du aber hoffentlich schon befolgt hast. Es greifen immer mehr Leute per Smartphone oder Tablet auf Websites zu, deshalb muss dein Webdesign responsive sein, also auch auf Mobilgeräten gut aussehen und bedienbar sein!

Die 2-3 Farben Palette

Natürlich sollte ein Webdesign (in der Regel) nicht nur schwarz-weiß sein, aber manchmal neigt man dazu es zu übertreiben und zu bunt zu machen. Wähle eine Primärfarbe und eine Sekundärfarbe für deine Website aus. Diese ergeben sich meistens aus deinem Logo oder der CI („Corporate Identity“). Zusätzlich zur Primär- und Sekundärfarbe lohnt es sich noch eine weitere Farbe (neben Weiß) als Hintergrundfarbe auszuwählen, um damit beispielsweiße den Hintergrund von Boxen zu färben oder um sie als „Eye Breaker“ zu benutzen.

Ab und zu ein „Eye Breaker“ einbauen

Um etwas Abwechslung in dein Webdesign zu bringen, vor allem bei langen Seiten, kannst du zwischendurch einen Eye Breaker einbauen. Dies kann z.B. ein Call-To-Action Banner sein oder eine Sektion mit einer anderen Hintergrundfarbe. Dies wäre z.B. eine Einsatzmöglichkeit unserer ausgewählten Hintergrundfarbe (neben weiß) aus dem ersten Webdesign-Tipp „Die 2-3 Farben Palette“.

Sollte zum Unternehmen passen

Achte darauf, dass das komplette Webdesign ähnlich (oder besser gleich) deines restlichen Design deines Unternehmens ist, wie z.B. Flyer, Broschüren, Werbematerial, Angebote, Rechnungen, etc. Eine Website ist immer ein Anknüpfpunkt in die „Außenwelt“ zu deinen Kunden, daher sollte sie auch die Werte und Image deines Unternehmens widerspiegeln.

Einheitliche & passende Schriftart

Verwende für dein Webdesign nur eine oder maximal zwei verschiedene Schriftarten. Bei zwei oder mehreren Schriftarten verwendet man oft eine Schriftart für die Überschriften und für den „nomalen“ inhaltlichen Text die andere Schriftart.

Die richtige Schriftgröße

Wie im vorherigen Tipp beschrieben, ist nicht nur eine einheitliche Schriftart wichtig, sondern noch wichtiger ist eine gut lesbare Schriftgröße. Daher sollte, vor allem auf mobile, die Schriftgröße mindestens 16px betragen. Außerdem sollten die Hierarchien der Überschriften sich auch in der Schriftgröße unterscheiden, um so eine bessere Struktur und Hierarchie in deine Absätze und Zwischenüberschriften reinzubringen.

Genug Freiraum/Weißraum

Ich kenne das selbst: man neigt gerne dazu die einzelnen Elemente oder Abschnitte zu dicht zusammen zu packen. Daher solltest du bei deinem Webdesign auf genug Freiraum bzw. Weißraum achten, damit das Design etwas „luftiger“ und nicht so „gequetscht“ ist.

Mit großem Weißraum um ein bestimmtes Element erreicht man außerdem mehr Aufmerksamkeit auf das Element zu richten.

Weniger ist mehr

Ganz nach dem Motto „weniger ist mehr“, ist mein nächster Webdesign Tipp die Seiten zu arg voll zu stopfen. Natürlich lässt sich dies nicht immer vermeiden, weil es durchaus Seiten gibt die vielen Informationen enthalten (müssen). Allerdings solltest du dann zumindest auf eine klare Struktur, Gruppierung und genug Freiraum achten.

Schaffe genug Kontrast

Mit der Farbwahl genug Kontrast zu erzeugen ist vor allem aus zwei Gründen wichtig: Zum Einen hast du evtl. ältere Besucher deiner Website oder Besucher mit eingeschränkter Sehfähigkeit, die dann durch zu wenig Kontrast es deutlich schwerer haben werden. Zum Anderen ist der hohe Kontrast auch auf mobile wichtig, da aufgrund der Mobilität des Smartphones oder Tablet, sich der Websitebesucher in verschiedenen Lichtverhältnissen befinden kann, z.B. je nach Tageszeit, Umgebung, oder Sonneneinstrahlung.

Einfach und gut zu bedienen

Gestalte dein Webdesign so, dass es leicht zu bedienen und selbsterklärend ist. Mache dir also ausgiebig Gedanken darüber, wie deine Website strukturiert sein soll und wie es zu bedienen ist. Denn bei einem zu komplizierten Webdesign verliert der Besucher die Lust und verlässt deine Website.

Mache klar, welche Elemente klickbar sind und welche nicht

Passend zu den zwei vorherigen Webdesign Tipps, solltest du auch darauf achten, dass sofort ersichtlich ist welche Elemente deines Webdesign klickbar sind und welche nicht. Dies kannst du am besten über Farben, Cursor und Hover-Animation deutlich machen.

Ändere die Farbe der Links beim Hovern

Ergänzend zum vorherigen Webdesign Tipp noch der Tipp, dass sich die Farbe der Hyperlinks auf deiner Website ändern sollte, sobald man mit der Maus darüber fährt. Damit macht man eben deutlicher, dass es sich um einen Hyperlink handelt und dieser klickbar ist.

Hebe die wichtigen Elemente hervor

Um den Besucher in eine bestimmt Richtung oder zu einer bestimmten Aktion zu bewegen solltest du die wichtigeren Elemente oder z.B. Call-to-actions deutlicher hervorheben als die „unwichtigeren“ Elemente. Dies gelingt am besten durch deutlichere Farben, genug Freiraum um das Element und evtl. Schatten.

Impressum und Datenschutzerklärung gehören nicht in die Navigation

Es ist mittlerweile ein inoffizieller Standard, dass die Links zum Impressum und Datenschutzerklärung unten im Footer oder in der Copyright Zeile sitzen. Daher sollte man diese Seiten aus der Hauptnavigation weglassen. Man will den Nutzer ja nicht gezielt zu diesen Seiten leiten.
Außerdem ist es aus SEO-Sicht ungünstig Impressum und Datenschutzerklärung oben in der Hauptnavigation zu platzieren, weil sie damit viel zu viel Bedeutung bekommen.

Geeignete und qualitativ gute Fotos

Die Fotos auf deiner Website sollten natürlich nicht nur passend zum Thema sein, sondern auch qualitativ ein gewisses Niveau haben. Verpixelte Bilder sind heutzutage ein No-Go! Zumal mittlerweile jede Smartphone-Kamera ausreichend gute Bilder machen kann. Es muss also nicht immer extra ein professioneller Fotograf engagiert werden. Zur Not kann man auch auf Stockfotos zurückgreifen, obwohl ich eigentlich kein Fan davon bin. Vor allem wenn es kostenlose Stockfotos sind, kann es sein, dass diese sehr häufig auch auf vielen anderen Websites auftauchen.

Schnelle Ladegeschwindigkeiten

Dies ist ebenfalls ein Webdesign Tipp, welcher sehr wichtig ist: Achte unbedingt darauf, dass deine Website (ausreichend) schnell lädt. Speziell auf mobile ist ein schnelles Laden der Website noch wichtiger als auf Desktop.

1 Sekunde vs. 5 Sekunden mag zwar im ersten Moment nach kaum einem Unterschied klingen, aber wenn es um das Surfen im Web geht ist das ein enormer Unterschied!

Falls du bei der Optimierung der Ladegeschwindigkeit deiner WordPress Website Hilfe brauchst, melde dich gerne bei mir. Als WordPress Freelancer gehört dies nämlich auch zu meinen wichtigsten Aufgaben.

Wichtiges am Anfang

Verschiedene Beobachtungen zeigen immer wieder, dass Nutzer vor allem den Anfang und das Ende einer Seite anschauen. Daher sollten die wichtigsten Elemente und Informationen immer möglichst weit oben auf der Seite platziert sein. 
Weitere Informationen dazu erhältst du bei above the fold.

Keine Textwüsten

Oft hat man den Fall, dass eine Seite viel Fließtext enthalten soll. Nicht nur aus gestalterischer Sicht sollte man diese langen Textwände vermeiden, sondern diese sind auch für den Nutzer deutlich schlechter lesbar. Teile die Fließtexte daher in kürzere Abschnitte mit Zwischenüberschriften. Ebenfalls solltest du nicht nur Fließtext, sondern auch andere Elemente wie Listen, Aufzählungen, Tabellen, Bilder, Info-Boxen, etc. in den Text einstreuen. So schaffst du mehr Abwechslung und es macht dem Nutzer mehr Spaß deinen Content zu konsumieren.

Klick auf Logo führt zur Startseite

Ebenfalls inoffizieller Webstandard ist es, dass ein Klick auf das Logo immer zur Startseite führt. Das Logo in der Hauptnavigation ist also immer zur Startseite verlinkt.
Viele Webdesigner gehen mittlerweile sogar so weit und entfernen den extra Menüeintrag „Startseite“ oder „Home“ aus der Menüleiste.

Mache Telefonnummern und E-Mail-Adressen klickbar

Diese Funktion hast du bestimmt auch schon ein mal verwendet: Man klickt auf einer Website auf eine Telefonnummer oder E-Mail-Adresse und dann öffnet sich die Telefon-App oder das Mail-Programm. Dies sind beides nützliche Funktionen und sehr einfach umzusetzen.