Relaunch Website der zeroseven design studios

Ein Relaunch der Website einer kreativen Agentur stellt immer eine ganz besondere Herausforderung dar. Auf der einen Seite sollte die Website am besten alle technischen Möglichkeiten ausschöpfen und darüber hinaus Grafisch möglichst eine Vorreiter-Rolle spielen. Und umgesetzt werden sollte sie am besten auch noch. Das man als kreative Agentur meist an sich selber den höchsten Anspruch hat, erklärt in vielen Fällen, dass hier gerne der Weg gegangen wird, die Gestaltung und Entwicklung der Website auszulagern. So erspart man sich die ganze Arbeit in der Umsetzung und das Tagesgeschäft bleibt nicht liegen. Dieser Weg kam für uns nicht in Frage. Wir hatten bereits zum Start eine genaue Vorstellung in welche Richtung die Website gestaltet werden soll. Im Bereich der Programmierung sind die Ansprüche von uns als TYPO3 Agentur so hoch, dass kaum ein externer Dienstleister unserem Standard und unseren Ansprüchen gerecht geworden wäre. Das zeigt schon alleine, dass wir in einem frühen Beta-Stadium bereits die Entwicklung auf der TYPO3 Version 6 vorgenommen haben. Zur finalen Fertigstellung war zum Glück dann auch das Final-Release der Version 6 verfügbar. Der Weg während der Entwicklung war doch sehr steinig, da einige Funktionen noch nicht ganz ausgereift waren.

Ein Hauptanspruch unserer Website war die Präsentation unserer Referenzen mit allen wichtigen Informationen. Unserer Meinung nach wird gerade in unserer Branche das Monitoring der Agenturen über deren Arbeiten vorgenommen. Das ermöglicht einem potenziellen Kunden schnell zu erkennen, wie hoch der kreative Anspruch einer Agentur ist und in wie vielen Channels diese ihr Know-how hat. Aus dieser Anforderung heraus entstand auch das Design unserer Website. Unsere Arbeit steht im Vordergrund und soll den Hauptbestandteil der Seite ausmachen. Wie strukturiert man nun eine Vielzahl von Arbeiten in einer Übersichtlichen Form? Wir hatten uns in diesem Zusammenhang viele Möglichkeiten ausgedacht, wie eine Struktur sauber und übersichtlich dargestellt werden kann. Gerade in unserem Segment als Agentur, wo wir einen sehr hohen kreativen Anspruch in der Visualisierung haben – egal ob im digitalen als auch klassischen Bereich – spielt die Technologie hinter einer Webapplikation eine ebenso wichtige Rolle für den Erfolg des Projektes. Das war für uns auch die Herausforderung, wie kann kreativer Anspruch mit technischem Know-how am besten kommuniziert werden. Eine klassische Navigation mit den unterschiedlichen Schwerpunkten einer Agentur stellte uns hier nicht zufrieden. Vor allem wenn der User entweder nach einer TYPO3 Agentur sucht, erwartet er nicht unbedingt auch ein Messekonzept. Den Problemlöser sahen wir hier nicht in einer klassischen Navigation, sondern in einer Filterfunktion. Wie können User mit unterschiedlichsten Interessen genau die Informationen erhalten, die sie möchten? Das war unsere Ausgangssituation. Darauf hin haben wir ein Filterkonzept für unsere Website entwickelt, die es ermöglicht, dass der User auf Basis seines Interesses die Informationen zusammenstellt, die er tatsächlich sehen möchte. Dabei kann es für den User wirklich der technische Einstieg sein, als auch ein kreativer. Am Ende erhält der User immer die Arbeit von uns zu sehen, die mit der notwendigen Technik oder auch im gewünschten Bereich realisiert wurde. Dabei kann der User auch über zwei oder mehrere unterschiedliche Filter zum gleichen Ergebnis kommen.

Der Grundstein unserer Gestaltungsidee war gelegt. Die Website wird zentral ohne Navigation über ein Filtersystem gesteuert. Alle Inhalte die wir in unserem Internetauftritt untergebracht haben sind in Kategorien unterteilt. Der User hat hier nun die Möglichkeit, seine Interessen über den Filter zu setzen und über den unteren Button „Auswahl wählen“ alle gewünschten Inhalte anzuzeigen. Hier mussten wir dann die Strukturierung unserer drei Agenturen so vornehmen, dass zu jeder Agentur die wichtigsten Leistungen abgebildet werden. So kann der User nun über das Öffnen des Filters zum Beispiel einfach TYPO3 wählen oder auch Messekonzepte. Wendet er nun den Filter an, erhält er alle Arbeiten die diese beiden Paramenter erfüllen. Dabei ist es auch möglich, dass eine Arbeit mehrere Parameter erfüllt. Das Ergebnis wird dann in gleicher Art und Weise wie auf der Startseite angezeigt.

