Vorwort

Nachdem ein paar Freunde von mir und ich, unter anderem einen Whatsapp Clone programmiert hatten, entschieden wir uns dafür, eine größere Herausforderung anzugehen.

Da wir regelmäßig Videos und Musik gemeinsam über die Plattform „watch together“ anschauen und diese Seite sowohl von der Bedienung, als auch von der Gestaltung unseren Ansprüchen nicht entsprach, entschieden wir uns dazu, eine eigene, moderne Version zu kreieren.

Anforderungen

Die grundsätzlichen Anforderungen an die Seite, waren ähnlich von Watch Together:

⦁ Videos synchonisiert mit Freunden schauen

⦁ Videos von unterschiedlichen Platformen importieren

⦁ Video suche

⦁ Erstellung von synchronisierten Playlists

⦁ History

⦁ Chat

Wireframing

Die ersten strukturellen Überlegungen. Erste Elemente wurden definiert und in unterschiedliche Bereiche der Website platziert.

Die Entwicklung der einzelnen Komponenten wurde in Form von mehrmaligen Iterationen durchgeführt, bis ich mich dem finalen Design näherte. Viele Designfragen, wurden auch erst während der Frontendentwicklung beantwortet, da uns durch fehlende Erfahrung und Voraussicht, Dinge erst spät auffielen.

Viel Zeit ist in die Entwicklung der Responsiven Darstellung der Benutzeroberfläche geflossen. Wie ist es möglich, die einzelnen Bereiche logisch und benutzerfreundlich sowohl auf Mobile, Tablet und Desktop zu platzieren?

Herausfordernd war ebenfalls die Gestaltung der ausklappbaren Bedienelemente und wie sich dies auf die Ansicht des Videoplayers beziehungsweise des Hauptcontentbereiches auswirkt.

Designentscheidungen

Playlist

Eines unserer Hauptfeatures sollte die Verwendung einer Playlist mit einer Drag & Drop Funktionalität sein. Es ist möglich die Reihenfolge der Videos mit einem einfachen Verschieben zu ändern, hinzuzufügen oder zu entfernen. Dies ermöglicht eine innovative mobile Bedienung, die den Erwartungen des Users entspricht.

Ebenfalls haben wir eine Playlist Control Panel hinzugefügt, mit dem man folgende Befehle ausführen kann:

• das nächste Video abspielen
• das vorherige Video abspielen
• das automatische Abspielen der Playlist pausieren beziehungsweise aktivieren

History

Wir sahen in der Integration einer einfach zu erreichbaren History ein für den User gewünschtes Feature an und entschieden uns dazu automatisch jegliche abgespielte Videos der Historie anzufügen. Die hier angezeigten Videos lassen sich wieder der Hauptplaylist hinzufügen.

Somit wird zum einem dem User ein Rettungsnetz für ein versehentlich weggeklicken des Videos geboten und zum anderen später beigetretenen Usern einen Überblick über die bereits abgespielten Videos zu geben.

Suchergebnisse

Es galt zu entscheiden, wie Suchergebnisse abgespielt, zur Playlist hinzugefügt und wie ein Drag & Drop sich verhält.

• Abspielen: Zur Playlist hinzufügen: Hier galt es ganz grundsätzliche zu beantworten wie sich eine Schaltfläche zum Hinzufügen zur Playlist verhält. Sollte das Video sich innerhalb der Playlist als unteres Video anordnen, oder sollte es als nächstes abzuspielendes Video unterhalb des aktuell laufenden Videos platziert werden.

Contentslider

Durch die Entscheidung das Interface um den Videoplayer fließen zu lassen, waren wir gezwungen unterschiedliche Elemente in Slidern zu platzieren und über Tabnavigationen zugänglich zu machen.

Logo

Die Gestaltung des Logos wurde ebenfalls durch mich durchgeführt, wobei ich dies nicht zu meinen 'Spezialgebieten' zählen würde. Notgedrungen, da ich der einzige Gestalter im Team war, wurde dies trotz allem von mir übernommen und endete in folgenden Entwürfen:

Icons

Animationen

SVG

Da ich bis dato noch nicht all zu viele SVG Animationen erstellt hatte und ich verschiedene Techniken ausprobieren wollte, hatte ich mir als Ziel gesetzt, die Icons auf Curview.net zu animieren. Hierbei entschied ich mich, mit dem Tool Greensock zu arbeiten.

