Elisabeth Scheer Portfolio Interaktionsgestaltung


01 _ Start

02 _ Analyse

Key Findings

Smarte Verknüpfung von  Einkauf und Finanzen

Neue Funktionen: Umfragefunktion wird eingeführt

Verzicht auf
überflüssige Elemente wie Pinnwand und Chat

Neue Hauptkategorien: Finanzen, Haushalt,
Umfrage, Einkauf

03 _ Synthese

Design Principles

praktisch + unterstützend

intuitiv +
strukturiert

fair +
verbindend

harmonisch +
positiv

hilft bei der Organisation des gemeinsamen Haushalts
und steht zur Seite bei der Bewältigung des Alltags

sorgt für eine inhaltliche Übersicht über die
anstehenden Aufgaben
und bietet die Möglichkeit intuitiv innerhalb der
Anwendung zu handeln

fördert die Gleichberechtigung und sorgt für eine faire Aufgabenaufteilung
und Transparenz

vereinfacht die Kommunikation
und stärkt die zwischenmenschlichen Beziehungen

04 _ Konzept

Wireframes
Wireframes

05 _ Visual Design

Der letzte Teil des Prozesses beschäftigt sich mit der Ausgestaltung der App in den Bereichen: Farbe, Typografie, Iconstil, Illustration, Grid und Layout. Die Entscheidungen in diesem Schritt gründen auf den zuvor gewonnenen Erkenntnissen aus den Phasen Analyse, Synthese und Konzept. Insbesondere die Design Principles dienen als Wegweiser bei der Erarbeitung des Visual Designs.

appli-mockup_1170x624

Positive Sprache

ermutigt und motiviert den Benutzer
seinen Aufgaben nachzukommen und
verbreitet Harmonie

sprache

Navigation

Die Tap-Bar-Navigation lässt den Benutzer leicht zwischen den Hauptkategorien Home, Finance, Cleaning, Shopping und Survey navigieren.

navi

Farben

Die Komplementärfarben Gelb und Blau spiegeln die unterschiedlichem Charaktere wider, die es in der WG gibt. Gelb als Highlightfarbe führt den Blick und zeigt wichtige Aktionsmöglichkeiten an z. B. den floating Actionbutton. Die klassischen Signalfarben Rot und Grün markieren Dinge, die erledigt wurden oder im Verzug sind. 

colores

Typografie

Acumin ist eine vielseitige serifenlose Schriftfamilie, die von Robert Slimbach entworfen wurde und auf eine ausgewogene und rationale Qualität abzielt. Solide neo-grotesk, eignet sie sich  hervorragend für die Darstellung auf dem Display.

from: https://acumin.typekit.com/

 

fonti

Illustrationen

Jede Kategorie wird durch passende Illustrationen von Alltagsthemen visulalisiert. Die Illustrationen verleihen der App einen persönlichen und freundlichen Charakter.

UI Controls

Der floating action button ist das zentrale UI-Element, mit dessen Hilfe Listen verwaltet und Aufgaben oder Umfragen hinzugefügt werden können.

folating

Die Listenelemente lassen sich durch Swipen nach links oder rechts weiter bearbeiten.

Die Subnavigation filtert die Inhalte.

Das Actionsheet erscheint bei Eintragungen oder Benachrichtigungen.

Meine Aufgaben
Analyse
Research
Konzept
Wireframing
Visual Design
Prototyping
Konzeptvisualisierung

Tools
Figma
Illustrator
Principle
After Effects
Premiere