case
 

spyral | Erscheinungsbild und Website

Die Unternehmensberatungsfirma spyral GbR in Stuttgart ist spezialisiert auf das Coaching und die Beratung großer und mittelständischer Unternehmen in Fragen des Veränderungs-
managements.
In enger Zusammenarbeit mit dem Auftraggeber – haben wir das Erscheinungsbild und die Website für spyral entwickelt.

 


 Veränderungen sind eher zyklisch... spyralisch!
 Von Bildern und Images wird man leicht fehlgeleitet

 Geschäftsausstattung – kleines 1x1 mit Fallgruben
 Eine Website allein macht nicht glücklich...

     
 

....................................
Projekt
0411 spyral
Erscheinungsbild
Website
....................................
Auftraggeber
spyral GbR
Michael Schwartz
....................................
Brand Identity
Corporate Design

Web Design
kilde communications
...................................
Projektstart
21. Dezember 1998
....................................
Erscheinungsbild
30. Dezember 1999
....................................
Onlinestart
1. Juli 2000
....................................
Relaunch
1. April 2001

 

Suchet, so werdet ihr finden...

Wenige Tage vor Weihnachten 1998 wurden die ersten Gedanken für die Entwicklung des Corporate Design angestoßen. Der Auftraggeber war auf uns zugetreten – mit der Bitte, ihn bei der behutsamen Entwicklung der Identität seines Beratungsunternehmen zu unterstützen.

Bei der Entwicklung einer Unternehmensidentität erleben wir es immer wieder, dass unsere Autraggeber keine punktgenauen Briefings abgeben können, weil sie sich selbst auf dem Weg, auf der Suche nach Identität befinden. Deshalb arbeiten wir in solchen Fällen sehr eng und in einem iterativen Prozess mit unseren Kunden zusammen.

Bemerkenswert in diesem Projekt ist, dass wir unseren Kunden während der drei Jahre, die die gesamte Entwicklung gedauert hat, nur zwei- vielleicht dreimal gesehen haben. Alle weiteren Abstimmungen, Brainstormings und Meetings fanden in Telefonkonferenzen oder per eMail statt. Ein manchmal etwas kompakterer Projektablauf wäre jedoch für die Effizienz der Ergebnisse förderlich gewesen.

 

...........................................
Entwicklung von Signet und Erscheinungsbild
...........................................
Definition der Bilder- und Markenwelt
...........................................
Entwicklung der Geschäftsausstattung
...........................................
Produktion von Briefbogen und Visitenkarten
...........................................
Gestaltung und Produktion eines Workshop-Flyers
...........................................
Entwicklung einer ersten minimalen Website
...........................................
Relaunch der Website mit Flash und Audio
...........................................

 

   
 

....................................
Brand Identity
Corporate Design

 

Veränderungen sind eher zyklisch... spyralisch!

Ausgehend von sehr offenen Ideen und Vorstellungen zum Thema Veränderung bewegten wir uns anfangs noch mit einer sehr breiten Streuung unserer Gestaltungsansätze. Da weder ein Projektname noch ein Konzept für die strategische Positionierung vorlagen, waren wir vollständig auf unsere Intuition angewiesen.

Auch die Firmierung und Größe des späteren Unternehmens standen nicht fest. Gut, dass wir zusammen mit dem Auftraggeber bereits in anderen Projekten Erfahrung gesammelt hatten, so war zumindest das notwendige Vertrauen vorhanden. Die ersten Ideenansätze und Entwürfe wurden Mitte Februar 1999 vorgestellt.

Die Präsentation zeigte – in ihrer ganzen Bandbreite – welche möglichen Richtungen grundsätzlich eingeschlagen werden könnten. Ein didaktisches Mix aus Bleistiftskizzen, Erklärungen und auch bereits konkreteren Entwürfen gab uns gemeinsam die Entscheidungsgrundlage für die weitere Entwicklung.

Aufgrund der Auschlusskriterien war es jetzt relativ einfach, in einigen weiteren Entwicklungsrunden, den favorisierten Entwurf einzugrenzen.
Zu diesem Zeitpunkt war die Namensentwicklung schon so weit fortgeschritten, dass nur noch der Name spyral – der Vorschlag des Auftraggebers – übrigblieb.

Das Zeichen setzte sich nicht nur wegen des gleichbedeutenden Namens durch, sondern weil es die Zyklen in einem Veränderungsprozess am besten visualisiert: mit einer dynamischen und modernen – aber auch humanistisch-organischen Form. Die Wahl der Farben fiel auf Blau und Grau für das Zeichen, um konservative, ruhige und seriöse Aspekte hinzu zufügen. Das Umfeld wird durch ein aktives Gelb belebt.

Für die Verwendung des Zeichens in Office-Anwendungen entwickelten wir in PowerPoint ein kleines Design Manual, mit dem unser Kunde dann auch gleich loslegen konnte, um seine Korrespondenz und seine Präsentationen mit der neuen Identität zu versehen.

 

 Einer der ersten Entw¸rfe f¸r das Zeichen

