Webdesign: Zwischen Bestellung und fertiger Website

Was gehört zum Erstellungsprozess einer Website und worum handelt es sich bei Webdesign? Wenn über Webdesign gesprochen wird, ist es im Prinzip nur eines der Spezialgebiete, in denen eine Website erstellt wird. Es definiert sich als die strukturelle, funktionale und visuelle Gestaltung einer Website. Die technische Realisierung einer Website nennt man Webentwicklung. Wenn uns ein Kunde jedoch beauftragt, eine Website für ihn zu erstellen, steht oft die entscheidende Frage im Vordergrund: „Sie machen Webdesign, nicht wahr? Da wir sowohl Webdesign als auch Webentwicklung in unserem Leistungskatalog haben, verwenden wir, wie viele weitere Kollegen oder Agenturen, die Bezeichnung „Webdesign“ im Kontext des gesamten Prozesses von der Umsetzung bis zur Fertigstellung einer Website.

Webdesign-Ideen als Kommunikationsstrategie

Analysieren Sie die Bedürfnisse und Ziele der Website

Website-Front ist Konzept. Webdesigner beginnen mit der Analyse der Bedürfnisse und Ziele, die eine Website erfüllen soll. Je nach Art der Website hat sie ihre eigenen Anforderungen und Ziele. Eine Unternehmenswebsite hat oft andere strukturelle und funktionale Anforderungen als der Blog, das Intranet oder die Zielseite einer Organisation. Unternehmen wissen nicht immer von Anfang an, was sie brauchen, daher beraten wir unsere Kunden, was sie brauchen. Wenn uns beispielsweise ein Unternehmen oder eine Organisation mit der Erstellung einer Unternehmenswebsite betraut, wird zunächst von uns bestimmt, worin der grundlegende Nutzen besteht und was damit erreicht werden soll. Das reicht von der Neukundengewinnung über die Kundenbindung bis hin zu Referenzpräsentationen. Tatsächlich kümmern sich nicht alle Branchen oder Unternehmen darum, direkt über ihre Homepage zu verkaufen. Die Website ist im Allgemeinen so konzipiert, dass sie andere Marketing- und Verkaufsaktivitäten unterstützt. Das bedeutet, dass Aufbau und Inhalt solcher Seiten anderen Anforderungen genügen müssen als verkaufsorientierte Seiten.

Konzepte von Struktur, Zusammensetzung und Funktion

Ausgehend von den festgelegten Kommunikationszielen fließen die geplante Struktur und die nötigen Funktionen in ein Webdesign-Konzept ein. Je nach Ziel und Budget ist klar, ob die Website eine einzelne Seite ist oder viele Unterseiten hat, welche Optik Website-Struktur haben soll. Mehrsprachigkeit kann auch eine Anforderung an die Struktur, die Webdesigner beachten und bedenken müssen. Einige Anforderungen erfordern zusätzliche Funktionen, für die wir spezielle Plugins in unserem am häufigsten verwendeten WordPress-Content-Management-System (CMS) implementiert haben. Diese sind ebenfalls in das Konzept einzubeziehen. Nachfolgend können Sie lesen, was eine Informationsstruktur ist, was eine Navigationsstruktur ist und welche Elemente auf jeder Website enthalten sein können.

Website-Designkonzept und geplante Inhalte

Die inhaltliche Strategie und visuelle Gestaltung innerhalb der Homepage stehen in engem Zusammenhang mit dem strukturellen Konzept. Der Inhalt der Website umfasst sämtliche Fotos, Videos, Grafiken, Texte, und alle anderen Formen von Inhalten. Das Konzept sollte die Frage beantworten, was ausgedrückt werden soll, und mit welchen Inhalten das passieren soll, um die Ziele, die mit der Kundenkommunikation angestrebt werden zu erreichen. Zudem ist es notwendig, frühzeitig im Projekt zu inventarisieren, was auf der Seite abrufbar ist, was noch produziert werden muss und wer das Fehlende aufbaut oder liefert. Für alle visuellen Eindrücke entwickelt ein Webdesigner aufgrund der Ziele sowie des zu Kommunizierenden eine Bildsprache, basierend auf dem Corporate Design des Unternehmens.

