Neues Design [3]: Die praktische Anwendung

In diesem dritten und damit auch letzten Teil dieser kleinen Reihe soll es nun darum gehen, wie das im zweiten Teil besprochene, brandneue Konzept die letzten Schritte bis zur finalen Version durchlaufen ist.

Ihr werdet bestimmt schon bemerkt haben, dass das neue Design bereits seit mehreren Tagen sowohl hier auf dem Blog als auch auf meinen sozialen Medien aktiv genutzt wird. Daher habt ihr jetzt schon ein gutes Bild davon, wohin die Reise am Ende gehen wird. Doch eben diesen Weg dahin, möchte ich nun an dieser Stelle dokumentieren:

3-titelbild

Am Ende des letzten Teils sprach ich ja davon, dass mir bei der Betrachtung der katakana für „Hawk“ ein kleiner Geistesblitz kam. Nur zur Erinnerung: Dies sind die besagten Schriftzeichen: タカ

Wenn ihr genau hinschaut, könnt ihr diese bereits in den diversen Bannern und damit auch im oben verlinkten Bild wiederfinden. Zuerst wollte ich sie bei weitem nicht so prominent einbauen, sondern sie eher als kleine Nuance neben dem eigentlichen Design/Schriftzug nutzen. Quasi als kleiner Bonus für Jeden, der sich die Mühe macht die Bedeutung der Schriftzeichen rauszusuchen.

Mir ist dann jedoch recht schnell aufgefallen, dass eines dieser Schriftzeichen () im richtigen Winkel sehr stark an ein großes A erinnert, während das Andere () durchaus als kleines n durchgehen kann. Hier mal eine kleine Visualisierung, die es deutlicher machen sollte:

hawkwing

Als ich mir dessen bewusst wurde, wusste ich, dass ich damit das zentrales Element des neuen Designs gefunden habe. Es hat einfach alles in sich vereint, was ich ursprünglich mit dem Design ausdrücken wollte. Das obere Beispiel stellt jedoch keineswegs meinen ersten Versuch dar, schließlich sollte es eben nur als Anschauungsmaterial dienen.

Effektiv begonnen habe ich damit, eine interessante Font zu suchen, die ich als Basis für den Schriftzug an sich benutzen wollte. Bereits bei meinem letzten Design habe ich auf keine Font zurückgegriffen, sondern (zumindest beim HAWK) jeden Buchstaben selber gezeichnet. Dies hatte durchaus seine Vorteile – immerhin habe ich alles selber gemacht -, jedoch brachte dies auch durchaus Nachteile mit sich. Dadurch, dass ich nur ein paar Buchstaben selber entwickelt hatte, und eben keine komplett eigene Font , war ich beim Nutzen extremst eingeschränkt. Konkret bedeutete dies, dass ich damals eine dazu passende Font finden musste, mit der ich quasi alles andere als meinen Schriftzug schreiben konnte. Was natürlich den Punkt des „Selber-Machens“ effektiv nichtig gemacht hat.

Von daher war mir bei der Neuentwicklung klar, dass es die beste Idee wäre, direkt von Anfang an auf eine bestimmte Font zu setzen, und diese dann für den Schriftzug mehr oder weniger stark zu modifizieren. Interessanterweise ist aber auch daraus nicht wirklich was geworden, da ich die eigentliche Font – zumindest für den HAWK-Teil – so stark modifiziert habe, dass man sie nicht mehr wirklich als diese Font erkennen kann. Hier ein kleines Beispiel, wie die Font im Urzustand ausschaut:

universe

Hierbei wird es ein bisschen deutlicher:

h-wk

Mir gefiel die Modifikation jedoch so gut, dass ich sie in das finale Design mit übernehmen wollte. Wie bei meinem letzten Design wollte ich auch dieses Mal wieder eine recht starke Trennung zwischen dem Hawk und dem wing erreichen, eines der wenigen Dinge, die mir beim alten Design von der Idee her noch gefielen:

hawkwing-200

Deswegen habe ich den wing-Teil erst einmal nach hinten gestellt und mich fortan auf das HAWK fokussiert. Von daher nahm ich das oben angesprochene Fragment (H WK) und fügte das Schriftzeichen hinzu, welches das A ersetzten sollte. Zunächst arbeitete ich mit einem gewissen Winkel, damit es stärker an ein richtiges A und weniger an ein willkürlich eingestreutes japanisches Schriftzeichen erinnert:

hawk

Grundsätzlich hat mir das schon echt ziemlich gut gefallen. Aber an dieser Stelle kristallisierte sich ein anderes Problem heraus: Mein Name war eben nicht „Hawk“, sondern „Hawkwing„, weswegen ich gerade beim Schriftzug auf jeden Fall auch noch das wing einbauen musste. Doch nun stellte sich die Frage, wie.

