Schritt 1: Absicht für deine neue Website klären
Auf los geht es los und sobald der Webdesigner weiss, worum es geht, kann er die ersten Code-Zeilen schreiben?
Vermutlich ist dir schon klar: So schnell geht es nicht.
Erst einmal ist wichtig, dass du Klarheit darüber erlangst, was du denn eigentlich mit deiner Website bewirken möchtest.
Vielleicht denkst du jetzt spontan «Kunden gewinnen».
Das wird so auch irgendwann stimmen. Aber es stellen sich diverse Fragen:
- Kunden für was genau?
- Wie willst du sie «gewinnen»?
- Welche Kunden sollen es sein?
Mit anderen Worte: Bevor wir über eine Website sprechen, sollte gänzlich geklärt sein, was dir die Zukunft bringt.
Schritt 1 zusammengefasst: Schaffe Klarheit über deine Absichten.
Nicht selten musst du dich für diesen Schritt erst selbst noch etwas besser kennenlernen. Aber dazu in einem künftigen Artikel mehr.
Schritt 2: Website-Strategie festlegen
Ich bezeichne Websites gerne als digitales Abbild eines Business.
Die Wahrheit ist: Eine Website selbst macht noch lange kein Business.
Natürlich ist es ein Teil des Marketings. Ich unterschreibe sofort, dass eine souveräne Website jedes Business weiterbringt.
Nur eben: Es ist Teil eines Ganzen.
Online-Marketing funktioniert in Kombination mit zum Beispiel Social-Media-Marketing, PPC-Werbung (Pay-per-Click), Networking, e-Mail Marketing etc.
Die Website ist darin ein Zahnrädchen in einem Gesamtsystem.
Damit dir deine Website den maximalen Nutzen bringt, solltest du dir vor der Erstellung auf alle Fälle Gedanken zu deiner Marketing-Strategie machen.
Es ist zum Beispiel entscheidend, ob deine Website-Besucher/innen eher kalt sind (via Google) oder bereits warm bis heiss, weil sie z.B. via Social-Media schon vieles von dir kennen.
Schritt 2 zusammengefasst: Überlege dir, wie deine Marketing-Strategie ausschaut und welche Rolle deine Website darin einnimmt.
Schritt 3: Branding
Bevor eine Website gestaltet werden kann, brauchst du deine eigenen Design-Richtlinien. Solche nennt man dann üblicherweise CI/CD – das steht für Corporate Identity / Corporate Design.
Wie man solche im Detail entwickelt, darüber gibt es dicke Wälzer zum Nachlesen und würde den Rahmen dieses Artikels nicht nur sprengen, sondern förmlich pulverisieren.
Darum ganz in Kürze die wohl wichtigsten Punkte fürs Verständnis.
1. Brand
Schaut man die Bezeichnung CI/CD genauer an, stellt man fest, hier geht es nicht nur um Design.
Wer einen Brand aufbaut, schafft eine Identität.
Diese Identität muss für etwas stehen und das wiederum in der Kommunikation nach aussen transportieren. Auf diese Weise soll die Identität (die Brand) zu einem abstrakten Charakter werden, der bei der Zielgruppe auf Resonanz stösst.
Stell dir also die Fragen:
- An wen richtet sich unsere Brand (Zielgruppe)?
- Wie soll uns die Zielgruppe wahrnehmen (auch Sender-Persona oder Archetyp genannt)?
- Welche Werte wollen wir vermitteln?
2. CI/CD
Basierend auf der Brand definiert man Richtlinien für die Kommunikation.
Das kann die Art sein, wie man Texte erstellt. Zum Beispiel, ob man die Leserschaft mit Du oder Sie ansprechen möchte (eine Frage, die für viele Gründer eine kleine Herausforderung darstellt).
Das kann sein, welche Anführungs- und Schlusszeichen man verwendet (Undici-Web nutzt z.B. « / »).
Zu einem grossen Teil betrifft dies aber auch die Style-Guides, auf denen gerade für die Website die Style-Elemente basieren.
Style-Guides definieren Dinge wie: Schriften, Farben, Schriftverwendung und vieles mehr.
Ah, fast vergessen: Ein Logo darf es dann auch noch sein und selbstverständlich bekommt es einen Ehrenplatz auf der Website... 🤗
3. Style-Elemente Webdesign
Nämlich oben links. Manchmal oben in der Mitte.
Aber auf alle Fälle eines von beidem. Denn das sind sich moderne User gewohnt und gegen diese Konvention sollte man besser nicht verstossen. Ausser, man möchte die User verwirren.
Aber abgesehen vom Logo ist das Design einer Website zunächst ein weisses Blatt.
Als Vorbereitung für das Design beginnt man in der Regel damit, erste Style-Elemente für die Website zu definieren. Fast immer brauchen Websites Überschriften diverser Abstufung und Buttons. Auch Elemente wie Listen, Textblöcken oder die Darstellung von Links wollen definiert sein.
Schritt 3 zusammengefasst: Definiere ein CI/CD und erstelle darauf basierend die Style-Elemente für deine künftige Website.
Schritt 4: Website-Content
Eine der am heissesten diskutierten Fragen des Webdesigns lautet: Was erstellt man zuerst, das Design oder die Inhalte?
Wir bei Undici-Web folgen dem Grundsatz «Design follows Function». Das Design soll sich folglich dem vorgesehenen Inhalten anpassen.
Das liegt daran, dass wir unseren Fokus mehr darauf setzen, dass die Website die Ziele unserer Kunden/innen unterstützt und weniger darauf, dass sie gut ausschaut.
Es ist nun also an der Zeit, die Inhalte zu erstellen.
Dazu gehören:
- Texte (Einzelne Wörter wie die Menüpunkte bis ganze Passagen wie der Über-uns Text)
- Fotos
- Grafiken
- Videos
- Selten, aber manchmal auch: Sound
- Falls schon vorhanden: Kunden-Testimonials
- Wer mit einem Blog starten möchte: erste Artikel
- PDFs
Schritt 4 zusammengefasst: Erstelle sämtliche Inhalte für die Website.
Schritt 5: Wireframe
Da jetzt klar ist, welche Inhalte auf die Seite kommen, ist es an der Zeit, den Aufbau zu planen.
Hier wirst du schnell feststellen: Eine Website ist kein Word-Dokument, das man von oben nach unten liest.
Auf einer Website wollen die Inhalte strategisch verteilt werden, sodass sie nach verkaufspsychologischen Kriterien überzeugen. Gleichzeitig wird eine Website sowohl auf Desktop, als auch auf Laptops, Tablets und Smartphones abgerufen. Auch das gilt es zu berücksichtigen.
Angesichts dessen erstellt man zunächst ein sogenanntes Wireframe.
Ein Wireframe ist eine Skizze einer Website.
Es geht einmal darum, eine erste Vorstellung davon zu bekommen, wie die Website aufgebaut sein soll. Dabei darf gerne auf Stift und Block gesetzt werden.
Dieser Schritt kann gut mit einem «Brainstorming» verglichen werden und funktioniert prima mit einer Gruppe.
Wenn dabei mehrere Zwischen-Versionen entstehen, ist das prima. Am Ende muss man sich auf eine Version einigen, die anschliessend als Grundlage für das Design dient.
Schritt 5 zusammengefasst: ein Wireframe erstellen.
Schritt 6: Webdesign
Nun haben wir die wichtigsten Zutaten bereit für deine künftige Website:
- die Style-Elemente
- das Wireframe
- die Inhalte
Daraus mixt ein geübter Webdesigner nun ein zauberhaftes Design. Ein professionelles Design muss mehrere Faktoren berücksichtigen, so zum Beispiel:
- die Anforderungen des CI/CD einhalten
- Generelle Design-Richtlinien und Best Practice
- das Nutzer-Erlebnis (User-Experience) gewährleisten
- Barrierefreies Design (gute Zugänglichkeit für alle)
- Conversion-Optimierung (verkaufspsychologische Überlegungen)
- SEO (Suchmaschinen-Optimierung)
Gut, wenn man dafür einen Spezialisten hat 😉
Schritt 6 zusammengefasst: Erstelle das Design (grafische Version) der Website
Schritt 7: Website programmieren
Auf Basis des Designs wird die Website programmiert. Wobei man nicht wirklich von «Programmieren» spricht, sondern vielmehr davon, das Design in sogenannten html (HyperText Markup Language).
Falls du wissen möchtest, wie eine Website aus Programmierer-Sicht aufgebaut ist, empfehle ich dir meinen Artikel «Grundlagen der Webprogrammierung».
In der Regel wird parallel auch ein sogenanntes CMS (Content-Management-System) eingerichtet, mit welchem sich die Website später auch ohne Programmier-Kenntnisse bearbeiten lässt.
Die Zwischenversionen lassen sich über einen Preview-Link real erleben. So kann bereits während der Entwicklung Feedback gegeben werden.
Schritt 7 zusammengefasst: Die Website programmieren
Schritt 8: Feinschliff der Website und Feedback-Schlaufen
Das schöne an Websites: Nichts ist in Steinen gemeisselt. Man kann jederzeit alles ändern.
Gefällt ein Bild nicht? In Kürze ausgetauscht.
Der Text enthält einen Tippfehler? Schnell korrigiert.
Man merkt, die Reihenfolge zweier Elemente passt nicht? Lässt sich umkehren.
Hier darf man gerne etwas perfektionistisch sein. 🧐
Schritt 8 zusammengefasst: Betrachte das Ergebnis und perfektioniere es.
Schritt 9: Testing
Bevor wir eine Website live stellen, stellen wir sicher, dass potenzielle Mängel beseitigt sind. Hierfür hilft uns bei Undici-Web eine Checkliste, welche über die Jahre auf mehr als 20 Punkte gewachsen ist.
Zu unserem Check gehören nicht zuletzt diverse Basics für die Suchmaschinen-Optimierung.
Sobald alles im Grünen ist, fehlt nur noch eines: Das «Ok» für das Go-Live.
Schritt 9 zusammengefasst: Vor dem Go-Live die Website nochmals eingehend überprüfen.
Schritt 10: Go-Live
Go-Live (oder eigentlich Go-Public) bedeutet nicht mehr und nicht weniger als: Die erstellte Website wird über die angedachte Domain abrufbar.
Hierfür muss man die sogenannten Nameserver bei der Domain verknüpfen und auf dem Server hinterlegen, in welchem Verzeichnis die Website gespeichert ist. Klingt vermutlich komplizierter, als es ist.
Oft verbunden mit dem Go-Live: Einrichten von E-Mail-Adressen.
Wenn du über eine eigene Domain verfügst, kannst du für solche auch beliebige E-Mail-Adressen erstellen.
Schritt 10 zusammengefasst: Beim Domain-Registrar und beim Web-Server die erstellte Website mit der Domain verknüpfen.
🍾 Jetzt darfst du einen kurzen Moment feiern.
Aber wie eingangs bereits erwähnt, ist die fertige Website nur der Anfang …
Schritt 11: Nach dem Go-Live
Die bittere Wahrheit: Eine Website alleine bringt dir gar nichts. Genau wie Autoreifen alleine dich nicht vorwärtsbringen.
Kombinierst du jedoch eine Website mit (und hier hast du die freie Wahl):
- Social-Media-Marketing
- PPC-Werbung
- Networking
- Print-Werbung
- einem YouTube-Kanal
- SEO
... dann wird deine Website dich vorwärtsbringen – wie ein komplettes Fahrzeug. Und ja, auch hier gibt es den VW oder den Ferrari.
Falls du einen Ferrari hast, sollten deine Reifen auch entsprechend belastbar sein. Du weisst, was ich meine 😉
Schritt 11 zusammengefasst: Vermarkte deine Website.