Was ist Web Design? – So gelingt dir gutes Design
Lege los mit: Website erstellen → | Domain registrieren →
Dieser Beitrag wurde im December 2022 überarbeitet.
Denke einmal an die letzte Website, die dir so richtig gefallen hat? Was genau war es, das dich beeindruckt hat? Waren es die Farben, die Schriftart, das Layout oder die Bilder?
Höchstwahrscheinlich war es einfach das Zusammenspiel all dieser Elemente, die einen bleibenden Eindruck bei dir hinterlassen haben und als Website Design zusammengefasst werden können.
Seit der ersten Website im Jahr 1991 hat sich das Design von Websites sehr verändert und spielt schon lange einen wichtige Rolle für den Erfolg von Websites. Veraltete oder kaputte Websites mit einer schlechten Website-Struktur führen zu einer schlechten User Experience und schade einer Marke und somit dem Unternehmen. Um das zu vermeiden, kannst du dich gleich zu Beginn mit dem Thema Web Design beschäftigen, noch bevor du deine Website erstellst.
In diesem Artikel klären wir die Frage: Was ist Web Design? und beschreiben außerdem detailliert, warum Web Design wichtig ist, wie gutes Web Design aussieht und wie du ein gutes Design für deine Website bekommst.
Was ist Web Design?
Web Design ist die Planung, Strukturierung und Implementierung von Inhalten auf einer Website. Dazu gehört Elemente wie Farben, Texte, Hintergründe, Schriften, Bilder, Effekte und Grafiken so zu kombinieren, dass sie einen schönen ganzheitlichen Look ergeben.
Neben der Ästhetik spielt auch die Funktionalität der Website eine Rolle im Web Design. Nur wenn alles funktioniert und Website-Besucher:innen auch finden, wonach sie suchen, entsteht eine gute Benutzererfahrung.
Dafür arbeitet Web Design mit anderen Disziplinen wie der Content Erstellung, der Suchmaschinenoptimierung (SEO), dem Grafikdesign, der Interface und der User Experience zusammen, um eine erfolgreiche Online-Präsenz aufzubauen, die auch auf mobilen Geräten gut aussieht.
Du bist auf der Suche nach Inspiration? Sieh die diese 15 herausragenden Websites von Wix Nutzer:innen an.
Unterschiede zwischen Web Design, Webentwicklung und User Experience
Webdesign, User Experience und Webentwicklung werden fälschlicherweise oft als Synonyme verwendet.
Webentwicklung ist das Programmieren von Websites durch Webentwickler:innen, die für den Aufbau und die Pflege der Struktur von Websites verantwortlich sind. Webentwicklung umfasst zudem komplizierte Codierungssysteme und Programmiersprachen, die sicherstellen, dass die Website einwandfrei funktioniert.
Die User Experience (UX) beschreibt die gestalterische und technische Nutzerfreundlichkeit von Websites.Entwickler:innen von User Experience sorgen also dafür, dass alles logisch ist und sich dort befindet, wo Besucher:innen es erwarten und dass alle Links und Buttons einwandfrei funktionieren.
Das Web Design befasst sich mit der kreativen Umsetzung beim Gestaltet einer Website. Webdesigner:innen gestalten Websites und setzen visuelle Ideen in die Tat um.
Da jede Art von Website bestimmte Anforderungen an das Design stellt, nutzen Webdesigner:innen Webdesign, um Websites zu erstellen, die diesen Anforderungen gerecht werden. Zum Beispiel:
Portfolio-Websites brauchen eine Bildergalerie zur Präsentation kreativer Arbeiten
eCommerce Websites müssen in der Lage sein, Waren zu präsentieren
Firmenhomepages zur Präsentation eines Unternehmens
Blogs, um Wissen und Expertisen mit einem Publikum zu teilen
Service-Websites, um Buchungen entgegenzunehmen etc.
Warum ist Web Design wichtig?
Deine Website ist das Aushängeschild deines Unternehmens und maßgeblich für den ersten Eindruck verantwortlich, den du bei deinen Besucher:innen hinterlässt.
Eine schlechte Website ist schlecht fürs Geschäft. Wenn potenziellen Kund:innen deine Website besuchen und anstatt einer attraktiven und gut gestalteten Unternehmenspräsenz lediglich eine unansehnliche, veraltete oder gar kaputte Website vorfinden, werden sie sich höchstwahrscheinlich lieber deiner Konkurrenz zuwenden.
Schlechtes Webdesign signalisiert, dass du dich nicht um das Image deiner Marke kümmerst und suggeriert, dass du möglicherweise ebenso wenig Liebe und Energie in dein Angebot steckst, wie in deine Website.
Dabei spielt auch die Funktionalität eine Rolle. Wenn deine Seite zu langsam lädt, Buttons nicht geklickt werden können oder die Suchfunktion nicht funktioniert, werden Besucher:innen deine Website wieder verlassen und das wäre doch wirklich schade!
Damit dir das nicht passiert, werden wir nun die wichtigsten Elemente guten Web Designs näher erläutern, damit du weißt, wie du auf den ersten Blick gutes Web Design erkennen kannst.
So sieht gutes Web Design aus
Gutes Webdesign erzeugt genau die Erfahrung, nach der Website-Besucher:innen suchen – es ist also benutzerfreundlich.
Einer der wichtigsten Indikatoren dafür, ob Webdesign gut ist, ist die Konversionsrate einer Website. Gutes Webdesign konvertiert, was bedeutet, dass es die Website-Besucher:innen dazu anregt, eine bestimmte, von dir erwünschte Handlung oder Aktion auf deiner Website auszuführen. Du bestimmst letztendlich, was du als Conversion definieren willst, sei es ein Kaufabschluss, eine Buchung oder ein Abonnement.
Um eine Website so benutzerfreundlich und wirkungsvoll wie möglich zu machen, solltest du folgende gestalterischen Elemente im Webdesign beachten:
Visuelle Balance
Kontraste
Negativraum
Calls-To-Action
Hierarchie
Einheit
Navigation
Visuelle Balance
Halte die Texte und Bilder auf deiner Website ausgewogen, sodass sich ein stimmiges Gesamtkonzept ergibt. Zu viel Text kann überfordern, doch bei zu wenig Text fehlen Informationen. Die Bilder sollten die Texte unterstreichen und ergänzen und nicht nur der “Verschönerung” deiner Website dienen, sondern eine Funktion haben.
Außerdem sollte keines der Elemente in einer Komposition zu überwältigend sein und zu sehr im Vordergrund stehen. Daher solltest du die Elemente deiner Website so anordnen, dass ein optisches Gleichgewicht entsteht.
Hierbei kannst du deine Website symmetrisch halten, also Elemente rechts und links einer imaginären Mittellinie gleichmäßig verteilen.
Oder asymmetrisch, indem du die Komposition nicht gleich verteilst, sondern variierst. Es klingt vielleicht seltsam, doch auch Asymmetrie kann ausgewogen wirken. Ein ausgewogenes asymmetrisches Design ist ein moderner Ansatz im Webdesign und ist einer der beliebtesten Webdesign-Trends.
Kontrast
Kontraste sind dazu da,bestimmte Elemente hervorzuheben und werden im Webdesign dazu eingesetzt, den Blick der Besucher:innen auf wichtige Stellen, wie zum Beispiel den CTA-Button zu lenken.
Im Webdesign spielen besonders Farb- und Größenkontraste eine Rolle. So können Elemente wie Überschriften zum Beispiel durch unterschiedliche Größen hervorgehoben werden. So lassen sich auch optische Trenner und inhaltliche Gewichtung erzeugen.
Farbkontraste spielen außerdem eine wichtige Rolle für die Barrierefreiheit deiner Website.
Negativraum
Gutes Webdesign bedeutet auch, die Flächen zu nutzen, die ohne Inhalt sind. Diese werden "white space", also Weißraum oder Negativraum genannt und sorgen dafür, dass deine Website übersichtlich und lesbar ist.
Weitere Tipps für effektives und gutes Webdesign findest du auf unserem Blog.
Call-To-Action
Calls-To-Action, kurz CTAs sind Handlungsaufforderungen, die Website-Besucher:innen dazu animieren sollen, eine bestimmte Aktion auszuführen. CTAs sollten auf jeder Website gut sichtbar hervorgehoben werden, indem sie zum Beispiel als Button verlinkt werden, sich farblich vom Websitehintergrund abheben und durch ihre Größe auffallen.
Noch mehr Tipps für den perfekten Website-Hintergrund findest du hier.
Hierarchie
Erstelle eine visuelle Hierarchie in deinem Webdesign, indem du die wichtigsten Inhalte deiner Website an prominenter Stelle platzierst. Das bedeutet zum Beispiel, dass dein Logo immer im Header deiner Website zu finden sein sollte. Hierarchie bedeutet aber auch, dass die Texte auf deiner Website in einer angemessenen Größe abgebildet werden, sodass sichtbar wird, wann es sich um über- oder untergeordnete Textabschnitte handelt.
Einheit
Die Einheit oder Gesamtheit ist der kulminierende Effekt, der sich aus dem Zusammenspiel aller einzelnen Elemente auf deiner Website ergibt. Idealerweise ergibt deine Komposition eine harmonische Einheit. Dies dient dazu, dass deine Besucher:innen deiner Website nicht von ihr überfordert oder verwirrt werden, sondern auf deiner Website bleiben, um deine Inhalte zu lesen. Stelle also unbedingt sicher, dass das Gesamtbild stimmig ist und alle Elemente deiner Website gut zusammenspielen.
Einheit bedeutet auch, dass du deiner Marke treu bleibst und sie sich in deinem Webdesign widerspiegelt.
Wähle ein Website Farbschema, dass deine Markenfarben aufgreift,
Nutze nicht zu viele unterschiedliche Schriftarten und -größen, um deine Seite einheitlich zu gestalten,
Sorge dafür, dass deine Bilder und Texte interessant sind und einen Mehrwert bieten,
Nutze deine Buttons mit Bedacht und sparsam, um deine Besucher:innen zu Handlungen aufzufordern, die für die Konversion relevant sind, zum Beispiel: Jetzt kaufen, Abonnieren etc.
Navigation
Gute Website Navigation zeichnet sich in erster Linie durch das Menü auf deiner Website aus und dadurch, dass alle Elemente dort zu finden sind, wo Nutzer:innen sie erwarten. Nur so entsteht ein gutes Nutzererlebnis.
Das klassische Navigationsmenü wird in der Kopfzeile (dem Header) einer Website platziert und als horizontale Liste angezeigt.
Ein Sticky-Menü oder auch schwebendes Menü bleibt am oberen Rand einer Website stehen, auch dann, wenn deine Besucher:innen nach unten scrollen.
Ein Hamburger-Menü wird als Symbol mit drei horizontalen Streifen angezeigt, das sich beim Anklicken zu einem vollständigen Menü öffnet.
Das Dropdown-Menü enthält neben den Menü-Überschriften zusätzliche Elemente, die sich öffnen, sobald Besucher:innen auf eine der Überschriften klicken oder mit der Maus darüber fahren.
Ein Sidebar-Menü ist eine Liste mit Menüelementen, die zu einer Seite der Website angeordnet werden, anstatt in der Kopfzeile.
Weitere Infromationen über Menüs und Website-Navigation findest du in diesem Artikel.
Sorge für begrenzte Ablenkungen, indem du Bilder und Text verwendest, die für deine Seite relevant sind, sparsam einsetzt und Buttons gut verlinkst, Farben und Schriftarten zielgerichtet einsetzt und nicht zu viele verschiedene davon mischst.
Fehler im Webdesign: Das solltest du vermeiden
Jetzt, da du einen genauen Überblick darüber hast, wie du gutes Webdesign erstellen kannst, wollen wir auch darüber sprechen, was im Webdesign nicht funktioniert und welche Fehler es zu vermeiden gilt.
Generell sollten deine Website-Besucher:innen nicht nach deinen Inhalten suchen müssen. Das bedeutet, dass deine Website so strukturiert sein muss, dass die Nutzung klar und intuitiv ist und deine Besucher:innen sich nicht anstrengen müssen, um deine Website zu verstehen.
Vermeide unklare CTA-Buttons, sondern formuliere diese so, dass jedem klar ist, welche Aktion der Klick auf die Schaltfläche auslöst.
Vermeide unruhige Hintergründe, die auf Bildschirmen eher flimmern, als dass sie schön aussehen. Wenn das Auge sich nicht richtig fokussieren kann, ist das Surfen auf einer Website anstrengend.
Vermeide zu geringe Kontraste zwischen deiner Schriftfarbe und deren Hintergrund, da deine Inhalte sonst schwer zu lesen sind.
Vermeide schlechte mobile Websites. Wenn deine Website nicht für mobile Geräte optimiert ist, verlierst du nicht nur Traffic, sondern schadest auch deinem Image.
Vermeide unklare Links. Deine Nutzer:innen sollten leicht erkennen können, welche Links, Klicks, Bilder und Texte zu einer neuen Seite führen oder ihnen dabei helfen, eine Aktion auszuführen. Prüfe daher genau nach, ob deine Links (zum Beispiel im Navigationsmenü) auch tatsächlich dort hinleiten, wo sie sollen.
Vermeide überflüssige Inhalte wie Text oder Bilder, die deiner Website keinen Mehrwert bieten. Dies führt lediglich dazu, dass deine Website zu vollgestopft wirkt und deine Besucher:innen sich nicht mehr zurechtfinden.
So bekommst du gutes Web Design
Do it yourself
Der wahrscheinlich einfachste (und günstigste) Weg, gutes Webdesign für deine Website zu erhalten, ist es, einen Website Builder wie Wix zu verwenden und deine Website selbst zu erstellen.
Hierzu musst du kein:e Webdesigner:in sein, denn du kannst aus einer Vielzahl kostenloser Website Templates auswählen, die dir dabei helfen, deine Vorstellungen für das Webdesign umzusetzen. Alle Templates sind vollständig anpassbar, sodass du Vorlagen für fast jede Art von Website finden und individualisieren kannst.
Das Beste daran ist, dass du kostenlos beginnen kannst, deine Website zu designen und später zu einem Premiumpaket mit eigener Domain und vielen weiteren Funktionen upgraden kannst.
Arbeite mit einem professionellen Webdesigner
Nicht alle haben Zeit und Muße, die Dinge selbst in die Hand zu nehmen. Wenn auch du dazu gehörst, kannst du mit professionellen Webdesigner:innen zusammenarbeiten, um Webdesign für deine Website zu erhalten.
Auf Plattformen wie dem Wix Marketplace stellen sich Freiberufler vor, die deine Website für dich erstellen und designen können. Du kannst nach Dienstleistung, Sprache und Budget filtern und außerdem das Portfolio der Designer:innen ansehen, um den richtigen Profi für dein Projekt zu engagieren. Diese Designer:innen können die Website Templates für dich individualisieren oder ein komplett neues Design für dich entwerfen.
Designagenturen
Wenn du eine besonders komplexe und aufwendige Webpräsenz planst, kann es für dich Sinn ergeben, dich an eine Design Agentur zu wenden. Hierbei solltest du dir allerdings dessen bewusst sein, dass die Kosten für das Webdesign steigen werden.
Ein Webdesign kann zwischen ein paar Hunderten bis zu Zehntausenden Euro kosten. Welcher dieser 3 Möglichkeiten letztendlich für dich und deine Firma die richtige ist, hängt von deinem Budget, der Komplexität deiner Website und natürlich von deinen Designvorstellungen ab.
Je detaillierter du deinen Webdesigner:innen von deinen Wünschen und Visionen erzählen kannst, desto besser wird auch das Ergebnis ausfallen.
So gelingt dir gutes Web Design
Wir hoffen, dass wir dir die Frage: Was ist Web Design? hinreichend beantworten konnten. Bei der Gestaltung deiner Website (egal ob allein oder mit einem Profi) solltest du in erster Linie deine Marke, die Ziele deiner Website und deine Kund:innen im Blick haben.
Nur so wird es dir gelingen, eine Website zu designen, die einen bleibenden Eindruck hinterlässt, nutzerfreundlich ist und deine Besucher:innen zur Konversion anregt. Wir wünschen dir viel Spaß und Erfolg.
Alexandra Eger
Content Managerin
