Wie man gutes Webdesign professionell umsetzt
![Webdesign Office Lustiges Comic Bild eines Webdesigners im Büro](img/funny-comicstyle-webdesigner-office-1243x829.webp)
Eine veraltete oder schlecht gestaltete Website wird deinem Unternehmen großen Schaden zufügen (ich schreibe absichtlich nicht kann, sondern wird).
Wenn die Website langsam lädt, schwer zu navigieren ist oder veraltete Inhalte hat, werden deine Besucher die Seite schnell frustriert verlassen.
Das wird das Image deines Unternehmens negativ beeinflussen und Kunden dazu bringen, zur Konkurrenz zu wechseln.
Eine moderne, benutzerfreundliche Website ist entscheidend, um das Vertrauen deiner Kunden zu gewinnen, die Markenwahrnehmung zu verbessern und letztendlich den Umsatz zu steigern.
Was ist Webdesign?
Webdesign ist die Kunst, eine Website zu gestalten, die sowohl optisch ansprechend als auch funktional ist.
Es geht darum, die verschiedenen Elemente einer Website zu planen, zu entwerfen und umzusetzen, einschließlich des Grafikdesigns, der Farbgebung, der Schriftarten, der Benutzerfreundlichkeit, der Suchmaschinenoptimierung (SEO) und der Interaktionsmöglichkeiten.
Eine Website muss so gestaltet werden, dass, dass sie auf allen Geräten gut aussieht, leicht zu benutzen ist und den Bedürfnissen der Besucher entspricht.
Webdesign ist nicht gleich Webentwicklung. Obwohl die beiden Begriffe oft gleichgesetzt werden, handelt es sich um unterschiedliche Tätigkeiten.
Webdesigner gestalten aus deinen Ideen ein sogenanntes Mockup (engl.: Attrappe, Nachbildung), also einen digitalen Entwurf deiner zukünftigen Website. Das Mockup beinhaltet schon die Navigationsstruktur und die Design Elemente im Detail.
Mockups können mit einem einfachen Bildbearbeitungsprogramm erstellte Vorlagen ohne Funktionalität sein aber auch mit speziellen Mockup Tools erstellt werden, bei denen die Bedienelemente bereits mit einfachen Funktionen verknüpft sind.
Oftmals wird als Vorstufe zum Mockup auch das sogenannte Wireframe (engl.: Drahtgitter) erstellt. Hierbei werden in reduzierter Darstellungsweise die Elemente und Inhalte deiner Website geplant. Meist in schwarz/weiß oder blau/weiß.
Ziel des Wireframes ist es, die inhaltliche Struktur und den Aufbau einer Website, oder verschiedener Unterseiten, zu planen. Stark ausgestaltete Elemente oder Farben lenken in dieser Phase nur ab.
Webentwickler erstellen aus dem Mockup des Webdesigners mithilfe von Programmiersprachen die echte Website mit all Ihren Funktionen. Dazu gehören Anmeldefenster, Formulare, geschützte Mitgliederbereiche, Zahlungsfunktionen und noch vieles mehr. Sie machen die Website Interaktiv und Benutzerfreundlich.
Weshalb ist Webdesign wichtig?
Für den ersten Eindruck gibt es keine zweite Chance. Dieser alte Spruch gilt immer noch, insbesondere im Internet.
Deine Website ist oft der erste Kontaktpunkt mit deinen zukünftigen Kunden und wenn sie im Internet auf der Suche nach deiner Marke nur eine zweitklassige billig aussehende Website finden, werden sie den Eindruck bekommen, dass dein Unternehmen ebenso ist und du dich gar nicht richtig darum kümmerst.
Immer wieder findet man sogar bei Unternehmenswebsites simple Tippfehler direkt auf der Startseite. Viele Besucher bemerken das und denken sich ihren Teil über das ganze Unternehmen.
Mit gutem Webdesign sorgst du dafür, dass der erste Eindruck positiv ist, und du ebnest den Weg für eine tolle Kundenbeziehung.
Wie sieht gutes Webdesign aus?
Innerhalb weniger Sekunden entscheiden Besucher, ob sie bleiben und weiterklicken oder deine Website wieder verlassen. Dabei hängt es beim Webdesign weniger vom Geschmack der Besucher ab als vielmehr, ob sie finden, was sie suchen.
Eine Website sollte unbedingt die Erwartungen der Besucher, also deiner Zielgruppe erfüllen. Natürlich kann man in Zeiten der Homepagebaukästen mit schicken Vorlagen seine Website selbst bauen.
Als Laie sucht man sich oft einfach eine Vorlage aus, die einem selbst gefällt und legt los. Das Design muss aber nicht unbedingt den Erwartungen der Zielgruppe entsprechen.
Hierbei hilft der professionelle Webdesigner das passende Farbschema und die richtige Typografie auszuwählen. Es ist kein Zufall, dass Banken, Versicherungen und ähnliche Branchen oft blau- und Grüntöne auf Ihren Websites haben. Blau flößt Vertrauen ein und vermittelt ein Gefühl von Sicherheit.
Selbst die tollste Fancy Website bringt nichts, wenn Sie nicht zu deiner Marke passt.
Gutes Webdesign verfolgt immer ein oder mehrere Ziele. In der Regel die Besucher dazu zu bringen eine bestimmte Handlung vorzunehmen. Solche Ziele können sein, ein Produkt zu kaufen, eine Reservierung vorzunehmen, einen Termin zu buchen, einen Account anzulegen und noch vieles mehr.
Wenn der Besucher die Gewünschte Handlung vorgenommen hat, dann hat die Website eine sogenannte Conversion erreicht. Um die Conversions zu förden wird eine Reihe von Mitteln eingesetzt:
- Klare und Intuitive Navigation: Der Besucher soll sich leicht zurechtfinden und nicht lange nachdenken müssen, wo er hin klicken muss, um etwas zu erreichen.
- Ästhetisch ansprechendes Layout: das Layout zieht die Aufmerksamkeit der Besucher auf sich und sorgt für eine positive Benutzererfahrung
- Gut lesbarer Text und visuelle Hierarchie: Der Text auf einer Website sollte gut lesbar sein und eine klare visuelle Hierarchie haben, um wichtige Informationen hervorzuheben. Dies umfasst die Verwendung von geeigneten Schriftarten, Schriftgrößen und Farben sowie die richtige Platzierung von Überschriften, Untertiteln und Absätzen.
- Schnelle Ladezeiten: Eine wichtige Komponente eines guten Webdesigns sind schnelle Ladezeiten. Langsame Ladezeiten können Besucher frustrieren und dazu führen, dass sie die Seite verlassen. Daher ist es wichtig, dass deine Website effizient programmiert und optimiert wird, um eine schnelle Performance zu gewährleisten.
- Responsives Design: In der heutigen mobilen Welt ist ein responsives Design unerlässlich. Eine gut gestaltete Website passt sich automatisch verschiedenen Bildschirmgrößen an und bietet eine optimale Benutzererfahrung auf Desktops, Tablets und Smartphones.
- Barrierefreiheit: Gutes Webdesign berücksichtigt auch die Bedürfnisse von Menschen mit Behinderungen und sorgt für eine barrierefreie Zugänglichkeit. Dies kann die Verwendung von alternativen Texten für Bilder, eine klare Tastatur-Navigation und andere barrierefreie Designpraktiken umfassen.
- Suchmaschinenoptimierung (SEO): Ein professioneller Webdesigner wird immer die SEO bereits während der Entwicklung von Anfang an berücksichtigen. So dass man nicht erst wenn die Website fertig ist, anfängt die Inhalte SEO-freundlich zu überarbeiten. Das könnte im schlimmsten Fall zu einem Redesign führen, was nichts anderes bedeutet, dass man wieder fast wieder von vorne anfängt.
- Content First: Ein sehr hilfreicher und effektiver Ansatz ist die Content First Strategie. Das bedeutet, dass man vor dem Start des eigentlichen Designs alle wesentlichen in Frage kommenden Inhalte sammelt. Dazu gehören, Texte, Bilder, Grafiken usw. So verhindert man, dass am Inhalt vorbei entwickelt wird und muss nicht am Ende des Designs feststellen, dass die tollen Bilder mit ihren Grün und Blautönen einfach nicht zum rötlich warmen Grunddesign passen, welches man sich am Anfang überlegt hat.
Natürlich darf Webdesign auch einfach mal schick sein und gut aussehen. Dabei ist das Wichtigste, dass der Look zu deinem Brand passt.
Allerdings sollte man sich vor einem Design Overkill hüten und nicht der Versuchung erliegen unbedingt alle Designelemente, die man im Internet schon gesehen hat und toll findet auf der Website unterzubringen. Mehr dazu im nächsten Kapitel.
Was funktioniert nicht im Webdesign?
Jetzt wissen wir, was gutes Webdesign ausmacht. Nun lass uns mal schauen, was man bei der Gestaltung von Websites lieber unterlassen sollte.
Als Grundregel sollte man beherzigen, dass die Besucher nicht durch unklare Strukturen in Verwirrung geraten und keine überflüssigen Barrieren aufgebaut werden.
Hierzu ein paar Beispiele:
- Eine klare intuitive Menüstruktur sorgt dafür, dass die Besucher leicht finden, was sie suchen. Das ist gutes Webdesign.
- Ein Navigationsmenü, welches sich statt rechts oben, links und rechts unten auf der Seite befindet und auch noch in vertikaler Schrift möglichst klein geschrieben ist, mag vielleicht ganz cool aussehen und die Individualität des Seiteninhabers unterstreichen wird aber jeden Besucher abschrecken.
- Klare leicht lesbare und gut strukturierte Typographie sorgt dafür, dass die Inhalte gut präsentiert und gerne gelesen werden. Ist zwar nicht so fancy funktioniert aber.
- Animierte Texte, die ständig ein und ausblenden rollen, flippen, von allein getippt werden oder die Farbe wechseln. So etwas zeigt, dass der Seiteninhaber in der Lage ist, Animation Plugins zu installieren oder etwas JavaScript beherrscht. Die Besucher werden davon aber nur genervt und von den Inhalten abgelenkt.
- Was könnte nerviger sein, als wenn eine Seite beim Start ungefragt Music oder irgendwelche Soundeffekte abspielt. In so einem Fall verlassen die Besucher reflexartig die Seite.
- Startanimationen. Manchmal werden vor dem eigentlichen Laden der Website Zähler hochgezählt, Ladebalken gefüllt oder sogar Trickfilmanimationen abgespielt. Niemand hat Lust auf so was zu warten, auch wenn es gut aussieht. Wenn ich einen Disneyfilm sehen möchte, gehe ich ins Kino.
- Etwas anderes ist es, allerdings wenn eine komplexe Webanwendung, wie ein Designprogramm tatsächlich etwas Ladezeit braucht. In so einem Fall ist ein gut Designter Ladebildschirm wichtig, um den Benutzer mitzunehmen und ihm zu sagen „gleich geht’s los“ aber eine normale Website braucht keinen Ladebildschirm.
- Oft werden günstige oder kostenlose Stockfotos verwendet. Es ist deutlich aufwendiger gute Bilder, welche zum Thema der Website passen, zu machen oder vom Fotografen machen zu lassen. Aber es lohnt sich.
- Die Suchmaschinen erkennen Stockfotos mühelos und ranken deine Website dadurch schlechter. Auch die Besucher bemerken das (oft unbewusst) und bewerten diese Bilder negativ. Weil sie meist zu perfekte Menschen zeigen.
Zusammenfassend können wir sagen, dass das Design nicht von den Inhalten ablenken sollte, stattdessen sollte es die Inhalte gut verpacken und unterstreichen.
Der Hauptzweck warum wir ins Internet und auf Websites gehen ist schließlich immer der Inhalt. In der Regel hat man eine bestimmte Frage oder möchte sich über ein ganzes Thema Informieren, Produkte vergleichen, Öffnungszeiten herausfinden, einen Tisch reservieren, den besten Elektriker in der Gegend suchen usw.
Entscheidend ist immer der Inhalt und alles, was davon ablenkt oder unnötige Barrieren aufbaut ist schlechtes Webdesign. Auch wenn manches auf einer Designer Website erstmal richtig cool aussieht, wird es auf einer Geschäfts-Website zum Beispiel für Wohnmobil-Vermietung nicht funktionieren.
Wie kommt man zu gutem Webdesign?
Wie wir bis hierhin gesehen haben, ist es schon recht komplex eine gute Website zu machen und alles Wichtige dabei zu berücksichtigen.
Ein Weg, den viele kleine Unternehmen und Startups gehen ist, der „wir machen unsere Website einfach mal selbst“. Dazu kannst du einfach den Website Baukasten deiner Wahl nutzen oder du nimmst das beliebte WordPress mit seiner schier endlosen Menge an Plugins.
Oft startet man mit viel Enthusiasmus und voller Ideen, um im Laufe des Prozesses feststellen zu müssen, dass das alles doch nicht so einfach ist und schließlich muss man sich ja auch noch um sein eigentliches Geschäft und seine Kunden kümmern anstatt viel mehr Zeit als gedacht in seine Website zu stecken.
So entstehen leider oft Websites, denen man ansieht, dass sie nicht professionell gemacht sind und dem Geschäft mehr schaden als nutzen.
Zum Glück musst du das nicht alles allein machen, denn du kannst mit einem freiberuflichen Webdesigner zusammenarbeiten, der dir mit seiner Erfahrung und seinem Können den Großteil der Arbeit abnimmt, dich berät und dich durch den Design -und Produktionsprozess begleitet. So dass am Ende eine Website entsteht, die dir beim Erreichen deiner Geschäftsziele hilft und perfekt zu dir passt.
Welcher Weg für dich und dein Unternehmen richtig ist, hängt davon ab wie komplex deine Website sein soll, wie viel Budget du zur Verfügung hast und auch wieviel Zeit du selbst investieren kannst oder willst.
Wie erstellt man eine Website, die funktioniert?
Je intensiver und aktiver du dich in den Designprozess einbringst, desto besser wird das Ergebnis sein. Erzähle deinem Webdesigner welche Ziele du mit deinem Projekt erreichen willst, wofür deine Marke steht und wie du dich von deinen Mitbewerbern unterscheidest.
Erläutere deine Philosophie und deine Ideen, je mehr Informationen dein Webdesigner von dir bekommt, umso eher wird er dir das perfekte Webdesign liefern und deine Erwartungen erfüllen oder sogar übertreffen.
Website-Probleme? Ich habe die Lösungen.
Meine Kontaktdaten
Ralf Kortum
Webentwickler & Designer
Am Redder 14
24980 Schafflund
Telefon: +49
162 1873052
E-Mail: webdesign@ralf-kortum.de