Was ist Webdesign? (Und so wird es richtig gemacht)

Ok, schauen wir uns erstmal an, was Webdesign ist. Ganz kann ich Dir den definitorischen Kram leider nicht sparen. Ich halte es aber kurz und kompakt. Also, bringen wir es hinter uns.

Ok, soweit – so gut. Lass uns jetzt etwas tiefer einsteigen und einen praxisnahen Blick auf das Thema Webdesign werfen.

Webdesign meint also – logischerweise – die Erstellung einer Website mit all seinen Teilgebieten.

Eine Website dagegen ist eine Plattform auf der ihre Besucher etwas tun können. Sie suchen nach Informationen, kaufen etwas oder konsumieren. Meistens ist es eine Mischung aus verschiedenen Dingen.

Eine Website ohne seine Besucher ist zwecklos. Und eine Website, auf der Nutzer ihre Bedürfnisse nicht erfüllen können, ist mindestens nutzlos.

Deswegen besteht die Aufgabe von Webdesign – unter anderem – darin, die Erfahrung der Besucher, wenn sie kaufen, nach Informationen suchen usw., möglichst gut zu gestalten.

Und schon sind wir bei der Nutzererfahrung – der UX – gelandet. Das ging schnell.

Und das zahlt sich für Unternehmen auch richtig aus. Wieso? Sprechen wir darüber.

Je glücklicher Deine Besucher sind, desto profitabler ist Webdesign. Denn zufriedene User konsumieren vor allem bei Dir und weniger bei Deiner Konkurrenz.

Das Ganze können wir aber auch von der anderen Seite aurollen.

Schlechtes Webdesign wirkt sich negativ auf den Umsatz von Unternehmen aus. Besucher verlassen Deine Website frustriert und werden nicht konvertieren.

Unternehmen stecken vermehrt Geld in die digitale Vermarktung. SEO, bezahlte Anzeigen, Social Media – fast immer das Ziel der Werbekanäle? Die eigene Website. Wenn diese kaum oder gar nicht rentabel sind, ist häufig nicht der Werbekanal, sondern die Website das Problem.

Webdesign hat außerdem einen großen Einfluss – positiv, wie negativ – auf die Markenwahrnehmung Deines Unternehmens.

Im nächsten Abschnitt helfe ich Dir dabei, gutes Webdesign zu erkennen, wenn Du es extern einkaufen möchtest. Oder aber ich helfe Dir, es selbst zu erstellen.

Im folgenden Abschnitt möchte ich Dir dabei helfen zu verstehen, was gutes Webdesign eigentlich ist. Bevor Du jetzt denkst, dass das sowieso „nur Geschmacksache“ ist – keine Sorge, ist es nicht.

Wir sehen uns jetzt verschiedene Teilbereiche des Webdesigns an und klären gemeinsam, wann wir sie als „gut“ bewerten können. Anschließend zeige ich Dir 7 wichtige Prinzipien, die Du für die Erfüllung von gutem Webdesign beachten solltest.

Sehen wir uns zu Beginn an, wann Nutzer Webdesign als gut empfinden. Vorher haben wir schließlich gelernt, dass die bestmögliche Nutzererfahrung das wichtigste Ziel des Webdesigns ist.

Eine zu lange Ladezeit ist der erste Stolperstein von gutem Webdesign.

Sobald ein User beschließt, dass er gerade zu lange auf eine Website warten muss, war es das. Tableiste – Tab schließen – auf Wiedersehen. Oder besser: Auf Nimmer-Wiedersehen. Zweite Chancen gibt es im Web selten.

Die Bereitschaft auf den Inhalt einer Website zu warten unterscheidet nach Markt und Zielgruppe.

Um das einmal greifbar zu machen, schauen wir uns die folgenden Beispiele an:

Versuche also die Ladezeit Deiner Website möglichst gering zu halten. Kleiner Tipp: Die wahrgenommene Ladezeit kann durch eine Ladeanimationen verringert werden.

