Erster Teil des UI Prototypen Tutoriates im Master Interaction Design an der Hochschule Magdeburg

1. UI PROTOTYPINGUI PROTOTYPING

2. 3x ToolWorkshops à 1,5h
1. Strukturprototyp mit Papier -> Illustrator/Sketch -> Marvel App
2. Termin: UI Animation mit Pixate
3. Termin: Prototyping mit QuartzComposer/Origami/Avocado
Termine
2x WorkTogether
Zwei Freitage zusammen am Projekt Arbeiten

3. Heute : Ablauf
Workshop
Intro /
Briefing
Feed
back

4. Heute : Ablauf
Workshop
Intro /
Briefing
Feed
back
Ideation on Paper
Sketch(ing)
Marvel

5. Strukturprototypen
Heute : Thema

6. Strukturprototypen
Heute : Thema

7. Struktur
Web/App XY

8. Struktur
Web/App XY
Use Case

9. Workshop : Briefing

10. Workshop : Briefing
htchhkr

11. 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 Erwartung
Dennis von htchhkr
JPG
download
von: dnns@htchhkr.io

12. Workshop : Briefing
htchhkr

13. Workshop : Ideation on Paper
Features notieren
5min

14. Workshop : Ideation on Paper
Features auf Screens aufteilen
5min

15. Workshop : Ideation on Paper
Ergebnisse YEAH!

16. Workshop : Ideation on Paper
Wireframing
10min

17. Workshop : Sketch
Sketching
tinyurl.com/tut-sketch
30min

18. Workshop : Sketch
Ergebnisse YEAH!

19. Workshop : Marvel
Belebung
20min

20. Workshop : Marvel
Ergebnisse YEAH!

21. Schluss
Learnings

22. Schluss
Learnings
Ideation on Paper
Sketch(ing)Marvel

23. Schluss
Feedback
??

24. Schluss
Und jetzt?
http://bohemiancoding.com/sketch/learn/
https://medium.com/sketch-app
http://www.invisionapp.com/
http://www.uxpin.com/features.html
http://www.axure.com/

25. Next
Pixate

26. Next
Pixate