Andrea Cavallaro
 

UX & UI

Ich entwickle Projekte durch simultanes Multidevice responsive Design. Dabei nutze ich mehrere Geräte, Plattformen, Techniken und softwaresysteme gleichzeitig und arbeite mich vom kleinstem Atom über moleküle bis zu mastertamplates. Dies überprüfe ich über Prototypen und User Journeys.

 
WebsiteDevicesMockups.jpg
 

USER INTERFACE DESIGN

Bei der Entwicklung einer User Interface Design setze ich viele Methoden gleichzeitig ein, um ein nahtlos skalierbares Ergebnis über alle Geräte hinweg zu erreichen. Hier ein Auszug meiner Mehtoden.

 

Multilayer Fonts

Einem Font-Icon kann nur eine Farbe zugeordnet werden. Entwickelt man jedoch ein Icons als kombinierbare Ebenen, können diese modular im CSS eingesetzt werden. So können wenigen einzelnen Icons vielfältig kombiniert werden und ein dynamisch großer Fundus entstehen.

Responsive Typo

16px sind nicht 16px. Um das Verhalten von Schriften auf den unterschiedlichsten Geräten und Auflösungen zu bestimmen, eignet sich am Besten die Plattform Typecast. Damit kann die Schrift für die verschiedensten Breakpoints ausgeglichen werden.

IconFonts

Icons als SVG Fontset zu generieren ermöglicht einen flexiblen Einsatz und eine automatisierte Aktualisierung über alle Molekühle hinweg.

HiFi Prototype

Am Besten entwickelt man HiFi-Prototypes, um komplexere Teilbereiche in Funktion, Verhalten und Look & Feel zu erleben und sein Konzept zu überprüfen.

Design im Browser

Design im Browser spiegelt am nächsten Online-Plattformen wieder, da es ein programmierter Prototyp ist. Auch wenn hier der Aufwand am Höchsten ist, lohnt es sich häufig, da auch das beste Look & Feel erreicht wird.

Wireframing Prototype

Bereits in einer sehr frühen Phase können Prototypen eingesetzt werden, um sich einen Gesamtüberblick zu verschaffen, Sackgassen in Klickpfaden auszumachen u.v.m.

LowFi Prototype

LowFi Prototype ermöglichen es, schnell aus statischen Bildern ein erstes interaktives Look & Feel zu schaffen. Durch Plattformen wie Marvel lassen sich Prototypes sogar für Watches und Apple TV erstellen.

Device Streaming

Um auf mehreren Plattformen gleichzeitig zu arbeiten, kann man diverse Systeme nutzen wie z.B. Local Host Router, Cloud Sync, Streaming Software und Apps. Dadurch kann eine Grafik immer live auf mehreren Plattformen genutzt werden.

Test Devices

Zur Überprüfung des Designs nutze ich ein Standard-Set aus Testgeräten:

Mac, iPad, iPad Pro, iPhone 5,6,7, Android Smartphone in verschiedenen Größen, Android Tablet, Windows Surface, Apple Watch etc. Die Geräteliste wird immer wieder aktualisiert.

Fileshare

Plattformen wie Frontify oder Zeplin ermöglichen das Teilen, Dokumentieren und Abstimmen von Bildern und Dateien. Versionierungen helfen beim Fortschritt. Somit bleiben alle auf dem aktuellen Stand und die E-Mail Flut mit Anhängen hört auf.

Sketch Atomic

Durch nested Objects und andere Plugins entfaltet Sketch sein Potential in der Entwicklung von Atomic Design.

PS Actions

Lange Arbeitsschritte in der Bildbearbeitung könnnen durch Batches und Actions automatisiert werden. So kann viel Zeit gespart und Standards geschaffen werden.

Lightboxes

Schnell werden sehr viele Bilder für ein Projekt benötigt. Die Abstimmung mit mehreren Beteiligten kann ein aufwändiges Verfahren sein. Abhilfe schaffen Plattformen wie Picdrop, die eine einfache Bildauswahl durch Punktesysteme und Notations ermöglichen.

Eyetracking

Zur Überprüfung von Gestaltungskonzepten können sehr ausgereifte, automatisierte Eyetracking-Algorithmen eingesetzt werden. Dies ermöglicht schon vorab, herauszufinden, ob der zukünftige Betrachter das Produkt oder den CTA wahrnehmen wird.

 
 

USER EXPERIENCE

Hier ein kleiner Auszug von Modellen zur Identifikation von Usern und deren Experiences. Hierzu werden viele "Hard Facts" und "Soft Facts" zusammengetragen, um ein stimmiges Gesamtbild zu schaffen, Verhaltensmuster zu erkennen und belastbare Prognosen zu schaffen.

 
 Eyetracking

Eyetracking

 Device Statistiken

Device Statistiken

 Moodwalls   

Moodwalls

 

 User Journeys

User Journeys

 Milieu Identifikation

Milieu Identifikation

 Maßnahmen Cycle

Maßnahmen Cycle


 
 

Marke u. Strategien

Projekte

Lebenslauf

Fotografie