Einer der ersten Entwürfe für das Zeichen

(PDF, 375 KB)
Die ersten Entwürfe wurden online mit Acrobat Reader präsentiert.

(PDF, 50 KB)
Zwischenabstimmung:
Der Vorläufer des finalen Zeichens ist bereits dabei.

Das finale Bildzeichen: Es fehlt noch die Wortmarke.

Das finale Bildzeichen: Es fehlt noch die Wortmarke.

(PDF, 26 KB)
Reinzeichnung: Das fertige Zeichen für die Umsetzung in 4C und Sonderfarben.

 Ein kleines Design Manualf¸r Office-Anwendungen
(PDF, 53 KB)
Ein kleines Design Manual
für Office-Anwendungen
   
 

....................................
Brand Identity
Corporate Design































...................................
Hier finden Sie den aktuellen Workshop-Flyer

 

Von Bildern und Images wird man leicht fehlgeleitet

Ausgehend von dem neuen Zeichen konnten wir jetzt mit dem Ausloten der Markenwelt beginnen. In welchem Umfeld würde das Signet eingesetzt werden? Welchen Regeln würde es sich im Layout unterordnen müssen? Wie würde es auf andere Farbigkeiten reagieren? Welche Bilder, welche grafischen Zutaten würden es gut ergänzen?

Unser Auftraggeber und wir trugen zunächst Material zusammen: Fotos und Ideen aus denen wir in Moodboards die Bilderwelt der Marke kollagenartig entstehen ließen. Dieses Bildmaterial wurde dann – zusammen mit den bereits vorliegenden Texten – in einem ersten Entwurf einer Imagebroschüre umgesetzt.

Bunt, wunderschön – aber leider nicht ganz das gewünschte Ergebnis. Die Gestaltung passt eher zu einem populärwissenschaftlichen Beileger zu einem Buch über Naturphänomene denn zu einem rational argumentierenden Beratungsunternehmen im Umfeld potenzieller Kunden wie DaimlerChrysler, debis und SAP. Hier mussten wir noch einmal ganz von vorn anfangen...

Die Idee einer Imagebroschüre wurde dann zugunsten eines etwas einfacher und minimalistisch gestaltetem Flyer verworfen. Dieser Flyer wurde zunächst im Sonderfarbendruck im Offsetdruck produziert. Später wurde mit dem Gestaltungsraster ein PowerPoint-Master entwickelt, der vom Auftraggeber selbst aktualisiert und auf einem Office-Farbdrucker ausgedruckt – oder aber als Online-Dokument im PDF-Format veröffentlicht werden kann.

 

 ABC

Die Bilderwelten der Marke werden untersucht: Überall finden sich Spiralen...

(PDF, 534 KB)
Der erste Entwurf der Imagebroschüre ist sehr aufwändig bebildert und gestaltet.

 ABC

Auch eine Spirale: ein Fingerabdruck als Hintergrundmotiv

(PDF, 154 KB)
Die Reinzeichnung des finalen Workshop-Flyers (für Sonderfarbendruck)
   
 

....................................
Corporate Design

 

Geschäftsausstattung – kleines 1x1 mit Fallgruben

Nach den Erfahrungen mit der Imagebroschüre war das Finalisieren der Geschäftsausstattung eher eine Routineaufgabe. Aber Vorsicht, hier lauern Fallgruben! In der Vergangenheit hat es sich in jedem Fall als notwendig erwiesen, dass – zumindestens bei Sonderfarben – ein Echtfarbenandruck gemacht werden muss, ehe die Auflage produziert werden kann. In unserem Fall hielten wir es jedoch für ausreichend, unserem Kunden einen Screenproof sehen zu lassen und uns im Übrigen auf unser gutes Farbempfinden und die Erfahrung unserer Drucker zu verlassen.

Das geht vielleicht zweimal gut – und einmal daneben. Moores Gesetz folgend wurden nicht nur die Farben vom Auftraggeber anders beurteilt, nein – auch hatten die Drucker zwei der Farbformen verwechselt. Also – selbst wenn das Budget noch so knapp bemessen ist, in Zukunft drucken wir wieder an!

Wichtig für das Corporate Design ist auch der richtige Rahmen für Präsentationen, die vornehmlich in PowerPoint entwickelt werden.
Die Entwicklung eines professionell gestalteteten Folienmasters mit konsistenter Struktur in Gliederung, Layout, Farben- und Schriften ist eine ernstzunehmende Aufgabe, die bei einer Designagentur durchaus richtig aufgehoben ist.

 



 ABC

Visitenkarten und Briefbogen für die Geschäftsausstattung

(PDF, 287 KB)
Reinzeichnungen der Geschäftsausstattung
(mit Farbauszügen)

 ABC
