Was ist Webdesign?

Websites sind heutzutage die häufigste Visualisierungsform von Marken. Eine schlechte, veraltete oder irreführende Website enttäuscht daher nicht nur Deine Besucher. Sie richtet auch einen großen Imageschaden an und führt dazu, dass Dein Geschäftserfolg hinter seinen Möglichkeiten zurückbleibt.

Wusstest Du, dass das Webdesign einen riesigen Einfluss darauf hat, ob Suchmaschinen wie Google Deine Website zeigen oder nicht?

In diesem Artikel geben wir Dir wichtige Einblicke und Hilfestellung für die Erstellung einer modernen und wettbewerbsfähigen Website. Du erfährst, wie Du Fallstricke vermeidest und von Anfang an beim Webdesign alles richtig machst.

Wenn Du erfahren möchtest, was Webdesign im Jahr 2021 ist und warum es so eine große Bedeutung hat, dann ist dieser Artikel für Dich.

Was ist Webdesign?

Unter Webdesign versteht man die Planung, Konzeption, das Layout und die Gestaltung von Online-Inhalten. Modernes Webdesign befasst sich nicht mehr nur mit der Ästhetik von Webseiten, sondern mit der Gesamtheit ihrer Funktionalitäten.

Traditionell lag der Fokus vom Webdesign auf Websites, die den Nutzern im Desktop Browser präsentiert wurden. Aber bereits seit Mitte des letzten Jahrzehnts spielen die Browser von Mobilgeräten (Smartphones und Tablets) eine immer wichtiger werdende Rolle.

Entsprechend gehören heutzutage Gestaltungsaufgaben der Benutzeroberflächen (UI-Design) von Websites, Web Apps und auch mobilen Apps zum Webdesign.

Es geht also um das häufig zitierte Look & Feel Deiner Online Präsenz, die Benutzerfreundlichkeit und das Benutzererlebnis (UX). Hierzu zählen insbesondere Aspekte wie:

• Die richtige Wahl und Kombination Deiner Farben, Schriften, Bildern und Grafiken, die für das Erscheinungsbild eine zentrale Rolle spielen.
• Der Aufbau, die Strukturierung und Kategorisierung von Informationen sowie die Navigation, die das Layout bestimmen. Die Informationshierarchie und Informationsarchitektur.
• Und schließlich umfasst Webdesign auch die Wahl und Erstellung der verwendeten Webdesign Elemente, Animationen und Interaktionen. Inklusive der dazugehörigen technischen Erstellung.

Aus der effektiven, effizienten und optisch ansprechenden Kombination dieser und weiterer Bestandteile entstehen hochwertige Websites und Benutzeroberflächen.

Die Basis hierfür wird bereits im Design und Website Konzept sowie immer häufiger in Design Systemen definiert.

Was ist gutes Webdesign?

Natürlich ist gutes Webdesign immer subjektiv. Dennoch gibt es gewisse Prinzipien für gutes Webdesign. Erstaunlicherweise sind diese trotz der vielfältigen und schnellen Veränderung der Technologie recht konstant.

Gutes Webdesign…

• verfolgt ein Website-Ziel
• besticht durch Einfachheit
• offeriert eine verständliche und einfache Navigation
• etabliert eine visuelle Hierarchie
• hat großartige Inhalte (Bilder, Texte, Videos)
• basiertes auf einem GridLayout (hiermit ist kein starres Raster gemeint)
• funktioniert auf mobilen Geräten
• erzeugt schnelle Ladezeiten

Gutes Webdesign erkennst Du daran, dass Deine Website einfach zu bedienen und ästhetisch ansprechend ist. Die Grundprinzipien und Elementen des Grafikdesigns bieten hierfür eine erste gute Basis.

Viele hochwertige und erfolgreiche Websites konzentrieren sich stark auf die Einfachheit. Es geht darum keine überflüssigen Informationen und Funktionen anzuzeigen, die Deine Benutzer ablenken oder verwirren (Minimalistisches Webdesign).

Emotionen spielen bei gutem Webdesign eine zentrale Rolle. Es geht darum möglichst viele positive Emotionen zu erzeugen und negative Emotionen (z.B. Frustrationen durch lange Wartezeiten, unnötiges Zoomen) zu vermeiden. Nur so gewinnt Deine Website das Vertrauen Deiner Zielgruppe.

