Web Gestaltung – Roller Soul

Entwürfe

Die Website ist für ein Roller Skating Event auf der Landiwise in Zürich. Es handelt sich um ein offenes, buntes und fröhliches Event, ganz im Spirit der 70er Jahre.

Es gibt verschiedene Wettkämpfe von Pros für die Zuschauer aber auch Möglichkeiten für alle zum Mitskaten (Dance Jams, Roller Skate Disco, etc). Das Event richtet sich an alle Altersgruppen sowie Anfänger, Fortgeschrittene und alles was dazwischen ist.

Für den Namen des Events gab es zuerst zwei Ideen: Roller Spectrum oder Roller Soul. Der Entscheid fiel bei letzteren – Roller Soul.

Skizzen für Wireframes und Inhalte der Website

Digitale Umsetzung der Wireframes

Research & Moodboard

Research – Farben, Muster, Fonts, Illustrationen

Research – Roller Skater & Roller Skates

Research – Old School Bilder vor allem aus den 70er Jahre

Research – zerrissene Plakate & Streetart

Moodboard

Fusion der Inspirationen/Research zu einem Moodboard

Logo

Skizzen für Logo „Roller Spectrum“

Digitale Umsetzung von Logo – erste Entwürfe

Skizzen für Logo „Roller Soul“

Digitale Umsetzung von Logo – erste Entwürfe

Desktop und Mobile Layout in XD

Diverse Stadion der Umsetzung: links = erster Entwurf, rechts = finale Version

Bei der mittleren Version wurden für den „Webshop“ Bilder verwendet welche nicht von mir selbst erstellt wurden, daher habe ich in der finalen Version keine Models sondern nur die Produkte.

Es wäre jedoch die Grundidee für die Webshop-Bilder mit Models, wobei diese in schwarz-weiss und nur die Produkte bunt wären.

WEB Layout Gestaltung

Entwürfe

Skizzen & Moodbard

Desktop

Entwürfe der Skizzen im Indesign

Variante A: die Grafiken (Boxen mit Text) wurde wie in der Print Version beibehalten, nur die Ausrichtung des Textes wurde unterschiedlich platziert.

Variante B: bei den Grafiken wurde der pinke Hintergrund entfernt, die Farben invertiert um so noch mehr das „Theme“ von der Startseite durchzuziehen.

Mobile

Print Layout Gestaltung

Entwürfe

Moodboard

Skizzen auf Papier

Entwürfe der Skizzen im Indesign

Aus den Skizzen habe ich drei verschiedene Varianten entwickelt.

Weiterentwicklung

Von den drei Varianten wurden zwei weiterverfolgt. Es wurden die Bilder entfernt und es wurde auf grafische Gestaltungen mit den Buchstaben aufgebaut. Der Lorem Ipsum Text wurde mit dem original Text ersetzt, somit konnte die Länge abgeschätzt und Zitate hervorgehoben werden.

Weiterentwicklung Variante 2

Aus der oberen Variante habe ich angefangen die einzelnen Seiten unterschiedlich zu gestalten um so neue Ideen auszuprobieren. Hier ist noch unklar ob ich zwei oder drei Spalten für den Text gebrauchen möchte.

Beginn von Feinschliff

Aus den verschiedenen Ideen habe ich dann die weiterverfolgt welche mir besser gefallen haben und auch das Konzept besser darstellen. Das Konzept: Helvetica steht für Klarheit und Stabilität, das saubere Layout passt zu dieser Art von Design. Doch mit den verschwommenen und „bewegenden“ Buchstaben wird dargestellt wie sich Helvetica durch die Zeit bewegt zugleich wird genau diese übliche Klarheit durchbrochen.