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 zonder 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: low-fidelity

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: mid/high-fidelity

Wireframing

Het proces: Mid/High-fi

Mid/High fidelity is een digitale versie van de papieren versie.

 

 

Het proces: Mid/High-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: Mid/High-fi

Je kan zelf wireframes tekenen van scratch in Figma, of je kan ook sneller werken door: 

  • Voorbeelden van reeds gemaakte wireframes uit de community te kopieren en vervolgens aan te passen naar je eigen wens
  • Zelf je wireframe te tekenen en wireframes samen te stellen door herbruikbare componenten uit UI kits te mixen.

Mid/High-fi

Reeds voorgemaakte wireframes uit de community waaruit je kan kopieren:

Het proces: Mid/High-fi

Reeds gemaakte UI kits waaruit je componenten kan gebruiken:

Het proces: Mid/High-fi

Hoe gebruik je nu componenten uit een community file?

1. Voeg de Figma-file toe aan je eigen werkomgeving

 

 

 

2. "publiceer" de library naar jouw team 

Het proces: Mid/High-fi

3. Vervolgens ga je naar je eigen gemaakte FIgma file en maak je de net gepubliceerde library beschikbaar!

Het proces: Mid/High-fi

4. Detach component Zo kan je er vrij mee experimenteren binnen jouw figma file of er een local component van maken.

Het proces: Mid/High-fi

Adobe XD Kits

 

Valkuilen / tips

Wireframing

Is dit een goede wireframe?

Is dit een goede wireframe?

We hebben geen idee over wat deze app gaat, niet bruikbaar! Gebruik echte tekst!

Content

  • Ga opzoek naar genoeg content en functies om je webpaginas te vullen

  • Vermijd pagina’s waarbij er maar 1 regel tekst en een afbeelding staat:

Per typepagina

  • Werk niet elke pagina uit in wireframes

  • Werk wel de typepagina's uit:

    • 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

Maak het concreet

  • Maak je wireframes concreet

  • Schrijf je navigatie uit, werk inhoudelijk de footer uit, gebruik teksten en titels, zoek genoeg content

Frame-lengte

  • Verhoog je frame om scroll toe te laten. 

Viewport-ratio's

Layout grid

  • Begin je werk van op een layout 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 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?

Voorbeelden

Wireframing