Sorge dafür, dass Dein Webdesign auf PC, Tablet und Smartphone gleichermaßen funktioniert.

Im Schnitt könntest Du also mehr Mobile- als Desktop-User haben. Wer die mobile Version seines Webdesign stiefmütterlich behandelt, behandelt die Nutzererfahrung von mehr als der Hälfte seiner User stiefmütterlich.

Deswegen empfiehlt sich in der Konzeption einer Website der sogenannte „Mobile-First-Ansatz„. Das heißt, wir Entwerfen die Struktur, das Layout und das Design einer Website zuerst für das Smartphone. Anschließend dann für die Desktop-Ansicht – nicht umgekehrt.

Responsives Webdesign meint aber viel mehr, als „nur“ auch für die mobile Ansicht zu optimieren. Unsere Nutzer haben zahlreiche verschiedene Geräte, Auflösungen und Bildschirme.

Responsives Webdesign meint übrigens vor allem die Optimierung von drei unterschiedlichen, typischen Bildschirmbreiten:

Das hat „früher“ durchaus Sinn gemacht. Heutzutage gibt es allerdings zahlreiche verschieden große Smartphones. Manche von ihnen sind faltbar. Mein Monitor ist beispielsweise doppelt so groß, wie ein normales MacBook.

Die klassische Aufteilung in 3 Gerätegruppen ist also nicht mehr ganz zeitgemäß. Heute muss sich gutes Webdesign noch viel präziser unterschiedlichen Bildschirmen anpassen. Deswegen setze ich vermehrt – wenn möglich – auf das Prinzip „Fluid Webdesign„.

Eine Website ist eine Ansammlung an verschiedenen Unterseiten (HTML-Dokumenten). User erwarten, dass sie möglichst ohne viel zu suchen von A nach B kommen.

Eine hilfreiche Navigation ist genau, wie eine schnelle Ladezeit und die Responsiveness, ein essenzieller Bestandteil von gutem Webdesign.

Wir unterteilen die Navigationsstruktur in drei wesentliche Kategorien:

Sehen wir uns zuerst die primäre Navigation an. Je größer eine Website ist, desto wichtiger ist sie.

Dein Hauptmenü ist unter Umständen der wichtigste Teil deines Webdesigns. Es sollte aufgeräumt und übersichtlich sein. Die User haben klare Erwartungen, wie ein Hauptmenü aussehen und funktionieren sollte. Weiche nur von Konventionen ab, wenn Du wirklich weißt, was Du tust.

Dein Footer sollte ebenfalls aufgeräumt sein. Hier kannst Du auch Newsletter-Anmeldung, Adresse und mehr „Generelles“ unterbringen.

Die Navigation durch Deine Website sollte klar und einfach zu verstehen sein. Ganz nach dem Motto des Buches „Don’t Make Me Think!“ von Steve Krug, sollten Deine User beim Navigieren möglichst wenig suchen oder nachdenken müssen.

Benutzerfreundlichkeit (Usability) beschreibt, wie einfach etwas zu nutzen ist.

Wenn User sich beim Nutzen einer Website schwer tun, sinkt die Nutzererfahrung. Und wie bereits wissen: Das heißt, auch das Webdesign ist schlecht.

Gutes Webdesign sollte also einfach (zu benutzen) sein. Das heißt aber nicht, dass es simpel sein muss. Aufwändige Animationen oder ein cooles Design können – je nach Markt – durchaus erwünscht sein. Wichtig ist nur: Der User versteht zu jeder Zeit, was gerade passiert.

Eine gute Usability lässt sich mit einem Usability Test überprüfen. Das sollte Deine Webdesign-Agentur auf jeden Fall beherrschen. Falls Du sie alleine testen möchtest, kannst Du das auch selbst mit ein paar Freunden durchführen.

So oder so: Wenn Du dich an Konventionen hältst, bist Du auf der sicheren Seite, was eine einfache Usability angeht. Verändere die Funktionalität von Menüs, Buttons, Links & Co. nicht.

