Eine Website ist nur eine Visitenkarte, oder? Nein, aber viele Firmen glauben das auch heute noch. Jeder, der eine Dienstleistung oder ein Produkt kaufen möchte, informiert sich vorab im Internet über die Angebote und die Unternehmen dahinter. Dabei stoßen potenzielle Kunden auf deine Website. Ist jedoch die Optik der Seite nicht ansprechend, oder fühlen sich die Nutzer vielleicht sogar unsicher, wird Ihre Seite schnell verlassen und die potenziellen Kunden gehen zur Konkurrenz.
Webdesign muss also ein Gefühl von Sicherheit und Struktur vermitteln und natürlich optisch ansprechend sein. Wie du einem Nutzer diese Gefühle vermitteln kannst, erfährst du in diesem Artikel.
Kurzfassung: Was ist Webdesign?
Unter Webdesign versteht man die technische, optische und inhaltliche Gestaltung einer Website. Dabei soll die Website eine gewisse Aufgabe für den Nutzer erfüllen.
Was ist Webdesign?
Webdesign ist die Kunst, einem Besucher ein qualitativ hochwertiges und ansprechendes Erlebnis zu bieten. Das Gesamterlebnis der Nutzer zählt. Das Zusammenspiel aus Struktur, Layout, Farbspektrum, Typografie, Bildern, Videos und Grafiken erzeugt in uns ein Bild des Unternehmens, auf dessen Website wir uns befinden. Bestandteile des Webdesigns sind also unter anderem Grafikdesign, User Experience Design (UX), User Interface Design (UI) und Content Erstellung.
Warum ist Webdesign wichtig?
Nutzer, die neu auf deine Website kommen, entscheiden innerhalb weniger Sekunden, ob sie bleiben oder nicht. Deshalb musst du in der Hero-Section bereits die Aufmerksamkeit der Nutzer für dich gewinnen. Webseiten, von denen viele Nutzer schnell wieder abspringen und auf anderen Seiten weitersuchen, haben die Fragen oder Bedürfnisse des Nutzers nicht erfüllt.
Besonders unübersichtliche Webshops trifft es hart, da ein Nutzer, der sich nicht zurechtfindet, auf Ihrer Seite nichts kaufen wird. Das schadet Ihrer Seite und auch Ihrem Unternehmen langfristig. Google und andere Suchmaschinen analysieren das Verhalten der Nutzer und bewerten Seiten mit unattraktivem Design oder unzutreffenden Inhalten schlecht.
Eine schlechte Bewertung wirkt sich negativ auf die Platzierung Ihrer Seite in der Suchmaschine aus und führt dazu, auf „unsichtbaren“ Positionen angezeigt zu werden.
Webdesign vs. Webentwicklung was ist der Unterschied?
Obwohl viele Webdesigner die Webentwicklung anbieten, sind es dennoch verschiedene Bereiche. Ein Webdesigner kreiert vorerst das gesamte Design einer Website.
Von der Farbpalette über die Abstände und Anordnung bis hin zur Schrift. In einem Programm wie z. B. Adobe XD wird das Design vorab erstellt. Webdesigner müssen keine Programmiersprachen wie JavaScript, Markup-Languages wie HTML oder Stylesheet-Languages wie CSS können, obwohl es hilfreich sein kann.
Ein Webentwickler setzt das vorgegebene Design um, wobei man zusätzlich zwischen einem Front-End und einem Back-End Developer unterscheiden muss.
Ein Front-End Entwickler kümmert sich um alles Sichtbare, genau genommen die Benutzeroberfläche und ein Back-End Entwickler kümmert sich um alles, was nicht sichtbar ist, wie Datenbanken und Sicherung einer Website. Natürlich gibt es darüber hinaus noch eine Vielzahl weiterer Aufgaben, aber das sprengt den Rahmen dieses Artikels.
UX/UI-Designer kümmern sich um die Verbesserung der Benutzererfahrung, indem sie Webdesigns erstellen, die auf die Bedürfnisse und Wünsche der Benutzer zugeschnitten sind.
Die allermeisten Webdesign Agenturen haben deshalb UX/UI-Designer, Webdesigner und Webentwickler in ihrem Team.
Was ist responsive Webdesign?
Ein Webdesign, das für alle Endgeräte optimiert ist, wird Responsive Webdesign genannt. Mobile Endgeräte machen in Deutschland im Jahr 2021 bereits 82 % der gesamten Webaufrufe aus. Die Weboptimierung für Smartphones ist somit die wichtigste Aufgabe für Webdesigner geworden. Deswegen ist es für viele Websites sinnvoll, den sogenannten Mobil-First Ansatz zu verfolgen.
Gutes Webdesign
Nun stellt sich die Frage: Was macht gutes und modernes Webdesign aus? Und vor allem: Wie sieht es aus?
Einem Websitebesucher muss der Wert oder die Dienstleistung eines Produktes schnell bewusstwerden. Eine Nachfrage zu erzeugen oder die perfekte Antwort auf die Frage des Nutzers zu bieten, sind dafür die Optionen. Der Nutzer muss mit möglichst wenig Aufwand und im besten Fall sofort die Antwort auf seine Frage finden.
Gutes Webdesign sollte deshalb folgende Punkte umfassen:
- Responsive Design
- Ausreichende Abstände
- Konstanz in Schrift, Farben und Formen
- Authentizität ausstrahlen
- Klare Struktur der Inhalte
- Leicht zu bedienen
- Emotionen auslösen
- Ein Ziel verfolgen
- Bilder, Videos und Grafiken
Schlechtes Webdesign
Häufig sehen wir Seiten aus 2010, die Ihren Zweck schon längst erfüllt haben und aktualisiert werden müssen. Über 80 % des Internet-Traffics erfolgt über Smartphones und dennoch gibt es heute Webseiten, die nicht responsive sind.
Häufig sehen wir folgende Beispiele für schlechtes Webdesign:
- nicht für mobile Endgeräte optimiert
- veraltetes Design
- kein klares Farbspektrum
- nur Text
- zu viele Schriftarten
- unstrukturiertes Layout
- Nutzen für Besucher nicht klar ersichtlich
Verschiedene Folgen von schlechtem Webdesign sind neben der schlechten Auffindbarkeit der Website in den Suchergebnissen: der Vertrauensverlust des Kunden, Imageschädigung des Unternehmens und vor allem verschwendetes Marketing- und Umsatzpotential.
Wenn deine Seite so aussehen sollte, dann bitte ich dich darum, dir umgehend einen Webdesigner zu besorgen.
Website selbst erstellen
Webdesign selbst erstellen oder kaufen?
Soll ich meine Website selbst erstellen oder kaufen? Eine Frage, die du dir wahrscheinlich stellst, wenn die erste eigene Website an den Start gehen soll. Um dir die Entscheidung zu erleichtern, hier eine Liste an Anforderungen zur Erstellung deiner eigenen, individuellen Website. Deine Website sollte diese Attribute beinhalten:
- Sinnvoll strukturiert (Gespür für Struktur)
- Zielgerichtet (Bestimmung einer Online-Marketing-Strategie)
- Nutzer optimiert (Erfahrung mit UX/UI)
- CI-konform gestaltet (Erfahrung mit Designtools z.B. Photoshop)
- Individuell gestaltet (Erfahrung mit Designtools z.B. Adobe XD, Figma)
- Responsiv (Erfahrung mit Frontendentwicklung)
- Zeitgemäß/modern (Gespür für Trends/Style)
- Suchmaschinenoptimiert (SEO)
Wenn du der Meinung bist, diese Punkte alle selbst umsetzten zu können, solltest du dir außerdem folgende Fragen stellen:
- Ist meine Zeit in die Erstellung meiner Website am effizientesten investiert?
- Kann ich selbst auch in kurzer Zeit eine Website entwickeln?
- Kann ich meine Website in einer Qualität entwickeln, die mindestens über der meiner Mitbewerber liegt?
Du wirst die meisten Fragen wahrscheinlich verneint haben, außer du arbeitest selbst als Webdesigner oder Webentwickler.
Aber gibt es denn nicht auch noch eine andere Lösung? – Ja, aber darunter leidet die Individualität der Website.
Template-Websites, wie es der Name schon verrät, basieren auf vorgefertigten Designs und sind zum Großteil bereits entwickelt. Sie bieten dir die Möglichkeit, die meisten der oben genannten Anforderungen zu umgehen und Zeit zu sparen.
Die Aufgaben, die dir verbleiben, sind: Texte, Logos und Bilder einzufügen und die Farben zu verändern. Manche Templates stehen kostenlos zur Verfügung, andere kosten bis zu ein paar hundert Euro. Am Ende muss man sich aber überlegen, ob das erzielbare Ergebnis in einem ausgeglichenen Verhältnis zu seinen Vorstellungen steht. Die fehlende Individualität ist oft auf den ersten Blick erkennbar. Die Website hebt sich nicht besonders ab und andere Seiten haben fast die gleiche Optik nur mit anderen Inhalten.
Wie erstelle ich eine Website die Überzeugt?
Was brauche ich für eine Website, die Besucher zu Kunden konvertiert?
- Ansprechendes Design
- Aufforderung zum Handeln (Call to Action)
- Durch relevante Inhalte Nachfrage erzeugen oder Nachfrage gezielt bedienen
- Vertrauenswürdigkeit schaffen
- Customer-Journey reibungslos gestalten
- Customer-Funnel bauen
Tipp:
Zeige bestehende Kunden als Referenz auf deiner Website, um Social-Trust zu schaffen.
Welche Webdesign-Elemente gibt es und wofür sind sie da?
Im Allgemeinen unterscheidet man zwischen den visuellen und funktionalen Elementen. Im Endeffekt sind sie aber gleich wichtig, da sie sich ergänzen. Die schönste Webseite bringt dir nichts, wenn dein Nutzer nicht weiß, wie er die Seite bedienen soll und andersherum.
Mit den visuellen Elementen deiner Website steht und fällt die optische Identität deiner Marke.
Funktionale Elemente
Navigation und Layout
Das Layout entscheidet darüber, ob Nutzer sich auf einer Website zurechtfinden können oder nicht. Wenn eine Webseite zu unübersichtlich ist, machen sich User oft nicht die Mühe lange nach Informationen zu suchen und verlassen die Seite wieder. Ein Nutzer sollte sich deshalb sehr intuitiv auf deiner Seite zurechtfinden können.
Je einfacher sich der Benutzer zurechtfindet, desto wahrscheinlicher interagiert er mit deiner Seite. Auch die Dauer seines Aufenthalts hängt von der Benutzerfreundlichkeit ab.
Um die Benutzerfreundlichkeit zu steigern, ist eine einfache und logische Menüführung besonders wichtig.
1 Nav-Menu
2 Sub-Menu
3 Sub-Sub-Menu
Von einem Sub-Sub-Menu rate ich überwiegend ab, da der Übersichtlichkeit durch zu viele Informationen wieder geschadet werden kann.
Tipp:
Ihre Webseite darf bzw. soll sogar mit großartigen Animationen begeistern, muss aber genauso einfach bedienbar sein. Die Nutzererfahrung darf nicht unter dem Design leiden!
Browserunterstützung und Responsivität
Über 82 % der gesamten Webaufrufe in Deutschland im Jahr 2021 wurden über mobile Geräte getätigt. Deshalb muss das Design immer responsive, wenn nicht sogar Mobile-First sein. Es ist außerdem zu beachten, dass die Browser Unterstützung für alle Webinhalte gewährleistet wird. CSS-Effekte wie z.B. „mix-blend-mode“ wurden vom Internet Explorer nicht unterstützt.
Obwohl fast alle Online-Shops über Desktop verkaufen, orientieren sich die Menschen fast immer zuerst an Ihrem Handy, bevor sie online shoppen. Wenn Ihr Shop nicht mobil optimiert ist, geht Ihr Nutzer gar nicht erst an den Computer, um sich Ihre Webseite dort anzuschauen.
Visuelle Elemente
Farbschema
Farben lösen in uns Menschen Emotionen aus. Beispielsweise ist Rot eine sehr kräftige Farbe, die sowohl Liebe als auch den Kampf repräsentiert. Jede Farbe wird mit gewissen Eigenschaften assoziiert. Sei dir der Bedeutung von Farben immer bewusst, wenn du das Farbschema für dein Unternehmen erstellst.
Mittlerweile gibt es online viele Websites, die dir eine Farbpalette zusammenstellen oder diese aus Bildern extrahieren. Das ist immer eine valide Orientierungsmöglichkeit.
Farbpaletten-Generator von Adobe. Wenn du nur unterschiedliche Farbtöne einer Farbe benötigst, ist die Option „Monochromatisch“ im Farbpaletten-Generator (im Menü auf der linken Seite) ein sehr guter Orientierungspunkt.
Orientierungspunkte:
Um deine eigene Farbpalette zusammenzustellen, kannst du dich an folgenden Punkten orientieren:
- deine Branche
- deine Produkte
- deine Markenbotschaft
Wir gehen das Ganze an einem Beispiel mit der Farbe Blau durch. Das kann auch auf andere Farben übertragen werden.
Ein helles, scheinendes Blau suggeriert Folgendes:
- Aufgeweckt
- zieht Aufmerksamkeit
- Technologie
- Modern
Mit einem hellen Blau lassen sich schöne Verläufe bauen, zum Beispiel mit einem Lila Ton.
Dunkles Blau hingegen vermittelt:
- Vertrauen
- Ruhe
- Erfahrung
Außerdem eignet sich eine dunkle Farbe gut für einen Darkmode als Hintergrund.
Sehr dunkle Farben eigenen sich nicht als Akzentfarbe, da sie sehr nah an schwarz sind und wirken schnell trist. Dafür eignen sie sich besonders gut als „Section Colors“ zum Einfärben von Hintergründen.
Natürlich müssen die Farben miteinander „matchen“. Deshalb kann man mehrere Farbtöne aus einer Farbe nehmen, wie wir z.B. mit unserem Blau.
Man unterteilt diese Farben in:
Primärfarbe:
Die Primärfarbe wird mit Abstand am häufigsten auf der Website verwendet. Ungefähr 60 % der Farbwahl sollte auf sie fallen. Damit ist sie die dominanteste Farbe deiner Seite.
Sekundärfarbe:
Die Sekundärfarbe kann man mit der Primärfarbe kombiniert werden. Sie sollte ca. 30 % der Elemente einnehmen.
Akzentfarbe:
Eine Akzentfarbe kann unter anderem für Highlights genutzt werden, allerdings muss sie das nicht. Beispiele, wo die Akzentfarbe zum Einsatz kommt: CTAs, Bilder einfärben, „Active States“, in kleinen Sections als Hintergrundfarbe, „Top Headlines“(Überüberschriften).
Typografie
Bevor eine Schriftart festgelegt wird, solltest du überprüfen, ob die Schriftart folgende Kriterien erfüllt:
- Lesbar auf allen Endgeräten und auch bei geringer Schriftgröße
- Lesbarkeit für Printmedien (auch auf weiter Distanz)
- Welche Schriftartenfamilie passt zu meiner Branche und Firma?
- Attraktivität der Schriftart
- Kontrast
- Kerning (Abstand der einzelnen Buchstaben zueinander)
Warnhinweis: DSGVO
Achtung! Google Fonts dürfen, aufgrund Änderungen der DSGVO, nicht mehr über die API eingebunden werden, sondern nur noch lokal, auf dem Server! (keine Rechtsberatung)
Bild- und Videomaterial
Niemand will eine trockene Text-Wüste lesen, deshalb sind Bilder, Videos und Grafiken essenziell für jede Website. Dabei musst du die Bilder nicht alle selbst fotografieren oder das von einem Fotografen machen lassen.
Du kannst dir online problemlos kostenlose und lizenzfreie Bilder herunterladen. Natürlich sind eigene Materialien wünschenswert, denn Stock Fotos ist meist auf den ersten Blick als solches erkennbaren und selbst erstellter Content überzeugt immer mehr und wirkt authentischer.
Ein Imagefilm, in dem du dich und dein Team vorstellst, schafft unfassbar viel Sympathie gegenüber dem Nutzer, der dich vorher noch nie gesehen hat. Schließlich möchten wir die Person kennen, bei der wir etwas kaufen und ein Imagefilm verleiht deinem Unternehmen ein Gesicht.
Website-DIY oder Webdesign Agentur?
Soll ich meine Website selbst erstellen oder doch lieber einen Profi engagieren?
Entscheidest du dich für einen Profi, gebe ich dir noch einige Tipps, mit wie du eine gute Webdesign-Agentur erkennst.
Website-DIY
Du willst deine Website selbst erstellen? Dann solltest du dich einlesen, einige Videos zu dem Thema anschauen und dich mit den Webdesign-Tools vertraut machen.
Neben dem Webdesign wäre es von Vorteil dich zum Thema SEO einzulesen, damit deine Seite nachhaltig organische Reichweite aufbauen kann.
Wenn du dich entscheidest, deine Website selbst zu erstellen, dann bleib am Ball. Mit steigender Erfahrung steht deinem Erfolg nichts mehr im Weg.
Wie finde ich die richtige Agentur?
Die richtige Agentur für dein Vorhaben zu finden ist gar nicht so leicht, deshalb möchten wir dich dabei unterstützen.
Das sollte deine Agentur dir bieten können:
- Absolute Ehrlichkeit, wenn deine Idee nicht gut ist oder du einen Fehler machst
- Kosten-Transparenz, wie viel Geld fließt wohin?
- Zuverlässigkeit
- Referenzen (am besten in deiner Branche)
- die Vorgehensweise erklären und dich über den Fortschritt deines Projektes auf dem Laufenden halten
Wenn diese Agentur diese Voraussetzungen erfüllt, kannst du guten Gewissens dein Projekt in ihre Hände legen
Das Problem, das uns oft bei „günstigen“ Webdesign-Agenturen begegnet ist, ist die mangelnde Erfahrung dieser Agenturen, vor allem im Backend. Um ein Beispiel zu nennen, das in Erinnerung geblieben ist und das leicht hätte vermieden werden können: Das HTML lang=“de-DE“ (die Sprache der Website) wird falsch gesetzt, was zu „Verwirrung“ für die Suchmaschine führt, weil die Seite plötzlich in einer ganz anderen Sprache ist, als angegeben.
Welche Webdesign Tools benötige ich?
Adobe XD
Adobe XD ist ein Tool, mit dem sich ein Wireframe (Prototyp) einer Website sehr schnell erstellen lässt. Auf Google findet man sofort einige Tutorials wie man das Programm bedient.
Photoshop
Mit Photoshop könnt ihr Bilder ganz nach eurem Belieben bearbeiten, zuschneiden, ausschneiden, retuschieren, etc. Das Tool sollte jedem Designer ein Begriff sein.
Illustrator
Illustrator ist ein vektorbasiertes Zeichenprogramm in dem man unter anderem Logos, Icons und Symbole erstellen kann. Durch die Verwendung von Vektoren können die erstellten Inhalte ohne Qualitätsverlust skaliert werden.
Bilder Quellen (Stock Fotos)
3D-Animationen
Für 3D-Animationen verwenden wir unter anderem Blender, aber auch Unreal Engine oder Unity. Blender eignet sich super für Einsteiger und ist darüber hinaus auch kostenlos.
Video Tools
Zum Schneiden und Bearbeiten von Videos gibt es sehr viele gute Tools. Adobe Premiere Pro ist ein sehr bekanntes Tool zum Bearbeiten von Videos. Für anspruchsvollere visuelle Effekte verwenden wir After Effects.
Icons
Spline ist ein weitestgehend unbekanntes Tool, um kleinere 3D Szenen zu erstellen und diese Live auf der Website zu integrieren. Wir verwenden Spline zusätzlich zur Erstellung von 3D-Icons.
Figma
Figma ist Adobe XD sehr ähnlich. Jedoch ist die Kollaboration in Figma ausgereifter, was bei großen Teamprojekten die Arbeit erleichtert.
Die beiden Programme liefern im Endeffekt ein gleichwertiges Endergebnis. Vor kurzem wurde Figma von Adobe aufgekauft. Es wird spannend, zu sehen, wie der Konzern das Produkt perspektivisch integrieren wird.
Webdesign Zusammenfassung
Schön, dass du den Artikel bis hier gelesen hast.
Wie du siehst, beansprucht Webdesign sehr viel deiner Zeit und auch einiges an Können. Überlege dir also gut, ob du bereit bist, diese Zeit in dein Webdesign zu investieren.
Webdesign ist ein andauernder und dynamischer Prozess und mit einer Website wird man niemals wirklich komplett fertig. Es gibt immer etwas zu verbessern oder zu ergänzen.
In unserem nächsten Artikel geht es darum, wie du dein Webdesign selbst erstellen kannst. Wir geben dir eine Schritt-für-Schritt-Anleitung an die Hand, damit du deine eigene Website auch nach deinen Wünschen gestalten kannst.
FAQ
Nein, Webdesign ist kein Programmieren. Webdesigner erstellen das Design und der Webentwickler setzt es um.
Mobile-first beschreibt den Ansatz, dass Webdesign zuerst auf die mobilen Geräte anzupassen, danach erst auf die größeren Bildschirme. Es bietet sich an, vor der Erstellung einer Website seine Zielgruppe zu definieren und Ihre Vorzüge zu kennen. Sind die meisten Websitebesucher Smartphone-User bietet sich ein Mobile-First Design an.
Ein Webdesigner beschäftigt sich mit der grafischen Gestaltung, dem Layout und der Benutzeroberfläche einer Website sowie der Corporate Identity des Unternehmens.
Voraussetzungen:
Design, insbesondere Webdesign
User Interface (UI) und User Experience (UX)
Barrierefreiheit und Benutzerfreundlichkeit umsetzen
Bildbearbeitung
Grafiken erstellen
Content-Management-Systeme verstehen und beherrschen
Natürlich ist es auch hilfereich, wenn man ein grobes Verständnis von HTML, CSS und JS hat.
Webdesign ist die Kunst die Nachricht eines Unternehmens optisch umzusetzen. Dabei achtet man auf den Aufbau, die Gestaltung, das Design des Unternehmens und die Nutzerführung der Website.
