B NEX

Was ist Webdesign? Der Ratgeber für 2022

INHALTSVERZEICHNIS

Was ist Webdesign?

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. 

Die allermeisten Webdesign Agenturen haben deshalb Webdesigner und Webentwickler in ihrem Team.

Was ist responsive Webdesign?

Wenn die Optimierung der Webinhalte für alle Geräte gewährleistet ist, dann spricht man von responsive Webdesign. 82 % der gesamten Webaufrufe in Deutschland waren im Jahr 2021 mobil, also per Handy. 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 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 Gerä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.

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)
 

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

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 einer Webseite ist entscheidend, ob ein Nutzer sich dort zurechtfindet oder nicht. Schafft er das nicht, springt er von deiner Seite ab und sieht sich anderweitig um. Ein Nutzer soll sich sehr intuitiv auf deiner Seite zurechtfinden.

Je einfacher sich der Benutzer zurechtfindet, desto wahrscheinlicher interagiert er mehr und länger mit deiner Seite.

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“ werden 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.

Beispiel Section

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).

Beispiel für eine schlechte und eine gute Farbwahl

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)
Beispiel für eine schlechte Typographie und eine gute

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.

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)

Kostenlose Stock Fotos findet ihr unter anderem bei: https://pixabay.com/ und https://unsplash.com/. Kostenpflichtige gibt es auch, diese haben aber deutlich höhere Qualität: https://www.shutterstock.com/, https://www.istockphoto.com/ https://www.gettyimages.de/ und https://stock.adobe.com/. Darüber hinaus gibt es noch zahlreiche weitere Anbieter.

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.

Schreibe einen Kommentar

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

Philipp Lochmüller
Webentwickler und SEO-Experte
Meine Hauptaufgabe ist es, Websites zu erstellen und alle technischen Voraussetzungen für einen reibungslosen Betrieb zu schaffen. Außerdem bin ich zuständig für alle Fragen und Projekte rund um das Thema SEO. Die Erstellung einer Website und SEO gehen dabei Hand in Hand.
Philipp Lochmüller
Philipp Lochmüller
Webentwickler und SEO-Experte
Philipp Lochmüller
Philipp Lochmüller
Webentwickler und SEO-Experte
ARTIKEL TEILEN:

Weitere Beiträge

Kontaktieren Sie uns per Mail

... oder einfach per
Telefon / WhatsApp

Webdesign & Wireframing

Für eine moderne Website, die auf Ihre individuellen Bedürfnisse zugschnitten ist. Ein Auftritt im Internet ist unerlässlich in der heutigen Zeit. Mit einer für alle Endgeräte optimierten Website sind Sie gut aufgestellt.

3D Animation​

Mit unseren Lösungen im 3D-Animationsbereich noch besser Ihre Kunden von Ihrem Produkt oder Ihrer Dienstleistung überzeugen. Optimal für Vertieb und Marketing geeignet.

Suchmaschinenoptimierung

Durch SEO können Sie sich oben in den Suchergebnissen von Google platzieren. Das Ziel ist langfristig und nachhaltig Kunden auf die eigene Webseite zu bekommen, ohne dafür jeden Monat zu bezahlen und Mitbewerber im Rennen um Kunden im Internet zu überholen.

Website Pflege & Wartung

Wir sparen Ihnen Zeit und Nerven, indem wir für Sie alle Wartungsarbeiten an der Website übernehmen, die Programme aktualisieren und auf Wunsch kleine Änderungen vornehmen. Es gibt für alle Websitegrößen ein passendes Angebot von uns.