Wireframing
Introductie
Wireframing
Introductie
- Ruwe schets
- Snel een idee bespreken belanghebbenden
- Details zijn bijzaak
Introductie
Introductie
Hiërarchie van informatie bepalen
Introductie
content-focused en user-centered werken
Het concept eerst goed moet zitten vooraleer we details toevoegen (design)
=
Introductie
Dus eerst functioneel concept, dan design:
Voordelen
- Snelheid
- Geld besparen (goedkoper)
- Gerichte feedback
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
Papieren prototype + usertesting
=
instant feedback
Het proces: High-fi
= Clickable digitale versie van de papieren versie
+ Copywriting, titels en iconografie
Geen design-beslissingen
Het proces: Hi-fi
Adobe XD Kits
Figma Wireframe files
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
Content
-
Maak je wireframes concreet genoeg
-
Schrijf je navigatie uit, werk inhoudelijk de footer uit, gebruik teksten en titels, zoek genoeg content
Genoeg content
Frame-lengte
-
Je webpagina stopt niet bij je default frame hoogte. Verleng je frame indien nodig
Frame-lengte
Frame-lengte
Annoteer context!
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
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, …
Wireframe ≠ design
Afbeeldingen
-
Laat afbeeldingen achterwege. Logo en social icons zijn 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
Voorbeelden
Wireframing
Copy of Wireframing - lite
By Evelien Rutsaert