(PDF, 78 KB)
Ein Folienmaster für PowerPoint Präsentationen

   
  ....................................
Web Design



















































































...................................
Hier finden Sie die aktuelle Website.
 

Eine Website allein macht nicht glücklich...

Es zeigt sich am Anfang jedes Website-Projekts, dass es für die Entwickler wichtig ist, nicht nur ein Corporate Design zu haben, das online-gerecht aufbereitet werden kann, sondern vor allem bedarf es Content. Ohne Inhalte ist eine Strukturierung der Site, eine Planung der Navigation unmöglich.

Deshalb – als erstes eine Sitemap erstellen, in der gemeinsam mit dem Kunden die Inhalte gegliedert und auf einzelne Seiten verteilt werden. Der Webdesiger kann dann aufgrund seiner Erfahrung anfangen, Content und Navigation zu trennen und Hierarchien und logische Abläufe aufzubauen.

In unserem Fall wurden die Inhalte der ersten Version durch den Kunden vorbildlich vorbereitet. Jedoch stellte sich bald heraus, dass sich die minimalistische Gestaltung zur Infowüste entwickelt hatte – vor lauter Text kam die Botschaft nicht an.

Trotz eines knappen Budgets entschloss sich daher unser Kunde die Site in stark überarbeiteter Form noch im ersten Quartal 2001 zu relaunchen. In einem ersten Brainstorming versuchten wir – außer den bereits offensichtlichen Schwächen der Site – noch weitere Features und Ziele zu bestimmen.

Hierbei wurde deutlich, dass es an Bildern, Handfestem und Konkretem mangelte. Weder das emotionale Erlebnis noch der praktische Nutzen der Site waren für den Besucher unmittelbar erfahrbar. Deshalb entschlossen wir uns verstärkt Bilder und Flash-Animationen einzusetzen um Neugier und Spieltrieb hervorzulocken.

Zusätzlich wurden Bilder gefunden, die einerseits zur Spirale und andererseits zu Veränderungsmanagement passen. Diese Bilder sollten weiter metaphorisch zur Verdeutlichung der Inhalte eingesetzt werden. Das Grundthema der Site ist Musik – visualisiert durch Klaviertasten und Noten.

Die inhaltliche Hinführung in der Flash-Intro war vielleicht der schwierigste Part, da hier erst der Makrokosmos mit seinen Spiralnebeln in die DNS-Spirale des Mikrokosmos, dann weiter in die Welt der Musik übergeleitet werden sollte.

Für die Visualisierung der Bilderwelten wurde teils von uns selbst fotografiert und kollagiert - teils wurden lizenzfreie Bilder mit 3D-Illustrationen kombiniert. Die DNS-Spiralen der Intro sowie die Klaviertasten auf der Methoden-Seite – das Kernstück der Site – haben wir eigens für dieses Projekt mit Cinema 4D gestaltet.

Die interaktiven Sequenzen mit Animationen und Audio in der Intro und auf der Methoden-Seite sind sehr komplexe Flash-Skripte, die den Zustand der Seite abfragen und sich damit kontextsensitiv verhalten. So werden in der Intro die interaktiven Bereiche rund um das Zeichen durch Fragezeichen solange "geteasert", bis sich der Besucher endlich entschließt mit der Maus darüber zu fahren.

Das interaktive Piano der Methoden-Seite ist so konfiguriert, dass verschiedene Melodien erklingen, jenachdem ob eine schwarze oder eine weiße Taste gespielt wird. Dabei werden in allen Flash-Animationen die Spielregeln der Usability eingehalten. Die Intro kann jederzeit übersprungen werden. Auf der Methoden-Seite kann die Musik optional ausgeschaltet werden.

Auch wurden im Layout der neuen Site umfangreiche Optimierungen gegenüber dem ersten Prototypen vorgenommen: die "Bühne" wurde bildschirmmittig eingerichtet. Ein geriffelter Verlauf hinter der linken Marginalspalte beruhigt das Layout und erhöht die Wertigkeit. Auch Farben und Schriften wurden mit Stylesheets weiter vereinheitlicht.

 

 ABC

In einer Sitemap wird die Struktur und der Umfang der Site festgelegt.

 ABC

Die Website in der ersten Version (1. Juli 2000)


 ABC

Ein Brainstorming hilft bei der Definition neuer Ziele.

 ABC

Auf den weißen Tasten beginnen...

 ABC

Die neue Bilderwelt kommt musikalisch daher...

 ABC

...und kosmisch kreativ im Cinema 4D-Look.

 ABC

Mit Flash werden neue Töne angeschlagen...


 ABC

Der Relaunch der Website mit komplexen Flash- und Audiosequenzen.
(1. April 2001)
     
 
 


In diesem Zusammenhang auch interessant:
Fallstudie: Sharework Website

 

 Projektarchiv
zur Übersichtsseite