Antonia Volke Corporate Identity
Dokumentation der Arbeit
I
Kurzbeschreibung .a Identitätskrise .b Idole
II
Entwürfe und Umsetzung .x elegant elephant .a Logo .b Website .c Visitenkarte
III
Problem | Lösung
IV
Detaillierte Beschreibung der Web-Umsetzung
i
An t oN a
Vo l k e
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
I Kurzbeschreibung
Wer bin ich? Eine Frage, die mich das ganze Wintersemester 2009/10 beschäftigt hat, um meine eigene Corporate Identity zu entwickeln. Dazu gehört unter anderem ein Logo, Schriften, Farben, Bilder; eine Website, eine Visitenkarte, Aufkleber, ein Stempel, Rechnungsvorlagen, ein CD-Handbuch. So bin ich! Hier möchte ich meine Ergebnisse vorstellen. Ich möchte mich und meine Arbeiten vorallem im Internet und auch per Printmedien präsentieren, um mir einen Namen in der Grafik-Branche zu machen.
i
An t oN a
Vo l k e
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
.a Identitätskrise
-
„Ich weiß, wer ich bin“ !?
-
Beobachtungsphase
°
elegant elephant
°
Antonia Volke
i
An t oN a I Kurzbeschreibung
Vo l k e
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
.b Idole
Auf der Suche nach anderen Künstlern Grafikdesigner: E. Maximilian P. Pfister - http://empp.de/ Pit Lederle + Peter Palec - http://www.discodoener.de/ Stefan Duiallas - http://www.iconwerk.de/ Tino Grass - http://www.tinograss.de/ Conny Naumann - http://connynaumann.com/ Christina Bee - http://www.krizbi.de/ Dana Bechter - http://www.kleinegrosse.de/index.html Photografenexkurse der Modefotografie, zum Beispiel: Sarah Moon Thierry Le Gouès Nick Night Horst P. Horst
i
An t oN a I Kurzbeschreibung
Vo l k e
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
II Entwürfe und Umsetzungen .x elegant elephant
„elegant elephant“ - das sollte zu Anfang mein Name sein. Schon lange vor meinem Studium empfand ich diesen Namen als unglaublich zutreffend für mich und meine Arbeit. „elephant“ - Der Elefant ist ein starkes Tier. In der Natur sind die Elefantendamen die Herdenführer. Doch auch verletzlich sind die Riesen, und wertvoll sind die Ressourcen: Elfenbein. „Harte Schale - weicher Kern“.
i
An t oN a
Vo l k e
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
Elefanten werden in Comics oft tolpatschig dargestellt: „Dumbo“ mit seinen großen Ohren, über die er stolpert und seinen treuen Augen ist ein Elephantenjunges, das lernen muss, sich in der großen Zirkuswelt zu behaupten.
i
An t oN a II Entwürfe
und
Umsetzungen .x
Vo l k e
elegant elephant
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
i
An t oN a ii entw체rfe
unD
umsetzungen .x
Vo l k e
elegant elephant
Stand M채rz 2010 Bauhaus-Universit채t Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
„elegant“ - Elegant ist meine Arbeit mit Medien. Jede Arbeit ist ein Gesamtwerk. Schriften, Farben, Formen bilden eine Einheit und erzählen in sich eine Geschichte. Der Name „elegant elephant“ ist also als Antonym zu betrachten, wie ein Elefant auf Stöckelschuhen.
i
An t oN a II Entwürfe
und
Umsetzungen .x
Vo l k e
elegant elephant
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
i
An t oN a ii entw체rfe
unD
umsetzungen .x
Vo l k e
elegant elephant
Stand M채rz 2010 Bauhaus-Universit채t Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
i
An t oN a II Entw체rfe
und
Umsetzungen .x
Vo l k e
elegant elephant
Stand M채rz 2010 Bauhaus-Universit채t Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
i
An t oN a ii entw체rfe
unD
umsetzungen .x
Vo l k e
elegant elephant
Stand M채rz 2010 Bauhaus-Universit채t Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
i
An t oN a II Entw체rfe
und
Umsetzungen .x
Vo l k e
elegant elephant
Stand M채rz 2010 Bauhaus-Universit채t Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
Einen Elefanten in dem Logo zu verwenden, so musste ich feststellen, ist aufgesetzt und zu viel. Also habe ich versucht eine Schrift zu entwickeln, die der Aussage des Antonyms gerecht wird.
i
An t oN a ii entw체rfe
unD
umsetzungen .x
Vo l k e
elegant elephant
Stand M채rz 2010 Bauhaus-Universit채t Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
i
An t oN a II Entw체rfe
und
Umsetzungen .x
Vo l k e
elegant elephant
Stand M채rz 2010 Bauhaus-Universit채t Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
i
An t oN a ii entw체rfe
unD
umsetzungen .x
Vo l k e
elegant elephant
Stand M채rz 2010 Bauhaus-Universit채t Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
i
An t oN a II Entw체rfe
und
Umsetzungen .x
Vo l k e
elegant elephant
Stand M채rz 2010 Bauhaus-Universit채t Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
Design Das ist die entwickelte Schrift und das Icon für „elegant elephant“.
i
An t oN a II Entwürfe
und
Umsetzungen .x
Vo l k e
elgant elphant
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
Identitätskrise... Ich habe mich gefragt, warum ich eigentlich den Namen „elegant elephant“ gewählt habe. Am Anfang waren es Charakterzüge und persönliche Eindrücke, die mir den Namen schmackhaft machten. Ich musste feststellen, dass doch mehr Nachteile bei der Verwendung eines Synonyms bestehen, als wenn ich meinen eigenen Namen verwende. Das Logo ist vielleicht besser bei einer Modeboutique für Übergrößen aufgehoben.
i
An t oN a
Vo l k e
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
II Entwürfe und Umsetzungen .a Logo
Ich interessiere mich beim Grafikdesign besonders für Typografie, deshalb war mir wichtig in dem Logo viele verschiedene Schriften zusammen zu fügen. Dafür musste ich die Buchstaben der Schriften studieren und zu einem Ganzen vereinen.
i
An t oN a
Vo l k e
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
i
An t oN a II Entw체rfe
und
Umsetzungen .a Logo
Vo l k e
Stand M채rz 2010 Bauhaus-Universit채t Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
Nach einem bewussten Blick in meine Wohnung und in meinen Kleiderschrank mussten die Corporate Design-Farben „bunt“ werden. Von einem Farbton ausgehend habe ich mir dazu passende Töne heraus gesucht: Hoher Kontrast Tetrade
i
An t oN a II Entwürfe
und
Umsetzungen .a Logo
Vo l k e
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
Orange
RGB in % - R=236 G=112 B=7 CMYK in % - C=0 M=67 Y=100 K=0
Hellgrün
RGB in % - R=164 G=196 B=0 CMYK in % - C=45 M=0 Y=100 K=0
Mittelgrün
RGB in % - R=133 G=159 B=59 CMYK in % - C=56 M=21 Y=90 K=20
Dunkelgrün RGB in % - R=81 G=109 B=36 CMYK in % - C=70 M=37 Y=100 K=23 Blau
RGB in % - R=73 G=133 B=192 CMYK in % - C=73 M=41 Y=0 K=0
Lila
RGB in % - R=173 G=80 B=149 CMYK in % - C=36 M=79 Y=0 K=0
Gelb
RGB in % - R=237 G=168 B=4 CMYK in % - C=6 M=39 Y=96 K=0
Braun
RGB in % - R=159 G=113 B=24 CMYK in % - C=35 M=52 Y=100 K=16
i
An t oN a II Entwürfe
und
Umsetzungen .a Logo
Vo l k e
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
Farb- und Anordnugnsversuche der Buchstaben.
i
An t oN a ii entw체rfe
unD
umsetzungen .a logo
Vo l k e
Stand M채rz 2010 Bauhaus-Universit채t Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
i
An t oN a ii entw체rfe
unD
umsetzungen .a logo
Vo l k e
Stand M채rz 2010 Bauhaus-Universit채t Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
Das Logo und das Icon greifen beide das Thema des Quaders auf. Für die Anordnung des Logos habe ich mich gegen eine Quadratische entschieden, weil sonst die Lesbarkeit des Namens in Frage stünde. Dagegen ist durch die rechteckige Variante der Name eindeutig erkennbar. Das Icon beinhaltet alle Farben. Wie die Farben des Farbkreises sind hier alle meine Corporate Design-Farben verwendet worden - alles, was wichtig ist.
i
An t oN a II Entwürfe
und
Umsetzungen .a Logo
Vo l k e
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
II Entw체rfe und Umsetzungen .b Website
der Aufbau
i
An t oN a
Vo l k e
Stand M채rz 2010 Bauhaus-Universit채t Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
der Aufbau
i
An t oN a ii entw체rfe
unD
umsetzungen .b website
Vo l k e
Stand M채rz 2010 Bauhaus-Universit채t Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
Viele Medien - ein Stil. Ich habe einen eigenen Stil, den man wiedererkennt, egal mit welchem Medium ich arbeite. Ein „Medienturm“, grafisch im selben Stil soll daher als meine Navigationsleiste dienen. ein Fernseher, ein Radio, eine Kamera, ein Telefon, ein Hut ( für „Faust ohne Worte“) und der Turm kann wachsen...
i
An t oN a II Entwürfe
und
Umsetzungen .b Website
Vo l k e
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
Es geht ja schließlich um mich - Antonia Volke. Und statt eines Profils auf einer Unterseite, warum nicht als agierende Figur! Die Corporate DesignFarben entsprechen auch meinem eigenen Farbstil. Die Corporate Identity wird sich mit mir verändern. Das bedeutet ich lebe meine CI. An meinem ICH findet ein Wiedererkennungseffekt für mein Corporate Design statt.
i
An t oN a ii entwürfe
unD
umsetzungen .b website
Vo l k e
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
i
An t oN a II Entw체rfe
und
Umsetzungen .b Website
Vo l k e
Stand M채rz 2010 Bauhaus-Universit채t Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
http://antonia-volke.de
i
An t oN a II Entw체rfe
und
Umsetzungen .b Website
Vo l k e
Stand M채rz 2010 Bauhaus-Universit채t Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
i
An t oN a II Entw체rfe
und
Umsetzungen .b Website
Vo l k e
Stand M채rz 2010 Bauhaus-Universit채t Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
II Entw체rfe und Umsetzungen .c Visitenkarte
Vistitenkarte - quadratisch einseitig
Ein Quader hat eine in sich geschlossene, ruhende Bewegungstendenz. Dieser wirkt dadurch neutral, wenn nicht sogar passiv, lastend und ist ohne einen gerichteten Ausdruck.
i
An t oN a
Vo l k e
Stand M채rz 2010 Bauhaus-Universit채t Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
Vistitenkarte - quer zweiseitig Normformat
Ein waagerechtes Rechteck ist breitlagernd und lastend und wirkt dadurch ruhend und konservativ. In der Architektur ist das zum Beispiel zu vergleichen mit einer Wohnblockfassade.
i
An t oN a II Entw체rfe
und
Umsetzungen .c Visitenkarte
Vo l k e
Stand M채rz 2010 Bauhaus-Universit채t Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
Vistitenkarte - quer einseitig Normformat
i
An t oN a II Entw체rfe
und
Umsetzungen .c Visitenkarte
Vo l k e
Stand M채rz 2010 Bauhaus-Universit채t Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
Vistitenkarte - einseitig hoch Normformat
Ein senkrechtes Rechteck hat eine aufstrebende Bewegungstendenz und wirkt dadurch stark, stolz, frisch und stabil, wie zum Beispiel in der Architektur eine S채ule.
II Entw체rfe
und
Umsetzungen .c Visitenkarte
i
An t oN a
Vo l k e
Stand M채rz 2010 Bauhaus-Universit채t Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
Vistitenkarte - Endprodukt Hochformat Normgröße einseitig
Nach einigen Versuchen mit der Form der Visitenkarte war klar, dass sie trotz des Logos, was das Thema des Quaders aufgreift, Hochformat sein musste. Um die Informationen auf den ersten Blick zu erfassen, habe ich die Visitenkarte einseitig erstellt. Meine Arbeiten sind frisch und fröhlich und ich habe noch viel vor.
i
An t oN a II Entwürfe
und
Umsetzungen .c Visitenkarte
Vo l k e
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
Die vollständigen Informationen über die Schriften, Formen, Farben, Logo, - hintergründe, -zusätze, -verwendungszwecke etc. habe ich in einem Corporate Design-Handbuch zusammen gefasst.
i
An t oN a II Entwürfe
und
Umsetzungen .c Visitenkarte
Vo l k e
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
III Probleme | Lösungen
Dank ein bisschen Erfahrung mit Printmedien war die Erstellung der Daten mit den bestimmten Programmen kein Problem. Schwierig gestaltete sich plötzlich die Auswahl der Papiere oder welche Druckerei nehmen: geh ich stationär zu einer Druckerei oder lasse ich online drucken. Alles hat da seine Vor- und Nachteile. Stationärer Handel hat den Vorteil direkten Kontakt zu den Menschen zu haben, die tagtäglich damit arbeiten und eine beratende Funktion haben. Der Vorteil von OnlineDruckerein - sie sind um einiges kostengünstiger. Ich habe beide Varianten genutzt. Die Visitenkarten habe ich online gedruckt, die Aufkleber, den Stempel und das Handbuch habe ich in einer stationären Druckerei machen lassen. Besonders auf Schreibfehler sind zu achten - vor dem Druck! Da musste ich leider einstecken, weil ich zum Schluss nicht noch einmal akribisch den Inhalt kontrolliert habe.
i
An t oN a
Vo l k e
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
Bei der Website ist mir wichtig, dass der komplette Seitenaufbau grafisch auf einen Blick erfassbar ist. Außerdem natürlich die Farben und der Aufbau. Dabei muss ich natürlich aufpassen, dass es nicht zu starr wird. Das Menü soll über die „Medien“ Fernseher, Radio, Hut... (und es kommt noch mehr) ansteuerbar sein, welche sich auch farblich verändern, wenn man mit der Maus darüber kommt. Je nach „Medium“ ändert sich der Inhalt der BOX. Momentan habe ich mit iframes gearbeitet, was ich jetzt schon wieder bereue. Jedenfalls wird der Inhalt über Div-toggle-Boxen (Javascript) ansteuerbar werden. Falls ein User Javascript ausgeschaltet hat, sind die Div-Boxen einfach untereinander aufgereiht und über Anchor erreichbar. Ansonsten erscheinen die Inhalte zu den Medien immer in (nächste Seite geht es weiter) dem weißen Kasten.
i
An t oN a III Probleme | Lösungen
Vo l k e
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
Die Filme, Hörstücke und Bilder sollen via Javascript in einer Light-/oder Shadowbox gezeigt werden. Das gibt es ja zum Glück schon. Außerdem möchte ich an die Stelle des Mädchens - ich nenne es immer liebevoll „mannequin“ - jedenfalls soll an diese Stelle ein Bild: natürlich mit mir. ZUSATZ: Als Herausforderung überlege ich an dieser Stelle, dank HTML5, ein Video einzubetten und mit einer JAVASCRIPT-Browser-Abfrage zu steuern. Kann der User mit seinem Browser HTML5 lesen, dann hat er die Möglichkeit das Video zu sehen, falls nicht, dann sind es ganz einfach Bilder.
i
An t oN a III Probleme | Lösungen
Vo l k e
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
IV. Detaillierte
Beschreibung der Web-Umsetzung
Von der Idee zur kompletten Website. Die Website lässt sich in vier Bereiche unterteilen: der Head (mit dem Logo), das Portrait ("mannequin"), die Content-Box und das Menü (die Anhäufung von Medien). Die Techniken, die ich verwendet habe, sind HTML und CSS, Javascript und PHP. Bei den Javascript-Programmierungen habe ich mir Hilfe geholt: Zum einen gibt es ja schon die verschiedensten Anwendungen im Internet zu finden, wie die Shadowbox.js1. Ich habe mir also die Daten als Ordner herunterladen können und anschließend die Javascript-Befehle in meinen Code eingearbeitet. Ich hatte ein Problem mit mp3, denn die Shadowbox hat die Daten nicht abgespielt. Dann habe ich herausgefunden, dass man in den Javascript-Dateien Ergänzungen, zum Beispiel den Daten-Typ, vornehmen kann. (nächste Seite geht es weiter)
1
http://www.shadowbox-js.com/
i
An t oN a
Vo l k e
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
Zum anderen habe ich einen Bekannten (Simon Brandl) um Hilfe gebeten, eine Toggle-Box zu entwickeln, welche die Inhalte an- bzw. ausschaltet, aber alle anderen Inhalte dabei unsichtbar setzt. Dazu musste ich die Inhalte, die ich ja bisher via iframe in der Content-Box eingebettet hatte, zunächst in Div-Boxen verteilen. Die Div-Boxen habe ich alle mit einem Anchor versehen, damit sie, wenn Javascript ausgeschaltet ist, trotzdem über das Menü ansteuerbar sind. Zusammen mit Simon Brandl habe ich seinen Javascript-Code in meinen HTML-Code eingearbeitet. Wenn man jetzt einen Menüpunkt wählt, dann erscheint - mit Javascript eingeschaltet - der dazugehörige Inhalt in der Content-Box. Dazu ist mir noch aufgefallen, dass wenn Javascript ausgeschaltet ist, dürfen "HochPfeile", die mich von der Website ganz unten schnell wieder nach ganz oben bringen, nicht fehlen. Also habe ich diese hinzugefügt. Wenn jetzt Javascript aber an ist, muss ich die Pfeile unsichtbar machen. Diesen Code habe ich mit Hilfe von Simon Brandl geschrieben. (nächste Seite geht es weiter)
i
An t oN a IV. Detaillierte Beschreibung
der
Web-Umsetzung
Vo l k e
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de
Antonia Volke Corporate Identity
Den Zusatz mit der Video-Einbettung dank HTML5 musste ich auf nächstes Semester verschieben. Dafür habe ich mir folgendes überlegt: PHP habe ich im Zusammenhang mit einer zufälligen Auswahl für Bilder (rotate image) an der Stelle des „mannequin“ gewählt. Dazu habe ich mir hier1 Hilfe geholt. Es hat auch funktioniert: Über den MAMP-Server habe ich den Versuch gestartet und ich habe verschiedene Bilder beim Neuladen der Seite bekommen. Leider hat es aber nicht online funktioniert.
1
http://www.marcofolio.net/webdesign/ php_random_image_rotation.html
i
An t oN a IV. Detaillierte Beschreibung
der
Web-Umsetzung
Vo l k e
Stand März 2010 Bauhaus-Universität Weimar Professur Interface Design Antonia Volke antonia.volke@medien.uni-weimar.de