Neben den Leistungen und Techniken im Interessenfilterter, sind alle Treffer in insgesamt vier Sparten unterteilt. Diese sind unterhalb des Kurztextes auf der Startseite zu sehen. Dies sind „Agentur“, „Referenzen“, „Neuigkeiten“ und „Stellenanzeigen“.

Je nach Anzahl der Treffer wird dann eine Vielzahl von Referenzen aufgelistet. Wir haben uns im Startscreen und im Aufbau der Referenzen auf 12 Treffer reduziert. Sind es mehr, hat der User die Möglichkeit, die Inhalte nachzuladen. Wählt der User nun eine Referenz aus und klickt diese an, erhält er auf der Folgeseite alle wichtigen Informationen zu unseren Leistungen und zu den Technologien. Im Headbereich befindet sich eine Anzahl an Referenzbildern, welche der User durchklicken kann. Selbstverständlich ist unsere Website per Multigesten steuerbar. Auf dem iPad können zum Beispiel die Bilder im Headbereich auf der Startseite und auf der einzelnen Referenz per Wischbewegung durchgeslidet werden.
Hat der User nun den Filter gesetzt und seine wichtigsten Artikel zusammen, hat er nun auf der Folgeseite die Möglichkeit durch die einzelnen Artikel zu springen. Hierfür muss er die Folgeseite nicht mehr verlassen. Für diese Funktion erhält der User automatisch nach dem Setzen eines Filters eine zusätzliche Steuermöglichkeit neben der Filterfunktion.

Der Aufbau der Folgeseite ist so einheitlich gestaltet, dass der User unterhalb der Artikelbilder die entsprechenden Erklärungstexte hat. Neben den Erklärungstexten befindet sich in der rechten Spalte alle verwendeten Technologien und Leistungen der Agentur. Da unserer Meinung nach der User entweder den Einstieg über eine Technologie oder über eine Leistung sucht, haben wir diese an dieser Stelle nochmals übersichtlich abgebildet.
Unterhalb des Artikeltextes befindet sich dann noch artverwandte Referenzen. Ähnlich wie bei einem Online-Shop erhält der User hier die Inhalte angezeigt, die zu seinem Interessengebiet passen. So hat er mehrere Möglichkeiten, zwischen den Inhalten zu navigieren.

Der moderne Footer, den wir heute gerne einsetzen, wird ähnlich wie der Header auf unserer Startseite durch Suchmaschinen beeinflusst. Für eine Suchmaschine ist der Footer ein wichtiger Bereich. Ebenso für den User. Hier bieten wir dem User noch die Möglichkeit an, in Unterseiten zu springen, ohne die Seite nach oben zu scrollen und den Filter zu öffnen. Diese Verlinkung bewertet Google zum Beispiel als sehr relevant ein. Zusätzlich bietet es ja wirklich auch ein Vorteil für den User. Neben den wichtigsten Links – die hier durch den Redakteur und SEO-Verantwortlichen gesteuert werden können – werden unsere neusten Blog- und Facebook-Einträge angezeigt. Unterhalb dieser Linkliste befinden sich die wichtigsten Buttons zu unseren Social-Media-Kanälen. Unterhalb der Buttons befindet sich noch die Adressen der einzelnen Standorte unserer Agentur. Und natürlich die Möglichkeit des Users, dass er sich für unseren regelmäßigen Newsletter entscheidet.


Die Verknüpfung und Verbindung zu den Sozialen Netzwerken, sowie die Verknüpfung der unterschiedlichen Systeme war bei der Gestaltung und Umsetzung unserer Website von wichtiger Bedeutung. Wie Sie auf der folgenden Grafik sehen können, haben wir alle unsere Kanäle die wir bedienen miteinander verknüpft. Das bedeutet, haben wir heute eine neue Referenz in unsere Website gepflegt, so erscheint diese automatisch gesammelt in unserem Newsletter und in unserer iPad App. Somit ist TYPO3 unser zentrales und führendes System für alle digitalen Kanäle. Das vereinfacht den Pflegeaufwand enorm und erspart die doppelte Pflege. Darüber hinaus haben wir uns bei der Umsetzung auch noch intensive Gedanken über unsere Bildformate gemacht. Alle unsere Bilder die wir zukünftig über die Website pflegen sind im Format 16:9 angelegt. Das bedeutet beim erstellen der Bilder gibt es nur noch zwei Mastervorlagen. Diese unterscheiden sich nur in der Auflösung nicht im Seitenverhältnis. Die Mastervorlage für Referenzen (Retina-Auflösung) hat das Format von 2048 x 1152 Pixel. Alle anderen Grafiken, die nicht auf das iPad übertragen werden haben das Format 940 x 528 Pixel. In der Programmierung ist es so konzeptioniert, dass TYPO3 die Umrechnung der Retina-Auflösung automatisch für den Internetauftritt vornimmt. So werden alle Referenzen über TYPO3 gepflegt und verwaltet. TYPO3 sorgt dann im gleichen Zuge für den Export an die iPad App und rechnet die hochauflösenden Bilder in die niedrigauflösenden Bilder für die Website um.

