26
UI PROTOTYPING UI PROTOTYPING

Tutoriat - UI Prototyping | Strukturprototypen

Embed Size (px)

Citation preview

Page 1: Tutoriat - UI Prototyping | Strukturprototypen

UI PROTOTYPINGUI PROTOTYPING

Page 2: Tutoriat - UI Prototyping | Strukturprototypen

3x ToolWorkshops à 1,5h1. Strukturprototyp mit Papier -> Illustrator/Sketch -> Marvel App2. Termin: UI Animation mit Pixate3. Termin: Prototyping mit QuartzComposer/Origami/Avocado

Termine

2x WorkTogetherZwei Freitage zusammen am Projekt Arbeiten

Page 3: Tutoriat - UI Prototyping | Strukturprototypen

Heute : Ablauf

WorkshopIntro / Briefing

Feedback

Page 4: Tutoriat - UI Prototyping | Strukturprototypen

Heute : Ablauf

WorkshopIntro / Briefing

Feedback

Ideation on Paper

Sketch(ing)Marvel

Page 5: Tutoriat - UI Prototyping | Strukturprototypen

Strukturprototypen

Heute : Thema

Page 6: Tutoriat - UI Prototyping | Strukturprototypen

Strukturprototypen

Heute : Thema

Page 7: Tutoriat - UI Prototyping | Strukturprototypen

Struktur

Web/App XY

Page 8: Tutoriat - UI Prototyping | Strukturprototypen

Struktur

Web/App XY

Use Case

Page 9: Tutoriat - UI Prototyping | Strukturprototypen

Workshop : Briefing

Page 10: Tutoriat - UI Prototyping | Strukturprototypen

Workshop : Briefing

htchhkr

Page 11: Tutoriat - UI Prototyping | Strukturprototypen

Workshop : Briefing htchhkr

Hey,

mit htchhkr planen wir eine App die das Mitfahren verändern soll. Anders als klassische Mitfahrgelegenheitsangebote steht bei uns der ökologische Gedanke im Vordergrund.

Was ihr für uns tun könnt? Wir haben die erste grobe Richtung für die Marke und das Design, suchen jetzt aber noch eine gute Userführung für unsere App. Gerne würden wir von euch die Angebotssuche aus Sicht des Mitfahrers als Usecase sehen.

Unsere grobe Idee für den Flow:

Der User sucht -> bekommt eine Angebots übersicht -> kann sich die konkrete Info anschauen/auswählen -> sieht einen Bestätigungsscreen

In freudiger ErwartungDennis von htchhkr

JPG

download

von: [email protected]

Page 12: Tutoriat - UI Prototyping | Strukturprototypen

Workshop : Briefing htchhkr

Page 13: Tutoriat - UI Prototyping | Strukturprototypen

Workshop : Ideation on Paper

Features notieren

5min

Page 14: Tutoriat - UI Prototyping | Strukturprototypen

Workshop : Ideation on Paper

Features auf Screens aufteilen

5min

Page 15: Tutoriat - UI Prototyping | Strukturprototypen

Workshop : Ideation on Paper

Ergebnisse YEAH!

Page 16: Tutoriat - UI Prototyping | Strukturprototypen

Workshop : Ideation on Paper

Wireframing

10min

Page 17: Tutoriat - UI Prototyping | Strukturprototypen

Workshop : Sketch

Sketchingtinyurl.com/tut-sketch

30min

Page 18: Tutoriat - UI Prototyping | Strukturprototypen

Workshop : Sketch

Ergebnisse YEAH!

Page 19: Tutoriat - UI Prototyping | Strukturprototypen

Workshop : Marvel

Belebung

20min

Page 20: Tutoriat - UI Prototyping | Strukturprototypen

Workshop : Marvel

Ergebnisse YEAH!

Page 21: Tutoriat - UI Prototyping | Strukturprototypen

Schluss

Learnings

Page 22: Tutoriat - UI Prototyping | Strukturprototypen

Schluss

Learnings

Ideation on Paper

Sketch(ing)Marvel

Page 23: Tutoriat - UI Prototyping | Strukturprototypen

Schluss

Feedback ??

Page 24: Tutoriat - UI Prototyping | Strukturprototypen

Schluss

Und jetzt?http://bohemiancoding.com/sketch/learn/https://medium.com/sketch-app

http://www.invisionapp.com/http://www.uxpin.com/features.htmlhttp://www.axure.com/

Page 25: Tutoriat - UI Prototyping | Strukturprototypen

Next

Pixate

Page 26: Tutoriat - UI Prototyping | Strukturprototypen

Next

Pixate