Professionelles Webdesign & UI / UX

6/2015 – 6/2016

Projekt 1:

Das Stadtbranchenbuch der Opendi AG aus München ist ein Firmenverzeichnis mit täglich mehreren Millionen
Zugriffen und über 5.500.000 Einträgen. Mein Auftrag war es, das in die Jahre gekommene Frontend auf einen Aktuellen Stand zu bringen. Das Erscheinungsbild wurde nur minimal auf Google‘s Material-Design angepasst.
Hierzu wurde das komplette CSS basierend auf dem BEM-Prinzip (Block Element Modifier) neu geschrieben.
Die Seite verwendet ein eigens entwickeltes PHP-Framework. Für das Frontend wurde das generierte HTML neu strukturiert und verfeinert. Als Template-Engine wurde hierbei Twig verwendet. Um das UI an Google‘s Material Design anzupassen wurde MUI eingesetzt, da es deutlich kompakter war und alle Anforderungen erfüllte. Beim JavaScript wurde bewusst auf jQuery verzichtet, da es für die benötigten Funktionen viel zu umfangreich und zu ‚aufgebläht‘ ist. Stattdessen wurde minified.js verwendet, da dieses kompakte JS-Framework bei nur ~5KB einen jQuery-ähnlichen Funktionsumfang bietet (DOM manipulation, animation, events, HTTP requests).
Zusätzlich zum Refactoring sollte die Performace der Seite deutlich gesteigert werden. Die Performanceoptimierung des Frontends war ebenfalls Teil meiner Aufgaben. Grundsätzlich wurden alle Bilddateien optimiert und auf ein eigenes CDN ausgelagert. Als Task-Runner kam Gulp zum Einsatz. Für die Bildoptimierung wurde ein npm-package für Gulp verwendet. Mit Gulp wurde auch das CSS und JS nochmals vor jedem Deployment optimiert.

Projekt 2:

Cinesearch.com ist eine neue Kino-Plattform, die den Besuchern standortbasierte Dienste, wie Spielzeiten und die nächstgelegenen Kinos, samt Infos, Bildern und Trailern bietet. Zusätzlich ist es noch eine Filmdatenbank, mit umfangreichen Infos über Filme, Schauspieler und vielem mehr. Bei Cinesearch war ich für das komplette Frontend und die Umsetzung und Anpassung des Designs zuständig. Dazu habe ich zuerst einen interaktiven Styleguide erstellt, der die spätere Umsetzung der Seite für alle Teammitglieder deutlich vereinfachte. Zudem war ich dafür verantwortlich, eine gute Frontend-Performance der Seite zu gewährleisten.

Cinesearch.com basiert auf einer umfangreichen Film- & Kino-Datenbank und einer RESTful API. Als Template-Engine wurde Twig verwendet. Als Build-System wurde Gulp.js verwendet. Das CSS wurde von Grund auf neu geschrieben (SASS), samt eigenem Grid-System. Das Grid-System ist teilweise %-basiert und verwendet zudem Flexbox als Alternative/Erweiterung. Dabei wurde das Class-Naming and die BEM-Methode angelehnt, um eine flexible, modulare und übersichtliche Struktur für die Styles der Seite zu schaffen. Aufgrund der mittlerweile guten Browserunterstützung wurde auf der kompletten Seite auf Icon-Fonts verzichtet und aus Gründen der Performance, Flexibilität und Gestaltung auf SVGs gesetzt.
Für die Trailer wird das HTML-Video-Tag genutzt in Kombination mit Plyr.io und einer Erweiterung für HLS bzw. DASH-Streaming, um den Traffic sowohl für den Besucher, als auch für die Server zu optmieren.
All diese Maßnahmen garantieren schnelle Ladezeiten und dadurch mehr Spaß beim Besuchen der Seite.
Das UI wurde so designt, dass die Bedienung der Seite extrem einfach und übersichtlich ist, was wiederum eine gute UX mit sich bringt.

Mobile Application Development, Json, HTML5, CSS (Cascading Style Sheet), PHP, JavaScript, Responsive Webdesign