Freies Kommunikationsmittel: GIF

Als drittes habe ich mit Hilfe eines Greenscreens GIFs hergestellt, welche auf Social Media als Werbemittel ausgespielt werden. Der Ablauf ist immer derselbe: zuerst ein kurzer Penspinning-Trick, danach das animierte Logo und zum Schluss der Werbetext. Das Element der Drehung soll hier voll ausgeschöpft werden mit dem Hintergrund, dem Trick und dem Logo.

Greenscreen


Der sich drehende Stift soll möglichst in der Mitte des sich drehenden Hintergrunds liegen
Das blaue Klemmteil beim Stift zeigts beim GIF nicht schön an


Wahl eines neuen Stiftes, welcher sich besser vom Greenscreen trennen lässt
Dennoch einige Unreinheiten beim Keyframen des Greenscreens: unten links einige Pixel, grüner Schimmer auf Hand
Bringe ich leider nicht weg, für kurzes Social-Media-GIF sollte dies aber genügen

Animiertes Logo


Stift rotiert gleich wie Hintergrund, jedoch ziemlich langsam (3s), da Hintergrund nicht zu schnell drehen kann, weil sonst zu hektisch
Hintergrund hört auf zu Drehen, sobald Stift unten ankommt


Stift rotiert schneller (0,5s), ist nicht mehr synchron mit Hintergrund
Hintergrund rotiert nun auch nach dem Logo noch weiter
Swooshes dazuanimiert, um dem ganzen mehr Schwung zu verleihen
Motion Blur aktiviert, wirkt gleich viel dynamischer

Text


Schriftart “Indie Flower” wie im Logo
Hierarchie fehlt, man weiss nicht, was lesen


Aufruf “Chumm verbi!” in “Indie Flower” gelassen, jedoch gekrümmt wie beim Logo
Grösse: 100pt
Schriftzug wird in Animation zuerst allein eingeblendet, um Lesefluss zu steuern


Info zu Schriftart “Gitan” gewechselt
Grösse: 70pt

Website: Tutorials & Footer

Vorher


Box um jede Videoreihe (Gesetz der Geschlossenheit)
Videolisten-Titel: 35pt
Videobeschreibungen: 20pt
Videobeschreibungen wie Bildbeschreibungen kursiv

 


Textgrösse: 30pt
Auf Raster angeordnet

 

Nachher


Absatz bei Videobeschreibung rausgenommen (Gesetz der Nähe)
Boxen entfernt, braucht es nicht
Drei Punkte bei Videobeschreibung angebracht, damit man weiss, dass der Text weitergeht
Hintergrund entfernt, da Layout keinen Bezug darauf nimmt

 


Icons von Social Media verkleinert, da sonst von Logo ablenkt
Elemente symmetrisch angeordnet

 

Website: Startseite


Erster Entwurf der Startseite in Adobe XD
Noch mit “Neue Haas” als Schriftart bei den Menupunkten
Problem: Hintergrund schimmert transparent durch Logo

 


Im Illustrator-File musste ich unter jeden transparenten Stift einen weissen Hintergrund legen (markierte Gruppe), damit bei einem mit Transparenz exportierten PNG der “Inhalt” der Stifte nicht transparent ist, sondern nur die Striche. Bis ich da mal draufgekommen bin…

 


Da stand bereits die finale Version der Startseite
Mit korrekt dargestelltem Logo und der Schriftart “Gitan” bei den Menupunkten

Website: Sketches


Sketch analog zum Plakat-Entwurf
Stift als Menu-Bar
Schnörkel als Rahmen
Stift bei News-Rubrik dreht bei Scrollen
Aktive Seite wird im Menu markiert, indem das Wort einen dunklen Hintergrund erhält
Tutorial-Seite arbeitet mit drehendem Stift als Auswahl
Wiedererkennendes Element fehlt

 

Deshalb neuer Versuch:


Neuer Sketch von Startseite mit Schneeflocke als Hintergrundelement
Logo über Schneeflocke gelegt, um Drehung zu veranschaulichen
Menupunkte in Verlängerung der Stifte des Logos

Design: Wahl einer neuen Schrift

Beim Ausarbeiten des Plakats habe ich gemerkt, dass die beiden Schriften «Indie Flower» und «Neue Haas Grotesk» nicht stimmig sind: letztere wirkt viel zu steril für den peppigen, eleganten Club. Deshalb habe ich mich auf die Suche nach einer neuen Schriftart für den Fliesstext gemacht.


Ursprüngliche Schrift «Neue Haas Grotesk»

 


Schriftart “Niramit”, sans serif, 12 Schriftschnitte

 


Schrift “Lucida Sans”, sans serif, 5 Schriftschnitte

 


Schriftart “Baskerville”, Serif, 6 Schriftschnitte

 


Schriftart “Garamond”, Serif, 10 Schriftschnitte

 


Schriftart “Gitan”, Sans Serif, 10 Schriftschnitte