Warum ist gutes Webdesign wichtig?

Webdesign ist aus mehreren Gründen für Deinen persönlichen oder unternehmerischen Erfolg relevant.

• Gutes Webdesign sorgt für einen großartigen und nachhaltigen ersten und x-ten Eindruck
• Sichtbarkeit: Es hilft Dir aus der Masse herauszustechen
• Professionelles Webdesign hilft Dir in Suchmaschinen gefunden zu werden
• Gutes Webdesign schafft gute Gefühle bei Deinen Nutzern
• Es hilft Dir beim Aufbau neuer Kundenbeziehungen
• Deine Zielgruppe kann durch gutes Webdesign Vertrauen zu Dir aufbauen
• Webdesign sagt viel oder alles über Deine Marke aus
• Gutes Webdesign ist die Einladung mit Dir und Deiner Marke zu interagieren
• Dein Webdesign ist die häufigste Visualisierung Deines Unternehmens
• Es schafft Markenkonsistenz und Wiedererkennungswert
• Gutes Webdesign schafft überzeugende Besuchererlebnisse

Anders als Kunst ist gutes Design immer dazu da, Deine Ziele zu erreichen. Ganz gleich ob das die Gewinnung neuer Kunden, Mitarbeiter oder Partner, die Steigerung Deiner Bekanntheit oder eine Umsatzsteigerung ist.

Webdesign Methoden

Für die Realisierung Deines Webdesigns kommen statische, responsive und adaptive Webdesign Methoden in Betracht.

In den Anfängen des Webdesigns waren die Websites statisch. Das heißt der Designer hatte wie bei einem Prospekt die Möglichkeit sein Design Pixelgenau mit Photoshop vorzubereiten und es wurde genauso auf allen Desktop-Geräten ausgespielt. Diese Zeiten sind lange vorbei und statisches Webdesign verdient heute keine weitere Betrachtung mehr.

Wir schreiben das Jahr 2021 und moderne Webdesigns Methoden müssen sowohl auf dem Desktop als auch auf mobilen Geräten funktionieren. Die zwei gängigsten Methoden hierfür sind das Responsive Design und das Adaptive Design.

Beim Responsiven Design bewegen sich die Inhalte dynamisch in Abhängigkeit von der Bildschirmgröße.

Beim Adaptiven Layout werden die Inhalte in fixierte Größen unterteilt, die bestimmte Bildschirmgrößen repräsentieren.

Wenn Du tiefer in die technischen Feinheiten einsteigen möchtest, empfehle ich Dir die ausführlichen Erklärungen von Jonas Hellweg.

Allerdings kommen in modernen Websites und Frameworks wie Bootstrap oder Tailwindcss regelmäßig beide Methoden nebeneinander zum Einsatz. Daher werden mittlerweile die beiden – sich technisch unterscheidenden – Methoden häufig unter dem Begriff Responsive Webdesign zusammengefasst.

Die Herausforderung moderner Webdesign Methoden ist es, dass ein konsistentes Erscheinungsbild Deiner Marke auf allen Geräten entsteht. Der Wiedererkennungswert führt letztlich zur Bildung von Vertrauen.

Oder einfacher gesagt: Die Nutzer sollen auf jedem Gerät erkennen, dass sie sich auf der richtigen Seite befinden. Auf Deiner Website. Und dazu müssen die Layouts auf jedem Bildschirm einen visuell ansprechenden und wiedererkennbaren Eindruck hinterlassen.

Welche Tools brauche ich im Webdesign?

Heutzutage gibt es viele unterschiedlichste Möglichkeiten und Tools, die Dir beim Entwerfen Deiner Website helfen. Grundsätzlich können diese in 3 Arten unterschieden werden. Für welche Art Du Dich entscheidest hängt stark von Deinen Fähigkeiten, Deinem Budget, Deinen Anforderungen und Zielen ab. Entsprechend unterscheiden sich die Ergebnisse im Erfolg erheblich.

Programmierung mit HTML, CSS, JavaScript (Agiles Design)

Jede Webseite besteht aus diesen 3 Komponenten. Hierbei kommt jeder der Programmiersprachen eine eigenständige Bedeutung zu.

• HTML bietet die Grundstruktur von Websites, und wird für die Anzeige der Inhalte benötigt.
• CSS wird verwendet, um Präsentation, Formatierung und Layout zu steuern.
• JavaScript wird verwendet, um das Verhalten verschiedener Elemente zu steuern und Interaktivität zu gewährleisten.

