+49 221 292 79 88 0 kontakt@zachermedia.de

Webdesign Tipps vom Profi – 15 Dinge, die gutes Webdesign ausmachen

Kevin Zahn
3. August 2021

17 Min. Lesedauer

Erfolgreiche Unternehmen haben ein paar Dinge gemeinsam. Unabhängig von ihrer Branche haben die meisten Unternehmen im 21. Jahrhundert eine Unternehmenswebsite, die gut und professionell ist und einige ausschlaggebende Kriterien erfüllt. Während Webdesign-Trends (und vor allem Design-Trends) kommen und gehen, gibt es ein paar Dinge, die jede Unternehmens-Website haben sollte. Auf diese Dinge ist nicht zu verzichten, wenn Sie möchten, dass Ihre Website modern, nutzerfreundliche und Kunden-gewinnend ist und erfolgreich bleibt.

Die Website Ihres Unternehmens ist enorm wichtig, denn sie ist eines der mächtigsten Werkzeuge, die ein Unternehmen haben kann. Websites schaffen Vertrauen und Glaubwürdigkeit, erhöhen die Professionalität, schaffen Relevanz, erregen Aufmerksamkeit und steigern das Geschäft. Ihre Website ist Ihr größtes Geschäftskapital und Ihr bester Mitarbeiter, denn sie läuft 24 Stunden am Tag, 7 Tage die Woche, 365 Tage im Jahr – auch wenn Sie schlafen. Wenn Ihre Website Ihrem Unternehmen keinen Nutzen bringt, ist sie nicht effektiv.

Egal ob Sie ein Start-up oder ein etabliertes Unternehmen haben, Ihre Website sollte 15 Dinge haben, um stets nutzerfreundlich und gewinnbringend zu bleiben.

Inhaltsverzeichnis

1. Schönes Webdesign

Wir fangen direkt mit einem der wichtigsten Aspekte an: Eine Website kann nicht gut sein, wenn sie auf den ersten Blick nicht gut aussieht und den Nutzer für sich gewinnt. Das klingt erstmal hart und vielleicht auch etwas komisch, denn natürlich kann eine Website gut sein, auch wenn sie nicht gut aussieht. Es ist jedoch bewiesen, dass wenn ein potenzieller Kunde auf Ihrer Seite landet, er nur 50 Millisekunden braucht, um zu entscheiden, ob er auf Ihrer Website bleiben möchte oder wieder geht. Das wiederum hat direkt etwas damit zu tun hat, wie gut Ihre Website performt.

Das Webdesign sollte mit Ihrer Branding-Strategie übereinstimmen, sodass ein Besucher in dem Moment, in dem er Ihre Website besucht, in der Lage ist, Ihr Unternehmen und seine Werte sofort zu verstehen. Alles passiert innerhalb von einigen Millisekunden: Der Nutzer analysiert alle Punkte auf Ihrer Website (vieles auch unbewusst) und trifft die Entscheidung, ob er weiter auf der Seite bleibt oder sie verlässt. Sorgen Sie also für einen guten ersten Gesamteindruck, dann sollte der halbe Weg schon gegangen sein.

Um genau zu wissen, was der Nutzer im ersten Moment alles analysiert können Sie ja vielleicht selbst daran denken, worauf Sie achten, wenn Sie eine Website besuchen. Einige Punkte, die eine Rolle spielen sind: Ladezeit der Bilder und Texte, ordentliche Navigation, guter Gesamteindruck von Farb- und Textkombinationen, Kombination anderer Designelemente auf der Seite.

2. Benutzerfreundlich & überschaubar

Ihre Seite muss auf jeden Fall überschaubar bleiben und darf nicht zu überladen sein. Achten Sie besonders auf diesen Punkt, denn wenn zu viele Elemente auf einer einzelnen Seite sind (und zu viele unterschiedliche Elemente genutzt werden), verwirrt und irritiert das den Nutzer. Versuchen Sie möglichst konsistent zu bleiben. Wenn Sie auf vier von fünf Webseiten etwas mittels Erklärvideos dargestellt haben, schreiben Sie auf der fünften Seite keinen 4000 Wörter langen Text. Das ist nicht besonders erfreulich und steht nicht besonders für einen nutzerzentrierten Aufbau der Website.

