Zu Beginn eines neuen Projekts vor einer leeren, weißen Seite zu sitzen und nicht so recht zu wissen, wie man anfangen soll, in dieser Situation ist bestimmt jeder schon einmal gewesen. Denn gerade der Anfang eines neuen Projekts mit den ersten Ideenfindungen und Skizzen ist oft am schwierigsten. Hat man erst einmal eine Richtung gefunden und ein grobes Konzept erstellt, geht der Rest der Arbeit dann meist von ganz alleine voran.

Um diese erste Projektphase möglichst effizient anzugehen, gibt es glücklicherweise etliche hilfreiche Tipps und Tools, mit denen du deine Arbeitsweise ganz leicht optimieren kannst.

1. Der Projekt-Fragebogen

Jedes Webdesign wird gestaltet, um einen bestimmten Zweck zu erfüllen. Diesen Zweck gilt es im ersten Schritt zu analysieren. Denn wenn man sich erst einmal Gedanken darüber gemacht hat, welche Anforderungen das Webdesign und Webseitenkonzept erfüllen muss, ist es meist schon sehr viel leichter ein passendes Konzept zu entwickeln.

Um die wichtigsten Fragen zum Projekt zu klären, ist es sehr hilfreich ein Projekt-Fragebogen vor Beginn der Arbeit an einem neuen Design zu beantworten. Hier sollten z.B. folgende Fragen beantwortet werden:

  • Für welche Zielgruppe ist die Webseite?
    (z.B. für ein jüngeres Publikum, für ein älteres Publikum, für Computer-Fachleute, für Privatpersonen, für Partnerfirmen, für die eigenen Kunden, für potentielle, neue Kunden…)
  • Welchen Zweck soll die Webseite erfüllen?
    (z.B. zur Vermittlung von Informationen, zum Verkauf eines Produkts, zur Präsentation des eigenen Angebots, als Portfolio der eigenen Arbeiten, zur reinen Unterhaltung, als persönliche Online-Plattform…)
  • Wer sind die Mitbewerber? Gibt es bereits Webseiten mit einem ähnlichen Konzept?
  • Welche Funktionen soll die Webseite haben?
    (z.B. einen Onlineshop, Blog, Portfolio, Bildergalerie, Forum, Newsletter-Abo…)
  • Wer wird die Webseiten-Inhalte pflegen, aktualisieren? / Soll es ein Content Management System geben? (Wenn ja, welche Funktionen eines CMS werden benötigt?)

Natürlich sind dies nur einige Beispiele dafür, was in einem Projekt-Fragebogen alles geklärt werden kann bzw. sollte. Wenn du mit einem Kunden zusammenarbeitest solltest du allerdings auch darauf achten, dass der Fragebogen nicht zu lang ist und möglichst viele Beispiele enthält (so vermeidest du, dass dein Kunde mit den Fragen überfordert ist).

Weitere Tipps für die Erstellung eines Projekt-Fragebogens kannst du auch im Artikel “Hilfreiche Tipps und Tools für die Zusammenarbeit von Webdesignern und Kunden” nachlesen.

Ein solcher Fragebogen ist übrigens nicht nur bei Kundenprojekten sinnvoll. Auch für deine eigene Webseite oder dein neues Redesign solltest du wichtige Fragen vorab für dich klären, um unnötige Arbeit zu vermeiden.

2. Imageboard und erste Skizzen

Nachdem du die wichtigsten Fragen zum Projekt in einem Fragebogen festgehalten hast, bist du dir über den Zweck und die Ziele deines neuen Projekts bereits sehr viel klarer geworden.

Bei den meisten Kreativen beginnen an diesem Punkt bereits die ersten Ideen zu Farben, Layout, einer allgemeinen Stimmung und Atmosphäre des Designs herauszusprudeln. Um diese ersten Ideen und Stimmungen zu konkretisieren, kannst du ein Imageboard oder eine erste Konzeptskizze erstellen.

Auf einem Imageboard kannst du schnell und unkompliziert Ideen und Gedanken zu Layout, Farben, Inspirationsquellen etc. festhalten.

Tipps Webdesign Projektbeginn
Auf einem Imageboard kannst du schnell erste Projekt-Ideen festhalten.

