Opdracht #5 – Analyse lo-fi/hi-fi schermontwerp methodes

Wireframing Software

MockFlow

Gebruikt om online in team-verband te wireframen. Wireframes kunnen interactief gemaakt worden.
Alleen geschikt voor het schetsen van pagina’s
Hi-fi
Ontwerp, testen en Prototyping omdat de wireframes interactief gemaakt kunnen worden.

Axure RP

Gebruikt voor het schetsen van wireframes op de desktop en om die snel om te zetten in visuele ontwerpen die interactief zijn.
Geschikt voor het schetsen van pagina’s en voor het documenteren van ontwerpkeuzes
HI-fi
Ontwerp, prototyping, testen omdat de wireframes interactief gemaakt kunnen worden.

Balsamiq Mockups

Gebruikt voor het maken van schetsachtige wireframes, op desktop en online in team-verband. Wireframes kunnen strak en interactief gemaakt worden.
Geschikt voor het schetsen van pagina’s, niet voor documentatie van ontwerpkeuzes
Lo-fi, om te zetten in Hi-fi
Ontwerp en testen, ze onthouden zich van prototyping omdat ze dat niet optimaal vinden.

Conclusie

Persoonlijk zou ik Balsamiq gebruiken omdat het offline en online gebruikt kan worden in teamverband. Het uiterlijk is schetsachtig, en dat is beter om aan de klant te laten zien dan de saaie grijze levenloze standaards wireframes die de meeste programma’s uitkotsen.
Axure is ook mooi omdat het wireframes een aanpasbaar uiterlijk kan geven maar het programma is voor mij te uitgebreid en te duur.

Analoog Wireframen

Schetsen met potlood

Gebruikt voor de eerste stappen in het ontwerpen, het is gemakkelijk en snel. Vooral individueel, maar kan je ook makkelijke aan anderen laten zien.
Geschikt voor het schetsen van pagina’s, het interactief maken is moeilijk omdat je dan dingen moet verschuiven en vastleggen met video. Dat leidt af van het echte proberen.
Zowel hi-fi als lo-fi
Ontwerp, prototyping en testen als je dingen gaat schuiven en vastleggen.

Whiteboard

Gebruikt om ideeën uit te schetsen, dat kan individueel maar het whiteboard is ideaal om met een groep mensen te doen.
Geschikt voor het schetsen van pagina’s, als je het interactief maakt moet je een video maken omdat je dingen dan wil uitvegen.
Zowel hi-fi als lo-fi
Ontwerp, prototyping als je een video maakt en testen eigenlijk niet.

Met stickies

Gebruikt om prototypes te maken waarbij je papiertjes met schetsen op een bord kunt plakken. Je kunt ze verwisselen, verschuiven of weghalen dus kun je testen wat de gebruiker doet met jouw ontwerp.
Hi-fi
Ontwerp, prototyping en testen

Conclusie

Al deze technieken zijn best handig, maar wel in verschillende situaties. Als ik individueel begin maak ik altijd eerst schetsen met potlood, maar in een groep is het handiger om op een whiteboard te werken. Als je je ontwerpen wilt laten testen zijn stickies heel handig omdat je van te voren al je states en transitions kunt vastleggen en zo een scenario door kunt lopen met een gebruiker.

Presenteerbare wireframes

HTML/CSS

Gebruikt om hele websites mee te maken, maar ook handig voor prototypes die als ze goedgekeurd worden meteen klaar zijn voor gebruik.
Geschikt voor het interactief maken van prototypes.
Hi-fi
Prototyping en testen

Photoshop

Gebruikt om pagina’s te ontwerpen, maar je kunt er geen interactieve prototypes mee maken. Dit is vooral handig om de klant een indruk te geven van het product met mockups.
Geschikt voor het ontwerpen van pagina’s
Lo-fi of Hi-fi
Ontwerpen

Fireworks

Gebruikt om pagina’s te ontwerpen en ze vervolgens interactief te maken.
Geschikt voor het ontwerpen van pagina’s en het interactief maken van de ontwerpen om te prototypen
Hi-fi
Ontwerpen, prototyping en testen.

Conclusie

Om ontwerpen te presenteren aan de klant vind ik Photoshop het handigst, je maakt heel snel ontwerpen die er gelikt uit zien en de klant is onder de indruk. Als de klant iets anders wil kun je dingen toch snel aanpassen. Het is niet interactief, maar om de hele applicatie te testen gebruik je gemakkelijker een papieren prototype omdat er daar geen digitale grenzen bij zijn en kleine dingen kun je in html en css uitproberen.
Fireworks vind ik niet fijn omdat het een extra stap tussen photoshop en html/css betekent die heel veel tijd en geld kost. Het is veel gemakkelijker om een papieren prototype te maken en de visuele ontwerpen los te presenteren.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *