Page 114

ST YLEGUIDE

ST YLEGUIDE

ST YLEGUIDE

ST YLEGUIDE

114 | Werkschau 2010–2015

Klavika ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÜÁÇÔØ abcdefghijklmnopqrstuvwxyzäöüáçôø 1234567890 [{}(,.;:!?&ß-*@)]ƒ

RGB 33/40/46

Das kreisrunde Logo auf dem Startscreen der App ist

RGB 70/83/92

RGB 20/82/155

RGB 167/189/212

RGB 226/226/226

RGB 255/255/255

RGB 197/48/50

RGB 221/143/143

nur in seiner Größe zu ändern. Das Modifizieren von Farbgebung, innerer Anordnung der Elemente und Typografie ist nicht gestattet. Im Zentrum steht das Logo der

Die generierten Spieler-Logos bieten eine Vielfalt an

aktuellen Saison der Fußball Bundesliga. Alle Elemente

Kombinationsmöglichkeiten in ihrer Farbgebung. Aus-

stehen mittelaxial zum Kreis

schlaggebend für die Farben sind die Trikots der aktuellen

Saison,

so

wie

die

Vereinsfarben

des

jeweiligen Spielers. Für Feldspieler werden zunächst vier Farben für die Kreisbögen benötigt, wovon eine

RGB 227/226/224

des PANINIMATED-Logos. Die Verläufe in den einzelnen Elementen ergeben sich durch den Einsatz von Licht und Kamera in Adobe AfterEffects. Das Bundesliga-Logo ist

RGB 90/103/112 RGB 74/84/94

in gleicher Skalierung wie im Logo am oberen linken Rand

Bei Torhütern wird von diesen vier Farben eine Farbe nach Wahl eliminiert. Dabei sollte eine Zugehörigkeit

verwendbar. Mit Ausnahme des Logos und der Abkürzung

zu einem bestimmten Verein aber erkennbar bleiben.

„m“ für Meter in den Spielerprofilen, kommt die „Klavika“

SPIELER-LOGOS

Das Farbspektrum der Auswahl-Menüs entspricht dem

LOGO, FONTS & FARBEN

LOGO, FONTS & FARBEN

LOGO, FONTS & FARBEN

jedoch eine Graustufe sein muss – wahlweise ein Weißton. Die übergeordnete Hausschrift von PANINIMATED ist die „Klavika“. Sie ist in verschiedenen Schriftschnitten

ausschließlich in Versalien zum Einsatz.

Die genauen Punktgrößen und Laufweiten ergeben sich aus den vorgegebenen Rastern (siehe späteres Kapitel) und aus dem Einsatz von Kamera und Licht in AfterEffects.

RGB 55/62/68

unterzubringen.

Ausgehend von diesen vier Grundfarben ergeben sich dann die vier weiteren, hellere Farben, die für die Kreisflächen hinter den Kreisbögen benötigt werden.

Exemplarisch hier der Vorgang der Farbgebung für einen Spieler des FC Bayern München.

005

ST YLEGUIDE

006

1024 px

1024 px

768 px

768 px

ST YLEGUIDE

ST YLEGUIDE

004

ST YLEGUIDE

003

In den Auswahlmenüs rückt das Bundesliga-Logo in die obere linke Ecke. In die der unteren linken Ecke tau-

Die Kreisbögen bauen sich proportional zum jeweiligen Statistikwert des entsprechenden Spielers auf. Die

chen je nach Menü Nutzungshinweise auf. Außerdem

Ein kreisrundes Raster ist die Basis für alle Spieler-Logos,

helleren Kreise, die den Hintergrund der Spieler-Logos

erscheinen Menü-Titel in der oberen rechten Ecke.

die sich anhand der jeweiligen Statistiken generieren.

bilden,

Alle Kreise bauen sich ausgehend von ihrem Mittel-

helleren Hintergrund erkennt man auf einen Blick, wie

punkt auf. Die Kreisbögen verlängern sich – abhän-

gut der jeweilige Wert des Spielers zu bewerten ist.

für

die

jeweilige

Alle lesbaren und anwählbaren Elemente befinden sich

Das gesamte Spieler-Logo kann beliebig skaliert werden, in sich müssen die Kreise und Kreisbögen allerdings passen. Das Ausgangsraster dafür ist 400 x 400 px groß.

Ein komplett geschlossener Kreisbogen entspräche dem Topwert von 100 %.