Die stärkere Verbreitung von mobilen Geräten erforderte auch eine Anpassung der Werkzeuge und Prozesse im Webdesign. Das Vorzeichnen mit graphischen Applikationen macht im modernen Webdesign deutlich weniger Sinn, da es sehr aufwendig wird, für jedes einzelne Smartphone mit einer eigenen Bildschirmgröße eine Skizze anzufertigen. Das wären schnell mehr als 100 Skizzen nur für Handys. Hinzu kommen die unterschiedlichen Tablets und Bildschirme.

Anstelle der Skizzen tritt ein agiler Entwicklungsprozess. Hierbei werden bereits in frühen Phasen interaktive Prototypen als echte Websites mit HTML, JavaScript und CSS erstellt. Diese werden mit Dir als Stakeholder diskutiert und solange optimiert, bis das fertige Produkt entsteht.

Die Vorteile liegen in der immanenten Designzufriedenheit der Kunden und Auftraggeber sowie in der Risikominimierung. Das Endprodukt wird in jedem Fall auf den unterschiedlichen Geräten funktionieren.

Der Nachteil liegt in den Skills, die für solche Projekte erforderlich sind. Es herrscht gerade in Deutschland bitterer Fachkräftemängel an Webentwicklern. Doch gerade hier, bei erfolgreichen agilen Entwicklungsprozessen, sind Webdesign und Webentwicklung eins.

Graphische Applikationen

Diese Applikationen stellen traditionell das professionelle Bindeglied zwischen Designern, Kunden und Webdesignern und Webentwicklern dar. Sie bieten Dir oder Designern ohne Programmierkenntnisse die Möglichkeit, ein Design vorzuskizzieren.

Die so entstehenden Skizzen werden an ein Team von Entwicklern oder eine Webdesign-Agentur übergeben. Diese Experten übernehmen dann die volle technische Verantwortung Umsetzung und Programmierung.

Die Vorteile dieser Tools liegt darin, dass Kunden oder Designer Ihre Arbeiten an Programmierer und Webentwickler übergeben können, die mit der Umsetzung für die Browser betraut werden. Der Nachteil liegt in einer komplexen und kostspieligen Kommunikation sowie in aufwendigen Iterationsprozessen.

Ursprünglich kamen zu diesem Zweck Bildverarbeitungsprogramme wie Photoshop, Gimp oder Sketch zum Einsatz. Auch wenn diese heute immer noch funktioniert, setzen sich zunehmend auf Webdesign und UI Design spezialisierte Tools durch. Zu nennen sind hier Adobe XD, oder das browserbasierte Figma sowie eine Vielzahl weiterer ähnlicher Programme.

Im Grund eignet sich für diesen Schritt aber jede Moderne Bildbearbeitungssoftware oder SVG Software.

Dieses Vorgehen eines zunächst vorgezeichneten Designs war vor dem Siegeszug der mobilen Geräte der Standard für Webdesign-Prozesse. Doch auch heute, lange nachdem mobile Geräte zum Alltag dazugehören, arbeiten gerade in Deutschland nicht wenige Agenturen noch immer mit dieser Arbeitsteilung.

Website Baukästen

Für das kleine bis gegen 0 strebende Budget gibt es heutzutage eine Vielzahl von Homepage Baukästen auf dem Markt.

Der Vorteil? Jeder kann ohne irgendwelche tieferen Kenntnisse eine Website ins Netz stellen. Beispiele sind der 1&1 Homepage Baukasten, WIX, Pagecloud oder Webflow. Ein weiterer Vorteil ist, dass die Kosten für eine eigene Website mit Baukastensystemen auf einen späteren Zeitpunkt verschoben werden können.

Der Nachteil ist, dass diese Websites deutlich weniger oder keine Besucher haben, wie ahrefs aufzeigt. Das versperrt natürlich Wachstumspotentiale.

Wenn Du ein solches Projekt starten musst, ist es wichtig, dass Du Dir durch die häufig kostenlosen Testversionen einen Überblick verschaffst.

Hinsichtlich der Preise, Funktionen und Vorlagen unterschieden sich diese Baukästen zum Teil nochmal erheblich. Du solltest gründlich recherchieren, welches dieser Tools geeignet ist, Deine Projektziele zu erreichen, Dir hinsichtlich der Bearbeitung liegt, ob Du Eigentümer Deiner Daten und Inhalte bleibst und ob das Tool datenschutzkonform ist.