In der Tradition des alten Design war mein erster Gedanke, dass wing vielleicht einfach nur unten drunter zu setzen.

schlecht1

Okay, das war schon einmal gar nichts. Es wirkte einfach uninspiriert und langweilig. Ergo versuchte ich dann, dass zweite Schriftzeichen () mit einzubringen und das n von wing damit zu ersetzen. An dieser Stelle sei noch gesagt, dass ich für das wing eine komplett andere Font benutzt habe, welche ich fortan als Standard-Font für Publikationen nutzen wollte. Ergo kam meine Grundidee mit den Fonts doch noch irgendwie zu tragen.

schlecht2

Okay, es ist ein bisschen interessanter geworden, und endlich ergaben die Schriftzeichen zusammen auch wieder einen Sinn, aber wirklich gut hat es immer noch nicht ausgesehen. Zumal jetzt wieder ein Haufen neuer Probleme dazu kam, die sich auch in diesem Versuch bemerkbar machten:

schlecht3

Es sah einfach nicht aus. Die Bildelemente haben kein Stück harmoniert, es sah immer noch viel zu langweilig aus und es hat ehrlich auch einfach keinen Sinn ergeben. Die Schriftzeichen waren viel zu weit auseinander, so dass man sie nicht in einem Kontext sehen konnte und sie daher nur absolut Random und unpassend wirkten. Hinzu kam noch, dass das  in einem komplett anderem Winkel zum  stand, wodurch es noch einmal weniger Sinn ergab. Hier mal eine kleine Visualisierung, die den Unterschied der Winkel und Schriftgrößen deutlich macht, wenn man sie mit den oberen Versuchen vergleicht:

winkel

Demnach war klar, dass ich mich aktuell in einer Sackgasse befand. Ich machte keinerlei Fortschritte und verschlimmbesserte die eigentlich (zumindest in meinen Augen) gute Idee immer mehr. Deswegen musste etwas Neues, Unkonventionelles her:

Zunächst einmal wollte ich nicht mehr nur mit einer einzigen Farbe arbeiten, einfach um die Monotonie des Blautons zu überwinden. Als Komplementärfarbe für dieses spezielle Blau stellte sich dann ein sehr heller Rotton heraus, der einen sehr schönen Kontrast zu besagtem Blau lieferte und das Ergebnis alleine schon dadurch interessanter und weitaus weniger monoton wirken ließ:

wing rot.png

Während sich die Farbsprache nun zum Besseren gewandelt hatte, blieb noch die Frage der Bildkomposition offen. Mir wurde schnell klar, dass ich das カ nicht einmal ansatzweise anwinkeln kann, da es ansonsten überhaupt nicht mehr funktionieren würde. Weder als Schriftzeichen noch als n-Ersatz. Demnach musste ich den ursprünglichen Winkel des  wiederherstellen, auch wenn es ein bisschen auf die Lesbarkeit als A ging. Auch passte ich ein wenig die Größe des Schriftzeichens im Vergleich zum H WK an. Ebenfalls kristallisierte sich heraus, dass sich beide Schriftzeichen auf einer Ebene befinden müssen, um auch nur ansatzweise in einem Zusammenhang gesehen werden zu können.

Der Stand der Dinge sah zu diesen Zeitpunkt grob so aus:

grob

Ich befand mich auf dem richtigen Weg, war aber immer noch nicht ganz da, wo ich sein wollte. Der Abstand zwischen den Schriftzeichen war mir immer noch zu groß, zumal mir der Schriftzug im Allgemeinen ein bisschen zu breit vorkam.

Durch meine Erfahrungen mit dem Design von Inzzanewaxx konnte ich mich immer mehr mit der Idee anfreunden, mit übereinander liegenden Bildelementen zu arbeiten, was vorher immer so eine Art rotes Tuch für mich darstellte. Ein kleiner Schlagschatten für ein bisschen Tiefe konnte auch nicht schaden. Das Endergebnis dessen war nun schon ziemlich nahe am fertigen Produkt dran:

hawkwing-137h

Mit dem Schriftzug war ich damit schon einmal außerordentlich zufrieden, ein Zustand den ich beim „alten neuen“ Design nie wirklich zu 100% erreicht habe. Vielleicht ist es für nicht in den Entstehungsprozess involvierte Betrachter ein bisschen schwierig, die japanischen Schriftzeichen als Ersatz für A und n zu deuten, aber selbst wenn dies der Fall sein sollte, dürfte sich dieses Mysterium in Verbindung mit den anderen Elementen einer Webseite sehr schnell klären lassen. Mich freut es, dass durch die Überlagerung der beiden Schriftteile die Schriftzeichen wieder enger zusammengerückt sind und dass sie durch die herausstechende, tiefschwarze Farbgebung auch in einem Kontext zueinander stehen, was natürlich der eigentliche Sinn der Sache war.