Design:
Eine der grundlegenden Fragen beim Start eines Internetprojektes ist, ob die Seite Mobile-fähig sein muss und unter welchen Voraussetzungen. Responsive Webdesign ist hier ja auch eine wichtige Technologie, die bereits in der Gestaltungsphase berücksichtigt werden muss. In einem weiteren Blogeintrag gehen wir darauf ein, ob Responsive Webdesign immer notwendig ist und was im Falle unseres Relaunch der Auslöser war, nicht auf Responsive Webdesign zu setzen. Neben diesen ganzen wichtigen Parameter ist heute bei der Gestaltung einer Website vor allem eins zu berücksichtigen. Eine Website muss auf unterschiedlichsten Endgeräten und per Gestensteuerung navigierbar sein. Schöne Pixelfonts in Navigationen zu verwenden, ist nicht mehr zeitgemäß. Daher ist es wichtig in der Gestaltung darauf zu achten, dass jeder Button eine Minimalgröße von mindestens 12 x 12 Pixel hat.
Grundlage für einen sauber strukturierten Auftritt ist ein durchdachtes und sauber strukturiertes Rastersystem. In unserem Falle haben wir uns für den Rasteraufbau von Grind Calculator von Nicolaj Kierkegaard Nielsen entschieden. Über die vier Spalten werden die Inhalte auf der Seite positioniert. Die Breiten der vier Spalten geben auch die jeweiligen Maße der einzelnen Contentboxen und der Zwischenräume vor. Ein Rastersystem bietet bei der Gestaltung einer Website viele Vorzüge. Erinnern wir uns an die klassischen Rastersysteme im Printbereich, so haben wir hier im Internet mittlerweile ähnliche Vorzüge und strukturierte Ergebnisse im Seitenaufbau. Es gibt vielerlei gute und ausgefeilte Rastersysteme. Hierzu finden Sie auch in einem weiteren Blogeintrag von uns eine Liste mit nützlichen Links.
Auf Basis der vorgegebenen Rasterbreite gestalteten wir dann den Headbereich mit unseren Highlights. Hier befindet sich eine eigene Box mit einer flexiblen Anzahl von Leistungen der Agentur. Die Entscheidung im Headbereich eine separate Box über die komplette Breite zu setzen, hatte neben dem visuellen Aspekt vor allem ein SEO-Aspekt. Hier bewertet Google zum Beispiel alle Relevanten Inhalte. Diese sind über die H-Tags auch so gekennzeichnet, dass Google diese als wichtig einstuft. Sie sehen an unserem Beispiel, dass ein Design so schön es auch sein mag, in einer gewissen Form auch unter SEO-Gesichtspunkten entstehen muss. Nicht alles was schön aussieht, gefällt auch den Scrolern von Google. Wichtig einfach bei der Gestaltung der Website ist, dass bereits in diesem Stadium geklärt werden muss, unter welchen Voraussetzungen Google die Seite indiziert und scrollt.
Neben dem Rastersystem spielt die Steuerung der Website ebenfalls eine wichtige Rolle. Wir haben, wie bereits oben beschrieben auf eine klassische Navigation verzichtet. Unser Schwerpunkt liegt in einem Filtersystem, nach welchem der User die Inhalte auswählen kann. Der Filter wird über ein Button im oberen Bereich aufgeklappt. Neben der Beschriftung des Buttons haben wir hier das Icon des „Off Canvas Menü“ was viele User bereits von Facebook und Apple kennen. Hier wird unser Filter ebenfalls durch Klick auf das Off Canvas Menü nach unten geöffnet.
Der Aufbau der Folgeseite ist ebenfalls über das Rastersystem definiert. Der obere Bereich ist mit den Leitmotiven der emotionale Einstieg der Website. Hier befindet sich das Leitmotiv mit den entsprechenden Inhalten zu den Artikeln.
Unterhalb der jeweiligen Texte werden noch artverwandte Referenzen angezeigt, die zu der ausgewählten Referenz passen. Diese sind wiederum auf Basis des Rastersystem wie auf der Startseite aufgebaut. Viele Gestaltungselemente wie zum Beispiel die Info-Boxen mit den Thumpnail-Bildern wiederholen sich in unserem Design. Das hat den Vorteil, dass wir ein einheitliches Design verfolgen. Ein Nebeneffekt ist hier noch, dass in der Programmierung der Aufwand reduziert wird, da gewisse Elemente an mehreren Stellen genutzt werden.
Der moderne Footer, den wir heute gerne einsetzen, wird ähnlich wie die Startseite durch Suchmaschinen vorgegeben. Hier haben wir einen Bereich für wichtige Links vorgesehen, für die aktuellsten Einträge aus unserer Facebook-Seite als auch aus unserem Blog. Ebenfalls darf die Verlinkung in die sozialen Netze hier nicht fehlen.
Unterhalb der Linklisten befindet sich noch die Adressen – ebenfalls wichtig für Google – und die Möglichkeit, dass der User sich in unseren Newsletter eintragen kann.

