Webdesign-Prozess: Der ideale Weg zum erfolgreichen Projektabschluss

Du könntest ein Senkrechtstarter mit Photoshop oder Illustrator sein oder erstaunliche CSS- und JavaScript-Fähigkeiten besitzen. Damit Du jedoch Deine Kreativität und Ideen mit hoher Motivation bei jedem Arbeitsschritt Deines Webdesign-Projekts effektiv ausarbeiten kannst, benötigst Du einen soliden Webdesign-Prozess. Ansonsten sind Deine Talente verschwendet und weniger – jedoch besser organisierte – Mitstreiter werden Dir Deinen Platz streitig machen. Also, wo soll man anfangen?

Nehmen wir an, Dein Webdesign-Angebot hat beim Kunden grünes Licht bekommen und Du hast von ihm soeben das detaillierte Briefing erhalten. Dabei möchte ich Dich nun durch neun verschiedene Phasen während eines Webdesign-Projekts führen, die Dir als Grundlage für Deinen Webdesign-Prozess dienen können.

Sprungmarken:

1. Informationen sammeln
2. Projekt definieren
3. Design entwerfen
4. Präsentation von Entwürfen
5. Entwurf verfeinern
6. Finale Designpräsentation
7. Entwicklung und Programmierung
8. Launch
9. Projektabschluss

1. Informationen sammeln beim Webdesign-Prozess

Der erste Schritt bei der Gestaltung einer erfolgreichen Website ist, Informationen zu sammeln. Viele Dinge müssen berücksichtigt werden, wenn das „Look and Feel“ Deiner Kunden-Website erstellt wird. Der erste Schritt ist eigentlich der Wichtigste, da es ein solides Verständnis des Unternehmens beinhaltet, für das Du die Website erstellst.

Es geht darum, ein gutes Verständnis von Deinem Kunden zu haben, seine Geschäftsphilosophie zu verinnerlichen und wie eine Website Deinem Kunden dazu verhelfen kann, die unternehmerischen Ziele zu erreichen. Es ist wichtig, Deinem Kunden eine Menge Fragen zu stellen, die Dir dabei helfen, das Unternehmen zu verstehen. Zudem ist es wichtig, die Wünsche Deines Kunden festzuhalten, um klären zu können, ob und wie sie sich in die Website integrieren lassen.

Bestimmte Dinge sind dabei zu beachten:

• Zweck: Was ist der Zweck der Website? Soll sie Informationen bereitstellen, auf eine Dienstleistung hinweisen oder ein Produkt verkaufen?
• Ziele: Was erhofft sich Dein Kunde durch die Umsetzung der Website zu erreichen? Zwei der häufigsten Ziele sind entweder das Verdienen von Geld oder die Bereitstellung von Informationen.
• Zielgruppe: Gibt es eine bestimmte Gruppe von Menschen, Die Dir dabei helfen, die Ziele der Website zu erreichen? Verschaffe Dir Klarheit über das Alter, Geschlecht oder die Interessen der Zielgruppe – dies wird Dir im späteren Projektverlauf helfen, den Designstil der Website auszuarbeiten.
• Inhalt: Nach welcher Art von Informationen wird die Zielgruppe auf der Website suchen? Sind sie an spezifischen Informationen, an ein bestimmtes Produkt, eine bestimmte Dienstleistung oder Online-Bestellungen interessiert?

2. Projekt definieren

Manchmal kann eine umfangreiche Projektbesprechung ziemlich einschüchternd sein. In diesem Fall lohnt es, Dinge in kleinere Aufgaben einzuteilen. Dies kann ein guter Weg sein, um scheinbar unüberwindbare Hindernisse besser zu überblicken und anschließend zu bewältigen oder die Arbeitsbelastung mit weniger Schrecken zu tragen. Identifiziere deshalb die Probleme, die Du zu bewältigen bemüht bist und breche Deine Lösungsansätze in überschaubare Aufgaben.

Projektmanagement Software und Tools

