HALLO!
ICH BIN ROBIN.
DESIGNER, CODER
UND MACHER.

R

Ich bin Robin Spielmann

Ich liebe es Dinge zu kreiren. In meinem Notizbuch, in Design-Tools, in Form von Code oder mit Hilfe meiner Kamera. Meine Arbeit basiert auf klaren, minimalistischen und unkomplizierten Designlösungen. Zudem habe ich eine Leidenschaft für die Typografie, Fahrräder und schöne Stühle.

Fokus

Mein Fokus liegt auf der Kombination aus Ästhetik und Funktionalität – Design und Code.
Ich entwerfe Ideen in meinem Notizbuch, gestalte digitale und analoge Medien, setze Interaktionen und Animationen in Prototypen um und programmiere Websites und Applikationen.

Tools

Notizbuch Sketch Framer.js After Effects

HTML5 CSS3 SASS JavaScript NodeJS Git Gulp

Kontakt

Sag Hallo und schreibe mir eine Mail oder folge mir auf Twitter, Instagram und Dribbble.
Der Inhalt meines bisherigen Lebens ist in komprimierter Form in meinem Lebenslauf zu finden.

media.camp

UI Design Frontend Organisation

Zwischen 2015 und 2017 initialisierte und leitete ich gemeinsam mit drei weiteren Studenten das media.camp – ein Barcamp von Studenten für Studenten. Zu unseren Aufgaben zählten neben der Ak­qui­rie­rung von Supportern und Speakern, das Marketing, der öffentliche Auftritt und die Umsetzung des Barcamps.

01. Das Event

Das media.camp ist ein Barcamp in den Räumlichkeiten der Fakultät Digitale Medien der Hochschule Furtwangen. Im Zuge des media.camp treffen sich einmal im Semester Medienstudenten und externe Speaker aus der freien Wirtschaft und sorgen in Form von Vorträgen und Workshops für einen Wissensaustausch rund um das Thema digitale Medien. Supporter wie t3n und ZEIT Campus sorgen zudem für die passende Leselektüre in Form von kostenlosen Magazinen.

02. Website Relaunch

Neben der Gestaltung von Social-Media-Content und Plakaten für das Barcamp verhalf ich dem media.camp zu einem Neuanstrich der Corporate Identity und sorgte für einen kompletten Relaunch der Website. Hauptaufgabe des neuen Webauftritts war es, die Informationen des Barcamps leicht zugänglich zu gestalten und übersichtlich aufzubereiten. Zudem sollte das Design der Website auf die überarbeitete Corporate Identity angepasst werden und das moderne und leichtgewichtige Gefühl des media.camp repräsentieren.

media.camp Konzept media.camp mockup media.camp Desktop media.camp website

Meaningful Animations

Motion Prototyping UX Bachelorarbeit

"Meaningful Animations - Animationen in Microinteractions im Hinblick auf die Auswirkung der User Experience mobiler Anwendungen“ – Im Zuge meiner Bachelorarbeit erarbeitete ich ein Kriterienkatalog für Meaningful Animations, welcher anschließend in einem Nutzertest mit dem Einsatz von Prototypen ausgewertet wurde.

01. Abstract

In der realen Welt ist es alltäglich und normal, dass Zustandsänderungen durch einen Bewegungsablauf erfolgen. Wird eine Türe geöffnet, geschieht dies nicht abrupt, sondern durch eine Bewegung. In der digitalen Welt spielt sich hingegen das exakte Gegenteil ab. Digitale Anwendungen, wie Websites und mobile Applikationen basieren auf Binärcode, welcher ausschließlich aus Nullen und Einsen besteht. Diesbezüglich werden Zustandsänderungen standardmäßig abrupt und ohne Übergang dargestellt. Mit Hilfe von Animationen können jedoch realistische Bewegungsabläufe, welche der Mensch gewohnt ist, simuliert werden. Das Ziel dieser Bachelorarbeit ist es herauszufinden, ob der Einsatz von Animationen in mobilen Applikationen eine Auswirkung auf deren User Experience hat und wie Animationen eingesetzt und gestaltet werden müssen, damit diese Auswirkung positiv ausfällt. Durch einen Nutzertest wird ein direkter Vergleich zwischen zwei Prototypen, welche sich ausschließlich durch die Verwendung von Animationen unterscheiden, gezogen. Durch die Differenz der Ergebnisse konnte im Zuge dieser Bachelorarbeit die Auswirkung von Animationen auf die UX bestimmt werden.