Programmierung:
Bei der Umsetzung der Website legten wir größten Wert auf die Optimierung unserer internen Prozesse. Das bedeutete, dass TYPO3 das führende System wird. TYPO3 speist anschließend alle anderen Kanäle. Ebenso war schon sehr frühzeitig für uns klar, dass wir die Website in TYPO3 Version 6 umsetzen werden. Zwar hat sich TYPO3 Version 6 anfangs noch im Betastadium befunden, doch konnten wir Teile des Internetauftrittes beruhigt umsetzen. Zur Fertigstellung unserer Website war TYPO3 dann auch in der finalen Version verfügbar.
Da wir einen sehr hohen Anspruch an die Programmierung hatten und die Konzeption der Website sich auf eine wesentliche Extension begrenzte, konnten wir die Pflege der Internetseite doch auch sehr vereinfachen. TYPO3 wird ja gerne vorgeworfen, dass das System so unübersichtlich und aufwändig zu bedienen ist. An dieser Stelle kann nochmals eindrucksvoll bewiesen werden, dass das nicht der Fall ist. Die Übersichtlichkeit bringt TYPO3 nicht von Haus aus mit, dass liegt viel mehr am Know-how der Agentur, die die Seiten konzipiert und umsetzt. Sie sehen am Beispiel eines Redakteurs, dass dieser lediglich die Bilder in der Dateiliste pflegen kann und dann den Artikel nach einer festen Reihenfolge ausfüllen muss. Egal ob es eine Referenz oder ein Stellenangebot ist, alles wird über eine Extension gepflegt.

Projektablauf:
Ein Projekt – egal in welchem Umfang und ob Extern oder Intern – sollte nach einer sauberen Struktur in einzelne Arbeitsschritte unterteilt werden. Wenn wir heute unsere Projekte umsetzen, haben wir diese in der Regel in 10 Arbeitsschritte strukturiert. Diese Arbeitsschritte sind wiederum in einzelne Arbeitspakete unterteilt. Zwischen den Arbeitsschritten gibt es immer einige Besprechungen mit dem Kunden. In unserem Fall jeweils mit dem Projektverantwortlichen, bzw. Programmierer.

Vorgehensweise bei der Umsetzung:

  • Workshop zum Digital Branding
  • Visuelle Konzeption (Master-Screens)
  • Ausarbeitung der Folgescreens
  • Screenbook / Wireframes / Definition SEO-Parameter
  • Umsetzung der Grundgerüstes der Website
  • Entwicklung der Extension
  • Aufbereitung der Inhalte (Bilder und Texte)
  • Befüllung der Inhalte
  • Qualitätskontrolle und Inhalte überprüfen
  • Bugfixing
  • Livebetrieb

Egal ob es wie in unserem Beispiel ein internes Projekt ist oder ob wir ein Projekt für unsere Kunden realisieren, so übernimmt der Projektleiter neben dem kreativen Part und der Programmierung die Schlüsselrolle ob ein Projekt sauber und ohne große Hürden umgesetzt werden kann.

In einem unserer weiteren Blog-Einträge skizzieren wir unseren standardisierten Ablauf unserer Digital-Projekte auf.

Veröffentlicht von

thomass

Thomas Seruset, Geschäftsführender Gesellschafter der zeroseven design studios in Ulm.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.