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

• Hand-Drawn Wireframe XD UI Kit
• Adobe Spectrum XD plugin
   

Figma Wireframe files 

• Figma Basic wireframe kit
• Wireframe kit @souandremoura

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