Was ist Webdesign?

Der erste Eindruck zählt: Ob Besucherinnen und Besucher auf Ihrer Website bleiben möchten oder den Tab direkt wieder schließen, entscheidet das Webdesign – also Layout, grafische Gestaltung, Funktionen und noch einiges mehr.

Webdesign-Definition: Was ist Website-Design?¶

Unter dem Begriff Webdesign (oder: Website-Design) versteht man die optische und funktionale Gestaltung einer Seite im Internet.

• Wie sieht die Website aus?
• Wie sind die Inhalte sortiert?
• Wie kommen Nutzerinnen und Nutzer zu Unterseiten?
• Welche Funktionen hat die Website?

Webdesign bringt die Inhalte der Website (z. B. Ihre Texte) in eine Form. Deshalb ist das Layout eine der wichtigsten Aufgaben von Webdesignerinnen und Webdesignern. Gutes Webdesign sucht immer einen Kompromiss zwischen einzigartigem Stil und intuitivem User Experience Design. Die Website soll einfach zu bedienen, aber trotzdem optisch ansprechend sein.

Genau wie andere Design-Disziplinen ist auch die Gestaltung von Internetseiten Moden unterworfen. Aktuelle Webdesign-Trends ergeben sich meist aus technischen Neuerungen oder veränderten Vorlieben der Nutzerinnen und Nutzer.

Wie arbeiten Webdesigner & Webdesignerinnen?¶

Die Arbeit von Webdesign-Profis ist vielseitig und hängt stark vom Projekt ab. Generell ist es aber eine Mischung aus kreativer Designarbeit und technischer Umsetzung. Dabei arbeiten sie eng mit ihrer Kundschaft zusammen, um Bedürfnisse zu verstehen und zu erfüllen. Zu den typischen Aufgaben gehören:

1. Konzepterstellung: Ausgehend von den Wünschen der Kundinnen oder Kunden erstellt man ein Konzept. Dies umfasst die Auswahl der Farbpalette, das Layout der Seite, die Navigation und die allgemeine Ästhetik. Zur anfänglichen Planung zählt meistens auch ein Styleguide, der die Webdesign-Grundlagen für das spezifische Projekt festlegt.
2. Grafikdesign: Zum Webdesign gehört oft auch das Entwerfen von Grafiken und Bildern. Dies kann das Design von Logos, Bannern sowie das Erstellen von anderen visuellen Elementen umfassen. Für viele Grafiken kann man auf bestehende Bibliotheken zurückgreifen. Beliebt sind beispielsweise Iconfonts, die nützliche Piktogramme enthalten.
3. Coding: Für die Umsetzung von Design und Konzept kommen HTML, CSS und JavaScript zum Einsatz. Einige Webdesignerinnen und Webdesigner verwenden auch Content-Management-Systeme wie WordPress oder Joomla.
4. User Experience (UX) und User Interface (UI) Design: Gutes Webdesign berücksichtigt immer die Benutzerfreundlichkeit der Website. Besucherinnen und Besucher sollen sich so einfach und intuitiv wie möglich durch die Website bewegen können. Dafür verwendet man auch den Begriff User-Centered Design.
5. Wartung und Aktualisierungen: Nachdem eine Website live gegangen ist, ist die Arbeit oft noch nicht beendet. Teilweise bleiben Webdesign-Profis weiterhin im Projekt aktiv, um die Website zu warten, Aktualisierungen vorzunehmen oder neue Inhalte hinzuzufügen.

Webdesign vs. Web Development¶

Eine klare Unterscheidung zwischen den beiden Fachbereichen gibt es nicht. Man kann aber sagen, dass die beiden Disziplinen sich auf unterschiedliche Facetten der Gestaltung einer Website spezialisieren:

• Webdesign: Im Vordergrund steht die Wirkung der Website auf Besucherinnen und Besucher. Die optische Gestaltung und die Art, wie man durch die Website navigiert, sind die wichtigsten Aspekte.
• Webentwicklung: Die Entwicklung einer Website legt das Augenmerk stärker auf die technische Umsetzung der Website. Performance und Features stehen im Mittelpunkt der Arbeit.

Klar trennen kann man die Bereiche nicht, weil in vielen Fällen auch Webdesigner Quelltext erstellen und Webentwicklerinnen sich Gedanken um Benutzerfreundlichkeit machen. Die Übergänge sind fließend.