Begriffe und ihre Definitionen:

Website: ist der gesamte Internetauftritt, welcher unter einer URL in dem Browser erreichbar ist, beginnend bei der Startseite bis zu den jeweiligen Unterseiten. Bei uns werden die Bezeichnungen Website und Homepage synonym verwendet.

Webseite: ist nur eine Seite innerhalb einer Website, die aus mehreren Seiten wie Haupt- und Unterseiten besteht. Eine Website setzt sich in der Regel aus mehreren Webseiten zusammen (mit Ausnahme von Single-Page-Websites).

Startseite: ist die erste oder aus Sicht der Informationsarchitektur die oberste Ebene und Webseite einer Website. Startseite: Wird manchmal als Startseite einer Website definiert. Es ist jedoch gängige Praxis geworden, Homepage als Synonym für Website zu verwenden.

One-Pager: Es ist eine „Single-Page-Maschine“. Ein Single-Page-Browser besteht aus nur einer Website, auf die Sie zugreifen können, indem Sie mit Schaltflächen scrollen oder nach oben oder unten springen. Hier werden lediglich das Impressum und die Datenschutzerklärung als separate Seiten angelegt.

Webdesign: ist die funktionale, visuelle und strukturelle Gestaltung einer Website. Auch die technische Umsetzung der Website gehört zu unseren Leistungen.

Webdesign: Von der Umsetzung bis zur vollendeten Website

Exkurs: Verfügbarkeit geht vor

Usability wird als Eignung oder besser gesagt als Benutzerfreundlichkeit definiert. Das bedeutet, dass eine Website benutzerfreundlich, verständlich und intuitiv sein sollte. Es hat eine gute Usability, wenn Benutzer ihre Ziele schnell und zufriedenstellend erreichen können. Usability bezeichnet das grafische Exterieur, das sogenannte User Interface (UI). Dies müssen Webdesigner in allen Schritten der Umsetzung berücksichtigen, von der Seitenstruktur über die einzelnen Elemente bis hin zur Navigation auf der Seite. Ist beispielsweise ein Button falsch positioniert oder ein Icon unverständlich, kommen Nutzer nicht direkt ans Ziel und die Benutzerfreundlichkeit leidet.

Seitenstruktur und Benutzerrichtlinien

Beleuchten wir nun einmal wie die Struktur der Website geplant wird. Die Struktur der Website teilt sich in die Seitenstruktur und die Struktur der Unterseiten auf. Für die Informationsarchitektur oder die Strukturierung der Seiten werden alle Themen entsprechend ihrem Inhalt zu erreichen. Ein typisches Beispiel für eine Firmenhomepage wäre eine grobe Aufteilung der Seitenstruktur in „Unser Angebot“, „Leistungen“, „Über uns“, „Kontakt“. Da auf einer Website oft viele unterschiedliche Inhalte und Angebote untergebracht und kategorisiert werden müssen, präsentieren Webdesigner zur besseren Übersicht die Seitenstruktur samt Sitemap. Wir haben Usability in der Informationsarchitektur betrachtet. Sowohl die Branche als auch die Zielgruppe der Website bestimmen auch, ob die potenziellen Kunden die Struktur verstehen. Das Menü stammt aus der Sitemap. Typischerweise ist die obere Ebene an der Bildung der Inhalte für die Menüpunkte beteiligt. Dieses Menü kann mit einem Klick oder Tippen zwischen Websites verschoben werden, sowohl auf Touchscreens als auch auf mobilen Geräten, so wie Benutzer navigieren. Für eine gute Usability muss die Benutzerführung so umgesetzt werden, dass Website-Besucher möglichst schnell und direkt ihr Ziel erreichen. Dafür eignen sich alle Navigationsarten. Neben Popups und Canvases sind auch Mega-Dropdowns und Hamburger-Menüs bekannte Navigationskonzepte. Im Allgemeinen muss sich ein Webdesigner während des Design-Prozesses eine Navigationsart überlegen, welches Menü für die jeweilige Website am besten geeignet ist.