Während nun der Schriftzug an sich stand, blieben immer noch ein paar Fragen offen. Schließlich beschränkt sich ein Design nicht nur auf den Schriftzug, sondern kombiniert mehrere verschiedene Elemente miteinander zu einem homogenen Gesamtbild. Demnach galt es nun, einen adäquaten Hintergrund zu entwickeln.

Wie ich bereits in den anderen Teilen schrieb, wollte ich bei dieser Iteration des Designs meine Scanlations als zentralen Aspekt hervorheben. Aus diesem Grund kam mir recht schnell die Idee, mit tatsächlichen Auszügen aus den Mangas, die ich übersetze, zu arbeiten.

Mein Grundgedanke war, für jeden Manga (also Yagate Kimi ni Naru uind Gakkou Gurashi) zumindest einen passenden Hintergrund und damit Header zu erstellen, die sich alle eine ähnliche Bildkomposition und den gleichen Schriftzug teilen. Der Plan war und ist, dass ich bei dem Release eines neuen Kapitels auch den Header auf meiner Webseite und auf den sozialen Medien entsprechend austausche und anpasse.

Von daher machte ich mich zunächst einmal auf die Suche nach passenden Manga-Auszügen, die ich als effektiven Hintergrund für die Header nutzen konnte. Da ich bei Yagate Kimi ni Naru über sehr hochwertige RAWs verfüge, erwies es sich hierbei als ein Leichtes, einen passenden Auszug zu finden:

yg-hg

Thematisch wollte ich Wert darauf legen mir Szenen rauszusuchen, die den Manga auf kurze und knappe Art und Weise wiederspiegeln. Dafür eignete sich dieser Auszug mit seiner ruhigen Atmosphäre und dem Fokus auf den beiden Charakteren perfekt.

Jedoch wollte ich nach meinem letzten Design nicht mehr mit Schwarz und Weiß als Hauptfarben arbeiten, weswegen ich diesen Auszug mit einem blauen Farbton kombinierte, den ich bei der Erstellung des Schriftzuges die ganze Zeit über als Hintergrund benutzt habe:

blau-yk

Da mir das noch ein bisschen zu nichtssagend war, griff ich auf eine farbenfrohe Textur zurück, die ich sowohl auf den Hintergrund an sich als auch den Schriftzug anwandte:

bg

Als letzten Touch habe ich dann den Schriftzug auf den Hintergrund gesetzt und den Kontrast zwischen Beiden durch sanfte Fade Ins und Fade Outs erhöht, sodass der Schriftzug nicht durch Hintergrund erschlagen wird. Ebenfalls habe ich den starken Gelbton an der rechten Seite ein bisschen abgeschwächt:

header2

Mit dem endgültigen Ergebnis war ich zu diesem Zeitpunkt wirklich zufrieden. Da damit der Header für YagaKimi fertig war, ging es nun daran, den für Gakkou Gurashi zu erstellen. Dabei befolgte ich die gleichen Schritte wie bei YagaKimi, auch wenn sich hierbei die Szenensuche durch wesentlich schlechtere RAWs als etwas schwieriger herausstellte. Dies hat man dann auch leider beim fertigen ersten Versuch gemerkt:

gg1

Thematisch hat es super gepasst, aber mir war das Bild an sich einfach ein bisschen zu leer. Gerade im direkten Vergleich zum YagaKimi-Header fällt es doch sehr stark auf, dass einfach das gewisse Etwas zu fehlen scheint. Inhaltlich fand ich es echt gut, gerade weil ich dieses Mal beide Seiten links und rechts des Schriftzuges vernünftig nutzen konnte. Dennoch war ich aus genannten Gründen noch nicht zufrieden, weswegen ich mir eine andere Szene heraussuchen musste:

gg-unedit

Diese Szene bot sich aus den gleichen Gründen wie die Vorherigen an, da ich auch dabei den Kontrast zwischen links und rechts ausnutzen konnte. Jedoch war hierbei visuell einfach eine Spur mehr los, was den Hintergrund natürlich besser ausfüllte und das Ganze ein bisschen interessanter machte. Natürlich musste ich herbei ein bisschen an der Bildkomposition herum schrauben und ein paar Kleinigkeiten cleanen, jedoch bin ich dieses Mal auch hier mit dem Ergebnis sehr zufrieden gewesen:

gg3

Der Vorteil von diesem System mit den austauschbaren und themenbezogenen Hintergründen besteht darin, dass ich für jeden Manga beliebig viele passende Designs erstellen kann und den visuellen Eindruck so immer wieder aufs Neue frisch halten kann. Es bietet mir einfach eine Flexibilität, die ich mit dem alten hellgrauen Hintergrund nie erreichen konnte.