Webdesign-Tools¶

Es gibt viele Hilfsmittel, die man einsetzen kann, um die eigene Idee einer Website Realität werden zu lassen. Selbst wenn man kein Webdesign-Profi ist, kann man mit dem passenden Werkzeug eine professionelle Website aufbauen. Die Wahl des Tools hängt dabei vom gewünschten Ergebnis, dem vorhandenen Know-how und der Zeit ab, die man selbst in das Projekt stecken möchte.

Homepage-Baukasten¶

Mit einem leicht zu bedienenden Baukasten kann man sich sehr schnell eine einfache, aber professionelle Website aufbauen. Per Drag-and-Drop zieht man gewünschte Elemente an die richtige Stelle und kann dann die eigenen Inhalte hinzufügen.

Content-Management-Systeme¶

Mit einem Content-Management-System (CMS) wie WordPress ist es ebenfalls nicht schwierig, ein eigenes Webprojekt umzusetzen. Die Software bietet unterschiedlichste Themes (Design-Vorlagen) und Plugins (Funktionserweiterungen), die sich mit nur wenigen Klicks installieren lassen.

Webdesign-Service¶

Trotz Hilfsmittel muss man Zeit investieren, um die eigene Website zu designen. Wer diese Kapazitäten nicht hat, kann sich an Profis wenden. Bei einem Webdesign-Service bauen Expertinnen und Experten die Website auf Grundlage Ihrer Ideen.

Vorteile von gutem Webdesign¶

Gutes Webdesign bringt Ihre Inhalte in die richtige Form. Im geschäftlichen Kontext gehört dazu z. B. auch die Präsentation eines Unternehmens; beim Onlineshop ist es die Darstellung der Produkte. Nur ein gut durchdachtes und technisch einwandfrei umgesetztes Webdesign hält Besucherinnen und Besucher auf Ihrer Website. Wenn sich Nutzerinnen und Nutzer hingegen nicht zurechtfinden, Seiten langsam laden oder Inhalte schwer zu erfassen sind, springen sie direkt wieder ab.

Das können Sie mit gutem Webdesign erreichen:

• Professionalität zeigen: Wenn Ihre Website durchdacht gestaltet ist und im besten Fall auch zu Ihrer Corporate Identity (CI) passt, macht der Webauftritt und das Unternehmen dahinter einen professionellen und seriösen Eindruck.
• Reichweite erhöhen: Eine gute Website, die auch im Hinblick auf SEO erstellt wurde, kommt in den Suchmaschinen gut an. Damit erreichen Sie dann mehr Menschen.
• Konversionsrate steigern: Eine gut funktionierende User Experience leitet Besucherinnen und Besucher geschickt durch die Website. Mit passenden Call-to-Actions (CTA) regen Sie zusätzlich einen Kauf oder die Kontaktaufnahme an.

Bestandteile von Webdesign¶

Webdesign umfasst einen sehr großen Bereich. Quasi alles, was zur Gestaltung einer eigenen Website gehört, fällt in diesen Fachbereich. Man kann die Bestandteile grob in zwei Bereiche einteilen. Ein großer Teil ist klassische Designarbeit: Das meint die optischen Aspekte, die Besucherinnen und Besucher direkt sehen. Dann gibt es aber auch noch funktionale Elemente, die die technischen Gegebenheiten der Website betreffen.

Visuell¶

• Schriftart: Mit den passenden Webfonts werden Ihre Textinhalte perfekt dargestellt. Beachten Sie dabei, dass nicht jede Schriftart, die Sie beispielsweise in Word auswählen können, auch von Browsern dargestellt werden kann.
• Layout: Die Anordnung und das Verhältnis von grafischen Elementen und Texten bestimmt, wie man Informationen aufnehmen kann. Optische Reize spielen hierbei genauso eine Rolle wie klare Informationsstrukturen.
• Grafische Elemente: Logos, Buttons, Banner und andere grafische Objekte gehören zu den offensichtlichsten Bestandteilen des Webdesigns. Sie machen zu einem großen Teil aus, wie die Website wahrgenommen wird.
• Farbgebung: Eine der wichtigsten Entscheidungen und Teil jedes guten Styleguides ist die Auswahl der Farben. Die Farbpalette richtet sich dabei am besten nach dem Corporate Design.
• Bilder & Videos: Ohne Fotos, Infografiken und erklärende Videos wirkt eine Website leer. Multimedia-Elemente bieten Abwechslung und können Informationen auf andere Weise vermitteln als Texte.