Wie greifen Webdesign, Webentwicklung und UX-Design ineinander?

Um es vorwegzunehmen, es gibt einiges an Begriffsverwirrung und es kommen jedes Jahr neue, trendige Jobbezeichnungen dazu. Um eine moderne und erfolgreiche Website ins Netz zu bekommen braucht man alle Disziplinen. Auch deshalb subsumieren wir bei exovia die Begriffe unter Webdesign.

Dennoch wirst Du bei Deinen Recherchen vielfach auf die Unterscheidung treffen, die sich in der Regel aus den folgenden Definitionen ergibt.

Ein Webdesigner (im engeren Sinne) erstellt aus Deinen Ideen und Anforderungen ein Mockup bzw. eine Skizze, auf der Du einen Eindruck bekommst, wie Deine zukünftige Website aussehen wird. Der kreative Part besteht in der Auswahl von Schriften, Bildern, Farben, einer ersten Idee vom Layout.

Die Webentwickler (Programmierer) erstellen auf Grundlage der Skizzen des Webdesigners durch HTML, JavaScript und CSS eine Website und ergänzen die statischen Bilder um die Funktionalität (Navigation, Slider, Akkordeons etc.) und Interaktion.

Ein UX Designer hat den Fokus der Nutzerfreundlichkeit. Seine Kompetenzen liegen in den Bereichen Nutzerforschung, Gestaltung und manchmal auch Programmierung. Sein ausschließlicher Fokus liegt auf der Ausgestaltung der Rahmenbedingungen für eines positives Nutzererlebnis. In unserem Beitrag über UX und UI Design erfährst Du mehr über die Begriffe und deren Abgrenzung.

Welche Webdesign Elemente gibt es

Hier findest Du einen einfachen Einstieg in die elementaren Grundlagen Deines Website Projektes. Grundsätzlich wird in funktionale und visuelle Elemente des Webdesigns unterschieden.

Visuelle Elemente im Webdesign

• Texte im Webdesign
• Schriftarten & Typografie
• Farben
• Formen und Graphische Elemente
• Weißraum
• Layout (Anordnung)
• Bilder
• Videos

Funktionale Elemente

• Navigation und Seitenstruktur
• Animationen
• Geschwindigkeit & Performance
• Responsivität
• Browser Kompatibilität

Im Folgenden stellen wir Dir die einzelnen Elemente überblicksartig vor.

Webdesign Texte

Im Webdesign kommen Texten nicht nur eine inhaltliche Bedeutung zu. Sie sind Bestandteil des visuellen Designs. Herausragende Texte für Deine Website beginnen mit der Recherche in zwei Richtungen. Zum einen geben Dir die Websites Deiner Mitbewerber Anhaltspunkte und zum anderen sollten Deine Besucher und Kunden im Zentrum der Überlegung stehen.

Auf Basis dieser Recherchen wird ein Entwurf erstellt. Dieser sollte Deinen Lesern Mehrwerte erklären oder bieten.

Es geht darum Deine USP (Unique Selling Proposition) klar zu kommunizieren. Als Mehrwert für Deine Besucher und in Abgrenzung zu Deiner Konkurrenz. Ferner sollten die Texte geeignet sein, in Suchmaschinen zu ranken.

Nach abschließenden Lesertests und den nötigen Korrekturschleifen kann der Text online.

Grundsätzlich hast Du hinsichtlich der Texte zwei Möglichkeiten. Du kannst die Texte selbst erstellen, was Vorteile hinsichtlich Authentizität und dem Transport Deiner einzigartigen Fachkompetenz bietet. Eine moderne Art und ein guter Einstieg hierfür ist z.B. das sogenannte Storytelling im Business.

Die andere Möglichkeit ist es natürlich einen professionellen Texter Deines Vertrauens zu beauftragen. Idealerweise sollte sich dieser mit Deinem Geschäft auskennen.

Typografie und Schrift im Webdesign

Genau wie beim Design von Printprodukten, benötigt Dein Webdesign eine Typografie. Allerdings müssen in Webdesign Projekten zusätzliche Aspekte mit in die Überlegungen einbezogen werden.

