Eine professionelle Website in 5 Schritten

Sie möchten für Ihr Unternehmen oder Ihre Organisation eine professionelle Website erstellen, wissen aber nicht, wie Sie anfangen sollen? Ich stelle Ihnen hier in fünf Schritten vor, wie wir Websites relaunchen oder eine komplett neue Website erstellen.

Ihre Website ist nicht mehr zeitgemäß und braucht einen modernen Schliff, um am Marktangebot mithalten zu können und Ihre Inhalte möglichst ansprechend zu präsentieren? Oder wollen Sie neue Themen oder Produkte darstellen und bewerben?

Höchste Zeit für eine neue professionelle Website – legen wir los:

1. Anforderungsanalyse & Planung

Die Gestaltung einer erfolgreichen Website ist ein komplexer Prozess. Daher ist es wichtig, sich im Vorfeld grundlegende Gedanken über die Vorgaben, Ziele und den zeitlichen und finanziellen Rahmen für die Umsetzung zu machen. 

Was ist das Ziel der Website?

Kaum eine Website ist rein informeller Natur, so können beispielsweise über einen Newsletter oder ein Anfragen-Formular Kontakte für Online-Marketing generiert werden. Ein Ziel der Website könnte natürlich auch sein, Produkte zu verkaufen oder den Besucher dazu zu bringen, ein Zimmer zu buchen oder anzufragen. Ein weiteres Ziel könnte sein, über ein Online Membership System Mitglieder zu gewinnen.

Was ist die Zielgruppe?

Die Zielgruppe ist eine definierte Gruppe von Besuchern der Website. Diese Gruppe wird anhand von Merkmalen wie Alter, Geschlecht, Interessen, Beruf und anderen Faktoren definiert, um auf ihre Bedürfnisse und Anforderungen einzugehen. Eine professionelle Website kann durchaus auch mehrere Zielgruppen haben. Um Zielgruppen darzustellen, kann man sich fiktive Personen (Personas) ausdenken und diese mit konkreten Werten beschreiben.

Was ist der Zeitrahmen für die Umsetzung der Website?

Eine „Roadmap“ mit definierten Abschnitten oder „Meilensteinen“ hilft bei der Zeitplanung. Oft muss mehr Zeit einkalkuliert werden, als man vorerst vielleicht annimmt. Wird beispielsweise der gesamte Inhalt überarbeitet oder erweitert, kann dies schnell einiges an Zeit in Anspruch nehmen. Auch die Abhängigkeit von externen Dienstleistern wie Fotografen kann den Zeitplan beeinflussen.

Was ist der finanzielle Rahmen?

Die Kosten sind ein weiterer wichtiger Faktor, der vor der Umsetzung einer Website betrachtet werden muss. Eine professionelle Website sollte individuell für den Kunden und die Zielgruppe gestaltet und umgesetzt werden. Nur so können die gesetzten Ziele auch erreicht werden. Wie in jedes maßgeschneiderte Produkt fließen auch in eine Website viele Stunden Arbeit, je nach Ausmaß und Umfang, die in den Kosten berücksichtigt werden müssen.

Was sind die Inhalte der Website?

„Content is King”. Der Inhalt ist das Wesentliche der Website. Das Design soll diesen Inhalt für den Benutzer verständlich darstellen und navigierbar machen. Das Design richtet sich also nach dem Inhalt und nicht umgekehrt. Mit einer neuen, professionellen Website und geschärftem Fokus ist es oft notwendig, die Inhalte der Website zu überarbeiten oder neue Inhalte zu erstellen.

„Content is King“ der Inhalt ist das Wesentliche der Website

Gibt es genug professionelles Bildmaterial?

Bilder liefern einen besonders hohen emotionalen Inhalt, der von Besuchern sofort wahrgenommen wird. Für eine professionelle Website sind aktuelle Bilder ein ganz wesentlicher Bestandteil, an dem nicht gespart werden sollte. Die beste Option sind Fotos von einem Profi-Fotografen, speziell für ihr Projekt aufgenommen. Wir bieten hierzu ein passendes Service.

Ist das Corporate Design noch aktuell?

Das Corporate Design (CD) ist der visuelle Ausdruck eines Unternehmens oder einer Marke und umfasst alle Gestaltungsmerkmale wie Logo, Farben, Schriftarten, Bildsprache und weitere visuelle Elemente, die ein einheitliches Erscheinungsbild gewährleisten. Die Neugestaltung des Corporate Design sollte vor der Erstellung einer Website abgeschlossen sein.

Welche Anforderungen werden an das Design der Website gestellt?

