Der Unterschied zwischen einem Laien und einem professionellen Webdesigner bei der Erstellung von Websites ist, der Laie schnappt sich eine Vorlage und fängt einfach an.
Das Problem bei dieser Vorgehensweise ist oft, dass es kein klares Ziel gibt und wer kein Ziel hat, findet auch nicht den richtigen Weg, sondern eiert hin und her, ohne jemals wirklich irgendwo anzukommen.
Ein erfolgreiches Webdesign-Projekt erfordert eine gut strukturierte Vorgehensweise. In diesem Artikel erkläre ich dir meinen gesamten Webdesign-Prozess in sieben klar definierten Schritten. Diesen Prozess verwende ich, um individuelle und professionelle Websites zu erstellen, die sowohl blendend aussehen als auch benutzerfreundlich sind.
Schritt 1: Erstellung der Sitemap
Der erste Schritt in meinem Webdesign-Prozess ist die Erstellung einer Sitemap. Eine Sitemap ist eine visuelle Darstellung der Struktur deiner Website und zeigt, wie die einzelnen Seiten miteinander verknüpft sind.
In dieser Phase lege ich alle notwendigen Seiten und deren Hierarchie fest. Dies hilft nicht nur mir als Designer, ein klares Bild von der Website zu bekommen, sondern ist auch ein wertvolles Werkzeug für die spätere SEO-Optimierung.
Im Grunde genommen, ist die Sitemap das Fundament deiner zukünftigen Website und bildet die Basis für alle Inhalte und Sections die die Website enthalten soll.
Sie ist also ein wichtiger Schritt, den man nicht auslassen sollte, da man sonst leicht den Überblick verliert und sich bei der Anlage der Seiten und Sections verzettelt.
Natürlich kann die Sitemap auch im Laufe des Projekts erweitert oder geändert werden, aber es ist immer gut am Anfang einen Plan zu haben der uns sagt, wo wir hinwollen.
Schritt 2: Erstellung des Wireframe Modells
Nachdem die Sitemap erstellt wurde, ist der nächste Schritt die Erstellung eines Wireframe Modells. Ein Wireframe ist ein einfaches, skizzenhaftes Layout der Website, das die Platzierung von Elementen wie Navigation, Bildern und Texten zeigt.
Es enthält keine gestalterischen Details, sondern konzentriert sich auf die grundlegende Anordnung und Funktionalität der Seiten. So plane ich das Benutzererlebnis (UX) und stelle sicher, dass alle notwendigen Funktionen vorhanden sind.
Sehr empfehlenswert ist es, alle Vorhandenen Texte jetzt schon in das Wireframe einzugeben. Denn so kann man die ganze Typographie der Website bewusst planen ohne Ablenkung durch Farben und Bilder und stellt so sicher, dass die fertige Website ein harmonisches Ganzes bildet.
Typographie, die Seele jeder Website
Manche behaupten, gutes Webdesign ist zu 80% Typographie und ich finde sie haben gar nicht so unrecht. Natürlich stechen dem Besucher einer Website als Erstes tolle Bilder und Designelemente mit Farben ins Auge.
Aber nur wenn das ganze „Bling Bling“ unauffällig durch eine professionelle Typographie untermalt wird, hat man eine wirklich erstklassige Website. Die Besucher merken das, wenn auch eher unbewusst.
Seien wir mal ehrlich, warum besucht man eine Website? Wegen des Inhaltes. Und der muss leicht zu lesen sein.
Schritt 3: Das Moodboard, der Spaß beginnt
Die vorigen Schritte fühlten sich doch eher mehr nach Arbeit an, sind aber leider notwendig, um am Ende eine perfekt auf deine Marke zugeschnittene Website zu bekommen.
Doch jetzt kommt der Schritt, bei dem alle immer am meisten Spaß haben, das Moodboard. Ich als Designer kann so richtig schön Creativ sein und der Kunde freut sich schon auf einen tollen Look und ein cooles Design.
Die ersten Stimmungsbilder nehmen im Kopf Gestalt an und du als Kunde kannst dich wunderbar einbringen. Alte Ideen werden weiterentwickelt und doch wieder verworfen, Neue Ideen entstehen und werden diskutiert.
Es darf sich ruhig für eine Weile auch mal ein bisschen creatives Chaos ausbreiten aber am ende müssen wir uns auf eine Stilrichtung festlegen, damit die Arbeit weiter gehen kann.
Denn ein Moodboard ist ein wichtiger Schritt, um die visuelle Richtung und das Designgefühl deiner Website festzulegen. Es ist eine Collage aus Bildern, Farben, Schriften und anderen Designelementen, die die gewünschte Stimmung und den Stil der Website vermitteln.
Das Moodboard dient als Inspirationsquelle und Referenz für das spätere Design und stellt sicher, dass du eine klare Vorstellung vom ästhetischen Ziel hast.
Schritt 4: Mockup in Figma
Im vierten Schritt wird das visuelle Design deiner Website im Detail ausgearbeitet, indem ein Mockup in Figma erstellt wird. Ein Mockup ist eine hochauflösende, statische Darstellung der Website, die das endgültige Design zeigt.
In Figma erstelle ich interaktive Prototypen, die es ermöglichen, die Benutzerführung und das visuelle Erscheinungsbild deiner Website zu testen. Dies ist der Zeitpunkt, an dem Farben, Schriften, Bilder und andere Designelemente genau festgelegt werden.
Du kannst im Mockup schon genau sehen, wie deine Website einmal aussehen wird. Alle Maße, Schriftgrößen, Farben, Bilder können genau festgelegt werden. Und dass, ohne eine Zeile Code zu programmieren.
Es ist ähnlich wie der Bauplan eines Hauses, dort wird auch jede Wandposition, jeder Balken und alle Maße exakt festgelegt, bevor der Maurer die Kelle schwingt.
Das Mockup ist völlig unabhängig davon mit welchem System die Website nachher realisiert wird. Ob sie in einem CMS wie WordPress, Joomla usw. oder in statischem HTML, vielleicht mit einem Framework wie Bootstrap realisiert wird, spielt bis hierhin eigentlich keine Rolle.
In der Regel können alle gewünschten individuellen Elemente mit den diversen Page Buildern und Plugins der CMS-Systeme umgesetzt werden. Eine Ausnahme bilden die sogenannten Homepage Baukästen wie Jimdo oder WIX. Da muss man mit dem auskommen was enthalten ist und ggf. Abstriche machen.
Was allerdings sehr wohl eine Rolle spielt, für die Entscheidung, in welchem System die Umsetzung erfolgt ist, ob du deine Inhalte oft selbst aktualisieren möchtest, in diesem Fall empfehle ich ein CMS zu verwenden.
Falls es sich aber um eine reine Landingpage handelt, die nur für einen einzigen Zweck erstellt wird, kann die Umsetzung in HTML mit Bootstrap die richtige Entscheidung sein.
Schritt 5: Website Entwicklung
Mit dem freigegebenen Mockup beginnt die eigentliche Entwicklung der Website. In dieser Phase wird das Design in funktionalen Code umgesetzt. Frontend-Entwickler verwenden HTML, CSS und JavaScript, um die visuelle Darstellung und Interaktivität zu erstellen, während Backend-Entwickler sich um die Datenbank, Serverlogik und andere technische Aspekte kümmern.
Wie schon weiter oben beschrieben, kann die Website natürlich auch mit einem CMS-System umgesetzt werden. In jedem Fall ist auch hier ein fachkundiger Webentwickler im Vorteil, denn es ist sehr wichtig, dass auch bei der Arbeit mit den Page Buildern die Best Practice Prinzipien der Webentwicklung eingehalten werden.
Die enge Zusammenarbeit zwischen Designern und Entwicklern ist entscheidend, um sicherzustellen, dass das Design korrekt und funktional umgesetzt wird.
Besonders gut funktioniert die Zusammenarbeit natürlich, wenn es sich bei Designer und Entwickler um dieselbe Person handelt.
Schritt 6: Launch der Website
Puuuh geschafft!
Der Launch der Website ist der Moment, auf den wir hingearbeitet haben. Vor dem öffentlichen Start wird die Website umfassend getestet, um sicherzustellen, dass alles reibungslos funktioniert.
Dazu gehören Funktionalitätstests, Browser- und Gerätekompatibilitätstests sowie eine abschließende Überprüfung der Inhalte. Sobald alle Tests abgeschlossen und eventuelle Fehler behoben sind, wird die Website live geschaltet und der Öffentlichkeit zugänglich gemacht.
Zusätzlich erstelle ich ein Übergabeprotokoll, aus dem hervorgeht:
- Das die Leistung der Website so optimal wie möglich ist.
- Die Barrierefreiheit bestmöglich umgesetzt wurde.
- Die Best Practices der Webentwicklung eingehalten wurden.
- Die grundlegende On Page Suchmaschinenoptimierung (SEO) berücksichtigt wurde.
Schritt 7: Optimierung und Nacharbeit
Nach dem Launch deiner Website ist die Arbeit noch nicht vorbei. Es ist wichtig, die Website kontinuierlich zu überwachen und zu optimieren. Dies umfasst die Analyse von Benutzerverhalten, das Sammeln von Feedback und das Durchführen von Tests, um die Benutzerfreundlichkeit und Leistung der Website zu verbessern.
Zudem führe ich regelmäßig Updates und Wartungsarbeiten durch, um die Sicherheit und Funktionalität deiner Website langfristig zu gewährleisten.
Wenn du diesen sieben Schritten folgst, kannst du sicherstellen, dass deine Website nicht nur gut aussieht, sondern auch benutzerfreundlich und funktional ist. Meine strukturierte Vorgehensweise hilft, mögliche Probleme frühzeitig zu identifizieren und sicherzustellen, dass das Endprodukt deine Erwartungen übertrifft und deine Kunden begeistert.
Website-Probleme? Ich habe die Lösungen.
Meine Kontaktdaten
Ralf Kortum
Webentwickler & Designer
Am Redder 14
24980 Schafflund
Telefon: +49
162 1873052
E-Mail: webdesign@ralf-kortum.de