Jelvani Productions

Fontwave-App

Iman Jelvani - SS2020 Screendesign - Dozent: Adam Lorek

FONTWAVE APP

Entwicklung und Einflüsse
Das Design der App
Namens- und Ideenfindung
Farben
Moodboard
Recherche
Entwicklung und Einflüsse
Entwicklung und Einflüsse

Musik wird immer wichtiger in den sozialen Medien – viele User benutzen in ihren Instagram-Stories nicht nur Text, sondern auch Musik zu den Fotos, die sie teilen.

Es existieren bereits Apps, mit denen man Schriften verändern bzw. verschiedene Schriftarten hinzufügen kann. Jedoch gibt es bislang noch keine Anwendung, die die Manipulation von Schriftarten durch Musik erlaubt (audioreaktive Veränderung der Schrift).

Fontwave zielt also darauf ab, die generativen Manipulationen der Typografie mit den auf die Musik reagierenden Veränderungen der Schrift zu verbinden.

Hinsichtlich der Auswahl der Musik gibt es für die User zahlreiche Möglichkeiten. In der Entwicklung wurde die App jedoch hauptsächlich darauf ausgerichtet, das Genre des Synthwaves aufzugreifen, da diese Musik immer mehr an Beliebtheit gewinnt und sich sukzessiv zu einem Trend entwickelt.

Das Design der App
Das Design der App

Das Design orientiert sich ebenfalls an den ursprünglichen Trends hinsichtlich Farbe und Stil dieses Genres. Dementsprechend finden sich vor allem Neonfarben in der visuellen Aufbereitung der Fontwave-App wieder.

Der „ältere“ Retro-Stil wurde übernommen und in einem technisch neuartigen Medium (App) neu aufbereitet. Diese Kombination aus Alt und Neu, also Retro-Inhalten und moderner Technik, ist nicht nur interessant und aufregend, sondern animiert mitunter zu kreativem Erschaffen.

Das Retro-Design hat das Potenzial, sowohl Menschen derjenigen Generation anzusprechen, die die Entstehung des Synthie-Pop-Genres miterlebt hat als auch die Menschen der jüngeren Generationen, die seit 2010 das Synthwave-Genre miterleben.
Während die visuelle Aufbereitung bei einem Teil der Zielgruppe vielleicht Gefühle der Nostalgie hervorruft, hält sie für einen anderen Teil der Nutzer neue Eindrücke bereit.
So werden nicht nur in Bezug auf Schrift, Musik und Design Brücken zwischen Alt und Neu geschlagen, sondern auch verschiedene Generationen in der Zielgruppe miteinander vereint.

Namens- und Ideenfindung
Namens- und Ideenfindung

Der Begriff Fontwave ist ein Mix aus den Begriffen Font und Synthwave = FONTWAVE

Die Bewegung der Tonwellen soll sowohl in der Bewegung der Schriftart in der App als auch im Namen selbst widergespiegelt werden.

Synthwave kann als eine Hommage an die Film- und Videospielmusik der späten 80er und frühen 90er Jahre sowie die Klänge klassischer analoger Synthesizer aus dem Musikgenre des Synthie-Pops betrachtet werden.

In der Entwicklung der App wurde vor allem Wert darauf gelegt, diesen Retro-Stil mit modernen Produktionstechniken und -trends zu emulieren. Das bedeutet, dass das Alte mit dem Neuen verbunden wird, ohne dabei den ursprünglichen Charakter beider Elemente zu verlieren. Diese Modernisierung der Musik wird ebenfalls reflektiert in der Kreation neuer Schriftarten aus bereits bestehenden.

Farben
Farben

Diese Farben dienten als Inspiration für die Gestaltung der Fontwave-App.

Moodboard
Mood Board
Recherche
Recherche

Audioreaktive Fontmanipulation

Folgende Beispiele habe ich im Internet zu meiner Recherche gefunden.

1. Laser letters

2. 3D audio-reactive typography 

3. Sound reactive typeface

App-Icon Design

Das „W” für Wave ist dargestellt als eine Tonwelle; die geschwungene Darstellung bzw. die Wellenform repräsentiert das Schallereignis eines Tons.

Die Farbgebung des Icons greift die farbliche Gestaltung des Screen-Designs auf.

Durch folgende Effekte ist der Chrom Look des Icons entstanden:

Schein nach innen und außen
Abgeflachte Kanten und Relief
Veränderungen der Konturen
Verlaufsüberlagerung

Es wurden zahlreiche App-Icons erstellt, die sich hinsichtlich ihres Designs unterscheiden. Die Wahl fiel letztendlich auf das nebenstehende Icon.

Dieses Icon hat vor allem dadurch überzeugt, dass es die Komplexität der App und ihrer einzelnen Elemente trotz Einfachheit und Schlichtheit seiner Gestaltung einfängt.

Ein ausgeschriebener Text im Logo wäre redundant und hätte keinen zusätzlichen Nutzen, da im Homescreen des Smartphones grundsätzlich der Name der App unter dem Icon steht.

Der erste Entwurf des Logos, der vor der eigentlichen Ideenfindung für den Stil der App entstand, wurde verworfen.

Das Element der Tonwelle wurde jedoch in die neueren Entwürfe und somit auch in das endgültige Icon übernommen. Auch der Name hat sich im weiteren Gestaltungsprozess verändert. So wurde aus „Fontize“ (Font + Synthesizer) der Name „Fontwave“.

Fontize

Gestaltete Beispiele

App Design

1. App-Start
2. Bright Mode
3. Musikauswahl
4. Fontauswahl
5. Farbe und Style
6. Effekte Overlay
7.1 Effekteinstellungen {Manipulation}
7.2 Effekteinstellungen {Aktivierung}
8. Hintergrund Video
9. Export
1. App-Start
1. App-Start
2. Bright Mode
2. Bright Mode
3. Musikauswahl
3. Musikauswahl
4. Fontauswahl
4. Fontauswahl
5. Farbe und Style
5. Farb- und Styleauswahl
6. Effekte Overlay
6. Effekte Overlay
7.1 Effekteinstellungen {Manipulation}
7.1 Effekteinstellungen Manipulation
7.2 Effekteinstellungen {Aktivierung}
7.2 Effekteinstellungen Aktivierung
8. Hintergrund Video
8. Hintergrund Video
9. Export
9. Export

App Prototyp

Export
Endergebnis aus der App

Poster

Prozess

Altes Poster

Fontwave-poster-724x1024