Nachdem sowohl der Schriftzug als auch das allgemeine Hintergrund-Design standen, brauchte ich eigentlich nur noch simples Logo. Während ich erst wie bereits erwähnt mit einem weiteren Flügelmotiv arbeiten wollte, konnte ich mich recht schnell nicht mehr mit der Idee anfreunden. Dafür hat sich das ganze Design im Allgemein einfach zu weit von meinem alten Stil entfernt, als das ich hierbei jetzt nur eine weitere Iteration dessen nehmen konnte. Auch das Logo musste stilistisch der gleichen Bildsprache folgen und ebenfalls den Scanlation-Aspekt untermalen.

Dieses Mal fing ich mit dem Hintergrund an, da mir die vielen Farben der Header wirklich gut gefielen und ich dieses Element auch beim Logo bzw. Avatar etablieren wollte. Entschieden habe ich mich dann für den Auszug aus dem YagaKimi-Header, der dort vom Schriftzug verdeckt wird.

logo-hg

Dieser Auszug drückte wie der eigentliche Header eine gewisse Ruhe aus, die ich so gut wie unberührt für sich selbst wirken lassen wollte. Ich habe dieses konkrete Quadrat gewählt, da dort in der oberen linken Ecke ein kleines bisschen Freiraum ist, welches nicht von Bildelementen beansprucht wird. Diese Ecke bot den perfekten Platz für das neue Logo.

Doch nun stellte sich die Frage, was ich nun eigentlich als Logo nehmen wollte, wenn es denn kein Flügel werden würde. Die Antwort fand ich dann recht schnell bei einer weiteren Betrachtung des Schriftzuges:

sw-rechteck

Ich entschied mich für die japanischen Schriftzeichen in ihrer speziellen Ausrichtung und Größe zueinander. Wie oben bereits erwähnt, stehen diese katakana für Falke bzw. Hawk. Durch die dominante Position innerhalb des Schriftzuges lenken sie bereits automatisch Aufmerksamkeit auf sich, und durch die Tatsache, dass ich die relative Größe der beiden Zeichen beibehalten habe, überträgt sich dieser Wiedererkennungseffekt auch auf das Logo bzw. den Avatar an sich. Um einen besseren Kontrast zu gewähren und sie ein bisschen besser aus dem Hintergrund hervorstechen zu lassen habe ich sie dann weiß eingefärbt:

logo4

Für den Nutzen als Avatar/Signatur in Foren o.Ä. habe ich dem Ganzen dann noch einen kleinen, subtilen Rand verpasst, um das Gesamtbild ein bisschen abzurunden:

0a17ee6ccd

43d9b01a50

ava

Als Letztes wollte ich dann nur noch ein kleines Logo mit ein paar mehr Informationen kreieren, welches bei Scanlations zum Beispiel als „Firmenlogo“ oder kleines Watermark fungieren sollte. Grundsätzlich entschied ich mich hierbei für einen schlichten Schwarzton mit transparentem Hintergrund, einfach um das Ding so flexibel wie nur möglich einsetzen zu können. Als Font habe ich die Font gewählt, die ich bereits für den wing-Teil des Schriftzuges benutzt habe:

sw-logo

Einfach, schlicht und effektiv. Genauso, wie es sein sollte. Und damit möchte ich dann auch diese gesamte Reihe abschließen und hoffe, dass euch die Lektüre gefallen hat. Anders als bei meinem letzten Design stehe ich hinter diesem wirklich zu 100% und bin stolz auf die Gesamtwirkung. Aus diesem Grund habe ich mir auch die Zeit genommen den Entwicklungsprozess und meine Gedanken dahinter so genau zu dokumentieren. Ich persönlich finde es immer wieder interessant, anderen Leute bei der Entwicklung solcher Projekte zu folgen, sodass ich etwas Ähnliches in dieser Richtung auch mal an alle Interessierten da draußen zurückgeben wollte.

Mit dem Ende dieser Reihe wird mein Fokus in der nächsten Zeit erst einmal wieder auf meine Scanlations wandern, sodass ihr hier in naher Zukunft bereits wieder mit neuen Kapiteln rechnen könnte. Wie immer würde ich mich über Feedback oder einen Besuch auf meinen sozialen Medien wirklich freuen!

Mit freundlichen Grüßen

Hawkwing

 

 

 

 

 

 

 

 

Advertisements

Ein Gedanke zu „Neues Design [3]: Die praktische Anwendung

  1. Pingback: Neues Design [2]: Die Entwicklung eines komplett neuen Konzepts | Hawkwing

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s