Für verteilte Teams und deren Kunden kann, je nach Arbeitsorganisation eine Projektmanagementsoftware grundlegend sein. Derartige Systeme sind darauf ausgelegt, alle Projektbeteiligte auf gut strukturierte Aufgabenverteilung und einfacher Kommunikation auf globaler Ebene zum Projektabschluss zu führen.

Neben Rechnungserstellung und Zeiterfassung können Projektabschnitte üblicherweise in mehrere Meilensteine (Etappenziele) aufgeteilt und für jeden Meilenstein einzelne Tickets (Aufgaben) mit unterschiedlichen Prioritäten zugewiesen werden. Du solltest bei der Wahl des geeigneten Projektmanagement-Systems jedoch auf solche Dienste achten, die ihre Software für Deinen eigenen Webspace bereitstellen.

Hierzu gibt es eine ganze Reihe von Onlinediensten, die die Zusammenarbeit des Teams über das weltweite Netz koordinieren lassen:

• activeCollab
• Lighthouse
• Springloops
• CreativePro Office
• No Kahuna
• Basecamp

Weitere Anwendungen:

Planung

Nun geht es an die Praxis und die Projekttagesordnung.

• Analysen
  Analysen und Forschungen können Dir helfen, in die Köpfe Deiner Kunden und ihre Zielgruppe zu blicken. Du solltest jedes Kundenprojekt mit wesentlichen Analysen beginnen:
  

  • Die Ziele des Geschäftskunden, Mission, Werte und Markenwert
  • Konkurrierenden Marken
  • Die Zielgruppe

  Vielleicht könntest Du denken, dass einige dieser Bereiche nicht auf Dein Projekt anzuwenden sind, aber sie tun es. Diese einleitenden Analysen und Forschungen sind für jeden Designer essentiell. Zielgruppenforschung und Analyseauswertungen können einige sehr interessante und unerwartete Ergebnisse hervorbringen und ein völlig anderes Licht auf den Projektverlauf werfen. Es ist Deine Verantwortung, weitere Tests oder Analysen durchzuführen, um Deinen Kunden anschließend zu erklären, warum Du Zeit in die Klärung kritischer Fragen steckst, die von Deinem Kunden übersehen worden sein könnten. Aber keine Sorge, Dein Kunde wird Dein unerwartetes Engagement als aufmerksamen Service wertschätzen.

• Sitemap
  Anhand aus den zuvor gesammelten Informationen ist es Zeit, einen Plan für die Website zu erstellen. Dies ist der Punkt, wo eine Sitemap entwickelt wird. Die Sitemap ist eine Liste von allen wichtigen Themen- und Unterthemengebieten der Website. Eine Sitemap dient als Richtschnur der Inhalte, die auf der Website untergebracht werden sollen und ist außerdem essentiell für die Entwicklung einer einheitlichen, leicht zu verstehenden Navigation.

  Die zukünftigen Website-Besucher und Dein Kunde müssen während des gesamten Gestaltungsprozesses der Website von Dir im Auge behalten werden. Schließlich sind es die Besucher, die Dein Kunde durch die Webseiteninhalte zum Handeln motivieren möchte. Eine einfach zu bedienende und zu navigierende Website bildet die Grundlage für eine gute Benutzeroberfläche.

• Erforderliche Software und Ressourcen bestimmen
  Finde heraus, ob die Realisierung der Website auf Drittanbieterdiensten oder zusätzlicher kostenpflichtiger Software, Bilder oder Schriften angewiesen ist. Kommuniziere mit Deinem Kunden frühzeitig, ob das Budget dafür ausgelegt ist und ob Dein Kunde gegebenenfalls bereit ist, für eventuelle Gebühren bei Drittanbietern nach Projektabschluss selbst aufzukommen.
• Zugriff auf Server
  Üblicherweise benötigst Du einen Zugang zum Benutzerkonto beim Webhost sowie Zugang zum FTP-Client mit allen nötigen Komfort-Funktionen. Mit den uneingeschränkten Zugang zum Server kannst Du nun eine sinnvolle Ordnerstruktur erstellen, Datenbanken konfigurieren und das gewünschte CMS installieren.

  Links:
  

  • Webhost: ALL-INKL.COM (Mit ALL-INKL.COM habe ich bisher die beste Erfahrung gemacht. Preise & Tarife für Domain-Registrierung & Webspace sowie der technische Support sind wirklich hervorragend.)
  • FTP-Client: FileZilla