Machen Sie kleinere Änderungen nur nach und nach und bleiben Sie stets konsistent! Nachdem die Website einige Zeit online ist, können Sie sie überarbeiten und mittels innovativer Techniken wie Animationen, humorvollen Mikrointeraktionen, versteckten Menüs, oder einer anderen Typografie erweitern, um das perfekte Benutzererlebnis zu schaffen.

Großer und schwer lesbarer Text, ablenkende Funktionen und widersprüchliche Farben gehören der Vergangenheit an. Veraltete Websites verlieren beim Publikum schnell an Glaubwürdigkeit.

Ein extremes Beispiel für eine sehr schlechte Website. Die „schlechteste Website der Welt“ erweckt im ersten Moment auch einen sehr schlechten Eindruck

3. Farben

Bei Farben auf Websites gibt es eigentlich nur zwei Sachen zu beachten: Bleiben Sie Ihrer Corporate Identity (CI) treu und suchen Sie sinnvolle Farbkombinationen aus. Die CI sollte beachtet werden, da die Farben auf Ihrer Website natürlich auch ein Wiedererkennungsmerkmal darstellen. Bei einer Farbwahl für die eigene Website reicht es oftmals bei dem klassischen Weiß und Schwarz zu bleiben und einige Akzent- und Linkfarben in den Farben Ihrer CI zu nutzen.

Denken Sie außerdem daran, dass Farben verschiedene Emotionen erwecken können und unterschiedliche Farbkombinationen einfach nicht sinnvoll sind, da Texte und Logos dann unterschiedlich gut gelesen werden können. Manchmal bietet es sich an nach fertigen Farbkombinationen oder Farbpaletten zu suchen um daraus dann drei oder vier Akzentfarben zu wählen und auf Ihrer Website zu nutzen.

Farbkombinationen auf der Website https://www.theworldsworstwebsiteever.com/

4. Schriften

Bei Schriftarten ist es ähnlich wie bei Farben: Sie müssen zu der Corporate Identity passen und auch zur Branche, zum Publikum und zum Inhalt der Website. Haben Sie viel Text auf Ihrer Website, suchen Sie sich eine serifenlose Schriftart um den Nutzer nicht zu überfordern und das Nutzererlebnis so gut wie möglich zu gestalten. Sie können für einfachen Text immer bei den gängigsten Schriftarten wie Arial, Helvetica oder Verdana bleiben. Niemand wird sich darüber ärgern, dass auch auf Ihrer Website der Text in Arial steht.

Wenn es allerdings um Logos oder Überschriften geht, kann hier beliebig gewählt werden. Des Öfteren werden Titel und Headlines im gleichen Schriften-Stil wie das Logo dargestellt, was den Vorteil mit sich bringt, auch nochmal den Wiedererkennungswert zu stärken.

Auf einer Website ist es empfehlenswert maximal drei unterschiedliche Schriftarten zu nutzen. Sie können dann für den Fließtext eine erste Schriftart wählen, für Überschriften eine zweite und ggf. für Zwischenüberschriften eine dritte. So bleibt die Website für den Nutzer stets überschaubar und wirkt nicht zu überladen.

5. Ausreichend Leerstellen

Auf einer überschaubaren Website muss es auch genügend Freiraum geben. Freiraum gibt Ihrem Nutzer die Möglichkeit sich auf der Website zu orientieren und dient auch gleichzeitig dazu, dass die unterschiedlichen Design- und Textelemente nicht zu sehr aneinander kleben.

Sie können hier unterschiedliche Elemente wie z. B. Trennlinien, unterschiedliche Überschriften oder Kästchen zur Hilfe ziehen, die Ihre Website-Inhalte strukturieren und ordnen.

Eine Navigation oder ein Menü sollten auf jeden Fall eins sein: logisch nachvollziehbar. Unterschätzen Sie Ihre Website-Besucher nicht, verlangen Sie aber auch nicht zu viel von Ihnen. Eine simple Navigation ist definitiv ein klarer Pluspunkt für Ihre Website, denn nichts ist irritierender, als diese eine, sehr wichtige Information nicht zu finden.

