Issuu on Google+

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


Das Corporate Design - Die Doku