Interaction Design 1.4: Wireframes
-
Upload
ferry-den-dopper -
Category
Design
-
view
110 -
download
2
description
Transcript of Interaction Design 1.4: Wireframes
![Page 1: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/1.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Wireframes
De blauwdruk van het systeem
![Page 2: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/2.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
![Page 3: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/3.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Waarvan maak je wireframes?
Pagina’s en templates
Componenten
![Page 4: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/4.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Low-fidelity
![Page 5: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/5.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
High-fidelity
![Page 6: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/6.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Prototype
Oxxio Pakkettest
![Page 7: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/7.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Wat is de juiste vorm?
It depends!
Wat is het doel?: brainstorm, concept visualiseren of ontwerp documenteren.
Wie is de ontvanger?: jijzelf, developer die iedere dag naast je zit of team van een ander bedrijf.
… oftewel de context!
![Page 8: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/8.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
![Page 9: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/9.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
![Page 10: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/10.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Verschil wireframes - eindproduct
Klikbaar prototype
Echte content
Functioneel kleurgebruik
Kan huisstijl in grove lijnen
volgen
![Page 11: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/11.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Voordelen van wireframes
Snelle, gemakkelijke, goedkope manier om interface-concepten te presenteren
Focus op logica, gedrag en functionaliteit Snelle iteraties van ontwerpconcepten
![Page 12: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/12.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Uitdagingen voor wireframes
Realisme: Past de content wel? Past het wel op het scherm?
Dynamiek: Met HTML / CSS / Javascript kun je pagina’s heel dynamisch maken, maar hoe communiceer je dat op een platte tekening?
Zorgen: Klanten maken zich snel zorgen over van alles en willen dus zo goed mogelijk zien hoe ‘het’ wordt. Maar is het bijna ondoenlijk om al die vragen te beantwoorden.
![Page 13: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/13.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Wat wel, wat niet?
Wel:• Welke typen informatie komen er op de pagina?• Wat is de relatieve prioriteit van de verschillende
pagina-onderdelen? Niet:
• Hoe komt de content er exact uit te zien?• Waar ligt de ‘vouw’?• Hoeveel tekens mag ieder veld bevatten?• Hoeveel pixels mag dit plaatje worden?• Kunnen we deze blokken mooier uitlijnen?• Kun je die hoeken rond maken?
Proberen deze
vragen te
beantwoorden, leidt
af van het
hoofddoel van
wireframes.
![Page 14: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/14.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Gereedschapskist
Basis-gereedschap
![Page 15: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/15.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Software
Ideaal: Axure Balsamiq
Minder ideaal: Visio / Omnigraffle Illustrator / Fireworks / Photoshop
Verre van ideaal: Powerpoint / Word etc.
![Page 16: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/16.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Anatomie van een wireframe
Lagen:1. Vlakken2. Plaatsing (lay-out) van functionele
elementen3. Invulling van functionele elementen4. Labeling5. Content6. Grid7. Esthetische elementen
![Page 17: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/17.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Laag 1: Vlakken (website)
![Page 18: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/18.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Laag 1: Vlakken (KvK.nl homepage)
![Page 19: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/19.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Laag 1: Vlakken (Android TV-gids app)
![Page 20: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/20.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Oefening (gezamenlijk)
• Eerst laptops dicht! Pak pen en papier.
• Maak een wireframe van MS Outlook (of een ander e-mailprogramma)• Welke functionele elementen zijn er? • Start met een vlakkenindeling
![Page 21: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/21.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Laag 1: Vlakken (Outlook)
![Page 22: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/22.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Oefening (gezamenlijk)
• Maak een wireframe van MS Outlook (of een ander e-mailprogramma)• 2. Geef de vlakken een grove invulling
![Page 23: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/23.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Stap 2
![Page 24: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/24.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Stap 3
![Page 25: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/25.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Stap 4
![Page 26: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/26.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Wat communiceert een wireframe?
Waar je bent; Wat je kunt doen / waar je naartoe kunt; Liefst ook waar je vandaan komt; Wat belangrijker is dan het andere (visuele
hiërarchie); Wat bij elkaar hoort (clustering); Hoe de elementen zich gedragen.
![Page 27: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/27.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Visuele hiërarchie
![Page 28: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/28.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Relatief gewicht
Hoe hoger op de pagina, hoe belangrijker.
Maar ook:Hoe groter het vlak, hoe belangrijker (zelfs als het iets lager staat)
Waar ligt het omslagpunt?
![Page 29: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/29.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Prioriteren door stijlen gebruiken
![Page 30: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/30.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Clustering: Gestalt principes
Sommige lay-out eigenschappen zitten ingebakken in onze visuele systemen: Proximity Similarity Continuity Closure
![Page 31: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/31.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Proximity
![Page 32: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/32.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Proximity
![Page 33: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/33.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Similarity
![Page 34: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/34.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Similarity
![Page 35: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/35.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Continuity
![Page 36: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/36.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Continuity
![Page 37: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/37.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Closure
![Page 38: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/38.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Closure
![Page 39: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/39.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
![Page 40: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/40.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Gedrag van elementen
![Page 41: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/41.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Dummy content of echte content?
![Page 42: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/42.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
(960) Grid?
![Page 43: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/43.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Documenteren met annotaties
1
2
3
4
5
6
1 Ribbon navigatie
7
2 Snel-links naar favoriete mappen
3 Klik op [+] om map open te klikken
4 Switch tussen e-mail, kalender, contacten en taken.
5 Zoek binnen de geselecteerde map
6 Klik vlag aan om e-mail te markeren als actiepunt
7 Foto van afzender (indien beschikbaar in adresboek)
![Page 44: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/44.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Documenteren met annotaties
![Page 45: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/45.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Maar hoe je ook eindigt…
Begin met schetsen!
![Page 46: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/46.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Verder met je opdracht
• Ontwerp wireframes Ter overdracht, dus high fidelity met annotaties, maar start met schetsen!
Complete opdracht inleveren: week 10.(Zorg ervoor dat je volgende week min. 80% klaar bent, want er volgt nog een opdracht!)
![Page 47: Interaction Design 1.4: Wireframes](https://reader033.fdocument.pub/reader033/viewer/2022061300/54c7e98c4a79593b328b45a3/html5/thumbnails/47.jpg)
Interaction Design 101 Vragen of feedback? @ferrydendopper
Volgende week
• Masterclass Axure RPom (nog) verder te gaan met wireframe’s