Struktur und Elemente der Website

Neben der Informationsarchitektur und der Struktur der ganzen Website, welche mit einer Sitemap dargestellt werden, hat auch jede Website eine Struktur und eigene Elemente. Eine Seite lässt sich grob in Header, Inhaltsbereich und Footer unterteilen. Eine Website besteht aus vielen Teilbereichen, darunter auch die Navigation. Andere Elemente der Website umfassen Schaltflächen, Formulare und Eingabefelder, eingebettete Inhaltselemente (wie Videos, Karten oder soziale Inhalte), Mediengalerien und Schaltflächen für soziale Netzwerke. Auch reine Inhalte wie beispielsweise Bilder, weitere Grafiken und Texte sind eigenständige Elemente. Um all dies in Website-Layouts unterzubringen, verwenden Webdesigner Designraster. In WordPress und anderen Content-Management-Systemen wird dieses Gestaltungsraster in sogenannten Themes oder Templates umgesetzt. Dabei berücksichtigen wir stets, dass die Website auf mehreren Bildschirmen und unterschiedlich großen Endgeräten dargestellt wird.

Visuelles Website-Design

Beim visuellen Design geht es darum, wie eine Website aussieht. Daher sollte es optisch ansprechend sein. Ob dies der Fall ist, hängt von allgemeinen Prinzipien der visuellen Kommunikation ab, wie der Theorie und Wirkung von Farbe und einigen anderen. Darauf aufbauend entwickeln Webdesigner das Layout der Website. Die Gestaltung von Schrift- und Hintergrundfarbe der Website orientiert sich, sofern vorhanden, an dem Corporate Design (CD) des Unternehmens. In der Regel gibt es mindestens ein Logo mit den entsprechenden Firmenfarben. Bei der grafischen Gestaltung gibt es genügend Spielraum, damit Webdesigner sowohl Schriften als auch Farben entsprechend ihrer Wirkung auf den Kunden professionell einsetzen können. Darüber hinaus wirkt sich die visuelle Gestaltung einer Website auf die Benutzerfreundlichkeit aus. Neben Farbe wählen Webdesigner auch Schriftarten und Schriftgrößen und achten auf klare Kontraste. Verwenden Sie im Allgemeinen für den Bildschirm optimierte Schriftarten. Soll eine Website mehrsprachig erstellt werden, müssen nicht nur gestalterische Besonderheiten berücksichtigt werden, sondern auch Webdesigner müssen dies bei der Konzeption berücksichtigen und die Website oft auch programmatisch anpassen. Unterschiedliche Textlängen, die sich aus verschiedenen Sprachen ergeben, sind nur eines von vielen Implementierungsdetails, die es zu beachten gilt.

Begriffe aus dem Webdesign in Form eines Baums, Schriftfarbe Braun.

Inhalte empfangen oder Inhalte produzieren

In den meisten Fällen verlassen sich Webdesign-Einzelunternehmer darauf, Texte und Bilder von Kunden zu erhalten. Größere Agenturen stellen Texter, Mediengestalter oder Grafiker für die Content-Produktion ein. Manchmal werden dafür auch alle drei Stellen mit den entsprechenden Mitarbeitern besetzt, sodass alle drei Berufe in der Werbeagentur gefunden werden können.

Einige unabhängige Webdesigner arbeiten entweder mit geeigneten Kollegen zusammen oder sind selten in der Lage, professionelle Inhalte selbst zu erstellen. In diesem Fall schreiben Webdesigner wie wir im Rahmen des Webdesign-Prozesses Texte benutzerfreundlich und SEO-orientiert. Muss Bildmaterial erstellt werden, organisiert und führt ein Webdesigner Fotoshootings durch. Im Anschluss bearbeiten wir die Bilder websitespezifisch.

