Digital Prototyping

Voordat de bouw van een website, een web app, mobiele app of andersoortige software begint is het handig om eerst een klikbaar digitaal prototype te maken. Daar hoeft niet alle functionaliteit per se werkend in (zoals bijvoorbeeld locatie, push alerts, databases en camera). Maar het visuele ontwerp is wel al helemaal zichtbaar, en je kan er doorheen klikken. Het prototype kan geheel beginnen op papier, zodat je makkelijk en snel te kan wijzigen, aan kan vullen en het al kan testen met testpersonen uit je doelgroep. Als het op papier in een gevorderd stadium is beland (of al veel eerder) kan je het visuele design gaan toevoegen. Het digitale klikbare prototype is dan de volgende stap.

Visueel ontwerp

De ontwerpschetsen kan je maken in Photoshop of Illustrator of in wat voor andere software dan ook. Maar de beste tip hierbij is om Sketch te gebruiken (99,- in de App Store, maar er is ook 50% onderwijskorting). Dat programma is specifiek gemaakt voor dit doel, combineert vector met pixel en is daarom beter en handiger dan Photoshop. Ook kan je het project direct op je smartphone zien via een “mirror”-functie. Je kan direct exporteren, o.a. naar prototyping tools zoals Marvel (via Dropbox of via een plugin) en Invision (via Dropbox). Zie de tools hieronder.

Met Photoshop CC 2015 kun je ook je ontwerp live op je mobiel / tablet bekijken, met Adobe Preview CC, een gratis download in de App Store. Zie dit artikel.

Het gaat erom dat het visuele ontwerp duidelijk wordt, in afzonderlijke schermen. Logo, kleur, typografie, vormgeving van het menu en van alle schermen, beeldgebruik (dus wat voor beeldmateriaal wordt er gebruikt, waar staat het, hoe groot is het, wat gebeurt er met kleur, hoe zijn de uitsnedes).

Eventueel ook al de animaties, in de interface bijvoorbeeld. Animaties zijn niet alleen versierend maar vaak ook heel functioneel: denk aan de subtiele finesses op IOS zoals swipe naar beneden voor een update. Dat zijn vaak uitvindingen geweest van onze eigen Bas Ording (ex-HKU).

De losse schermen kun je klikbaar maken met speciaal ontwikkelde tools, met HTML, met pdf’s uit Indesign of op andere manieren:

Prototyping tools

Er zijn veel tools te vinden – ook vaak gratis – om het prototype digitaal en klikbaar te maken. Het is belangrijk, omdat zo de klikstroom duidelijk wordt, zodat je de usability van de interface kunt zien en die kan laten testen. Hier een lijst met tools, waarbij Marvel en Invision supertips zijn, beide gratis:
marvelapp.com
appsketcher.com
invisionapp.com

justinmind.com
proto.io
fluidui.com
flinto.com
popapp.in
balsamic

Zie ook dit artikel met een vergelijking en lees vooral ook dit artikel. Het kan ook direct in HTML, eventueel met behulp van Dreamweaver. In HTML kan je volledig werkende web apps maken, maar je kan ook alleen de schermen als “platte plaatjes” in verder lege pagina’s zetten, zonder functionaliteit dus, en de plaatjes alleen klikbaar maken. Dat is ook een klikbaar prototype. Kan ook met apps als Firefly.

Als je prototype een webpagina is, dan is het handig om deze toe te voegen aan het homescreen (op IOS via de knop midden onder). Dan ziet het er ook echt uit als een App, met icoon op het homescreen, die daarna fullscreen starte. Bij Invasion zit zelfs ook een mooi scriptje om dat te doen (op IOS).

Als je alleen een onderdeel van een plaatje klikbaar wil maken, en niet het geheel, dan kan dat met Javascript en hotspots (standaard functie in Dreamweaver) of door het plaatje op te delen in stukjes die apart klikbaar moeten zijn. De stukjes beeld kan je naast- en onder elkaar zetten, tegen elkaar aan.

Lees de tips onderaan de pagina ajsites.nl/responsive/ (vanaf het stukje Web App) voor full screen HTML op IOS. Vaak kan een werkende web app een echte App al vervangen, of kan de web app de basis zijn voor een echte App.  Een echte App moet uiteindelijk in de App Store van Apple terechtkomen, en dat kan alleen met een developer account, en/of in de Google Play Store.

Je kan een klikbaar prototype eventueel ook maken in Indesign, met een klikbare PDF. Elk element op een pagina kun je eenvoudig klikbaar maken. De PDF kan je full-screen tonen in Adobe Reader, met Ctrl-L. Op IOS kun je een PDF fullscreen tonen door erop te tappen vanuit Dropbox.

Geef een reactie

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