Diese Animationen sollen sowohl als Userfeedback dienen, als auch erklärend unterstützen.

Pixelperfect

Die Illustrationen selber, habe ich zunächst in Adobe Illustrator angelegt, wobei hierbei ein Hauptaugenmerk auf die pixelperfekte Positionierung der Strokes lag, um ein möglichst scharfes Bild auf 72 DPI Monitoren zu erzeugen und Aliasing zu verhindern.

Fazit:

Zukünftig würde ich SVG Animationen mit Lottie.js bzw. Bodymovin direkt in After Effects umsetzten, da die Erstellung ausschließlich mit Code zeitaufwendig und kompliziert ist.

Die grundsätzliche Integration von animierten Icons halte ich für äußerst sinnvoll, ist allerdings mit einem großen Aufwand für einen relativ kleinen Effekt verbunden. Das visuelle Feedback für User vermittelt Responsivität und gibt der Website den Gesamteindruck eines Programms beziehungsweise einer Webapplikation.

Finale Designs

Screendesign eines geöffneten Raums.

Homepage mit Featured Rooms & Playlists.

Settings Übersicht

Tutorialseite für die Erklärung der Bedienoberfläche.

Front End

Einer der größten Herausforderungen war die Programmierung des Designs. Durch zahlreiche Umplatzierungen zwischen Mobiler, Tablet und Desktop Ansicht, war es nötig komplexe Layoutverschiebungen umzusetzen.

Ebenfalls habe ich das erste Mal mit dem Framework Angular gearbeitet und ein tieferes Verständnis für GIT, Projektstrukturen, der Verwendung von Visual Studio Code, sowie Performanceoptimierung im Frontend erhalten.

Performanceoptimierung 

Ein wichtiger Punkt hierbei war die Performanceoptimierung und die damit einhergehenden Codeoptimierungen. Viele der von mir bisher verwendeten Animationstechniken waren für massiv DOM Layoutverschiebungen nicht geeignet.

Insbesondere fielen hierbei Animationen ins Gewicht, welche nicht mit dem CSS Befehl ‚Transition‘ arbeiten und somit einen stetigen Redraw des DOMs zu Folge hat. Hilfreich hierbei war die Verwendung des Google Inspectors, um FPS Einbrüche zu identifizieren und die zugehörigen Animationen zu optimieren.

Angular

Ebenfalls war es mir möglich, durch die Arbeit mit Angular ein größeres Verständnis für die modulare Gestaltung Komponentenbasierter Designs zu gewinnen. Ins besondere die Schnittstelle zwischen aktuellen Designtools und der Frontendentwicklung, spezifisch dem initialen Definieren von Komponenten und deren Übertragung in ein Javascript Framework. Diese Erkenntnisse waren für mich besonders wichtig, da ich mich zukünftig in der Position eines Creative Frontend Developer sehe und es schwierig ist, Einblicke in solch praxisnahen, komplexen und eigenverantwortliche Projekte zu gewinnen.

Fazit

Die Möglichkeit an einem so großen Projekt, federführend sowohl im Design, als auch in der Frontend Entwicklung mitzuarbeiten, hat mir einen großen Einblick in unterschiedlichste Design, sowie Programmiertechniken gegeben. 

Die unterschiedlichen Designdisziplinen, die Verwendung von neuen Technologien und die Umsetzung des Frontends, hat es mir ermöglicht, eine Vision für meine zukünftige berufliche Laufbahn zu schaffen und mein Interesse im Bereich Frontendentwicklung weiter zu festigen bzw. auszubauen.

Ebenfalls hat die Arbeit in einem kleinen Team, von unterschiedlich motivierten Kollegen, viele Erfahrungen zu zukünftigen Ansprüchen an die Arbeitsbedingungen, sowie Kommunikation zwischen den einzelnen Teammitgliedern gegeben.

Dieses Projekt war mit Abstand das lehrreichste und spanneneste Unterfangen, welches ich fernab von Uni und Job machen durfte.

Die aktuelle Liveversion von Curview ist unter https://www.curview.net/ zu finden. Nach meinem Austritt aus dem Team, wurden verschiedene Designentscheidungen getroffen, welche nicht mehr der initialen Vision entsprechen, entsprechend bitte nicht bewerten :P