Exkurs: Onsite-SEO

Wenn Sie möchten, dass Ihre Website von Ihrer Zielgruppe bei Google oder anderen Suchmaschinen gefunden wird, braucht sie eine Suchmaschinenoptimierung (SEO). Das Akronym SEO leitet sich vom Anfangsbuchstaben des englischen Begriffs Search Engine Optimization ab. Am besten optimieren Webdesigner Websites direkt bei der Erstellung für SEO. Beim sogenannten Onpage-SEO wird im Wesentlichen durch Text dafür gesorgt, dass eine Internetseite für ausgewählte Suchbegriffe möglichst weit oben auf den Suchergebnisseiten von Google oder Bing erscheint. Webdesigner gestalten diese Inhalte so, dass sie Leser und Suchmaschinen ansprechen. Beim Onsite-SEO geht es nicht ausschließlich um relevante Suchbegriffe im Websitetext, sondern auch um den Aufbau bestimmter Überschriften, Absätze und Links. Darüber hinaus kann eine clevere Nutzung von HTML-Meta-Tags bei einer On-Page-SEO helfen, die bereits wichtig für die Benutzerfreundlichkeit der Website und die Verwendung von Sicherheitsmaßnahmen ist. Außerdem kann es die Ladezeiten verbessern.

Webentwicklung und Technologieimplementierung

Während der Entwicklungsphase der Website setzt das Team der Werbeagentur die Website technisch um. Das heißt, aus zuvor entwickelten Informations- und Navigationsstrukturen und allen visuellen Elementen entsteht die funktionsfähige Website, die Sie am Ende in Ihrem Browser sehen. Dabei konfiguriert der Webdesigner zunächst die Entwicklungsumgebung. Mit dem WordPress-CMS, das wir viel verwenden, erstellen wir Seiten und geben Inhalte ein. Webdesigner passen die Templates technisch an, damit die grafische Oberfläche, Benutzeroberfläche der Website zum Gestaltungskonzept passt. Bestimmte Funktionen erfordern die Installation und Konfiguration von Erweiterungen (Plugins). Solche Funktionen könnten beispielsweise maschinelle Anbindungen an Cloud-Software oder Anbindungen an eine passwortgeschützte Dokumentenverwaltung sein. Bei der Einrichtung eines Kontaktformulars oder der Installation von Tracking-Tools müssen Webdesigner die gesetzlichen Anforderungen an den Datenschutz, die Datenschutz-Grundverordnung (DSGVO), berücksichtigen. Die technische Umsetzung im Webdesign-Prozess ist oft mit vielen administrativen Aufgaben verbunden. Dazu gehören beispielsweise Webdesigner, die eine virtuelle Hosting-Umgebung mit virtuellem Hosting und SSL-Verschlüsselung einrichten. Hinter all diesen Abschnitten des Webdesign-Prozesses stecken viele winzige Arbeitsschritte und Details. Letztendlich wird die komplette Instanz auf einem Webserver in der Produktionsumgebung des jeweiligen Kunden installiert. Die Webseite ist live.

Fertige Webseite

Wenn die Erstellung einer Website abgeschlossen wurde und diese live ist, bekommen die Kunden in der Regel eine Schulung zum Umgang und zur Bearbeitung von Content-Management-Systemen, damit sie ihre Homepages selbstständig bearbeiten können. Nach SEO kommt SEO: Um über die erste Zeit nach der Webseitenerstellung hinaus gute Rankings zu erhalten und diese nicht wieder zu verlieren, sollten Webseiten ständig analysiert und optimiert werden. Sicherheitsupdates bilden ein Muss für alle Webseiten und stehen WordPress aufgrund von großer Beliebtheit und laufender Pflege durch eine Entwickler-Community ununterbrochen zur Verfügung. Außerdem raten wir dazu, regelmäßig Sicherungskopien zu erstellen, sodass wertvolle Inhalte erhalten bleiben.