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

Es wird so getan als würden digitale Produkte nicht wachsen.1.

Das Problem

Lösungsansätze

SketchApp

Das Problem

Lösungsansätze

SketchApp

„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

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

Unzufriedene Produkt Nutzer

Das Problem

Lösungsansätze

SketchApp

Das Design wird lediglich als Empfehlung angesehen2.

Das Problem

Lösungsansätze

SketchApp

You had a dream.

Das Problem

Lösungsansätze

SketchApp

[Go home home, you’re drunk.]

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

Wut-User

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

Das Problem

Lösungsansätze

SketchApp

Ein Programm von der Sitemap bis zum visuellen Design.

Das Problem

Lösungsansätze

SketchApp

Standardisierte Artboards auf einem Canvas.

Das Problem

Lösungsansätze

SketchApp

Artboard spezifische Grids

Das Problem

Lösungsansätze

SketchApp

Wiederverwendbare Symbole

Das Problem

Lösungsansätze

SketchApp

Wiederverwendbare Text Styles

Das Problem

Lösungsansätze

SketchApp

Animiert zur Erstellung von GUI & Pattern Libraries

Das Problem

Lösungsansätze

SketchApp

Export like a boss.

Das Problem

Lösungsansätze

SketchApp

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

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

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