Wireframing
UX UI Design 1
Introductie
Wireframing
Introductie
Een ruwe schets van iedere pagina van een digitaal idee.
Introductie
Introductie
Het laat toe om zeer snel een idee te bespreken met andere belanghebbenden zonder de discussie over details te laten gaan
Introductie
Het laat toe om de hierarchie van informatie te bepalen.
Introductie
- Uit informatie architectuur weten we dat content-focused en user-centered moeten werken.
- Dit wilt zeggen dat het concept eerst goed moet zitten vooraleer we details toevoegen (design)
Introductie
Dus eerst functioneel concept, dan design:
De voordelen
Wireframing
Voordeel: Snelheid
De klant waarvoor je een design maakt kan al heel snel ingrijpen en feedback geven over wat de verwachtingen zijn afgestemd met wat je voor ogen hebt als designer.
Voordeel: Snelheid
Je kan in enkele minuten al een idee visualiseren en communiceren onder te gaan focussen op details.
Voordeel: Goedkoop
Je hoeft geen maanden werk te steken in het ontwerpen van een idee. Je krijgt ook veel zelfvertrouwen van de klant wanneer de wireframes reeds goedgekeurd zijn.
Voordeel: Gerichtheid
De feedback van een klant zal relevanter zijn en meer gericht naar wat je naar op zoek naar bent in de eerste fase.
In plaats van: "Is dat groene kleur niet wat donker?"
Krijg je nu: "Is functionaliteit A wel het belangrijkste?"
Het proces
Wireframing
Het proces
Je start vanuit een lage kwaliteit (low fidelity) en itereert tot een hoge kwaliteit (high fidelity).
Het proces
Low-fidelity
High-fidelity
Het proces: Lo-fi
Dit is vaak een ruwe tekening op papier
- Gebruik geen kleur, typografie.
- Beperk uitgeschreven tekst en details.
- Let vooral op hiërarchie: dit is het gemakkelijkste op een mobile wireframe.
Het proces: Lo-fi
Op een website of app kan je steeds scrollen, beperk jezelf dus niet in de hoogte en breedte van 1 pagina.
Annoteer context!
Het proces: Lo-fi
Wanneer je een papieren versie hebt, kan je deze al door een gebruiker heel snel laten testen adhv een papieren prototype.
Het proces: High-fi
High fidelity is een digitale versie van de papieren versie.
Het proces: Hi-fi
Hier kan je al iets meer van copywriting, uitlijning en iconografie in gaan steken.
Maar voor de rest heeft dit voornamelijk dezelfde beperkingen.
Het proces: Hi-fi
Qua tools gebruik je hier best een low-fi Adobe XD UI kit voor!
Het proces: Hi-fi
-
Maak je wireframes concreet
-
Schrijf je navigatie uit, werk inhoudelijk de footer uit, gebruik teksten en titels, zoek genoeg content
Valkuilen / tips
Wireframing
Content
-
Vermijd pagina’s waarbij er maar 1 regel tekst en een afbeelding staat
-
Ga opzoek naar genoeg content en functies om je webpaginas te vullen
Per typepagina
-
Werk niet elke pagina uit in wireframes
-
Werk verschillende typepagina's uit
Typepagina = homepagina, contactpagina, ‘hoe het allemaal is ontstaan’-pagina, producten-lijst-pagina, product-detail-pagina, …
Responsiveness
Wanneer een component of layout responsive verandert qua design, zorg er dan voor dat je hier ook in een wireframe voor voorziet.
Werk hier mobile-first
Genoeg content
Artboard-lengte
-
Je webpagina stopt niet bij je default artboard hoogte. Verleng je artboard indien nodig
Artboard-lengte
Viewport-ratio's
Grid
- Begin je werk van op een grid. Dit zal je veel werk besparen
Opmaak / design
-
Vermijd opmaak in je wireframes.
Wireframes gaan over functionaliteiten, niet over design.
Denk nog niet na over stijl, typografie, kleur, …
Afbeeldingen
-
Laat afbeeldingen achterwege. Logo is een uitzondering hierop
-
Gebruik een vlak met kruis of een default gekleurd vlak dat niet opvalt om een afbeelding voor te stellen
Afbeeldingen
Logische flow
-
Bekijk je wireframes kritisch en vergeet belangrijke functionaliteiten niet.
-
De opbouw moet logisch en doordacht zijn.
-
Durf je vragen stellen bij je wireframes, anders hadden ze ook geen nut.
Logische flow
-
Vergeet geen functionaliteiten, test je wireframes! Zonder verzendknop werkt dit
formulier
niet
What's next?
Wireframing
What's next?
Wireframing
By mathieu_spillebeen_