Während der Planungsphase wirst Du außerdem entscheiden müssen, welche Technologien umgesetzt werden sollen. Elemente wie interaktive Formulare, E-Commerce, Flash, etc. solltest Du bei der Planung der Website mit Deinem Kunden frühzeitig diskutieren.

3. Design entwerfen

Nun ist es Zeit, das „Look and Feel“ der Website zu bestimmen. Die Zielgruppe ist einer der wichtigsten Faktoren, die beim Design berücksichtigt werden sollten. Eine Website, die sich an Jugendliche richtet, wird zum Beispiel ganz anders aussehen als eine Site, die für eine Anwaltskanzlei erstellt wird.

Als Teil der Designphase ist es außerdem wichtig, die Farben, das Logo und die wesentliche Schriftart des Kunden (falls vorhanden) in das Design mit einfließen zu lassen. In dieser Phase ist die Kommunikation zwischen Dir und Deinem Kunden entscheidend, um sicherzustellen, dass das Design sich mit dem Bedürfnissen und Geschmack Deines Kunden deckt. Es ist wichtig, dass der Austausch von Ideen mit Deinem Kunden reibungslos verläuft.

Für ein ideales Designergebnis gibt es eine Menge Ressourcen im Web, durch die Du Dich inspirieren lassen, visuelle Konzepte ausarbeiten, kostenlose Bilder, Schriften und diverse Layout- und CSS-Tools nutzen kannst. Lasst uns nun gemeinsam etwas genauer darauf eingehen.

Visuelle Konzepte

Als Designer denken wir visuell. Daher ist es sinnvoll, visuelle Konzepte zu entwickeln, die die Ziele und Skizzen des Briefings reflektieren. Sammle Bilder in Bezug auf die Ziele des Projekts – Pinterest ist ein gutes Werkzeug dafür.

Moodboards

Aber auch Moodboards können dazu beitragen, Stimmungen und Ideen zu sammeln, die für eine bestimmte Aufgabe in Frage kommen könnten. Bei Moodboards geht es um Collagen, die dem eigentlichen Design-Prozess vorausgehen. Derartige Collagen können aus Ausschnitten und Fotos bestehen und beispielsweise auf Pappe geklebt werden. Auch geeignet sind Flipcharts oder Pinnwände. Moodboards können auch virtuell am Rechner entstehen.

Englischsprachiges Video erklärt das Erstellen eines Moodboards

Die Ideengenerierung ist ein recht zügiger Prozess, bei dem man sich rasch verlaufen kann. Sich regelmäßig zurückzunehmen, tief durchzuatmen und seinen Blick auf den Ausgangspunkt des Briefings und der Analyseauswertungen zu richten, kann Dir dabei helfen, den Kurs zu halten.

Inspirieren lassen

Es ist wichtig, durch andere Designs inspiriert zu werden, um Dein Blickfeld für neue Ideen zu erweitern. Es geht darum, wie Du Dich von Deinem Umfeld und den Arbeiten anderer kreativen Designer inspirieren lassen kannst, ohne dabei Deine eigene individuelle und kreative Pinselführung zu verlieren.

Wenn andere Designer durch ihre Arbeiten Dir einen Weg zeigen, um Deine Fähigkeiten zu verbessern, dann gehe diesen Weg. Sei offen für Dinge und Ereignisse, die um Dich herum geschehen. Das wird Dir helfen, Deinen persönlichen Stil stetig zu verfeinern.

15 Quellen für Design-Inspirationen:

