Unsere Session auf der UIG Frühjahrstagung 2016 in Mannheim

1. Softwarebasierte
Barrieren im
Designprozess
einreissen(mit Sketch App)
The Geekettez. Design Studio and User Experience Consultancy. Mannheim & Berlin

2. *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

3. Das Problem
Lösungsansätze
SketchApp
The Geekettez. Design Studio and User Experience Consultancy. Mannheim & Berlin

4. Das Problem:
Die zwei Klassiker
The Geekettez. Design Studio and User Experience Consultancy. Mannheim & Berlin

5. Es wird so getan als würden
digitale Produkte nicht wachsen.1.
Das Problem
Lösungsansätze
SketchApp

6. Das Problem
Lösungsansätze
SketchApp

7. „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

8. Das Problem
Lösungsansätze
SketchApp

9. 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

10. Unzufriedene Produkt Nutzer
Das Problem
Lösungsansätze
SketchApp

11. Das Design wird lediglich als
Empfehlung angesehen2.
Das Problem
Lösungsansätze
SketchApp

12. You had a dream.
Das Problem
Lösungsansätze
SketchApp

13. [Go home home, you’re drunk.]
Das Problem
Lösungsansätze
SketchApp

14. 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

15. Wut-User
Das Problem
Lösungsansätze
SketchApp

16. 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

17. Konzept & UX
Bestehende Barrieren abschaffen
Die herkömmliche Methode
visuelles Design Frontend Development
-Informationsverlus
Das Problem
Lösungsansätze
SketchApp
Auftraggeber

18. 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)

19. Was macht SketchApp besser?
The Geekettez. Design Studio and User Experience Consultancy. Mannheim & Berlin

20. Das Problem
Lösungsansätze
SketchApp

21. Ein Programm
von der Sitemap
bis zum visuellen
Design.
Das Problem
Lösungsansätze
SketchApp

22. Standardisierte
Artboards auf
einem Canvas.
Das Problem
Lösungsansätze
SketchApp

23. Artboard
spezifische Grids
Das Problem
Lösungsansätze
SketchApp

24. Wiederverwendbare
Symbole
Das Problem
Lösungsansätze
SketchApp

25. Wiederverwendbare
Text Styles
Das Problem
Lösungsansätze
SketchApp

26. Animiert zur
Erstellung von
GUI & Pattern
Libraries
Das Problem
Lösungsansätze
SketchApp

27. Export like a
boss.
Das Problem
Lösungsansätze
SketchApp

28. 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

29. Good-bye Franky!
…die Entwicklung von konsistenten und
skalierbaren Design Leitfäden, die eine
teamübergreifende Sprache sprechen.
Das Problem
Lösungsansätze
SketchApp

30. 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

31. 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…

32. …wir bevorzugen das:
-nicht das!
The Geekettez. Design Studio and User Experience Consultancy. Mannheim & Berlin

33. - Fragen? Kontaktieren Sie uns!
- www.thegeekettez.com

34. NYC - subway system
http://goo.gl/PAq5CQ
http://goo.gl/6qhoL2
http://bradfrost.com/blog/post/interface-inventory/
Movie References
Frankenstein (1931) directed by James Whale
Mel 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 Screens
http://hackingui.com/sketch-design/why-i-moved-to-sketch/
https://designcode.io/sketch-mastering
SketchApp Links
https://www.sketchapp.com/
http://sketchtoolbox.com/
Foxes
http://goo.gl/TgoRJO
http://goo.gl/mB3t0H
SketchApp