So muss die Lesbarkeit auf Bildschirmen zu jeder Zeit sichergestellt werden und online zu einem angenehmen Leseerlebnis führen. Selbstverständlich sollte es hierfür egal sein, mit welchem Gerät und welcher Displaygröße Deine Website-Texte gelesen werden.

Entscheidungen bezüglich Schriftart, Schriftgröße, Farbe, Zeilenhöhe und die Form der Buchstaben sind aufeinander abzustimmen. Und sie sind so zu treffen, dass Deine Marke möglichst getreu repräsentiert wird.

Hierbei gilt es auch die verschiedenen Lizenzbedingungen für Schriften zu beachten. So gibt es in der Regel gesonderte Schriftlizenzen für Desktops, Websites, Anzeigen und Webanwendungen.

Wenn Dir das jetzt sehr kompliziert erscheint, mach Dir keine Sorgen. Wir geben Dir in unserem Beitrag So findest Du die perfekte Webtypografie eine einfach zu verstehende Rückendeckung mit vielen Anregungen.

Die richtigen Farben

Farben gehören im Webdesign zu den wichtigsten visuellen Elementen. Sie verdienen bei der Gestaltung Deiner Website besondere Aufmerksamkeit.

Zu einer fundierten und professionellen Auswahl von Farben gehört die Entscheidung für ein Farbschema unter der Berücksichtigung der Farbpsychologie.

Der Einsatz von zu vielen Farben kann zu Missverständnissen führen. Insbesondere, wenn sie nicht aufeinander abgestimmt sind. Farben beeinflussen den Gesamteindruck Deiner Website und senden für sich genommen als Stilmittel wichtige Botschaften aus. Entsprechend birgt die Farbauswahl erhebliche Chancen und Risiken.

Auch die Qualität der Farben spielt sowohl für ein die Farbharmonie und Farbkombination als auch für Hover-Effekt und Animationen eine wichtige Rolle.

Formen und Graphische Elemente

Die Verwendung von grafischen Elementen und Graphik Design Trends hat die Aufgabe Deine Texte und Bilder miteinander zu verbinden. Es geht darum Inhalte gezielt und ansprechend in einem nahtlosen Design zu verbinden.

Viele moderne Seiten, die auf Komponenten beruhen, nutzen dieses Element zu wenig. Auch im minimal Webdesign findet man es nur selten, da die Inhalte das oft nicht hergeben. Geschickt eingesetzt können graphische Elemente aber dazu beitragen, die Aufmerksamkeit Deiner Besucher zu lenken, den Lesefluss zu fördern oder an wichtigen Stellen das Skimming zu unterbrechen.

Weißraum

Mit Weißraum oder negativem Raum werden die Teile Deiner Website bezeichnet, die keine Inhalte haben und somit leer bleiben. Bezogen auf Deine Website sind das die Abstände zwischen Bildern und Graphiken, Texten, Abschnitten, Ränder usw.

Gerade im modernen Webdesign kommt diesen Weißräumen eine sehr wichtige Bedeutung zu. Es geht einerseits darum diese Weißräume so einzusetzen, dass Deine Benutzer und Kunden problemlos mit Deiner Website interagieren können (z.B. ausreichend Abstand von Buttons auf Smartphones). Auf der anderen Seite geht es um einen positiven, aufgeräumten und übersichtlichen visuellen Eindruck.

Hierzu zählt auch, dass einzelne Inhalte genügend Raum haben zum Wirken. Anders als der Name vermuten lässt, kann der Weißraum hierfür sowohl weiß als auch schwarz sein. Typischerweise aber nicht rot, da er dann Aufmerksamkeit ziehen würde.

Im Vergleich zu Printprodukten muss im Web nicht mit Weißraum gespart werden. Deine Nutzer sollen sich Wohlfühlen und gerne wieder auf Deine Website kommen.

Layout (Anordnung)

Hier geht es darum, wie Du Deine Inhalte anordnest. Beim Layout gibt es keine festen Regeln. Dafür geben Konzepte wie Drittel Regel oder der Goldene Schnitt Anhaltspunkte. Allerdings müssen diese für die unterschiedlichen Bildschirmgrößen ggf. jeweils neu überdacht werden.

Ähnlich wie bei den Weißräumen geht es auch beim Layout darum eine Reizüberflutung Deiner Nutzer zu vermeiden.