Benennen Sie die Menüpunkte auf Ihrer Website sinnvoll und seien Sie nicht zu kreativ. Außerdem sollten Sie Unterpunkte auch sinnvoll ihren übergeordneten Punkten zuordnen. Heißt also: Nennen Sie die Sektion mit Informationen über Ihr Unternehmen nicht „Wir“, sondern bleiben Sie beim guten und alten „Über uns“ oder „Unternehmen“. Ordnen Sie weitere Unterpunkte wie „Das Team“ oder „Jobs“ nicht irgendwelchen Seiten zu, sondern immer der „Über uns“-Seite.

Versuchen Sie auf eine gewisse Konsistenz zu achten. Wenn Sie also nur Substantive als Menüpunkte verwenden wie z. B. „Webdesign“, „SEO“ und „Webhosting“, nutzen Sie als vierten Punkt nicht „Unsere Referenzen“, sondern bleiben Sie bei dem Wort „Referenzen“. Vielen Unternehmen fallen solche Kleinigkeiten im Wording nicht auf, sie machen für den Nutzer aber einen großen Unterschied.

Das Menü auf der Website der zacher media gmbh ist gut strukturiert, mit Unterpunkten und konsistentem Wording

7. Auto-Play

Über das Thema Auto-Play streiten sich die Geister noch heute, jedoch sind hier auch einige Punkte zu beachten. Denken Sie als Erstes immer an die Ladezeit, denn Ladezeiten werden extrem beeinträchtigt, wenn Videos automatisch abspielen, sei es im Hintergrund (als Background-Videos) oder nicht. Des Weiteren sollten Sie sich auch fragen, ob der Nutzer das Video überhaupt sehen will. Vielleicht ist es besser ihm die Möglichkeit zu geben, selbst zu entscheiden, ob das Video jetzt sein mobiles Datenvolumen (falls er auf dem Smartphone unterwegs ist) konsumieren soll oder nicht. Außerdem muss bei Auto-Play auch beachtet werden, ob der Ton mit abgespielt werden soll oder nicht.

Einige Browser bieten bereits an, die Autoplay-Funktion von Videos auszuschalten, was also heißt, dass Nutzer eher dazu tendieren, diese Funktion als lästig zu empfinden. Unser Tipp hier: Bauen Sie Videos ohne Autoplay ein um dem Nutzer die Entscheidung zu überlassen, ob das Video geladen wird oder nicht.

8. Call to Action & Kontaktinformationen

Eine Website ist dafür da, Ihre Besucher dazu zu bringen, etwas zu tun. Was die Kunden tun sollen, liegt in Ihren Händen. Das finale Ziel einer Website könnte sein ein Kontaktformular auszufüllen, ein Produkt zu kaufen, sich für einen Newsletter anzumelden oder ein Beispielprodukt zu bestellen. Jede Website hat ein anderes Ziel. Jedoch ist es enorm wichtig, dass Sie sich über Ihre Ziele im Klaren sind, damit Ihre Handlungsaufrufe strategisch passend gestaltet werden können.

Stellen Sie sicher, dass Ihre Website mit den notwendigen Call-to-Actions ausgestattet ist. Diese Anweisungen sind nützlich, um Besucher zu Aktivitäten zu leiten, die für die Durchführung von Aktionen erforderlich sind, wie z. B. ein Online-Einkauf, die Inanspruchnahme von Rabatten, oder auch das Abonnement Ihres Newsletters. Die meisten CTAs sind Schaltflächen mit Texten wie „Jetzt kaufen“, „Hier herunterladen“ oder „Heute abonnieren“. Es muss eine klare Handlungsaufforderung sein.

Es ist wichtig, dass Ihre Website ausführliche Kontaktinformationen an prominenter Stelle auf Ihrer Website anzeigt. Platzieren Sie Ihre Telefonnummer, E-Mail-Adresse, Geschäftsadresse und -zeiten an einer gut sichtbaren Stelle. Sie können diese Elemente in der Kopfzeile, in der Fußzeile oder auf einer Kontaktseite in der Hauptnavigation anbringen. Wenn Ihre Website-Besucher Sie anrufen, eine Bestellung aufgeben oder weitere Informationen anfordern möchten, ist es wichtig, dass sie die aktuellen Kontaktinformationen immer und überall finden können.

9. Testimonials