Gibt es spezielle ästhetische Wünsche, die das Design der Website betreffen und aus dem CD nicht abgeleitet werden können? Mögliche Design Trends oder Richtungen, denen man folgen will, sollten vorab besprochen und festgelegt werden.

Wie arbeiten die Mitbewerber?

Ein Blick über den Tellerrand zu Firmen, die in einem ähnlichen Bereich tätig sind, kann helfen, Inspiration zu finden, sich individuell auszurichten oder auch Fehler zu vermeiden. Es kann hilfreich sein, den deutschen Sprachraum zu verlassen und „globaler“ zu recherchieren.

2. Konzept, Layout und Webdesign

Die zweite Phase auf dem Weg zur Entwicklung einer professionellen Website ist die Erstellung der Sitemap und der grafischen Darstellung des Seitenlayouts als Wireframe, Mockup und Design.

Sitemap

Die Sitemap oder auch Seitenbaum ist eine hierarchische Struktur aller Seiten auf einer Website. Eine gut strukturierte Sitemap hilft den Besuchern und auch den Suchmaschinen, Ihre Website besser zu verstehen und schneller zu navigieren. Die Sitemap kann als eine in mehreren Ebenen verschachtelte Liste dargestellt werden oder als grafischer Baum mit der Startseite als Wurzelknoten und den Unterseiten als Blattknoten.

Mockups & Wireframes

Abhängig von der Komplexität und dem Umfang der Website-Projekts ist es empfehlenswert, vor dem grafischen Design der Website einen Wireframe oder einen Mockup zu erstellen. Mit diesen Methoden wird zuerst das Layout und die Oberfläche der Website abgebildet, ohne auf ästhetische Merkmale wie Farben, Schriften oder Bilder einzugehen. Der Vorteil dieser Methode ist, dass das Design iterativ ausgearbeitet und konkretisiert wird und in Besprechungen nur die jeweils relevanten Themen diskutiert werden. Grundlegende Änderungen des Seitenaufbaus können in einem Mockup viel schneller durchgeführt werden als bei einem finalen Design.

Die Kunst herausragenden Webdesigns liegt in einer Mischung aus emotionalem Design und guter Usability

Grafisches Design der Website

Das End-Produkt des grafischen Design-Prozesses ist eine detaillierte Darstellung einer oder mehrerer Seiten des Web-Projekts. Dargestellt sind neben dem Layout und der Navigation die Typografie, Farben, Bilder und die wichtigsten Inhaltselemente.

Das Design einer professionellen Website wird in speziellen Design-Programmen wie Adobe XD, Sketch oder Figma als interaktiver Prototyp umgesetzt. Bei großen Projekten ist es durchaus sinnvoll neben der Startseite auch verschiedene Unterseiten auf mehreren Endgeräten (Desktop, Tablet, Laptop), sowie den Interaktionsfluss zwischen den Seiten über verschiedene Navigationselemente abzubilden.

Regelmäßige Kontrolle

Der Mockup sowie das Design sollten immer wieder anhand der Personas (Zielgruppen) sowie den Vorgaben aus der Anforderungsanalyse validiert werden:

  • Ist der für die Zielgruppe relevante Inhalt sofort ersichtlich?
  • Sind die wichtigsten Themen auf der Startseite übersichtlich dargestellt?
  • Lässt sich die Navigation gut verwenden?
  • Wird das Corporate Design auf der Seite ansprechend vermittelt?
  • Ist der Seitenaufbau im Großen wie im Kleinen stimmig und passt die Hierarchie?
  • Lässt sich das Design technisch so umsetzen?
  • und vieles mehr

Usability und emotionales Design

Die Kunst herausragenden Webdesigns liegt in einer Mischung aus emotionalem Design und guter Usability – passend für die Zielgruppe und stimmig zum Corporate Design. Je nach Projekt kann der emotionale Teil (Design-Stil, Bildsprache, Layout, Typografie) überwiegen und mehr Wagnisse zulassen oder es steht die Benutzbarkeit/Usability (gelernte Interaktionsschema, klare Struktur, einfache Verständlichkeit) an erster Stelle. Das eine Extrem resultiert in atemberaubend aussehenden Websites, die nicht sofort zu durchschauen und schwer zu bedienen sind, das andere Extrem sind leicht bedienbare, übersichtliche Seiten, die aber langweilig und emotionslos aussehen.

w

Das klingt für Sie alles sehr komplex?
Wir finden die optimale Lösung für Ihr Web-Projekt.

3. Umsetzung der Website und Befüllung mit Inhalt