Funktional¶

• Navigation: Besucherinnen und Besucher müssen sich intuitiv zurechtfinden. Menüs, Footer und Verlinkungen sollten deshalb gut geplant sein. Die Website-Navigation ist somit einer der wichtigsten Faktoren in puncto Usability.
• Struktur: Verwandt mit der Navigation ist die Struktur der Website. Hierbei geht es vor allem um die Hierarchie und Vernetzung der einzelnen Unterseiten hinter den Kulissen. Die Struktur lässt sich beispielsweise an der Sitemap ablesen.
• Performance: Eine gute Website muss schnell laden, sonst klicken Besucherinnen und Besucher genervt weg. Um die Absprungrate zu verringern, sollte die Performance also optimiert sein. Einen guten Einblick in die Leistungsfähigkeit einer Website bieten beispielsweise die Core Web Vitals.
• Interaktion: Kontaktformulare und andere interaktive Elemente liegen ebenfalls im Aufgabenbereich von Webdesignerinnen und Webdesignern. Für die technische Umsetzung kann man auf Plugins zurückgreifen.
• Barrierefreiheit: Eine Website sollte für alle Menschen gut aufbereitet sein, auch wenn diese zum Beispiel nicht oder nur schlecht sehen können. Barrierefreies Webdesign sorgt mit Alt-Texten oder kontrastreichem Design dafür, dass auch diese Personen alle gewünschten Informationen erhalten. In den WCAG findet man Empfehlungen, wie man Barrierefreiheit auf einer Website erreicht.

Besonderheit: Responsive Design¶

Websites werden schon lange nicht mehr nur von einer Geräteart aufgerufen. Neben Desktop-PCs gibt es Notebooks, Tablets und Smartphones, die alle unterschiedliche Bildschirmgrößen haben. Das ist eine große Herausforderung beim Webdesign: Wie soll ich mich für ein Layout entscheiden, wenn ich gar nicht weiß, wie das später angezeigt wird?

Die Lösung heißt: Responsive Design. Bei dieser Technik passt sich das Design automatisch an die Bildschirmgröße an. So wird vieles, was auf einem üblichen Desktop-Gerät noch horizontal dargestellt wird, auf dem Smartphone untereinander angeordnet. Auch ein Menü, das sonst im Header auftaucht, erscheint im Handy-Display als ausklappbares Burger-Menü oder einer anderen responsiven Navigation. Sogar die Typografie spielt bei Responsive Design eine große Rolle – schließlich sollen die Texte auf jedem Display gut lesbar sein.

Besonderheit: Suchmaschinenoptimierung¶

Eine Website, in deren Webdesign viel Zeit und Energie investiert wurde, soll auch gefunden werden. Mit geschickter Suchmaschinenoptimierung (SEO) bereitet man die Inhalte und die Website so auf, dass Google und Co. sie weit oben in den Suchergebnissen anzeigen.

Dafür müssen Ladegeschwindigkeit, Navigation und Layout perfekt sein. Wenn man die Seite aufruft und nicht die gewünschten Informationen findet oder zu lange darauf warten muss, schließt man das Fenster wieder und guckt sich auf einer anderen Website um. Die erhöhte Absprungrate ist wiederum ein negatives Signal für die Suchmaschine. Ein durchdachtes und technisch einwandfreies Webdesign ist deshalb die Basis für SEO.

Fazit: Webdesign – Grundlage des Erfolgs im Internet¶

Wenn Sie mit Ihrem Unternehmen oder Ihrem Projekt im Internet eine gute Figur machen möchten, muss Ihre Website nicht nur interessante Inhalte bieten, sondern auch sonst überzeugen. Deshalb ist gutes Webdesign so entscheidend. Egal ob Sie selbst (mit hilfreichen Werkzeugen) aktiv werden oder Profis beauftragen: Sorgen Sie dafür, dass sich Besucherinnen und Besucher auf Ihrer Website wohl fühlen und schnell an die gewünschten Informationen gelangen. Nutzen Sie Farbgebung, Schriftarten und Layout außerdem dazu, Ihre Marke auch im Internet richtig zu präsentieren.