Een mock-up maken (interactieve demo/prototype van je ontwerp) van een iPad of iPod/iPhone app kun je prima doen met online of offline tools op je PC. Een paar van die tools heb ik al eens eerder besproken. Nu bespreek ik een app op de iPad waarmee je een interactieve mock-up kunt maken voor je iPhone of iPad. Er is een aantal apps die dit doen, zo is er iMockups for iPad (zie iTunes) waarmee je zelfs mock-ups van websites kunt maken en Blueprint (zie iTunes). Die laatste app gebruik ik.
Voor het ontwerp van een gewone website gebruik ik liever de online mock-up tools zoals MockFlow omdat het werken met de muis veel preciezer is en omdat het dan eenvoudig is om het ontwerp te delen. Tevens waardeer ik de schermruimte die ik op mijn MacBook Pro heb. Toch wat meer dan op de iPad.
Wat kun je met Blueprint?
Je maakt schermpagina’s aan (keuze uit iPhone of iPad schermformaat, en keuze uit staand of liggend) en die vul je vervolgens met schermelementen zoals navigatiebalken, knoppen, en ook inhoud zoals afbeeldingen of teksten. Vervolgens kun je delen van een scherm actief maken en laten verwijzen naar een volgende pagina. Je kunt veel verschillende soorten acties aan een schermelement koppelen. Zo kun je bijvoorbeeld een knop laten verwijzen naar een volgende pagina. Ook kun je aangeven dat er bij bijvoorbeeld een swipe naar links een nieuwe pagina getoond moet worden. Op het moment dat je het ontwerp wilt testen, speel je het af op je iPad en als ik dan op de knop druk of swipe gaat de app naar een nieuw scherm. Zo simuleer ik de werking van een echte app.
Hoe ziet het eruit?
In bovenstaande schermafdruk is te zien dat ik een liggend iPad scherm heb gemaakt. Ik heb een navigatiebalk onderaan geplaatst en tekst en een afbeelding daarboven. Aan de rechterkant staan alle schermelementen (Controls) die ik in kan zetten. Elk schermelement kan ik nog tot in detail aanpassen (kleur, grootte, gedrag) en zelfs kan ik nieuwe afbeeldingen op knoppen zetten.
Hier is het overzicht te zien van de verschillende pagina’s met daarbij de verbindingen. Een bestaande pagina kun je eenvoudig dupliceren en de links worden daarbij meegenomen.
Hierboven is te zien dat je aan objecten acties (Actions) kunt verbinden. De mogelijkheden zijn erg uitgebreid waardoor de app erg natuurgetrouw afspeelt.
Tenslotte hierboven de zelfde pagina waarbij een object is geselecteerd en het paneel Proporties wordt gebruikt. Je kunt tot op detail elk object qua grafische opmaak aanpassen inclusief alphawaarde (doorzichtigheid).
Plus- en minpunten
Bij het maken van een mock-up tool voor een iPad app zijn de belangrijkste voordelen van een mock-up app op de iPad t.o.v. een mock-up tool op de PC of in je browser:
- Je kopieert eenvoudig screenshots van je iPad naar de app. Dit vind ik soms wel handig omdat je dan niet een hele pagina hoeft te maken. Ik heb dit o.a. gebruikt toen ik in mijn mock-up een agenda nodig had. Die kun je zelf gaan samenstellen uit de voorgedefinieerde objecten of je maakt een screenshot van een standaard agenda en gebruikt die.
- Het is erg handig en prettig om direct het resultaat te bekijken op je echte iPad i.p.v. op een gesimuleerde iPad op je laptop. Hiermee krijg je een beter gevoel of een bepaalde volgorde van handelen of indeling op een pagina prettig is.
De pluspunten:
- snelheid is goed;
- leercurve is betrekkelijk kort;
- het tonen van resultaat (inclusief swipe bewegingen en effecten) werkt erg prettig en bootst de echte app goed na;
- erg veel instelmogelijkheden, vooral grafisch;
- kunt in grafische lagen werken en deze goed ordenen;
- plaatsen objecten gaat goed door magnetische hulplijnen;
- validatieregels voorkomen dat een knop op een plek komt waar dit onmogelijk is in een echte app;
- dupliceren van een pagina werkt perfect;
- lite versie is voldoende uitgebreid om een goede indruk te krijgen;
- export naar PDF werkt goed, gratis viewer is fijn om ontwerp te delen met collega’s en klanten.
De minpunten:
- door aanraakmethodiek is het moeilijk om objecten precies goed te positioneren, hier mis je het precieze van een muis;
- een export naar klikbare demo die op web te delen is zou erg welkom zijn. Nu is het lastig met viewer of statische pdf;
- samenwerking met Dropbox zou handig zijn;
- er is geen helpfunctie en de uitlegfilmpjes op de site zijn maar matig van kwaliteit;
- afbeeldingen die je plaatst zijn niet te roteren en alleen met grote stappen te schalen (25%, 50%, 75% etc.) of handmatig maar dat is niet handig met je vinger. Ook bijsnijden gaat niet.
Eindoordeel
Blueprint is een erg bruikbare en krachtige mock-up tool die ik graag gebruik. Natuurlijk zijn er nog wensen maar het doet wat het belooft te doen op een snelle, prettige manier. De mogelijkheden zijn erg uitgebreid terwijl de bediening niet erg complex is. De app is zijn geld voor mij zeker waard (momenteel kost de app 11,99 euro).
belangrijk thema. Misschien wordt User Experience wel steeds belangrijker! Zelf zit ik deze keer in een panel om te praten over ebooks/ereaders en wat deze (kunnen) betekenen voor de bibliotheek en het onderwijs. Wat vind ik hier eigenlijk van? Gaat de eReader uitsterven. Net als de 
interactiviteit, multimediamogelijkheden, de formaatverschillen en de prijs worden aangepast. Ik zet meer in op apparaten zoals de iPad. Het klopt dat de leesbaarheid slechter is (geen e-ink technologie) maar voor de rest doet zo’n ding veel goed. Eigenlijk is het een betaalbare computer waar je ook nog mee kunt lezen en die direct aanstaat. Deze week toevallig een 
PRINTSCREEN te gebruiken. Of CTRL+PRINTSCREEN. Sommigen gaan dan vervolgens in een grafisch programma zoals PhotoShop of zelfs Paint de schermafdruk wat bijsnijden of wat pijlen toevoegen. Bij de Mac is er standaard een programma aan boord met de naam Schermafbeelding waarmee je hetzelfde kunt doen.
manieren delen van het scherm te nemen etc. en kun je de schermafbeeldingen bewerken en vervolgens op een eenvoudige manier delen. Dit laatste kan door de schermafdruk direct op een webpagina op te slaan. Een mooie gratis service!
behoort tot de mogelijkheden. De editor om vervolgens de afbeeldingen te bewerken is wat uitgebreider dan LittleSnapper en je kunt hiermee bijvoorbeeld van de kartelrandjes maken, 3D kantelen en eenvoudig canvas resizen. Het organiseren is net zo goed geregeld als bij LittleSnapper en een export naar bijvoorbeeld Flickr behoort tot de mogelijkheden.
hoewel het een eenvoudige tool is met de nodige beperkingen, biedt het toch mooie mogelijkheden.
steeds meer online diensten geld kosten. Nu weet ik niet of dit klopt; zelf betaal ik veel voor online services maar bijna altijd is het mogelijk om ook gratis van deze diensten gebruik te maken.
sessies kopen en was het een te dure grap als je af en toe in een opleiding of klantencontact zo’n sessie wilde organiseren. Daarnaast was het vaak nodig om specifieke clientsoftware te installeren op je computer en daar zat niet iedereen op te wachten.
uitgevoerd en via de uitnodigingsmail log je zonder problemen in. Als organisator kun je allerlei functionaliteiten aan of uit zetten, op deze manier richt je een erg functionele omgeving in en dit zorgt voor duidelijkheid bij de gebruikers. Wil je meer gebruikers of wil je bijvoorbeeld het logo van je eigen organisatie gebruiken dan kun je (als je zelf niets op je server wil installeren) voor een 
Als Apple Distinguished Educator en Apple Education Mentor zet ik me in voor een creatief en innovatief gebruik van ICT in leren. 