Es sollte nun klar sein, wie die Darstellung der Benutzeroberfläche aussieht. Manche Animationen und Interaktionen können in Design Programmen oft nur schematisch dargestellt werden. Wirklich zum „Leben” erweckt wird die Seite erst in der Umsetzung.

Content Management System

Die Software zur Verwaltung von Websites wird Content Management System (CMS) genannt. Ein CMS ist für die Bearbeitung, Organisation und Veröffentlichung der digitalen Inhalte wie Texte, Bilder, Videos und andere Arten von Medien zuständig. Der Inhalt wird auf dem Server und in dessen Datenbanken gespeichert. Zu den bekanntesten Open-Source-CMS gehören WordPress, Joomla und Drupal. Es gibt jedoch eine Vielzahl mehr an frei verfügbaren sowie proprietären CMS Systemen.

Templates

Der Inhalt und das grafische Design der Website werden von einem CMS anhand eines Templates zusammengeführt. Templates sind in HTML, CSS und Javascript programmierte Seiten-Layout-Vorlagen, die das CMS verwendet, um die Seite, die der Benutzer aufruft, zu generieren. Diese Vorlagen können entweder händisch programmiert oder fix fertig gekauft werden. Für eine kundenspezifische und Zielgruppen-optimierte, professionelle Website ist der erste Ansatz zu bevorzugen oder eine Umsetzung mit Child-Themes — die von uns gewählte Methode — die Vorteile beider Herangehensweisen vereint.

Optimierung für Endgeräte (Responsive Design)

Bei der Umsetzung sollte besonderes Augenmerk auf die Anpassung der Website für verschiedene Endgeräte gelegt werden. Das Layout, die Schriftgröße und die Navigation müssen für die Darstellung am Smartphone, Tablet, Laptop und für Desktop Computer optimiert sein. Diese Anpassung nimmt eine gewisse Zeit in Anspruch, ist aber unerlässlich, um jedem User die bestmögliche Usability zu bieten. Laut einer Website für globale Statistiken verwenden ca. die Hälfte der Benutzer in Europa im Jahr 2023 zum Surfen im Internet den Desktop-PC, die andere Hälfte nutzt das Smartphone. Seiten mit schlechter mobiler Darstellung werden von Google mittlerweile in der Suche durch schlechteres Ranking abgewertet – also bei der Darstellung in den Suchergebnissen zurückgereiht.

Seitengeschwindigkeit

Die Ladegeschwindigkeit einer Website ist von mehreren Faktoren abhängig, zu den Wichtigsten zählen:

  • das Theme und dessen technische Umsetzung
  • der Inhalt der Website (Bilder, Videos)
  • der Server, auf dem die Seite betrieben wird
  • die Optimierung des CMS auch durch Performance-Plugins
  • die Verwendung von Plugins, die die Seite u.U. bremsen

Die Seitengeschwindigkeit ist nicht nur für das subjektive Erlebnis des Benutzers relevant, sondern auch ein Faktor für das Ranking bei der Google-Suche.

Befüllung mit Inhalt

Die weiteren Inhaltsseiten einer Website werden meistens nach der technischen Umsetzung des Templates aufgebaut. Neben der wichtigsten Seite – der Startseite – dienen die Unterseiten zum Vertiefen der Thematik. Die Startseite ist für viele Benutzer der Einstieg, wo das Thema schmackhaft gemacht und dann auf Unterseiten vertieft wird. Der Aufbau der Seiten sollte die in Abschnitt 1 definierten Ziele unterstützen und den User nie in eine „Sackgasse“ führen. Am Ende der „Benutzer-Reise“ per Klicks durch Ihre Website, sollten die Ziele stehen: Ein Produkt zu kaufen, Kontakt aufzunehmen, den Newsletter zu abonnieren, oder Ähnliches.

Der Inhalt der Website ist nicht nur für den Kunden relevant, sondern auch für die Suchmaschinen, über die die meisten User auf die Seite gelangen. Die Suchmaschinen müssen die Seite verstehen können, dazu wird gut strukturierter und relevanter Inhalt benötigt. Durch das Einlesen des Inhalts (Text, Bilder, Videos) erkennen Suchmaschinen, was der Fokus der Website ist und um welches Thema es sich handelt. Je mehr wertvolle Informationen sich auf einer Seite befinden, desto besser.

Datenschutz