1. Behance – Führende Online-Plattform zum präsentieren und entdecken kreativer Design-Arbeiten.
2. Dribbble – Populäre Community für kreative Designer, die ihre Entwürfe in Form kleiner Screenshots mit anderen teilen.
3. Design Shack – Inspirierende Webdesigns, Ressourcen und Tutorials.
4. Web Creme – Populäres Archiv moderner Webdesign Inspirationen.
5. Creattica – Online-Ressource für Design-Inspirationen und Freebies.
6. siteInspire – Galerie der besten interaktiven Webdesigns.
7. CSSRemix – Beliebte Quelle von Webdesign-Inspirationen und Trends.
8. Depthcore – Internationales Kunstkollektiv mit Fokus auf moderne & digitale Kunst, Illustrationen, Fotografie, Animationen und Audio.
9. Make Better Website – Online-Galerie zum inspirieren, bessere und qualitative Websites zu erstellen.
10. Best Web Gallery – Präsentationen beeindruckender und moderner Website-Designs.
11. Pattern Tap – Plattform, auf der Designer ihre kreativen Webdesign-Arbeiten vorstellen.
12. Design Licks – Online-Bewertung für die kreativsten Webdesigns.
13. CoolHomepages – Online-Quelle für Design-Inspirationen.
14. Webdesign-Inspiration – Galerie von Websites, die täglich beeindruckende Webdesign-Inspirationen und neueste Webdesign-Trends veröffentlicht.
15. 200 Pinterest Pinnwände beeindruckender Design-Inspirationen

Vorlagen-Layout (Mockups)

In dieser frühen Entwicklungsphase ist das Arbeiten mit Mock-ups von Vorteil, um Anforderungen an die Benutzeroberfläche in Zusammenarbeit mit Auftraggeber und Anwendern besser ermitteln zu können. Hier handelt es sich meist um ein reines Grundgerüst der Bedienelemente ohne weitere Funktionalität.

In der Regel findet in dieser Projektphase keine Programmierung statt, stattdessen erfolgt die Erstellung von Webseiten-Layouts, Seitenrastern und Mockups in einem Bildbearbeitungsprogramm. Mockups klären, wie viele Seiten eine Webseite haben soll und wo die einzelnen Seitenelemente angelegt werden.

Beim Gestalten von Webseiten-Layouts und Seitenrastern haben Webdesigner sicherlich ihre eigenen Methoden, wobei von chaotisch bis streng durchorganisierten, kolorierten und strukturierten Skizzen alles dabei sein dürfte.

Englischsprachiges Video erklärt, wie Du mit dem Browser-Tool „MockingBird“ Mockups erstellen kannst.

Um Deinen Webdesign-Prozess bei dieser Projektphase zu optimieren und wertvolle Zeit einzusparen, empfehle ich Dir, kostenlose Tools und weitere Ressourcen aus dem Web zu nutzen.

Layout-, Raster- und Mockup-Tools und weitere Ressourcen:

• MockingBird
• Responsive Webdesign Sketch Sheets
• Lumzy
• Cacoo
• iPhone Mockup
• Free Sketching & Wireframing Kit
• Omnigraffle Wireframe Stencils
• Design Stencil Kit vom Yahoo Developer Network
• Photoshop Browser-Screenshots
• Vectortuts Freebie Vector Pack: Browser Screens und Website-Elemente

Farbgeneratoren

Solltest Du Dir in Bezug auf eine bereits getroffene Farbwahl unschlüssig sein, können Farbgeneratoren Dir bei dieser Entscheidung behilflich sein. Folgende Farbgeneratoren erstellen für Dich Farbkompositionen, unter denen sicherlich geeignete Farben für Dein Webdesign dabei sein dürften.

Diese Farbgeneratoren sind außerdem kostenfrei:

• Kuler
• Color Scheme Designer
• Genopol
• ColorBlender
• Color Schemer Online
• Color Wheel
• colordb
• ColorMixers

Lizenzfreie Bilder finden (Creative Common)

In diesem Screencast wird die Frage beantwortet, wie sich lizenzfreie Bilder auf Flickr finden lassen und was es als Webmaster vor der Veröffentlichung der Bilder zu beachten gibt.

Lizenzfreie Fotos finden mit der Google Bildersuche

