freiberufler Professionelles Webdesign & UI / UX auf freelance.de

Professionelles Webdesign & UI / UX

offline
  • auf Anfrage
  • 86159 Augsburg
  • Nähe des Wohnortes
  • de  |  en
  • 27.09.2016

Kurzvorstellung

Ich designe und programmiere Applikationen fürs Web.
Eine gute User Experience ist das Ergebnis von gutem Design und durchdachtem Code: Einfach. Sauber. Schnell. Ich unterstütze Sie bei Konzeption, Design, Entwicklung und Optimierung.

Auszug Referenzen (1)

"erstklassige Arbeit, vielen Dank!"
Frontendentwickler
Kundenname anonymisiert
Tätigkeitszeitraum

6/2015 – 6/2016

Tätigkeitsbeschreibung

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.

Eingesetzte Qualifikationen

Mobile Entwicklung (allg.), JavaScript Object Notation (JSON), HTML5, CSS (Cascading Style Sheet), PHP, JavaScript, Responsive Webdesign

Qualifikationen

  • Responsive Webdesign
  • User Interface (UI)

Projekt‐ & Berufserfahrung

Frontendentwickler
Opendi AG, München
6/2015 – 6/2016 (1 Jahr, 1 Monat)
Dienstleistungsbranche
Tätigkeitszeitraum

6/2015 – 6/2016

Tätigkeitsbeschreibung

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.

Eingesetzte Qualifikationen

Mobile Entwicklung (allg.), JavaScript Object Notation (JSON), HTML5, CSS (Cascading Style Sheet), PHP, JavaScript, Responsive Webdesign

Ausbildung

Interaktive Mediensysteme (Mobile Experience)
Master of Arts
2013
Hochschule Augsburg
Wirtschaftsinformatik
Bachelor of Science
2011
Hochschule Augsburg

Über mich

Hi! Mein Name ist [...] und ich komme aus Augsburg in Bayern. Ich bin freiberuflicher Web-Entwickler (hauptsächlich Frontend-Entwickler) / User-Interface-Designer und bin seit 2007 in der Branche tätig.
Egal ob Sie eine neue Website für ihr Unternehmen benötigen oder Hilfe bei komplexen Web-Applikationen, ich bin sicher, dass ich Ihnen dabei behilflich sein kann. Ich habe mich auf saubere Web-Frontends spezialisiert, die sowohl optisch ansprechend sind und eine gute User Experience bieten, als auch eine ausgezeichnete Performance aufweisen. Je nach Projekt liefere ich ihnen maßgeschneiderte Lösungen. Und keine Angst ich bin kein "Ich biete ihnen das Wordpress Super-Mega-Gold-Paket" Entwickler. Ich weiss was ich tue.

Ich freue mich auf ihre Anfragen und Projekte.
Kontaktieren Sie mich ganz unverbindlich und lassen Sie sich persönlich überzeugen.

Viele Grüße aus Augsburg

[...] [...]

Weitere Kenntnisse

HTML / HTML5 / Accessibility
CSS: CSS3 / SASS / LESS / SCSS / BEM / SMACSS
JS: jQuery, minified.js, Gulp, CoffeeScript, Angular
PHP: Twig
Ruby: Ruby on Rails
UI: structure. simplicity, visibility
UX: contextual, human, simple
Responsive Web Design (RWD)
Frontend Performance Optimization
Mobile Web Apps

Persönliche Daten

Sprache
  • Deutsch (Muttersprache)
  • Englisch (Fließend)
Reisebereitschaft
Nähe des Wohnortes
Home-Office
bevorzugt
Profilaufrufe
2548
Alter
36
Berufserfahrung
11 Jahre und 6 Monate (seit 09/2012)

Kontaktdaten

Nur registrierte PREMIUM-Mitglieder von freelance.de können Kontaktdaten einsehen.

Jetzt Mitglied werden