Ein absolutes Muss ist es, einen Testimonial-/Referenzbereich auf Ihrer Website zu haben, in dem alle Referenzen (bzw. eine Auswahl) aufgeführt werden, die die Wertschätzungen zufriedener Kunden beinhalten. Durch diesen Bereich auf Ihrer Website können Sie sehr schnell die Glaubwürdigkeit Ihres Unternehmens für zukünftige Kunden erhöhen. Referenzen sorgen dafür, dass sich neue Websitebesucher und potenzielle Neukunden direkt wohler fühlen und Ihrer Website bzw. dem Produkt oder der Dienstleistung stärker vertrauen. Das liegt daran, dass diese Websitebesucher das Gefühl haben, dass Sie schon davor „getestet“ wurden und es sicher ist, die Leistungen Ihres Unternehmens in Anspruch zu nehmen. Die Chancen steigen, dass sich ein potenzieller Neukunde für Ihr Unternehmen entscheidet.

Platziert werden können die Testimonials direkt auf der Startseite. Alternativ können sie auch eine Unterseite „Referenzen“ anlegen, auf der Sie nochmal im Detail auf einige Referenzen eingehen, oder Case Studies zeigen.

Referenzen auf der Website der zacher media gmbh

10. Einen guten Webhosting-Anbieter & Sicherheit

Sicherheit geht vor und Sicherheit darf auf keiner Website fehlen! Wenn Ihre Website Informationen von Besuchern einsammelt (bspw. mittels Kontaktformularen), sollte die Mindestanforderung eine SSL-Verschlüsselung der Daten sein. Der dedizierte Server Ihres Unternehmens sollte SSL installiert haben, ebenso wie Ihr Hosting-Service. Mittlerweile bieten die meisten Hosting-Dienste Pakete mit kostenfreien SSL-Zertifikaten an.

Apropos Hosting: Wenn Sie selbst hosten, ist es am besten, einen dedizierten Server zu haben oder ein Hosting-Paket mit einem dedizierten Server zu bekommen, da die Geschwindigkeit im Vergleich zu Shared-Hosting-Paketen garantiert ist. Shared Hosting birgt auch eine Reihe von Sicherheits- und Nicht-Sicherheitsrisiken.

Es gibt gefühlt so viele Webhosting-Anbieter wie Sand am Meer. Da ist es selbstverständlich, dass die Entscheidung für einen einzigen manchmal sehr schwer sein kann. Jedoch darf ein guter Webhosting-Service heutzutage nicht fehlen und sollte eine Priorität für eine professionelle Website sein. Auf jeden Fall sollte eine SSL-Verschlüsselung nicht fehlen.

Über unseren Webhosting-Anbieter All-Inkl haben wir bereits einen Erfahrungsbericht geschrieben, der die wichtigsten Funktionen und Leistungspakete aufzählt. Auch Punkte, die uns negativ aufgefallen sind, haben wir mitaufgenommen, damit Sie nicht nur die positiven, sondern auch die negativen Aspekte des Anbieters kennenlernen. Lesen Sie es sich doch gerne durch, falls Sie noch auf der Suche nach einem Webhosting-Anbieter sind.

11. Geringe Ladezeit der Website

Jeder erfahrene Webdesigner wird darauf achten, dass Ihre Website wenigstens minimal gute Ladezeiten erzielt und versuchen dies so gut wie nur möglich, zu optimieren. Dieser Ladezeiten-Faktor wird leider nicht immer optimal umgesetzt, was bei den Nutzern zu Frust führt und sie in den meisten Fällen dazu bringt, die Website schneller zu verlassen.

Optimieren Sie den Code Ihrer Website, sorgen Sie dafür, dass kein unnötiger Code geladen wird und optimieren Sie die Größe der Bilder, Videos und anderen medialen Inhalten, die Sie auf Ihrer Website einbauen. Mit dem Tool TinyPNG lassen sich bspw. Bilder problemlos online verkleinern. Mit den PageSpeed Insights von Google können Sie sich im Nachhinein anschauen, wie Ihre Website performt und wie die Ladezeiten sowohl für Desktop als auch für mobile Endgeräte sind.

12. Responsive Design & Mobile-friendly