In diesem Screencast wird die Frage beantwortet, wie sich lizenzfreie Bilder mit der Google Bildersuche finden lassen.

Weitere lizenzfreie Bilder:

• Freepik
• Photo Pin
• Pixabay
• Compfight
• Stock.XCHNG

Weitere Ressourcen:

Typografie- und Font-Tools

Was wäre Webdesign ohne Typografie? Oftmals gibt die Wahl der idealen Schrift einem Design den entscheidenden Schliff. Eine riesige Auswahl von Online-Tools für Webdesigner soll Dir bei der Entscheidung für eine bestimmte Schrift helfen, der CSS-Code für die korrekte Webfont-Einbindung ist meist auch gleich dabei.

15 Typografie- und Font-Tools:

1. CopyPasteCharacter
2. WhatTheFont
3. Fontstruct
4. Typechart
5. TypeTester
6. Fonttester
7. CSS Typeset
8. Em Calculator
9. PxtoEM
10. Blindtext Generator
11. Lorem Ipsum Generator Chrome Extension
12. HTML Ipsum
13. Color Contrast Checker
14. CSSTXT
15. STC fontBrowser

Weitere Ressourcen:

4. Präsentation von Entwürfen

Als Kreativer solltest Du mit Deinem fachlichen Urteilsvermögen Deine verschiedenen Ideen und Entwürfe in Bezug zur Relevanz filtern. Je weniger, desto besser – Maximal sollten drei Ideen für die Präsentation des Entwurfs selektiert werden.

Präsentiere Deine Ausarbeitungen am Kunden in ihrer bevorzugten Kommunikationsform. Begründe Deine Ideen und Entwürfe auch mit den Analysen, die Du im Vorfeld durchgeführt und ausgewertet hast. Die Art und Weise, wie Du Deine Ideen kommunizierst, ist sehr wichtig. Deine Entwürfe können noch zu gut sein, doch wenn Du an der Präsentation Deiner Ideen scheiterst, könnte der weitere Projektverlauf ins Schwanken geraten. Dies ist ein wichtiger Abschnitt während Deines Webdesign-Projekts.

Feedback beim Webdesign-Prozess

Je schneller Du das Feedback Deines Kunden erhältst, desto leichter ist es, die Dynamik und die kreativen Prozesse in Schwung zu halten. Deshalb solltest Du Dir den Termin für die nächste Besprechung frühzeitig von Deinem Kunden bestätigen lassen.

Ich bevorzuge Feedback in schriftlicher Form, da ich mich im späteren Projektverlauf auf das geschriebene Wort beziehen kann, das u.a. Missverständnisse und Fehlschritte vermeiden kann. Wenn Du Dein Feedback jedoch im direkten Vieraugengespräch erhalten solltest, schicke Deinem Kunden danach eine E-Mail, in der Du das erhaltene Feedback festhältst und es Dir vom Kunden bestätigen lässt.

5. Entwurf verfeinern

Wenn es für Deine Kunden zugänglich ist, können Online-Plattformen wie zum Beispiel Behance sehr hilfreich sein. Behance ist die führende Online-Plattform zum Präsentieren kreativer Design-Arbeiten. Dort gibt es einen Bereich „Work in Process“, der Dir dabei helfen kann, effektives Feedback von Deinem Kunden zu erhalten. Andernfalls eigenen sich Projektmanagement-Tools hervorragend für den Erhalt von Feedback.

Nachdem Du schließlich das Feedback Deines Kunden erhalten hast, ist es nun Zeit, eventuelle Fehler zu beheben und Verbesserungen sowie Feinabstimmungen am Webdesign vorzunehmen. Allmählich fügen sich alle Teile zusammen.

Eine Sache, die Dir bei der präzisen Feinabstimmung Deiner Arbeit helfen kann, sind Tests. Lass ein Testpublikum mit dem interagieren, was Du geschaffen hast. Ein frisches Paar Augen ist immer von Vorteil und können Dich auf Fehler hinweisen, dessen Du Dir bei der Fertigstellung des Webdesigns nicht bewusst gewesen bist.

