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:

1. 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.
2. 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).