Im Laufe der letzten Jahre sind mobile Anfragen immer häufiger geworden, weshalb auch Sie darauf achten sollten, dass Ihre Website responsive ist und auf Smartphones (und anderen Endgeräten) gut angezeigt wird. Wenn Sie von den boomenden Marktmöglichkeiten profitieren möchten, muss Ihre Website responsive gestaltet werden. Durch das Einsetzen von responsive Webdesign ist es möglich, dass Nutzer von allen Geräten mit den verschiedensten Bildschirmauflösungen auf Ihre Website zugreifen können und diese dann wunderschön aussieht.

Unter responsivem Webdesign versteht sich Webdesign, dass sich je nach Gerät der Bildschirmgröße optimal anpasst. Somit wird verhindert, dass die Schriftgröße auf einem Smartphone zu klein ist oder man gar heranzoomen muss. Responsive Webdesign ist einer der wichtigsten Aspekte in der User Experience, da die Website optisch nicht nur von den Farben und bspw. Schriften ansprechend sein sollte, sondern alles andere auch anpassungsfähig sein sollte. Das heißt also, dass eine Tabelle auch automatisch kleiner oder größer wird oder, dass sich Elemente neu anordnen, je nach Ausrichtung und Größe des Endgeräts. Z. B. kann man hier von Sachen wie „Grid-Layout“ oder auch flexiblen Schriftgrößen reden, die beim responsiven Webdesign mit einbezogen werden.

Gut zu wissen: Im Juli 2019 wurde der Mobile-First-Index von Google offiziell eingeführt und seit März 2021 soll der Mobile-Only-Index als Standard für alle Websites gelten. Websites ohne mobil-optimierte Versionen werden nicht mehr in den Suchergebnissen angezeigt und verlieren an Ranking. Noch ein guter Grund auf responsives Webdesign umzusteigen. Nicht nur das positive Kundenerlebnis, sondern auch das Suchmaschinenranking profitiert von responsive Webdesign.

Eine mobil-optimierte Website bringt Ihren Nutzern Freude und erleichtert die Navigation

13. Overflow

Dieser Punkt hat mehr oder weniger auch etwas mit responsivem Webdesign zu tun, aber kann dennoch für sich stehen. Achten Sie einfach darauf, dass alles passt und keine Inhalte untergehen. Was genau meinen wir damit? Schauen Sie sich dazu die folgenden Screenshots an.

Was fällt Ihnen an den beiden Screenshots auf? Nun ja, wir können Ihnen auf die Sprünge helfen: Der Nutzer muss scrollen. Einmal muss er nach rechts scrollen und einmal nach unten. Vermeiden Sie unbedingt beide Szenarien auf Ihrer Website! Die User Experience leidet enorm unter solchen Einstellungen und der Nutzer ist irritiert und verlässt Ihre Website, wenn er nicht unbedingt auf der Website bleiben muss.

Im technischen Bereich nennt man diese Eigenschaft „overflow“, d. h. der Text oder die Inhalte laufen über etwas drüber oder tun es nicht. In dem ersten Beispiel der Yale School of Art hätte man den Infokasten einfach etwas breiter machen können, damit der Nutzer nicht extra scrollen muss um „verdeckte“ Inhalte sehen zu können. Im zweiten Beispiel ist es einfach nur ein dramatisches Usability-Problem, da man mit einer absolut positionierten Box das komplette Website-Layout zerschossen hat. Wenn es nicht ausdrücklich erwünscht ist – aktuell sind bspw. Websites im Trend, in denen man horizontal scrollen kann – sollten Sie dafür sorgen, dass man auf Ihrer Website einfach nur nach unten und oben scrollen kann. Ihre Nutzer werden Ihnen dankbar sein.

14. Cross Browser Testing

Wie der Titel es schon sagt, sollte Ihre Website überall schön sein und gut aussehen. Auf dem Smartphone sieht Ihre Website jetzt schon super aus, da Sie sich an den Tipp Nr. 12 gehalten haben, aber was ist mit anderen Browsern? Nicht alle User dieser Erde nutzen Google Chrome, viele nutzen auch Mozilla Firefox oder gar den Internet Explorer. Deshalb ist es wichtig Ihre Website nicht nur auf unterschiedlichen Endgeräten zu testen, sondern auch in unterschiedlichen Browsern auf den unterschiedlichen Endgeräten.