Es hat die Funktion Deine Inhalte zu gewichten und eine visuelle Hierarchie herzustellen. Deine Besucher sollten ohne alles zu lesen verstehen, welche Elemente Deiner Website besonders wichtig sind. Ebenso sollten die Verhältnisse, in denen die Elemente zueinanderstehen, herausgearbeitet werden.

Ein gelungenes Layout berücksichtigt stets Deine Zielgruppe und deren Bedürfnisse.

Bilder

Natürlich sind die Bilder in der Regel nicht einfach nur visueller Content. Hochwertige Bilder entscheiden nicht selten über den Erfolg oder den Misserfolg von Website Projekten.

Ferner beeinflussen Sie die Ladezeit Deiner Website. Um an die richtigen Bilder für Dein Website Projekte zu gelangen hast Du normalerweise drei Möglichkeiten.

Du kannst selbst fotografieren, einen professionellen Fotografen anheuern oder auf Stockfotografien zurückgreifen.

Wenn Du Dich entscheidest Deine Fotografien selbst zu machen, solltest Du über die entsprechenden Fertigkeiten und die notwendige Ausrüstung für digitale Fotografie verfügen.

Bei professionellen Fotografen empfehle ich dringend in Betracht zu ziehen, dass dieser Erfahrung mit Webprojekten hat und Experte für die Art der Fotos ist, die Du brauchst. Z.B. Personenfotografie, Architekturfotos, Eventfotos, Modefotos und Ähnliche.

Wenn Fotograf und Webdesigner unabgestimmt handeln, kann dieses zu bösen Überraschungen und erheblichen Kosten führen. Gerade Personenfotografien müssen bestimmten Anforderungen für den Einsatz im Web genügen.

Andersrum gilt aber auch, dass gerade professionell erstellte Fotos Deine Website erst richtig abrunden. Im dem sie Dich und Dein Unternehmen echt, authentisch und sehr gut rüberbringen. Und oft auch in dem sie Deine inhaltliche Botschaft durch die Wahl des Motivs, die richtige Perspektive und Fokuseinstellung unterstreichen.

Bei der dritten Variante – Stockfotografien hast Du grundsätzlich zwei Möglichkeiten.

Kostenpflichtige Stockfotografien gibt es auf Plattformen wie

• IStock
• Shutterstock
• Adobe Stock

Kostenlose Stockfotografien gibt es auf

• Pexels
• Pixabay
• Unsplash

Videos

Videos werden im Web immer häufiger genutzt. In bestimmten Situationen sind sie geeigneter als Bilder oder Texte um Informationen oder Gefühle zu transportieren. Die Einsatzmöglichkeiten von Videos sind vielseitig und unterschiedlich.

Einsatzmöglichkeiten sind zum Beispiel

• Hintergrundvideos
• Über uns Video
• Imagevideos
• Informationsvideos
• Video Schleifen (ersetzen zunehmend GIFs) als Animationselement

Videos können in modernem Webdesign auch als Texturen eingesetzt werden und hierdurch besonders animiert werden. Hier findest Du ein kleine Demo, wie das aussehen kann: Video-Textur-Slider.

Allerdings sind Videos ein recht dominantes Element. Du solltest sicherstellen, dass andere wichtige Elemente noch genügend Aufmerksamkeit erlangen und Deine gesamte Botschaft nicht kannibalisiert wird.

Navigation und Seitenstruktur

Grundsätzlich gehört es zum Webdesign dazu, sich Gedanken über die Informationsarchitektur zu machen. Diese ist das Rückgrat Deiner Website. Die graphischen Elemente, die diese Website Struktur Repräsentieren werden als Navigation bezeichnet.

Das bedeutet, dass Webdesigner ohne eine Informationsarchitektur keine Navigation erstellen können. Dieser Zusammenhang sollte von Anfang an berücksichtigt werden. Ohne strukturierte Inhalte kann es schnell sehr kostspielig werden. Navigationen gehören zu den interaktivsten Elementen einer Website und erzeugen bei vielen Projekten den höchsten Programmieraufwand. Umbauten sind entsprechend kostspielig.

Deshalb sollten die wesentlichen Inhalte in einer frühen Projektphase zusammengetragen und strukturiert werden.

Animationen

Im Webdesign gibt es vielseitige Einsatzmöglichkeiten für Animationen und sehr unterschiedliche technische Implementationsmöglichkeiten. Sie sind quasi das Salz in der Suppe und unterscheiden häufig Baukastenprojekte von hochwertigen Websites.

