Post on 06-Apr-2017
Softwarebasierte Barrieren im Designprozess einreissen (mit Sketch App)
The Geekettez. Design Studio and User Experience Consultancy. Mannheim & Berlin
*PS Der Name hat eine Geschichte
Hallo, wir sind The Geekettez [gi:kettz]* :)
Ein Designstudio für digitale Produkte & UX Team of 2
Stefanie Kegel Jennifer Moss
The Geekettez. Design Studio and User Experience Consultancy. Mannheim & Berlin
Das Problem
Lösungsansätze
SketchApp
The Geekettez. Design Studio and User Experience Consultancy. Mannheim & Berlin
Das Problem: Die zwei Klassiker
The Geekettez. Design Studio and User Experience Consultancy. Mannheim & Berlin
„The New York City subway system, a product of three competing independent transit companies, was a tangled web of inconstant signage and confused commuters at its inception.
In 1967, the New York City Transit Authority hired Massimo Vignelli and Bob Noorda (…) to design an improved wayfinding system and standardized signage design – the New York City Transit Authority Graphics Standards Manual.“
Das Problem
Lösungsansätze
SketchApp
It’s aliiiiiive!!
Frankenstein Produkte werden begünstigt durch:
- fehlende Spezifikationen - fehlende Pläne und Visionen
für die Zukunft - lange Zeitspannen zwischen
Releases - große oder wechselnde Teams
Das Problem
Lösungsansätze
SketchApp
It’s aliiiiiive!!
Frankenstein Produkte werden begünstigt durch:
- fehlende Spezifikationen - fehlende Pläne und Visionen
für die Zukunft - lange Zeitspannen zwischen
Releases - große oder wechselnde Teams - Lückenhafte Design Vorlagen - Developer cherry-picking
Das Problem
Lösungsansätze
SketchApp
Mögliche Lösungen für diese Probleme, auf die wir Einfluss nehmen können.
The Geekettez. Design Studio and User Experience Consultancy. Mannheim & Berlin
Konzept & UX
Bestehende Barrieren abschaffen
Die herkömmliche Methode
visuelles Design Frontend Development
-Informationsverlus Das Problem
Lösungsansätze
SketchApp
Auftraggeber
Bestehende Barrieren abschaffen
Ablauf mit Sketch App
-ein gemeinsames Übergabe Dokument: -- visuelles Konzept -- daraus entwickelte statische Screendesigns
Das Problem
Lösungsansätze
SketchApp
Frontend DevelopmentKonzept & UX und visuelles Design
-zusätzlich als Export möglich: -- CSS Angaben von Symbolen, Elementen von Textstilen -- UI Elemente (verlustfrei in verschiedenen Auflösungen)
Was macht SketchApp besser?
The Geekettez. Design Studio and User Experience Consultancy. Mannheim & Berlin
Hilfreiche Plugins & Tools
Prototyping
InVision klickbare Prototypen
Framer JS high-def Interaction & Animations Prototypen
Testing Tools
Sketch Mirror & Live Share eingebaute Tools, um Designs auf unterschiedlichen Endgeräten testen zu können.
Design Übergabe & Dokumentation
Zeplin synchronisierbare Styleguides
Sketch Notebook einfache Annotationen
Das Problem
Lösungsansätze
SketchApp
Good-bye Franky!
…die Entwicklung von konsistenten und skalierbaren Design Leitfäden, die eine teamübergreifende Sprache sprechen.
Das Problem
Lösungsansätze
SketchApp
Pros & cons von SketchApp
-- günstige Anschaffung -- schnell, schlank, vektorbasiert -- multiple Export Formate -- große Entwickler Community und gute Plugins -- live Preview auf unterschiedlichen Geräten -- Abbildung eines Design Prozesses in einem einzigen Dokument und
- - damit eine Verminderung des Informations Verlustes - - weniger Dateien Chaos
SketchApp bisher nur für Mac OS erhältlich
Das Problem
Lösungsansätze
SketchApp
The Geekettez. Design Studio and User Experience Consultancy. Mannheim & Berlin
Wir hoffen, wir konnten Sie mit diesem Vortrag ermuntern, immer nach neuen Tools & auch Methoden Ausschau zu halten, die unterstützend auf die Kommunikation und auf die Optimierung von Prozessen wirken und hilfreich bei der Bewältigung eventuell auftretender Hürden sind, denn…
…wir bevorzugen das:
-nicht das!
The Geekettez. Design Studio and User Experience Consultancy. Mannheim & Berlin
NYC - subway system http://goo.gl/PAq5CQ
http://goo.gl/6qhoL2http://bradfrost.com/blog/post/interface-inventory/
Movie References Frankenstein (1931) directed by James WhaleMel Brooks' Spaceballs (1987)
Architecture images http://goo.gl/mYy56o
http://uglybelgianhouses.tumblr.com/
Links & Bilder Credits
The Geekettez. Design Studio and User Experience Consultancy. Mannheim & Berlin
Chinese Whisper http://www.avideon.com/business_process_review/
Das Problem Lösungsansätze
SketchApp Screenshttp://hackingui.com/sketch-design/why-i-moved-to-sketch/https://designcode.io/sketch-mastering
SketchApp Linkshttps://www.sketchapp.com/http://sketchtoolbox.com/
Foxeshttp://goo.gl/TgoRJOhttp://goo.gl/mB3t0H
SketchApp