Design von Angesicht zu Angesicht testen

Es ist immer am besten, ein Design von Angesicht zu Angesicht zu testen. Aber wenn das aus irgendwelchen Gründen nicht funktionieren sollte, bietet Dir eben auch Behance Gelegenheit dazu: dort kannst Du zum Beispiel ein Screenshot Deiner unfertigen – jedoch vorzeigbaren – Arbeit hochladen und es von den Mitgliedern und Deinem Social-Media-Publikum durch ihre Kommentare bewerten und kritisieren lassen. Dies gibt Dir die Möglichkeit, eine sofortige Rückmeldung zu erhalten. Eine weite und feste Verknüpfung in den sozialen Netzwerken und das Betreiben eines Blogs können außerdem dazu beitragen, an ein großes Testpublikum heranzutreten.

Nachdem Du Deine Designarbeit auf Herz und Nieren geprüft hast, bereite Dich nun darauf vor, das finale Design Deinem Kunden zu präsentieren.

6. Finale Designpräsentation

Egal wie gut Dein Design wirklich ist, solltest Du im Stande sein, es Deinem Kunden als Produkt zu verkaufen, weshalb sich eine Präsentation beim Webdesign-Prozess von Angesicht zu Angesicht ideal anbietet. Erfolgreiche Präsentationen sind gut geplant und geübt (Über 80% der Präsentation besteht aus Planung und intensiver Übung, 20% werden hingegen mittels Dia-, Flipchart- oder Beamermaterial ausgeführt). Es gibt viele Möglichkeiten, durch dessen Zusammenspiel Du eine überragende Präsentation vortragen kannst, aber das Wichtigste ist, frei und flexibel mit Deinen vorzutragenden Inhalten zu sein, sodass jede Pause und jede Reaktion natürlich wirken.

Wenn Dein Kunde mit dem Design glücklich ist, bist Du bereit loszulegen und das ausgewählte Design aus der Präsentation technisch umzusetzen.

7. Entwicklung und Programmierung

Die Entwicklungsphase ist der Punkt, wo die Website selbst erstellt wird. Der grafische Entwurf dient in dieser Phase dazu, die tatsächliche Website mit den notwendigen Funktionen zu erstellen. Die Entwicklung beinhaltet den Großteil der Programmierarbeit.

• Sauberer Code
  Halte den Code gut organisiert und kommentiert. Verweise durch Kommentare bezüglich der Codezeilen stets auf Details der Website-Planung und halte den strategischen Ansatz eines jeweiligen Programmierabschnittes fest. Kommentierter Code vermeidet zudem zukünftigen Ärger, da Du und gegebenenfalls andere Programmierer nicht durch ständiger Überprüfung damit beschäftigt seid, Deine Codezeilen nachzuvollziehen.
• Erstelle Entwicklungs-Framework
  Spezielle wiederkehrende Anforderungen lohnen als Programmierbibliothek hinterlegt zu werden. Dies vermeidet, sich immer wieder mit der Ausarbeitung programmierbezogener Ansätze auseinanderzusetzen. Ein solches Programmiergerüst stellt den Rahmen zur Verfügung, worin Du Anwendungen oder zusätzliche Funktionen erstellen und konkrete Implementierungen registrieren kannst. Ein Framework soll Dir insbesondere dazu dienen, den Kontrollfluss der verwendeten Webanwendung wie zum Beispiel WordPress zu definieren und mit dem Ziel einer Wiederverwendung zu nutzen.

  Ein hervorragendes Framework basiertes WordPress Theme:

  • Unuk WordPress Theme
• Code-Vorlagen für verschiedene Seitentypen
  Eine Website hat in der Regel mehrere Seiten (z.B. Startseite, allgemeine Inhalte, Blogbeiträge, Archive, Formulare), die auf Vorlagen basieren. Eine gute Übung ist, eigene Vorlagen für diesen Zweck zu erstellen.