Animationen machen eine Website lebendig und dynamisch. Sie erzählen auf visueller und erlebbarer Weise Deine Geschichte, Deine Stärken, Deine Botschaft.

Nicht zuletzt führen und signalisieren Animationen Interaktionsmöglichkeiten mit Dir und Deiner Website. Diese Interaktionen reichen vom Scrollen (z.B. Parallax Effekt) über Klicks auf einen Button (z.B. Wave-Effekt) bis hin zum Ausfüllen von Formularen und Auswählen von Dashboard-Inhalten.

Hier erfährst Du mehr über die vielschichtigen Implementationsmöglichkeiten und die Einsatzfelder von Animationen.

Geschwindigkeit

Die Ladegeschwindigkeit ist ein zentraler Bestandteil von Webdesign SEO. Sie gehört gerade auch in 2021 zu den TOP Aspekten einer Websiteoptimierung, da Performance nach Google ein entscheidender Faktor für Deine Besucher wie auch Deinem Umsatz ist.

Die Geschwindigkeit einer Webseite darf daher in keiner Phase des Designprozesses außer Acht gelassen werden. Um einen optimalen Page Speed zu erreichen werden im Designprozess unter anderem folgende Tätigkeiten notwendig:

• Weiterleitungen minimieren,
• Browsercaching aktivieren,
• Severseitiges Caching aktivieren
• Bilder- und Videogrößen optimieren
• Antwortzeit des Servers minimieren
• CDNs einsetzen
• JavaScript und CSS minifizieren und komprimieren
• Blockierendes JavaScript entfernen
• Unnötigen Code idealerweise komplett entfernen

Eine detailliertere Übersicht findest Du bei MOZ.

Responsivität

Bei den Webdesign Methoden haben wir das Thema bereits angeschnitten. Es geht darum, dass Deine Website auf jedem Endgerät einen hervorragenden und bleibenden Eindruck hinterlässt. Hierfür ist solides CSS-Handwerkszeug und der Einsatz von CSS Mediaqueries erforderlich.

Weitere Infos und Details zur Implementierung findest Du unter Responsive Webdesign.

Browser Kompatibilität und Betriebssysteme

Webdesign entfaltet seine Wirkung im Browser des Nutzers. Daher müssen die Konzepte und Technologien in vielen unterschiedlichen Umgebungen und auf unterschiedlichen Betriebssystemen funktionieren.

Die heute gängigsten Browser sind: Chrome, Firefox, Edge und Safari

Die wichtigsten Betriebssysteme sind: Windows, Android, Linux , iOS, MacOS

Ein guter Webdesign Prozess muss sicherstellen, dass die möglichen und verbreiteten Kombinationen aus Browser und Betriebssystem abgedeckt werden. Je nach Zielgruppe und Zielmarkt können hier weitere Browser und Betriebssysteme hinzukommen.

Wie finde ich Inspirationen

Als schnelle Möglichkeit lege ich Dir meine handverlesene Liste der besten Websites ans Herz über globalere Entwicklungen im modernen Webdesign geben die jährlichen Webdesign Trends Auskunft.

Wenn Du eine tiefere Recherche machen möchtest, empfehlen sich Webdesign Archivseiten, Blogs, spezielle Social Media Plattformen. Eine große Auswahl und Verlinkungen findest Du in den Webdesign Inspirationsquellen.

Ganz speziell für Architekten haben wir die Website Inspirationen 2022 mit den weltweit besten Architektur Website zusammengestellt. Und für Rechtsanwälte und Notare kann ich darüber hinaus die Inspirationen für Anwälte empfehlen.

Wie komme ich an mein Webdesign?

Wie bei den Tools gibt es heute zum Glück viele Möglichkeiten an eine Website zu gelangen. Grundsätzlich hängt natürlich alles von Deinen Zielen und Deinen Ressourcen (Zeit, Geld) ab. Dennoch. Viele Wege führen nach Rom, daher zeige ich Dir einige auf.

Individuelle Website mit professioneller Hilfe (Agenturen, Webdesign Freelancern, Webentwicklern etc.)

Wenn Du ehrgeizige unternehmerische Ziele verfolgst, solltest Du mit einer Webdesign Agentur zusammenarbeiten, die Dir eine individuelle Website genau nach Deinen Anforderungen erstellt.