Natürlich haben auch Unternehmen gewisse Ansprüche an ein gutes Webdesign: Höherer Umsatz, mehr Bewerbungen oder bessere Markenbekanntheit.

Trotzdem war es zuerst wichtig über die Sicht der User zu sprechen. Denn werden ihre Erwartungen an gutes Webdesign nicht erfüllt, wird das Unternehmen ihre Ziele auch weniger oder gar nicht erreichen.

Webdesign hat einen großen Einfluss auf die Wahrnehmung eines Unternehmens in den Augen der Zielgruppe. Deswegen führt schlechtes Webdesign dazu, dass Dein Unternehmen weniger attraktiv wahrgenommen wird. Und gutes Webdesign bewirkt das Gegenteil.

Die Farben, Typographie und die generelle Gestaltung einer Website sollte den Kern einer Marke „webfähig“ nach außen tragen.

Das Web ist kein Print-Produkt. Nehmen wir beispielsweise die Farbgebung eines Unternehmens. Die Hauptfarbe „blau“ muss sich plötzlich dynamisch anpassen. Bewegt ein User den Mauszeiger über einen Button, wechselt dieser die Farbe (sog. „Hover). Er zeigt jetzt zum Beispiel ein leicht dunkleres blau.

Das ist nur eines von vielen Beispielen, das zeigt, dass Gestaltung für das Web auch wirklich webspezifisch gedacht werden sollte.

Grundlegend sollte die Gestaltung des Webdesigns zum Unternehmen und zur Zielgruppe passend gestaltet werden. Ein Finanzdienstleister tritt schließlich „seriöser“ auf als ein Hersteller für Laufschuhe.

Solltest Du kein festgelegtes Corporate Design besitzen oder es ist so veraltet, dass es sowieso im Zuge des Webdesigns überarbeitet werden muss, möchte ich Dir jetzt ein paar Rahmenbedingungen mit auf den Weg geben:

Profitables Webdesign ist meist die Folge von nutzerfreundlichen und attraktiven Webdesign.

Trotzdem können wir die Conversions mit einem guten Webdesign weiter erhöhen.

Versuche Deine Dienstleistung oder Deine Produkte in den Augen Deiner Zielgruppe möglichst nützlich darzustellen.

Beschreibe sie umfangreich mit einem passenden Mix aus Texten, Bildern, Videos und Grafiken. Die richtige Aufbereitung der richtigen Inhalte ist ein ganz zentraler Bestandteil des Webdesigns.

Um eine möglichst gute Aufbereitung zu erstellen, kannst Du dir zum Beispiel für jede Unterseite überlegen, welche Informationen Deine User sehen möchten und wie Du diese am besten kommunizierst.

Damit Deine Besucher diese Inhalte auch konsumieren, ist es besonders wichtig, dass Du ihnen dabei hilfst sie konsumieren zu wollen. Textwände, unstrukturierte Layouts und pixelige Bilder sind allesamt Interesse-Killer.

Du weißt nun, dass gutes Webdesign die Bedürfnisse der Nutzer erfüllt, attraktiv und zusätzlich profitabel ist.

Ich möchte Dir nun 8 Prinzipien mit an die Hand geben, mit denen Du Dein Webdesign effektiv verbessern kannst.

Interaktivität ist ein wesentlicher Vorteil von Websites gegenüber Print-Produkten. Deswegen ist es umso wichtiger, dass Deine User keine Probleme in der Nutzung von Links & Co haben. Deine Buttons sollten mindestens 44px breit und hoch sein (auch, nein vor allem, mobile).

Außerdem sollte sich jedes klickbare Element von“normalem“ Inhalt abheben. Hebe sie also farblich hervor.

Überschriften mit einem runden Rahmen wäre keine gute Idee, da Nutzer ihn für einen Button halten könnten. Wörter im Text zu unterstreichen, führt unter Umständen dazu, dass Deine User es für einen internen Link halten.

