Prototyping on Paper

Zelf een iPhone-app ontwerpen met iPhone mockup schetstools

Zelf een iPhone of iPad app ontwerpen begint met schetsen. Met POP, iPhone Mockup en de andere schetstools die we in dit artikel bespreken teken je de interface van je eigen iOS app.

iPhone wireframes maken

Er zijn heel wat mensen die plannen hebben om ooit een iPhone-app te maken. Om je ideeën goed te kunnen communiceren is is het slim om alvast een prototype, wireframe of mockup te maken. Dit houdt in dat je een aantal schetsen maakt van de interface waarmee mensen door de app zullen navigeren. Zo krijg je meteen al een idee hoeveel verschillende schermen je nodig hebt en hoe lastig het gaat worden om bepaalde info op overzichtelijk op het scherm te tonen. Door een aantal schetsen te maken van de interface, kun je anderen makkelijker uitleggen hoe de app werkt. In deze tip bespreken we apps en websites waarmee je je iPhone-mockup kunt maken.

iCulture adviseert: POP

POP (Prototyping on Paper) is een gratis app, waarbij je je idee eerst op papier uitwerkt. Daarna maak je een foto en koppel je de schetsen aan elkaar, om de interactie tussen de schermen aan te geven. POP werkt met drie stappen, die op het openingsscherm van de app duidelijk zijn uitgelegd:

  1. Maak een schets op papier.
  2. Maak er een foto van.
  3. Koppel de schermen aan elkaar en speel ermee.

POP prototyping-app

Je hoeft niet te kunnen programmeren en je kunt zelfs de slordige schets op een bierviltje of servet gebruiken. POP ziet er mooi uit en is onafhankelijk van de iOS-versie. Als jij alvast voor iOS 12 wilt ontwerpen of je eigen fantasie-interface wilt maken: ga je gang. POP is ook beschikbaar voor Android. Het mooie van deze oplossing is dat het ouderwetse tekenen op papier niet verloren gaat en dat je toch alles digitaal kunt communiceren.

Online tools voor je iPhone mockup

Een makkelijke manier om te beginnen is om je schets met een online tool te maken. Je kunt dan alvast vorm geven aan je ideeën. In plaats van pen en papier gebruik je je muis en toetsenbord om een eerste opzetje te maken. Zo breng je je ideeën makkelijker over naar de programmeur die de app moet maken of een manager die goedkeuring moet geven voor het project. Makkelijk en laagdrempelig.

Hier zie je een aantal mogelijkheden om je iPhone-app te schetsen.

Mockup.io

Mockup.io is een online tool om je iOS-mockups te presenteren en samen te werken. Je weet altijd wat de laatste versie is, iets wat bij het versturen via e-mail, Skype of Dropbox nog wel eens lastig wordt. De apps zijn te bekijken in realistisch uitziende toestellen, zodat ook een minder technische opdrachtgever, manager of klant een indruk krijgt hoe het eruit komt te zien. Heb je een extra lang scherm, dan wordt de mockup getoond als een scrolbaar scherm. Je kunt zelfs interactieve elementen toevoegen voor een nog realistischer prototype.

Invision

Met Invision zet je een statisch design om naar een interactief prototype. Klik op de hotspots en geef aan waar gebruikers moeten klikken. Dit levert een klikbaar prototype voor iPhone en iPad op. Je kunt ook linken naar externe URL’s, ankerpunten instellen en meer.

iPhone Mockup

iPhone Mockup is een andere webtool om de interface van je iPhone-app te schetsen. Er zijn twee stijlen: een strakke illustratie met rechte lijnen en een Pencil-variant waarbij het lijkt alsof je met een potlood hebt zitten schetsen. Let op dat de mockups die je maakt niet beschermd zijn, dus er is risico dat iemand jouw briljante idee onder ogen krijgt. Voor supergeheime projecten kun je beter potlood en papier pakken.

iphone mockup

Nog wat andere ideeën voor online tools:

  • Moqups: Moqups is een volledige oplossing met tools voor elk stap in het designproces. Maak diagrammen, wireframes en prototypes in één omgeving.
  • MockPlus: Simpele tool met drag-and-drop voor het maken van interactieve prototypes, zowel voor mobiel als voor web en desktop. Vooral snel.
  • Balsamiq: Een wireframing-tool die probeert de ervaring van het schetsen op een whiteboard te imiteren. Vooral bedoeld om je creativiteit los te laten op je plan en ideeën te brainstormen.

Balsamiq mockup tool

  • Mockingbird: Een webtool voor wireframes en snelle prototypes maken. Snel een interface maken met de drag-en-drop editor.
  • Mockup Builder: Mockup Builder is een tool voor prototyping, mockups en wireframes waarbij je ook gemakkelijk je ontwerp kunt delen met collega’s en klanten. Geschikt voor mobiel (iOS, Android) en webtoepassingen.

MockupBuilder

  • Mockflow: Interactieve wireframes maken en samenwerken met anderen aan complexere projecten en UI-prototypes. Complete oplossing.
  • Hotgloo: HotGloo is een wireframing-tool voor het web, mobiel en wearables. Helpt om je plannen visueel in kaart te brengen en de interactie te testen.
  • Proto.io: Met Proto.io maak je volledig interactieve prototypes die precies zo werken als een app. Makkelijk te delen met anderen.
  • Fluid UI: Met Fluid maak je mobiele prototypes en web-mockups die je makkelijk kunt communiceren. Werkt ook met animaties en interactieve elementen.

Prototyping on Paper

iOS-apps om je ontwerp te schetsen

In de App Store zijn nog meer apps beschikbaar waarmee je je eigen iPhone- of iPad-app kunt ontwerpen en schetsen. We noemen er een paar:

  • AppCooker Prototyping & Mockup (€32,99, iPad, iOS 8.0+) - Vrij prijzige app waarmee je prototypes en wireframes voor iPad-apps kunt maken. De prototypes kun je delen met anderen. Er zitten ook tools in om je appidee te plannen, het appicoon te ontwerpen en de juiste prijs te bepalen. Voor het bekijken van de prototypes is er de gratis AppTaster-app.
  • Blueprint (App Mockup) (€21,99, iPad + IAP, iOS 9.0+) - App waarmee je makkelijk de koppelingen tussen verschillende schermen kunt plannen. Je kunt het eindresultaat naar een PDF omzetten en delen met teamleden.
  • Mockup.io – Mobile UI Prototyping and Presentation (gratis, iPhone/iPad/ Watch/ TV, iOS 8.0+) - Prototyping-tool van de hierboven genoemde dienst Mockup.io.

Framer voor Mac prototyping

Mac-apps om je iPhone-app te ontwerpen

Je kunt ook met Mac-apps aan de slag gaan. Veruit de bekendste Mac-designtools voor het ontwerpen van iOS-apps zijn:

  • Framer: Deze van oorsprong Nederlandse designtool voor de Mac biedt een tutorial waarin wordt uitgelegd hoe je prototyping van iOS-apps op de Mac werkt. Er is ook een Framer Preview-tool voor iOS om je projecten te bekijken.
  • Sketch: Dit is internationaal de meest gebruikte designtool voor iOS-apps. Deze tool is ook erg geschikt als je bepaalde elementen opnieuw wilt gebruiken. Je kunt dan gebruik maken van Symbols: eenmaal ontwerpen en daarna meermaals gebruiken. Geldt ook voor icoontjes en andere kleine designelementen.

Suggestie hoe we dit artikel kunnen verbeteren? Laat het ons weten!

Informatie

Laatst bijgewerkt augustus 2018
Categorie Apps
Onderwerpen apps, developers, mock-up