Die Vorteile liegen darin, dass eine richtig professionelle Website passgenau auf Deine Marke zugeschnitten ist, von Suchmaschinen gefunden wird und Du all Deine Vorstellungen einbringen kannst. Wenn die Website eigens für Dich programmiert wird, sind der Fantasie keine Grenzen gesetzt und Du hast die Möglichkeit wirklich aus der Masse herauszustechen, neue Kunden zu gewinnen und deine betriebswirtschaftlichen Ziele zu erreichen.

Allerdings musst du bei dieser Variante bereit und in der Lage sein, eine entsprechende Summe Geld in Deine Website zu investieren.

Eigene Website mit Standardtemplate aufbauen

Wenn Du nicht über ausreichende Mittel verfügst, Dir professionelle Unterstützung zu suchen, hast Du trotzdem die Möglichkeit an eine eigene Website und sogar an ein eigenes Content Management System zu kommen. Das beste Mittel der Wahl heißt hier WordPress und Standardtemplates.

Natürlich musst Du hinsichtlich Deiner Ziele und der Individualität Deiner Website einige Abstriche machen. Als Entscheidungsbasis haben wir die Vor- und Nachteile von WordPress für Dich zusammengestellt.

Trotz Abstriche ist es gerade bei Low Budget Projekte ein begehbarer und sinnvoller Weg und vor allem ein guter erster Schritt. Und hier findest Du eine gute Anleitung, wie Du selbst zu Deiner eigenen WordPress Website kommst.

Die ganze Sache selbst in die Hand nehmen

Das ist eine Möglichkeit, setzt aber voraus, dass Du sehr viel Zeit für das Lernen von Programmiersprachen investieren kannst und willst. Wenn Du Lust dazu hast, ist es aus meiner Sicht natürlich eine sehr schöne Sache.

Aber seien wir ehrlich, eine solche Entscheidung ist quasi eine Lebensentscheidung. Damit Du eine solche Entscheidung auf Basis einer soliden Grundlage treffen kannst, empfehle ich Dir unseren Beitrag wie Du Webdesigner wirst.

Baukasten Systeme

Der Vollständigkeit halber seien noch die diversen Baukastensysteme erwähnt, werden aber nicht weiter ausgeführt, da es sich in Wirklichkeit nicht um eigene Websites handelt und die Risiken in der Regel sehr hoch sind.

Was ist Webdesign – ein Fazit

Webdesign ist ein komplexer Prozess. Ich hoffe der Artikel hat dir geholfen, die Grundlagen des Webdesigns besser zu verstehen und Dir eine erste Übersicht gegeben.

Im Kern geht es darum, dass Deine Website sowohl visuell ansprechend und funktional ist: Hierzu solltest Du Folgendes nie aus dem Auge verlieren.

• Es stehen immer Menschen im Mittelpunkt
  Die Beurteilung, ob Deine Website hochwertig ist oder nicht, erfolgt durch Deine Nutzer. Deshalb solltest Du den Faktor Mensch mit all seinen Emotionen und insbesondere Deine Zielgruppe immer im Auge behalten.
• Wähle die Tools, Methoden und Vorgehensweisen, die zu Deinem Webprojekt, Deinen Fähigkeiten und Deinem Budget passen. So kannst Du sicherstellen, dass Deine Anforderungen erfüllt werden.
• Biete Deinen Nutzern ein stimmiges visuelles Erlebnis, was zu Deiner Marke passt. Nimm dir genügend Zeit, um die richtige Balance zwischen den oben beschriebenen visuellen Elementen zu finden.
• Biete Deinen Nutzern die Funktionalitäten die notwendig sind, um die Informationen einfach und ohne Probleme zu finden. Versetze Dich in Deine Nutzer.

Zum Glück musst Du kein Meister in all den angeführten Disziplinen werden, um an eine professionelle Website zu gelangen.

Egal, ob Du selbst Hand anlegst, einen Webdesigner oder eine Webdesign Agentur beauftragst, um an Dein Webdesign zu gelangen. Ich hoffe, dass Dir diese Grundlagen weiterhelfen.

Bei Fragen, Ideen und Wünschen kannst Du gerne jederzeit an uns wenden. Du hast Lust Dein Website Projekt zu starten? Dann leg am besten gleich mit unserem Website Planer los.