• Nutze Online-Tools
  Webdesign und Entwicklung ist keine einfache Aufgabe, erst recht wenn Webtechnologien immer komplexer werden. Jeder Rennfahrer weiß, dass man auf den Geraden schnell und in den Kurven langsam und vor allem aufmerksam fährt. Das Gleiche muss in Deinem Konzept für die Programmierung von Websites gelten.

  Wenn Du gerade an einem Punkt Deines Webdesign-Prozesses bist, an dem Du mit voller Geschwindigkeit fahren kannst, dann tue es. Gib Vollgas. Automatisiere Arbeitsschritte, nutze Stapel-Verarbeitung, Shortcuts, Workarounds oder Online-Tools. Es geht darum, Arbeitsschritte zu beschleunigen. Du wirst Dein Kundenprojekt zwar nicht schneller beenden, jedoch wirst Du Dir mehr Zeit für die Kurven nehmen können. Es sind die kniffligen Passagen, bei denen Du keine Zeit verlieren solltest. Geschwindigkeit richtig einsetzen, ist der Schlüssel für Effizienz. Online-Tools helfen Dir, wertvolle Zeit beim Programmieren zu sparen.

  30 nützliche CSS Online Generatoren:
  

  All-in-One CSS Online-Generatoren:

  • css3.me
  • layerstyles.org
  • css3maker.com
  • css3generator.com
  • mikeplate.com
  • westciv.com
  • css3gen.com
  • css3please.com

  CSS3 Button-Generatoren:

  • css-tricks.com
  • css3buttongenerator.com
  • css3button.net
  • ccssbuttongenerator.com
  • dryicons.com

  CSS Layout-Generatoren:

  • guidefordesign.com
  • csslayoutgenerator.com
  • cssportal.com
  • pageblox.com
  • thenoodleincident.com
  • csscreator.com
  • developer.yahoo.com

  CSS Menü-Generatoren:

  • cssmenumaker.com
  • cssmenubuilder.com

  CSS3 Verlauf-Generatoren:

  • colorzilla.com
  • microsoft.com
  • display-inline.fr

  CSS Border Radius Generator:

  • border-radius.com

  CSS Text Shadow-Generator:

  • wordpressthemeshock.com

  CSS Text zu Pfad-Generator (Warp:

  • csswarp.eleqtriq.com

  CSS-Komprimierung:

  • codebeautifier.com
  • csscompressor.com
  • cssdrive.com

8. Launch

Der Zweck der Startphase ist, die Website für die Öffentlichkeit vorzubereiten. Dies erfordert das abschließende Finetuning von Design-Elementen, genaue Überprüfung der Interaktivität der Website und vor allem eine genaue Betrachtung der Nutzererfahrung (UX). Ein weiterer wichtiger Schritt ist, die Website auf den Webserver zu ziehen.

• Feinschliff
  Besonders, wenn Du nicht unter Zeitdruck bist, Deadlines einzuhalten, kann der Feinschliff des technischen Designs einen großen Unterschied machen. Hier kannst Du erkennen, ob die Website in kleinen Dingen verbessert werden könnte.
• Transfer zum Webserver
  Nachdem Du Die Website in der Produktionsumgebung ausgiebig getestet hast, geht es nun darum, die Website sichtbar zu machen oder die „Hier entsteht“-Seite zu entfernen und die Übertragung zum Live-Webserver zu vollziehen. Deine Last-Minute-Tests der Live-Website sollten jetzt abgeschlossen sein.

  Sei Dir sicher, dass der exakte Termin für die Liveschaltung mit Deinem Kunden besprochen worden ist, denn zu dieser Phase könnte die Website schon durch verschiedene Kanäle und Werbekampagnen in der Nische populär sein, dass ein unpassendes Timing beim Launch zu sehr sensiblen Reaktionen bei Deinem Kunden führen könnte.

• Tests
  Führe die Website durch endgültige Diagnosen und verfügbare Tools: Code Validatoren, Broken-Link-Checker, Rechtschreibprüfung und dergleichen. Vermeide Fehler, um Beschwerden von Deinem Kunden und Endbenutzer zu vermeiden.

  Weitere Ressourcen:
  

  • WordPress-Plugin: Broken Link Checker

• Cross-Browser- und Mobil-Check (IE, Firefox, Chrome, Safari, Opera, iPhone, BlackBerry usw.)
  Vergesse nicht, die Website ein letztes Mal in verschiedenen Browsern auf Fehler zu überprüfen. Nur weil der Code sauber validiert, bedeutet dies nicht, dass die Website im IE6 oder auf gängigen Mobilgeräten mit einem perfektem Layout glänzen wird.

  Um Websites auf Mobiltauglichkeit zu testen, habe ich ein einfaches Online-Tool für Dich gebaut:
  

  • Responsive Webdesign Online-Test

9. Projektabschluss

Setzte Dich im letzten Schritt mit den abschließenden Aufgaben auseinander. Fasse alle Grafiken und Template-Dateien in sinnvoll strukturierten Ordnern zusammen. Stelle Dokumentationen (Anleitungen, FAQs usw.) bereit, die später aufkommende Fragen beim Kunden klären können. Lass Deinen Kunden wissen, dass Du für die laufende Wartung und Betreuung des Projekts verantwortlich bist. Sollten Betreuung- und Wartungsgebühren noch nicht besprochen worden sein, kannst Du dies jetzt tun.

• Übergabe
  Stelle sicher, dass Dein Kunde mit dem Produkt zufrieden ist und dass alle vertraglichen Verpflichtungen erfüllt worden sind. Ein geschlossenes Projekt sollte einen zufriedenen Kunden hinterlassen, ohne offene Baustellen.
• Dokumentationen und Quelldateien übergeben
  Hinterlasse dem Kunden projektbezogene Unterlagen, wie zum Beispiel Quelldateien für Grafiken, eine Kopie des verwendeten CMS-Templates bzw. WordPress-Themes sowie Anleitungen zur Anwendung des technisch umgesetzten CMS-Templates bzw. Themes. Kurze und einfache Einleitungen für den Umgang des verwendeten CMS können für den Kunden außerdem sehr hilfreich sein. Dies wird spätere Überraschungen beim Kunden vermeiden und wird auch für andere Webentwickler und Designer nützlich sein, das Projekt zu einem späteren Zeitpunkt nachzuvollziehen.
• Projekt schließen
  Hole Dir das schriftliche „OK“ vom Kunden, dass alle Aufgaben erledigt sind und das Projekt abgeschlossen werden kann. Gebe Deinem Kunden Deine Kontaktdaten für weiteren Support, Beratung oder für ähnliche folgende Dienstleistungen und schließe das Projekt offiziell. Melde Dich einige Wochen später noch einmal beim Kunden, um sicherzustellen, dass Dein Kunde weiterhin zufrieden ist und alles glatt läuft. Dieser Nachfass-Kontakt wird von Kunden sehr wertgeschätzt.

Deine Rolle

Diese neun Stufen sind das nackte Gerüst für einen Webdesign-Prozess, das Du persönlich auf Dich zuschneiden und flexibel an Deine verschiedenen Kunden und Webdesign-Projekte anpassen kannst. Einen soliden Designprozess zu entwickeln, mag Dir vielleicht schmerzvoll erscheinen, aber tatsächlich wird er Dir dabei helfen, Dich in Deiner kreativen Karriere effizient weiter zu entwickeln.

Technologie als Werkzeug verändert sich permanent und es wird immer neue Plattformen für die verschiedensten Phasen des kreativen Prozesses geben. Wenn der Webdesign-Prozess, den Du entwickelt hast, funktioniert, halte stets daran fest. Je nach Kundenstamm oder Art der Website (z.B.: E-Commerce-Websites, Webanwendungen, digitales Marketing, usw.) unterscheiden sich die individuellen Projekt-Anforderung.

Eine stetige Überprüfung und Verfeinerung Deines Webdesignprozesses können Dir deshalb dabei behilflich sein, den frischen Wind in den Segeln zu halten, um produktiver und kreativer arbeiten zu können.

(Bilder von opensourceway, Artikelbild von Sharon Mollerus)