VLC Media Player

VLC Media Player
Finale Phase / Final stage
Hochschule für Gestaltung
Hochschule für Gestaltung
Schwäbisch Gmünd
Sommersemester 2013
Application Design I
Studenten
Jina Yu
Felix Arnold
Tiziano Lucenzo La Cascia
Dozent
Jürgen Graef
Results from the wireframing
Mit zunehmender Zeit ergaben sich aus dem Wireframing
schrittweise die Tendenzen, die zum endgültigen Erscheinungsbild des Redesigns beigetragen haben. Zunächst setzte man sehr stark auf Klarheit und dem damit verbundenen,
sehr hellen Erscheinungsbild. Das Feedback zur Umsetzung
des Prinzips der Klarheit war zwar positiv, allerdings hoben
sich die für einen Media Player relevanten Bereiche nicht
genug von anderen Bereichen ab. Daher kam man zunächst
zum Ansatz der starken Kontraste, bei dem der obere Bereich sehr dunkel gehalten wurde (und auch hier das VLC
Orange als Highlight-Farbe dient) und sich vom hellen, unteren Bereich deutlich abheben kann.
Parallel dazu kam man zum Entschluss, alle möglichen Einstellungen als Icons darzustellen und den gesamten Media
Player lebendiger erscheinen zu lassen, in dem man die
Deckkraft der oberen Fläche etwas reduziert, wodurch die
zusätzliche Darstellung warmer Farben möglich wird.
Die soziale Komponente wurde beibehalten, allerdings wurde
weiterhin darauf geachtet, allerdings ohne Vernetzung mit
anderen Social Media.
As time went by, all the tendencies of the wireframing that
have contributed to the final appearance of the redesign
became more evident. First, the focus was set on the
clear and bright appearance. Although feedback on the
implementation of the principle of clarity was positive,
however, the relevant areas for a media player did not
contrast enough from less relevant areas. Therefore, we
came to the approach of applying heavy contrasts, by
making the upper area became very dark (where the VLC
orange becomes a good highlight color) so that it clearly
stands out from the lower, bright area. In addition to this, it
was decided to depict all possible settings as icons and let
the entire media player appear vivid, by slightly reducing the
opacity of the top in order to make the additional presentation
of warm colors possible. The social component was kept, but
without the possibility of combining social media to VLC.
Screendesign: Login
Bereits das Login-Fenster zeigt viele neue Elemente , die das Redesign besitzt.
Auch die Tatsache, dass man sich erst anmeldet, ist neu. Ein Element, welches
bereits sehr früh redesignt wurde, ist das VLC Logo. Die Schwierigkeit lag darin, ein
angemessenes Logo zu entwerfen, dass einerseits Wiedererkennungswert hat und
andererseits zur gesamten Designsprache zugeordnet werden kann.
The all-new login-screen shows already many new components of the redesign.
The fact that you login is new. An element that has been redesigned very early, is
the VLC logo. The difficulty was to design an appropriate logo that can easily be
recognized but also attached to the design language of the redesign.
Screendesign: Home Screen
Dies ist das Fenster, dass man direkt nach dem Login sieht. Der obere, aktive Bereich hebt
sich deutlich von den Listen ab und besitzt einerseits eine klare Strukturierung aufgrund der
dünnen Linien, andererseits wirkt der Bereich plastisch aufgrund des dezent gehaltenen
HIntergrunds. Ein neuer Ansatz, den es in den Wirerames noch nicht gab, ist die Playlist-Ansicht mit den entsprechenden Album-Covern, da ein Nutzer ebenso schnell Lieder durch das
Cover erkennt. Dieses Prinzip findet sich auch im Video Modus wieder, da man vor allem
Videodateien aufgrund eines kleinen Screenshots wiedererkennt.
This is the home screen right after the login. The upper active region is structured by thin
lines and seems plastic because of a slightly reduced opacity and a discreet background.
Therefore, it clearly stands out from the lists below. A new approach that did not exist in the
wirerames, was the playlist view with the corresponding album covers, since a user is able
to recognize songs quickly by the cover. This principle is also found in video mode, because
video files are more likely to be recognized by a small screenshots.
Gone
Daddy
Gone
– Gnarls
Barkley
Smiley
Faces
– Gnarls
Barkley
What are you looking for?
Music
St. Elsewhere
Local Playlists
Party Mix 13 songs
Throwback 8 songs
Study Music 19 songs
/ 2:28
1:141:14
/ 3:21
Video
Smiley Faces
Gnarls Barkley
Music Library
Song
Artist
Time Plays Album
Goods
Mates of State
4:48
20
All Day
A-Punk
Vampire Weekend
2:17
18
Vampire Weekend
Goods
Mates of State
4:48
20
All Day
A-Punk
Vampire Weekend
2:17
18
Vampire Weekend
Goods
Mates of State
4:48
20
All Day
A-Punk
Vampire Weekend
2:17
18
Vampire Weekend
Goods
Mates of State
4:48
20
All Day
A-Punk
Vampire Weekend
2:17
18
Vampire Weekend
Goods
Mates of State
4:48
20
All Day
A-Punk
Vampire Weekend
2:17
18
Vampire Weekend
Goods
Mates of State
4:48
20
All Day
A-Punk
Vampire Weekend
2:17
18
Vampire Weekend
Goods
Mates of State
4:48
20
All Day
A-Punk
Vampire Weekend
2:17
18
Vampire Weekend
Screendesign: Audio and video files playing
Durch Doppelklick oder Drag-and-Drop einer Audiodatei auf den aktiven Bereich wird sie
abgespielt. Der Screen zeigt außerdem den Unterschied zwischen den nicht angeklickten
Skip-Buttons und dem Play/Pause-Button, der angeklickt wird. Im Musikmodus und Videomodus unterscheiden sich dadurch, dass die oberste Leiste nach unten rückt. Außerdem
werden dann die zuvor erstellten Video-Playlists angezeigt.
By Double-clicking or drag-and-dropping an audio is activated. The screen also shows the
difference between the non-clicked skip buttons and the play / pause button that is clicked.
In the music mode and video mode are distinguished by the top bar moving downward.
Moreover, the previously created video playlists appear.
1:14 / 3:21
party invite – Bryan
Video Lists
Tarantino Movies 8 movies
Video Library
Song
Artist
Time Plays Album
Goods
Mates of State
4:48
20
All Day
A-Punk
Vampire Weekend
2:17
18
Vampire Weekend
Goods
Mates of State
4:48
20
All Day
A-Punk
Vampire Weekend
2:17
18
Vampire Weekend
Goods
Mates of State
4:48
20
All Day
A-Punk
Vampire Weekend
2:17
18
Vampire Weekend
Goods
Mates of State
4:48
20
All Day
A-Punk
Vampire Weekend
2:17
18
Vampire Weekend
Goods
Mates of State
4:48
20
All Day
A-Punk
Vampire Weekend
2:17
18
Vampire Weekend
Playlist visualization
Ein neuer Ansatz ist die Playlistansicht, die auch im Video-Modus ihre Anwendung findet. Sie ist eines der Charakteristika des neuen Designs von VLC und ist aufgrund der
Tatsache, dass jeweils das Cover voll sichtbar ist, über dem
sich die Maus befindet, besonders dynamisch.
A new approach is the playlist view, which also finds
its application in the video mode. It is one of the
characteristics of the new design of VLC. This is a
vivid-looking approach because of the transitions
and the fact, that only the album cover is fully visible
on which the mouse is pointing at.
Screendesign: Searching a file
Screendesign: The inbox
1:14 / 3:21
party invite – Bryan
Video Lists
Video Library
Song
Artist
Time Plays Album
Goods
Mates of State
4:48
20
All Day
A-Punk
Vampire Weekend
2:17
18
Vampire Weekend
Goods
Mates of State
4:48
20
All Day
A-Punk
Vampire Weekend
2:17
18
Vampire Weekend
Screendesign: Synchronization
Screendesign: Notification on a smartphone
Ein Aspekt, der bei VLC von Anfang an vorhanden war, ist die Streaming-Funktion. Allerdings
wurde sie zeitgemäßer angelegt, so dass nun Smartphones, Tablets, oder andere PCs, Laptops (unabhängig vom Betriebssystem) durch den eigenen Account synchronisiert werden
können.
Um die Sync-Funktion zu verdeutlichen, wurde ein exemplarischer Screen für ein Smartphone konzipiert, wobei das Logo kurz blinkt, sobald die Synchronisation stattgefunden hat.
One aspect that was present from the beginning in VLC, the streaming function. However, it
has been modernized created, so now smartphones, tablets, or other PCs, laptops can be
synchronized by its own account (regardless of operating system).
To illustrate the Sync function, an exemplary screen for a smartphone was designed with the
logo flashes once the synchronization has occurred.
Redesign of the logo
Dies ist, zusammengefasst, die einzelnen Entwürfe
zum Redesign des Logos, bis man zum übernommenen Ansatz gekommen ist. Dabei wurde darauf
geachtet, dass einerseits die bekannte Form beibehalten wird, andererseits aber eine Annäherung zur
entwickelten Designsprache stattfindet. Das Logo
muss sowohl farblos, als auch mit dem VLC Orange
„funktionieren“.
This is the summarized process to the final logoa.
The typical apperance was kept, but adapted to the
created design language. The logo has to work both
colorless and with the typical VLC orange.
Color scheme
Das Farbschema ist auch beim endgültigen Redesign auf ein Minimum reduziert. Der farbige Hintergrund für den oberen Bereich des Fensters ist neu,
die restlichen Farben waren auch in den früheren
Wireframes zu finden.
The variety of colors was kept to a minimum in the
final screen design, too. The background color for
the top of the main screen is new, the other colors
can also befound in the earlier wireframes.
Type face & size
Einer der wichtigsten Faktoren bei der Findung eines
geeigneten Schriftbildes war die gute Lesbarkeit. Außerdem
musste sie einen eigenen „Charakter“ haben, so dass die
Wahl sehr schnell auf die Frutiger bzw. Frutiger Next fiel.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
One of the most important factors in finding an
appropriate typeface that was easy to read. It should also
have its own „character“, so the choice fell rapidly on the
Frutiger Next.
Icons
Die Icons wurden passend zum gesamten Erscheinungsbild
und den gängigen Metaphern und Konventionen erstellt. Die
Kopfhörer, stellvertretend für den Musikmodus, stellen das
einzige Novum dar.
The icons were created in order to match the overall
appearance and the common metaphors and conventions.
The headphones, representing the music mode, provide the
only novelty regarding icons.