Wir haben achtung.de überarbeitet und alle eingeladen, uns durch dieses Projekt zu begleiten. Vom 15. März bis zum 1. Mai haben wir Einblicke in das Projekt gegeben mit Infos, Bildern oder Videos, über Twitter gibt es auch weiterhin Kurzinfos und die Möglichkeit, direkt an a_interaktiv zu antworten. Natürlich freuen wir uns auch über Feedback per E-Mail: interaktiv@achtung.de
Ihr Team von achtung! interaktiv
Im Grobkonzept wird die die Basis für das gesamte Projekt gelegt. Hier erarbeitet das Team aus den Zielen und den Rahmenbedingungen 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.
Bei der achtung! website wird das Grobkonzept vor allem von drei Aspekten bestimmt:
- Integrierte Kommunikation sichtbarer machen,
- Technik und Optik aktualisieren und
- Vernetzung optimieren, also vor allem den Social Media Newsrooms weiterentwickeln.
Die bisherigen Ergebnisse:
Intro-Video starten
Präsentation zum Grobkonzept
Konzeptpapier Navigation
Grobkonzept auf einem Slide (nach dem Öffnen als Fullscreen anzeigen lassen)
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 Seitenstruktur zeigt deutlich den veränderten Fokus: Bisher waren die einzelnen Disziplinen von achtung! parallel angeordnet mit vielen redundanten Informationen. Künftig ist die übergreifende Idee die Regel. Die Aufteilung in Disziplinen wird nur noch dort eingesetzt, wo es sinnvoll ist.
Präsentation zur Seitenstruktur v3 (nach dem Öffnen als Fullscreen anzeigen lassen)
Aktualisierte Präsentation zur Seitenstruktur v4 (nach dem Öffnen als Fullscreen anzeigen lassen)
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?
In unserem Fall können wir diesen Punkt kurz halten:
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.
Konzeptpapier Inhalt
Stimmen aus dem achtung! team:
"Was haltet ihr vom alten Webauftritt?":
Mitarbeiter-Video1 starten
Was wünscht ihr euch vom neuen Webauftritt?":
Mitarbeiter-Video2 starten
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!
Hier die Zusammenfassung der technischen Rahmenbedingungen:
Konzeptpapier Navigation
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.
Konzeptpapier Social Media
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ätzlicher Wireframe, also ein Clickdummy. Denn nur, wenn es verstanden wird, kann das Konzept abgenommen werden.
Bei diesem Projekt sollte ein tabellarisches Storyboard ausreichen:
Storyboard v1
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!
Der andere Projektplan: Im Zeitraffers haben wir den achtung! relaunch nachgespielt:
Der gespielte Relaunch (auf "HD" klicken für bessere Auflösung)
Projektplan (1 Seite) (nach dem Öffnen als Fullscreen anzeigen lassen)
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?
Das Seitenraster des neuen Layouts (nach dem Öffnen als Fullscreen anzeigen lassen)
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ürs Web? Wie groß sollen Headlines sein? Wie groß der Fließtext? Herrjeh!
Hier die Ergebisse:
Konzeptpapier Farbwelt
Konzeptpapier Schriften
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! ausrufezeichen? Designer, Dein Job!
Die neue Bilderwelt bei achtung! (nach dem Öffnen als Fullscreen anzeigen lassen)
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.
Präsentation zum Navigationsdesign (nach dem Öffnen als Fullscreen anzeigen lassen)
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.
Weil es sich um ein überschaubares Projekt handelt, reicht hier die Analyse in gemeinsamen Gesprächen aus. Einhellige Meinung: Ja, das ist der richtige Weg,
Die bisherige Gestaltung fügt sich jetzt zu einem Ganzen. Wir sehen, wie die Website am Ende aussehen wird, noch mit Dummyinhalten. 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.
Das Design der neuen Website (nach dem Öffnen als Fullscreen anzeigen lassen)
Ausschnitte aus dem Designmeeting (auf "HD" klicken für bessere Auflösung)
Auf allen Seiten gibt es wiederkehrende Elemente wie Icons für bestimmte Aktionen. Diese muss der Designer von vornherein 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.
Bei diesem Projekt sind die einzelnen Grafiken bereits in die Gesamtseiten eingebaut.
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!
Weitere Designs für 2-spaltigen Content (nach dem Öffnen als Fullscreen anzeigen lassen)
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 Suchmaschinenoptimierung. Und wichtig: die 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?
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.
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.
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?
Wenn alles ja: Go Live!