Im Grobkonzept wird die die Basis für das gesamte Projekt gelegt. Hier erarbeitet das Team aus den Zielen und den Rahmenbedingen die optimale Lösung. Ein wichtiger Schritt zu dieser Lösung ist die Analyse der Zielgruppe, um die eigentliche konzeptionelle und kreative Arbeit zu ermöglichen.

Video: http://www.youtube.com/watch?v=5XiQyI02rBA

Alles, was wir Besuchern über achtung! sagen wollen, kann ja schlecht auf einer einzelnen Seite Platz finden Also müssen wir die verschiedenen Seiten nachvollziehbar gruppieren und strukturieren. So entsteht die vollständige Seitenstruktur als hierarchischer Plan der gesamten Website.

Die wichtigsten Vorgaben für das Webdesign liefert das Corporate Design. Dazu kommen die Aspekte, die sich aus der Zielgruppe oder dem Zweck der Website ergeben. Sollen große Keyvisuals eingesetzt werden? Wollen wir mit Boxen zur Querverlinkung arbeiten oder eher lineare Inhaltsstrukturen haben?

Was wollen wir wie sagen? Wie müssen die Inhalte verteilt und dargestellt werden, damit sie ihre beste Wirkung erzielen? Wie muss ich die Inhalte aufbereiten, damit Google sie besonders wichtig findet? Die Antworten auf diese Fragen haben natürlich großen Einfluss auf die anderen Arbeitspakete dieser Phase.

Jetzt wird es kompliziert … Braucht der Kunde, ein Content Management System? HTML oder Flash? Welcher Server? Datenbanken? Klassen? Tracking? Versionskontrolle? Sicherheit? Suchmaschinenoptimierung? Analysieren, vergleichen, testen, ableiten und vorschlagen!

The new kid on the block: Wie vernetzen wir uns mit dem großen Ganzen, damit andere Menschen uns im Internet finden und uns mögen? Social Media ist alles, was das Motto verfolgt: Vertraue den anderen, damit sie dir vertrauen! Und Vertrauen läuft immer über Offenheit und Ehrlichkeit.

Was nützt ein Konzept, das niemand versteht? Richtig, gar nichts! Bei einfachen Webprojekten ist ein gutes Storyboard ausreichend. Je komplexer das Projekt, desto sinnvoller ist ein zusätlicher Wireframe, also einen Clickdummy. Denn nur wenn es verstanden wird, kann das Konzept abgenommen werden.

Der Projektplan sortiert alle Arbeitsschritte und nennt die jeweiligen Termine, so dass der finale Launchtermin erreicht werden kann. Hier der 1. Mai! Aber was dafür wann fertig sein muss, das gibt der Projektplan vor. Und, hey, wir haben den ersten Milestone bewältigt: Die Konzeption ist abgeschlossen!

Das Internet ist auf dem Monitor ein zweidimensionales Medium. Die Gestaltung ist also entscheidend. Beim Seitenraster legt der Designer zunächst fest, wie eine beliebige Seite aufgebaut ist. Gibt es einen großen Header? Wieviele Spalten soll die Website haben? Wo ist das Logo?

Wie stellen wir dar, was wir zu sagen haben? Was ist am Bildschirm gut zu lesen? Aber wie kann auch das Schriftbild die Markenwerte transportieren? Bei achtung! gibt es schon eine gut durchdachte Farbwelt. Taugt sie auch für Web? Wie groß sollen Headlines sein? Wie groß der Fließtext? Herrjeh!

Das Auge klickt mit. Und der Mensch möchte nicht nur lesen, sondern auch erleben. Welche Bilder wollen wir im Kopf des Betrachters auslösen, wenn er uns besucht? Und welche Bilder zeigen wir ihm deshalb? Menschen? Natur? Collagen? Oder das achtung! asurufezeichen als Illu? Designer, Dein Job!

Was die Seitenstruktur schematisch zeigt, bekommt jetzt ein Aussehen: Wo klickt der Besucher? Horizontalnavigation? Oder doch klassisch-vertikal? Gibt es Dropdown-Menüs für die Hauptbereiche? Und wie vereinen wir Usability und Markenerlebnis miteinander? Viele schlechte Beispiele und wenige gute.

Der Realitycheck. Zeit, einmal innezuhalten und zu überprüfen, ob wir noch auf dem richtigen Weg sind. Funktioniert, was wir uns bisher erarbeitet haben, tatsächlich? Erreichen wir so die Ziele? Jetzt ist der Zeitpunkt, alternative Lösungen zu testen und eventuell sogar in die Marktforschung zu gehen.

Die bisherige Gestaltung fügt sich jetzt zu einem Ganzen. Wir sehen, wie die Website am Ende aussehen wird, noch mit Dummyinhahlten. Meist ist dies der große Augenblick: Endlich gibt es etwas zu sehen! Machen wir uns nichts vor: Am Ende wollen wir Bilder sehen ;-) Die Abnahme ist der Milestone 2.

Auf allen Seiten gibt es wiederkehrende Elemente wie Icons für bestimmte Aktionen. Diese muss der Designer von vorneherein als Familie anlegen, damit sie auch die Marke achtung! repräsentieren. Charts sollten nicht nach Powerpoint 1.0 aussehen, sondern ebenfalls eine markentypische Sprache sprechen.

Sand kauen, so könnte man die Ausarbeitung des Designs bis in die Details nennen. Denn hier geht es um Disziplin, Ordnung, kreative Logik. Da müssen wir durch. Denn das Ziel ist, Begeisterung mit den detailliert gestalteten Seiten zu verursachen. Und, hurra, dann haben wir den 3. Milestone erreicht!

Online ist nicht Photoshop. Das bedeutet, dass nun alle Seiten wieder so “zerschnitten” werden müssen, dass die Programmierung damit arbeiten kann. Das bezieht sich auch auf die Komprimierung von Bildern und Grafiken. Eine gute Bildbearbeitung ist mühsam, erleichtert die Programmierung aber ungemein.

Wenn Texte in Broschüren oder Präsentationen bereits vorliegen, heißt das nicht automatisch, dass sie unverändert ins Web übernommen werden sollten. Onlinesprache ist auch Suchmaschinenoptimerung. Und wichtig: der rechtzeitige Lieferung. Kollegen und Kolleginnen: Wir zählen auf euch!

Besonders bei der Homepage, der Eingangstür, lohnt sich die Mühe. Hier findet der erste Eindruck statt. Klickt der Besucher weiter? Hat es ihn gepackt? Und der berüchtigte “Rest” birgt regelmäßig viele Fallstricke. Was steht über dem Mailformular? Wie lautet die Bildunterschrift?

Die Frontend-Entwicklung ist längst eine eigene Disziplin. Hier entscheidet sich, wie die Website auf welchem Endgerät aussieht und wie gut Google den Inhalt indiziert. Und der gute Frontendler zaubert mit Javascript Sachen, die eigentlich nur mit Flash und den damit verbundenen Nachteilen gehen.

Je nach Anwendung artet das schnell in Hardcore aus: Schnittstellen, Datenbankfunktionalitäten, Kommunikationstools usw. können die Programmierung komplex und damit ressourcenhungrig machen. Gute Programmierer haben dafür typische Funktionen schon modulartig in eigenen Klassen parat.

Alles ist fertig. Der 4. und vorletzte Milestone ist erledigt. Nun werden die Testszenarien durchgespielt. Es geht dabei um alle Funktionen und Aktionen auf verschiedenen Systemen. Kernfrage: Erfüllt das Ergebnis alle Anforderungen? Und entspricht die Optik exakt den grafischen Vorgaben?