In den meisten Fällen reicht es schon, wenn Sie sich die Website vom PC aus in den unterschiedlichen Browsern genauer anschauen und dann auf all den anderen Endgeräten nur mal drüber schauen, ob alles gleich oder weitestgehend gleich angezeigt wird. Wenn Sie das „Cross Browser Testing“ machen wollen, reicht es aus, wenn Sie sich folgende Browser anschauen: Google Chrome, Mozilla Firefox, Opera, Microsoft Edge, Internet Explorer und Apple Safari.

15. Inhalte aktuell halten

Generell und für alle Websites gilt es außerdem, die Inhalte stets aktuell zu halten. Schauen Sie mal von Zeit zu Zeit über Ihre Website drüber und beachten Sie, ob die Informationen noch aktuell sind und am wichtigsten, ob alle Bilder, Videos, GIFs etc. richtig eingebunden sind und es keine „Broken Links“ gibt. Eine der schlimmsten Sachen für einen User ist es, wenn ein Link ins Nichts führt, oder wenn dieses kleine zerbrochene Icon erscheint, was darstellt, dass ein Bild fehlt oder nicht gefunden wurde.

Auf der Seite https://uglytub.com/ gibt es oben im Header zwei „Broken Images“

Ist Ihre Website erfolgreich?

Um zu erfahren, ob Ihre Website erfolgreich ist, sollten Sie Ihre Ziele eingrenzen und klar definieren, was für Sie Erfolg bedeutet. „Erfolgreich sein“ ist sehr subjektiv, denn für jeden lässt sich Erfolg anders beschreiben. Genau dasselbe gilt auch für Ihre Firmenwebsite. Für die einen bedeutet Erfolg, dass Sie 1.000 Websitebesucher im Monat haben, für die anderen ist es bereits erfolgreich, wenn in einem Monat 10 Conversions erfolgen. Daher ist es wichtig, dass Sie Ihre Erwartungen, Ziele und Erfolgsansichten definieren. Erst dann können Sie messen, wie erfolgreich Ihre Website wirklich ist.

Für eine erfolgreiche Website mit vielen monatlichen Besuchern braucht es neben einem guten Webdesign auch zielgerichtete SEO-Maßnahmen, die Ihre Website für die organischen Suchanfragen auf Google und Co. optimieren. In unserem Blogbeitrag zum Thema SEO und SEO-Optimierung, können Sie sich über SEO-Maßnahmen informieren und diese auf Ihrer Website anwenden.

Zusammenfassend lässt sich festhalten, dass gutes Webdesign schon ein recht komplexes Thema ist, denn man muss viele Punkte berücksichtigen, was auf den ersten Blick sehr überwältigend erscheinen kann. Arbeiten Sie also „nach Plan“: Erstellen Sie einen genauen Zeitplan und eine Checkliste, wenn es darum geht, Ihre Website zu erstellen oder zu optimieren. Falls es Ihnen dennoch ein zu komplexer Bereich ist, nehmen Sie Kontakt mit uns auf und wir beraten Sie umfangreich um gemeinsam mit Ihnen eine funktionale und moderne Website zu erstellen.

Autor

Kevin Zahn

Kevin Zahn

Kevin ist Designer und Webdesigner bei der zacher media gmbh. Er kümmert sich hauptsächlich um die Gestaltung von Websites, Corporate Designs und steckt hinter den Animationen und Videos, die auf der zacher media- und allen Kundenseiten zu finden sind. Er unterstützt das Team in allen Angelegenheiten zum Thema Design.

Diese Beiträge könnten Sie auch interessieren

Kommentare

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Starten wir gemeinsam etwas einzigartiges

Erfolgreiche Projekte leben von der Kommunikation von Mensch zu Mensch. Wir freuen uns auf Ihre Kontaktaufnahme um auch Ihr Projekt einmal persönlich zu besprechen.

zacher media webdesign und grafikdesign

+49 221 292 79 88 0

zacher media webdesign und grafikdesign
Ensorstr. 2
50939 Köln
!

Montag - Freitag: 09:00 - 17:00

Webdesign Tipps vom Profi – 15 Dinge, die gutes Webdesign ausmachen