02. Prototypen

Für den Nutzertest wurden zwei Prototypen mit der Software Framer programmiert. Prototyp A beinhaltet keine Animationen, wohingegen die Microinteractions in Prototyp B durch Meaningful Animations gestützt sind. Die Prototypen bilden eine simple To-Do-Listen Applikation ab und erlauben das hinzufügen, löschen und umsortieren von Listenelemente. Zudem kann ein Seitenmenü ein- und ausgeblendet werden.

Prototyp A Prototyp B meaningful animations Konzept meaningful animations Prototypen

03. Ergebnis

Die Auswertung des Nutzertests ergab, dass 7 der 20 berücksichtigten Testpersonen keinen bewussten Unterschied zwischen Prototyp A und Prototyp B feststellten. Demzufolge konnte durch die Methodik dieses Nutzertests die unbewusste Wahrnehmung von Animationen und deren Auswirkung auf die UX nicht erfasst und somit nicht gemessen werden.

Durch die Ergebnisse der restlichen 13 Testpersonen konnte jedoch ein Unterschied zwischen den getesteten Prototypen festgestellt werden. Sowohl die pragmatische, als auch die hedonische Qualität wurde bei Prototyp B, der Anwendung mit Animationen, besser bewertet. Dass dieser Unterschied zufällig zustande kam, ist auszuschließen, da die Reihenfolge der Prototypen im Nutzertest geändert wurde und der Umfang der Stichprobe ausreicht, um eine wissenschaftlich relevante Aussage treffen zu können.

HOLD – mobile App

Konzeption UI Design Prototyping

Konzeptionelle und visuelle Umsetzung der mobilen Applikation HOLD.
Eine Anwendung, um bewusst der Schnelllebigkeit der Gesellschaft zu entkommen.

01. Konzept

Die App hat einen Sinn: Wie lange schafft es der Nutzer seinen Finger auf dem Display zu halten, ohne ihn abzusetzen? Aufgrund der schnelllebigen und informationsüberfluteten Gesellschaft wird der Nutzer durch diese Anwendung dazu gezwungen, bewusst auszuharren und nichts zu tun. Wer es am längsten durchhält, erzielt den höchsten Highscore!

Die Anwendung besteht ausschließlich aus einer Interaktion. Hält der User seinen Finger auf den start-screen beginnt der Timer zu laufen. Sobald diese Interaktion abgebrochen wird, findet sich der Nutzer auf dem game-over-screen wieder und kann durch die identische Interaktion das Ausharren neu beginnen.

hold Konzept

02. Visual Design

Die Hauptaufgabe des Designs ist es, dem Nutzer ohne ein explizites Onboarding die Funktion und den Ablauf der Anwendung nahe zu bringen. Zudem wird die Interaktion durch eine Puls-Animation, welche um den Finger des Nutzers angezeigt wird, gestützt und gibt diesem direktes Feedback.

hold Konzept

03. Motion & Prototypen

Die Visualisierung der Animationen innerhalb der Anwendungen und interaktive Prototypen befinden sich aktuell in der Umsetzung.

Print Design

Print Layout Typografie

Ausgewählte Arbeiten, welche nach der digitalen Erstellung den Weg auf ein analoges Medium gefunden haben.

01. Kalender-Layout

Folgendes Kalender-Layout repräsentiert ein jährlich wiederkehrendes Projekt, bei dem ich eigene Fotografien in Form eines Kalenders in Druck gebe. Die einzelnen Kalenderblätter werden mit einer metallischen Klammer zusammengehalten.

calendar mockup calendar overview

02. Poster-Layout

Im Rahmen der Vorlesung Typografie 1 der Hochschule Furtwangen mussten diverse Aufgaben rund um die Themen Kalligraphie, Textsatz, Branding und Print umgesetzt werden. Dieses Poster-Design entstand in Zuge dessen und sollte die Vorlesung am Tag der Medien der Fakultät bewerben.

poster mockup

UI Animations

Motion UI Design

Fotografie

Architektur Natur Street

Meine Leidenschaft für geradlinige und minimalistische Gestaltung überträgt sich ebenfalls auf meine Fotografien. Im Folgenden ist eine Auswahl dieser zu sehen.