Wenn manche Funktionen des Webs auf allen Websites gleich dargestellt werden, haben nahezu alle User bereits gelernt, wie sie funktionieren. Weichst Du nun von diesen Konventionen ab, werden Deine User schnell frustriert sein.

Gestalte Dein Webdesign so, dass es einfach zu lesen sind. Helle Schriftfarben auf hellen Hintergründen führen garantiert zu frustrierten Besuchern.

Wir stellen immer wieder fest, dass Firmen die Geduld ihrer User überschätzen. Deine primäre Navigation ist wahrscheinlich zu umfangreich. Halte sie kompakt und hilf Deinen Usern in unterschiedliche Teilbereiche Deiner Website zu navigieren. PS: Das Impressum und die Datenschutzerklärung haben hier nichts verloren.

Von Deinen Usern zu erwarten Textwände zu lesen, ist keine gute Idee. Im Web lesen wir Menschen keine Inhalte, wir scannen sie. Das heißt, wir hangeln uns durch die Struktur einer Seite und suchen nach einem Teil, der relevant für uns sein könnte.

Hilf Deinen Usern dabei, in dem Du ihnen Deine Texte in kleinen Teilen zur Verfügung stellst.

Gutes Webdesign ist einheitlich. So können Besucher es schnell verstehen und Inhalte konsumieren. Lege Dich vorher auf Farben und Schriftgrößen fest und setze diese konsistent ein.

Richtig gutes Webdesign ist schön und angenehm. Es ist interaktiv und vor allem reaktiv. Versuche die User Experience Deiner Besucher abzurunden, in dem Du ihnen etwas hochwertiges präsentierst.

Hierarchie in einem Design hilft Konsumenten dabei die Wichtigkeit von Inhalten unterbewusst abzuschätzen. Die Größe von Text oder Elementen, Animationen, Farbgebung im Verhältnis zu anderen Teilen Deiner Website bestimmt die wahrgenommene Wichtigkeit in den Augen Deiner User.

Wäge ab, welche Inhalte Du „lauter“ und welche Du „leiser“ gestaltest.

Um die volle Qualität eines Webdesigns zu bewerten, ist viel Aufwand nötig. Einen schnellen und häufig präzisen Eindruck kannst Du aber zügig erhalten.

Nachdem wir umfangreich darüber gesprochen haben, wann ein Webdesign gut ist, möchte ich mit dir darüber sprechen, wer eigentlich ein Webdesign erstellt.

Vielleicht denkst Du jetzt: „Klar, dass erledigt ein Webdesigner.“

Ganz so einfach lässt sich die Frage allerdings nicht beantworten. Früher war der Ablauf relativ klar. Ein Webdesigner erstellt ein Wireframe und anschließend ein Mockup in Adobe XD, Figma oder Sketch. Im Handoff übergibt er es dann einem Webentwickler.

Allerdings sind Websites heute nicht mehr statisch, sondern dynamisch. Wir klicken auf Elemente, öffnen Modals und bedienen Filter.

Diese dynamischen Inhalte lassen sich nur teilweise in einem statischen Abbild, wie einem Mockup, darstellen.

Deswegen arbeiten an größeren Websites heute viele einzelne Berufsgruppen:

Kleinere Unternehmen haben natürlich nicht das notwendige Budget, um mehrere Leute anzuheuern. Deswegen sollten gute Webdesigner sich mit UI-, Motion- und UX-Design auskennen.

Zusätzlich sollten sie auch mindestens grundlegende Erfahrung in der Webentwicklung haben. Nur so kann sichergestellt werden, dass das Webdesign später auch wirklich im Browser funktioniert.

Als nächstes möchte ich Dir dabei helfen ein gutes Webdesign zu erhalten.

Falls Du dir nicht sicher bist, ob Du es selbst erstellen oder lieber in Auftrag geben willst, habe ich Dir für beide Seite Vor- und Nachteile aufgelistet.

