Interaction Design 1.4: Wireframes

Interaction Design 101 Vragen of feedback? @ferrydendopper

Wireframes

De blauwdruk van het systeem

Waarvan maak je wireframes?

Pagina’s en templates

Componenten

Low-fidelity

High-fidelity

Prototype

Oxxio Pakkettest

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!

Verschil wireframes - eindproduct

Klikbaar prototype

Echte content

Functioneel kleurgebruik

Kan huisstijl in grove lijnen

volgen

Voordelen van wireframes

Snelle, gemakkelijke, goedkope manier om interface-concepten te presenteren

Focus op logica, gedrag en functionaliteit Snelle iteraties van ontwerpconcepten

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.

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.

Gereedschapskist

Basis-gereedschap

Software

Ideaal: Axure Balsamiq

Minder ideaal: Visio / Omnigraffle Illustrator / Fireworks / Photoshop

Verre van ideaal: Powerpoint / Word etc.

Anatomie van een wireframe

Lagen:1. Vlakken2. Plaatsing (lay-out) van functionele

elementen3. Invulling van functionele elementen4. Labeling5. Content6. Grid7. Esthetische elementen

Laag 1: Vlakken (website)

Laag 1: Vlakken (KvK.nl homepage)

Laag 1: Vlakken (Android TV-gids app)

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

Laag 1: Vlakken (Outlook)

Oefening (gezamenlijk)

• Maak een wireframe van MS Outlook (of een ander e-mailprogramma)• 2. Geef de vlakken een grove invulling

Stap 2

Stap 3

Stap 4

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.

Visuele hiërarchie

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?

Prioriteren door stijlen gebruiken

Clustering: Gestalt principes

Sommige lay-out eigenschappen zitten ingebakken in onze visuele systemen: Proximity Similarity Continuity Closure

Proximity

Similarity

Continuity

Closure

Gedrag van elementen

Dummy content of echte content?

(960) Grid?

Documenteren met annotaties

1 Ribbon navigatie

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)

Documenteren met annotaties

Maar hoe je ook eindigt…

Begin met schetsen!

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!)

Volgende week

• Masterclass Axure RPom (nog) verder te gaan met wireframe’s

Interaction Design 1.4: Wireframes

Design

Interaction Design 1.5: Wireframes masterclass

Wireframes - Uitwerkingen

iApple wireframes

BEEFriend wireframes

Sweeteeth Wireframes

Interaction Design with Wireframes

WPCC Wireframes

Celebrations.com Wireframes

sample wireframes

Screen Designcmiscreendesign.pbworks.com/f/screendesign_werkboek.v0.6.pdf · een volledige set interaction design deliverables (persona, scenario, flows, wireframes) en brand guide-

Flux Wireframes

Wireframes & Mockups

Wireframes II

Wireframes II. Typical Wireframes

Select interaction design wireframes from Nike Store redesign

Wireframes (PDF)

THIG Wireframes

KijkMijnHuis Wireframes

SEB wireframes

Donator WireFrames