Gerade in der EU ist das Thema Datenschutz ein wichtiger Punkt. Die Grundidee dahinter ist, dass der Besucher informiert wird und bestimmen kann, für welche Zwecke seine Daten verwendet werden. Daten sind dabei nicht nur die Kontaktdaten, die er eventuell in ein Formular eingibt, sondern auch seine IP-Adresse, die beim Aufrufen einer Seite an den Server geschickt wird, und Cookies (kleine Dateien), die auf seinem Gerät gespeichert werden. Um der Datenschutz Grundverordnung gerecht zu werden, ist es wichtig beim Aufbau und Betrieb der Seite, gewisse Regeln zu beachten. Der Benutzer muss auf einer Datenschutzseite über die Verwendung seiner Daten informiert werden. Cookies können erst dann aktiviert werden, wenn der User seine Zustimmung in einer Hinweismeldung (Cookie Fenster) gegeben hat.

Bei der Web-Entwicklung sind uns alle diese Themen von besonderer Wichtigkeit: Wir setzten Websites professionell mit Liebe zum Detail, für Mobilgeräte optimiert, schnell ladend und Datenschutz-konform um.

4. Onlinegang der Website

Ist die Befüllung und der Aufbau der Website abgeschlossen und wurde sie umfangreich getestet, kann sie „online geschaltet“ werden. Dazu wird beispielsweise eine Seite, die WordPress als CMS verwendet, auf den Server übersiedelt, auf dem sie dann betrieben werden soll. Gleichzeitig wird die Domain (lesbare Browser-Adresse) auf diesen Server weitergeleitet.

Ein Hosting-Server in der EU ist für den Datenschutz wichtig

Wo wird die Website gespeichert?

Hosting-Unternehmen stellen neben Domain-Namen, Speicherplatz auf einem Server in deren Rechenzentren zur Verfügung. Der Server-Speicherplatz und die Domain können, müssen aber nicht vom selben Anbieter sein. Hoster gibt es viele, mit sehr unterschiedlicher Preisgestaltung, je nach Angebot und Spezialisierung. Bei Hosting Anbietern ist es unter anderem wichtig, dass diese einen Server-Standort in der EU (für den Datenschutz) und eine gute Erreichbarkeit des Supports haben.

Auswertung der Seitenzugriffe

Spätestens jetzt sollten auch Web-Analyse-Dienste wie Google Analytics auf der Website eingebunden und aktiviert werden. Dadurch können die Besucherzahlen und Marketing-Kampagnen ausgewertet werden, um Rückschlüsse auf die Interessen der Benutzer zu ziehen. Darin einbezogen sind nur die Besucher, die einer Nachverfolgung in der Hinweismeldung auch zugestimmt haben.

So findet Google die Seite schnell

Um Google beim Einlesen der Seite auf die Sprünge zu helfen, kann die neue Web-Seite und dessen Sitemap (Übersicht aller Seiten) in der Google Suchkonsole registriert werden.

Wurde eine bestehende Seite neu gestaltet oder umgebaut, ist es ratsam, Weiterleitungen der wichtigsten alten Seiten auf neue Zielseiten einzurichten. Dadurch werden Links von Suchmaschinen auf Seiten, die nicht mehr existieren, verhindert. Weiterleitungen müssen am neuen Server eingerichtet werden – am schnellsten geht das mit einem Plugin.

5. Betrieb der Website

Hosting und Updates

Das Content Management System und die Plugins entwickeln sich täglich weiter, um neue Technologien und Standards zu unterstützen. Regelmäßige Updates sowie Backups sind für einen sicheren Betrieb der Seite unumgänglich. Werden Websites von uns gehostet, erstellen wir regelmäßige Sicherheitskopien der Website, installieren alle neuen Updates des CMS und der Plugins und stellen sicher, dass die Seite auch nach Jahren noch so gut funktioniert und aussieht wie beim Onlinegang.

Was ist der Weg zum Erfolg?

Damit die Website die gesteckten Ziele erreichen kann und das Ranking (die Reihung) bei Google verbessert wird, ist es essenziell, den Inhalt regelmäßig zu pflegen und zum Beispiel mit einem Business Blog zu erweitern. Wertvoller und relevanter Inhalt zieht nicht nur den Googlebot, sondern besonders interessierte Kunden an. Der Erfolg kommt nicht über Nacht, sondern über eine konsequente Arbeit, die man in die Website und deren Vermarktung über Social-Media-Kanäle investiert.

Ich hoffe, ich konnte Ihnen mit diesem Artikel einen Einblick in die Entwicklung einer schönen und erfolgreichen Website geben. Wenn Sie einen Experten mit viel Erfahrung für die Umsetzung Ihres Webprojekts suchen, kontaktieren Sie uns, wir würden uns freuen, mit Ihnen zusammenzuarbeiten!