Diese Aufgabe macht jede Menge Spaß und da das Ergebnis ja keinen Schönheitspreis gewinnen muss, sondern lediglich der Sortierung deiner Inspirationen und Gedanken dient, nimmt dir diese Arbeit auch gleich die Hemmungen vor dem “leeren, weißen Blatt Papier”.

Ob du dein Imageboard in einem Grafikprogramm am Computer, als Collage von Hand oder in Form von Skizzen in einem Notizbuch umsetzt, ist deinen ganz eigenen Vorlieben überlassen. Wenn du in einem Team zusammenarbeitest, ist es aber auch in jedem Fall hilfreich, wenn du deine Skizzen online (z.B. über Google Text&Tabellen) zur Verfügung stellst.

Ein sehr inspirierenden Artikel zum Thema Handzeichnungen und Skizzen finde ich übrigens den Beitrag “Sketching: The Visual Thinking Power Tool” von Mike Rohde bei A List Apart.

3. Das Webseiten-Mockup

Bei der Erstellung von ersten Skizzen und einem Imageboard bekommt man bereits ein sehr gutes Gefühl für den Stil und die Atmosphäre, welche das Webdesign vermitteln soll. Um auch das Layout und die Verteilung der Inhalte zu konkretisieren, bevor es mit der Erstellung des Designs losgeht, hilft ein einfaches Webseiten-Mockup (Modell der Seitenaufteilung und der Anzahl/Verteilung der Seiten).

Dein Webseiten-Mockup kannst du entweder ebenfalls per Hand skizzieren oder in einem praktischen Mockup-Programm (z.B. Mockingbird) erstellen.

Tipps Webdesign Projektbeginn
Die Benutzeroberfläche von Mockingbird.

In einem Mockup-Programm kannst du bereits die konkreten Maße deiner Webseiten-Elemente bestimmen und die einzelnen Seiten untereinander verlinken. Wenn dir die Arbeit mit einem Mockup-Programm zu aufwendig ist, kannst du auch das Zeichnen-Tool (unter Neu erstellen / Zeichnung) von Google Text&Tabellen nutzen.

Tipps Webdesign Projektbeginn
Mockups mit Hilfe von Google Text+Tabellen anlegen.

Hier kannst du schnell einfache Skizzen in einem Online-Dokument anlegen und das Dokument dann leicht mit anderen teilen bzw. gemeinsam bearbeiten (mehr Infos zu Google Drawings kannst du auf dem Google Docs Blog nachlesen).

Weitere Tipps zur Projektplanung

Ausgestattet mit einem Projektfragebogen, ersten Skizzen, einem Imageboard und einem Webseiten-Mockup bist du gut vorbereitet, um mit der eigentlichen Arbeit an deinem neuen Webdesign (im Grafikprogramm oder direkt in HTML/CSS) zu beginnen.

Um auch während des weiteren Projektverlaufs nicht die Übersicht zu verlieren und keine Arbeit doppelt oder umsonst machen zu müssen, ist es auch noch hilfreich sich ein Gesamtkonzept für die Arbeit am Projekt zu erstellen. Hier kannst du die einzelnen Projektphasen notieren und dich so Schritt für Schritt voran arbeiten. Arbeitest du mit einem Team zusammen, ist ein Google Dokument oder ein Google Kalender auch hier wieder eine praktische und unkomplizierte Option.

In dieser Projektübersicht ist es auch sinnvoll, einen Zeitplan für die einzelnen Arbeitsschritte (Designphase, Überarbeitung, Programmierung, Browser-Tests etc.) zu notieren. So vermeidest du, dass einzelne Arbeitsschritte zu viel Zeit in Anspruch nehmen und du mit dem Zeitrahmen für das gesamte Projekt nicht mehr auskommst.

Welche Erfahrungen und Tricks nutzt du, um dir die ersten Arbeitsschritte an einem neuen Projekt zu erleichtern? Und welche Vorgehensweisen, Tools oder Programme verwendest du am liebsten, um erste Ideen-Skizzen, Mockups und Imageboards für ein neues Webdesign zu erstellen? Über deine Erfahrungsberichte und Tipps freue ich mich sehr!