Tutoriat - UI Prototyping | Strukturprototypen
-
Upload
dennis-hatwieger -
Category
Design
-
view
48 -
download
1
Transcript of Tutoriat - UI Prototyping | Strukturprototypen
![Page 1: Tutoriat - UI Prototyping | Strukturprototypen](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/1.jpg)
UI PROTOTYPINGUI PROTOTYPING
![Page 2: Tutoriat - UI Prototyping | Strukturprototypen](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/2.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/3.jpg)
Heute : Ablauf
WorkshopIntro / Briefing
Feedback
![Page 4: Tutoriat - UI Prototyping | Strukturprototypen](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/4.jpg)
Heute : Ablauf
WorkshopIntro / Briefing
Feedback
Ideation on Paper
Sketch(ing)Marvel
![Page 5: Tutoriat - UI Prototyping | Strukturprototypen](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/5.jpg)
Strukturprototypen
Heute : Thema
![Page 6: Tutoriat - UI Prototyping | Strukturprototypen](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/6.jpg)
Strukturprototypen
Heute : Thema
![Page 7: Tutoriat - UI Prototyping | Strukturprototypen](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/7.jpg)
Struktur
Web/App XY
![Page 8: Tutoriat - UI Prototyping | Strukturprototypen](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/8.jpg)
Struktur
Web/App XY
Use Case
![Page 9: Tutoriat - UI Prototyping | Strukturprototypen](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/9.jpg)
Workshop : Briefing
![Page 10: Tutoriat - UI Prototyping | Strukturprototypen](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/10.jpg)
Workshop : Briefing
htchhkr
![Page 11: Tutoriat - UI Prototyping | Strukturprototypen](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/11.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/12.jpg)
Workshop : Briefing htchhkr
![Page 13: Tutoriat - UI Prototyping | Strukturprototypen](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/13.jpg)
Workshop : Ideation on Paper
Features notieren
5min
![Page 14: Tutoriat - UI Prototyping | Strukturprototypen](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/14.jpg)
Workshop : Ideation on Paper
Features auf Screens aufteilen
5min
![Page 15: Tutoriat - UI Prototyping | Strukturprototypen](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/15.jpg)
Workshop : Ideation on Paper
Ergebnisse YEAH!
![Page 16: Tutoriat - UI Prototyping | Strukturprototypen](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/16.jpg)
Workshop : Ideation on Paper
Wireframing
10min
![Page 18: Tutoriat - UI Prototyping | Strukturprototypen](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/18.jpg)
Workshop : Sketch
Ergebnisse YEAH!
![Page 19: Tutoriat - UI Prototyping | Strukturprototypen](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/19.jpg)
Workshop : Marvel
Belebung
20min
![Page 20: Tutoriat - UI Prototyping | Strukturprototypen](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/20.jpg)
Workshop : Marvel
Ergebnisse YEAH!
![Page 21: Tutoriat - UI Prototyping | Strukturprototypen](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/21.jpg)
Schluss
Learnings
![Page 22: Tutoriat - UI Prototyping | Strukturprototypen](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/22.jpg)
Schluss
Learnings
Ideation on Paper
Sketch(ing)Marvel
![Page 23: Tutoriat - UI Prototyping | Strukturprototypen](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/23.jpg)
Schluss
Feedback ??
![Page 24: Tutoriat - UI Prototyping | Strukturprototypen](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/24.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/25.jpg)
Next
Pixate
![Page 26: Tutoriat - UI Prototyping | Strukturprototypen](https://reader034.fdocument.pub/reader034/viewer/2022052401/55c4a399bb61eb27578b47dc/html5/thumbnails/26.jpg)
Next
Pixate