Wäge selbst ab, welche Punkte Du stärker gewichtest.

Solltest Du weniger als 2.000€ Budget zur Verfügung haben, solltest Du dein Webdesign selbst erstellen. In der Regel erhältst Du extern für diesen Preis nichts, was Du nicht selbst machen könntest.

Solltest Du mehr als 2.000€ Budget besitzen, wirst Du mit einem Experten wahrscheinlich bessere Ergebnisse erzielen. Trotzdem möchte ich Dir die Vor- und Nachteile nicht vorenthalten.

In der Regel rate ich Dir dazu, dein Webdesign extern abzugeben. Denn dann verdiene ich mehr Geld – kleiner Spaß. Webdesign ist komplex und hat, wie Du bereits weißt, einen großen Einfluss auf Dein Unternehmen.

Damit Du am Ende aber nicht bei dem falschen Partner landest, möchte ich Dir noch ein paar Tipps geben, wie Du guten von schlechten Anbietern unterscheiden kannst.

Du weißt mittlerweile, dass UX wichtig ist. Du weißt ebenfalls, dass Webdesign kein Grafikdesign ist. Damit hast Du (leider) bereits einigen Webagenturen einiges voraus.

Damit Du nicht an eines der schwarzen Scharfe, sondern an einen der vielen richtig guten Webdesigner gerätst, liste ich Dir hier einige Tipps auf.

Schrecke außerdem nicht davor zurück mit mehr als einem Anbieter zu sprechen. Seriöse Agenturen oder Freelancer haben dafür Verständnis.

Zum Schluss möchte ich dir noch ein paar Elemente auflisten, die Du kennen solltest, um Webdesign zu verstehen.

Die Auszeichnungssprache HTML legt die Elemente fest, die wir im Webdesign nutzen. Es gibt 6 verschiedene Überschriften, die in ihrer Hierarchie von 1 bis 6 gelistet werden. Jede Seite einer Domain besitzt genau eine H1 – zumindest sollte das der Fall sein.

Absätze sind einfach Textblöcke. Du ließt gerade einen.

Geordnete Listen kennst Du sicher aus deinem Lieblings-Texteditor. Sie sind eine Ansammlung an Listenelementen. Es gibt diese geordnet (1., 2.,3.,..) und ungeordnet.

Klicken wir auf einen Link, leitet uns dieser auf eine andere Seite im Internet. Diese kann entweder auf der selben oder einer anderen Domain liegen.

Buttons sind klickbare Elemente. Ihre Aufgabe wird von Webdesigner festgelegt und ist vom Kontext abhängig. Ich kann mich damit beispielsweise durch eine Galerie klicken oder ein Formular absenden.

Bilder sind wenig überraschend einfach Bilder auf einer Website. Sie können klassische Fotos, Grafiken oder GIFs darstellen.

White-Space, oder auch „leerer Raum“, ist kein Webdesign Element im eigentlichen Sinne. Damit meint man den Abstand zwischen den Elementen. Er sorgt dafür, dass wir Elemente zu Gruppen organisieren oder sie voneinander trennen könen.

Ein Layout ist ebenfalls kein klassisches Webdesign Element. Wir bezeichnen damit die Organisation von Elementen und ihre Struktur.

So, das war es. Ich hoffe, Du verstehst nun besser, was Webdesign ist.

Bedenke immer: Es ist ein komplexes Thema, das aus vielen Teilbereichen besteht. Webdesigner lassen sich meist in noch weitere Berufsgruppen unterteilen.

Gutes Webdesign zeichnet vor allem aus, dass es die User in den Vordergrund rückt und ihnen ein möglichst gutes Nutzererlebnis bietet.

Lust auf richtig gutes Webdesign? Mit unserem Webdesign aus Regensburg erhältst Du individuelle Websites – maßgeschneidert auf die Bedürfnisse Deiner Zielgruppe.