Die Farbe der Kreisbögen bleibt aber in jedem Fall einheitlich und variiert nicht proportional zum Statistikwert in seiner Farbigkeit oder Deckkraft etc.

Das Seitenverhältnis der PANINIMATED-App ist auf das iPad zugeschnitten und entspricht 1024 x 768 px.

Auf dem Startbildschirm ist das PANINIMATED-Logo mittig platziert und darf frei skaliert werden.

Auflistung der Mannschaften, bzw. der Spieler ist linksbündig an einem Steg ausgerichtet, der 36 Pixel links in y-Richtung von der mittleren Achse der Grundfläche liegt.

Beim Anwählen eines Spielers aus der Liste, wechselt der Name seine Farbe für einen kurzen Moment in den Farbwert RGB 90/103/112.

ST YLEGUIDE

010

768 px

ST YLEGUIDE

1024 px

innerhalb des Title-Safe-Bereich (rot eingezeichnet). Die

009

ST YLEGUIDE

008

ST YLEGUIDE

007

F OR M AT E & R A S T ER

gig vom jeweiligen Leistungswert des Spielers – vom

F OR M AT E & R A S T ER

SPIELER-LOGOS

SPIELER-LOGOS

den Maximalwert von 100 %. Durch den Kontrast zum

oberen Scheitelpunkt des Kreises im Uhrzeigersinn.

1024 px

Kategorie

768 px

repräsentieren

In den Spielerprofilen sind die Elemente in drei Spalte angeordnet. Von links nach rechts beinhaltet die erste Spalte die Spielerwerte mit jeweiliger Überschrift, in der mittleren

1024 px

Spalte baut sich zunächst ein kreisrundes Spielerfoto und dann das Spieler-Logo auf. In der rechten Spalte befindet

& Drop-Bereich für den „Direkten Spielervergleich“. Zwei runde Avatare bilden dabei die interaktive Fläche, in

die

zum

direkten

Vergleich

die

Spieler-Logos

bewegt werden. Alle Elemente befinden sich innerhalb des Title-Safe-Bereichs.

Auch über die PANINIMATED-App hinaus können die generierten Spielerlogos weitere Verwendung finden. Zum Beispiel auf Fanartikeln, wie Autogrammkarten oder den Trikots der Spieler.

Die Positionierung der Spieler-Logos ist dabei frei wählbar. Die Logos dürfen jedoch NICHT um ihren Mittelpunkt gedreht, oder in ihrer Farbgebung verändert werden.

011

Designmanual

Immer mehr Spieler, wie Thomas Müller oder Marco Reus, setzen verstärkt auf Präsenz in den einschlägigen sozialen Netzwerken. Auch hier können die durch »Paninimated« generierten Logos zum Einsatz kommen – als Profilbild oder Avatar zum Beispiel. Farbliche Veränderungen und Rotation des Logos sind nicht erlaubt.

Immer mehr Spieler, wie Thomas Müller oder Marco Reus, setzen verstärkt auf Präsenz in den einschlägigen sozialen Netzwerken. Auch hier könnten die durch PANINIMATED

012

ANWENDUNGSBEISPIELE

768 px

F OR M AT E & R A S T ER

Sobald man in den Spieler-Menüs angekommen ist, erscheint in der oberen rechten Ecke außerdem ein Drag

ANWENDUNGSBEISPIELE

In der unteren rechten Ecke markiert ein blinkender Punkt auf einem kleinen Fußballfeld die Position des Spielers.

ANWENDUNGSBEISPIELE

sich eine Liste mit weiteren Informationen zum Spieler.

Immer mehr Spieler, wie Thomas Müller oder Marco Reus, setzen verstärkt auf Präsenz in den einschlägigen sozialen Netzwerken. Auch hier könnten die durch PANINIMATED generierten Logos zum Einsatz kommen – als Profilbild oder Avatar zum Beispiel. Farbliche Veränderungen und Rotation des Logos sind nicht erlaubt.

013

Eine Implementierung der Spieler-Animationen ist auch für marktführende Fußball-Simulationen denkbar (hier: FIFA 14 von EA Sports).

014

Motion Design Werkschau 2010–2015  

Dokumentation des Studiengangs Motion Design der Berliner Technischen Kunsthochschule BTK - Hochschule für Gestaltung. www.btk-fh.de

Motion Design Werkschau 2010–2015  

Dokumentation des Studiengangs Motion Design der Berliner Technischen Kunsthochschule BTK - Hochschule für Gestaltung. www.btk-fh.de

Advertisement