Hier is de situatie: je bent een ontwikkelaar en hebt alle benodigde tools om een geweldige app te coderen. Maar je zit een beetje vast wat betreft het ontwerp. Zonder de beheersing van industrie-standaard ontwerptools zoals Adobe Photoshop, hoe ontwerp je een mobiele app die je innerlijke genie weerspiegelt? Hoe maak je een app die zowel visueel verbluffend is als gemakkelijk voor gebruikers om te navigeren?

Maak je geen zorgen, er is goed nieuws. Je hebt misschien niet veel (of geen) ervaring met UX/design, maar je hebt het niet per se nodig om een visueel verbluffend eindproject te maken. Deze oplossingen helpen je bij het ontwerpen van een mobiele app – ze voldoen stuk voor stuk aan deze belofte zonder dat je er een cent voor hoeft te betalen.

Hoe ontwerp ik een mobiele app

Wireframing houdt in dat je een minimaal product maakt dat in wezen het skelet vormt voor het ontwerp van je app. Als je je app zou vergelijken met een startup, zou je naar deze ontwerpfase kunnen verwijzen als het minimale levensvatbare product (een concept dat populair is gemaakt door het boek The Lean Startup).

Wireframing is een essentiële fase bij het doorlopen van het proces van het ontwerpen van een mobiele app, omdat het je in staat stelt om na te denken over structuur als los van de uiteindelijke ontwerpelementen. Het maakt het ook mogelijk voor u om uw concept effectief over te brengen aan alle relevante partijen – medewerkers, ontwerpers, of investeerders – zonder dat u persoonlijk enige ontwerpervaring nodig hebt om deze ideeën nauwkeurig te verwoorden.

De volgende hulpmiddelen kunnen nuttig zijn tijdens deze belangrijke fundamentele stap van hoe je een mobiele app ontwerpt.

Pen en Papier

Voor degenen die echt geen cent willen uitgeven, is goede oude betrouwbare pen en papier de manier om te gaan om je eerste app-ideeën te schetsen als een ruw ontwerp voor je ontwerp. Hoewel sommigen liever direct naar Photoshop of een prototyping-tool gaan, kan deze methode ideaal zijn om ideeën snel vast te leggen terwijl ze gebeuren. Als een extra bonus heb je geen speciale training of tool mastery nodig om het meeste uit deze wireframing methode te halen.

Android en / of iOS schetspapier

Voor degenen die uitzoeken hoe je een mobiele app ontwerpt, bestaat er een speciale wireframing tool die speciaal voor jou in het leven is geroepen. Voor de redelijke prijs van gratis, kunt u downloaden dot-grid papieren die iPhones en iPads hebben afgedrukt op hen. Dit is de ideale ontwerp oplossing voor ontwikkelaars die behoefte hebben aan een betere visuele dan pen en papier kan bieden. Dit iOS schetspapier is ook ideaal voor storyboarding of het tonen van de verschillende toestanden van hoe je app er in gebruik uit zal zien.

Dit iOS schetspapier bevat rasterlijnen voor alle standaard UI elementen op de eerder genoemde iOS apparaten. Voor de Android-versie van dit schetspapier zijn 8 telefoonmodellen op het papier afgedrukt. Echter, in tegenstelling tot de iOS-paper (die een dot grid heeft), heeft deze helemaal geen lijnen.

MockFlow

Als je op zoek bent naar een iets meer techy tool om je mobiele app wireframen te doen, overweeg dan iets als MockFlow. Mockflow is een online wireframing oplossing, met de flexibiliteit om elk type ontwerpproject aan te kunnen – of dat nu een mobiele of web app is (of iets heel anders). Er is een gratis basisversie beschikbaar waarmee je aan één project tegelijk kunt werken, met maximaal 1 GB opslagruimte en twee teamleden. Je kunt extra functionaliteit ontgrendelen (meer projecten, opslag en teamleden) als je upgrade naar een betaald plan, dat begint bij $14/maand.

WireframeApp is een andere web-app gebaseerde wireframing optie vergelijkbaar met MockFlow. Alle plannen zijn betaald, maar je kunt vaak een betaalbare levenslange deal vinden (onder $ 49 totaal) door je aan te melden voor hun e-mailnieuwsbrief of AppSumo.

Prototyping

Prototyping is de volgende stap voor het ontwerpen van een mobiele app als je klaar bent met wireframen. Het hele punt van deze volgende fase is om een werkbare versie van het ontwerp te maken, vergelijkbaar met hoe je wilt dat het uiteindelijke project eruit komt te zien.

De volgende tools voldoen aan de vraag hoe je een mobiele app ontwerpt zonder een cent te betalen, omdat ze allemaal 100% gratis te gebruiken zijn!

Marvel

Marvel is een webapplicatie die ook beschikbaar is voor iOS en Android. Naast de mogelijkheid om te ontwerpen op het apparaat waar jij je het prettigst bij voelt, maakt deze tool het makkelijk om je schetsen om te zetten in werkbare prototypes. Naast de mogelijkheid om basisontwerpelementen toe te voegen, kunt u ook ontwerpen aan elkaar koppelen om een flow te creëren. Met Marvel kunt u interactieve hotspots en realistische overgangen maken, en kunt u acties kiezen zoals hoveren, klikken, vegen, knijpen en meer. Met tal van derde partij integraties, Marvel speelt leuk met veel van de andere tools die u al gebruikt, en de medewerkers in uw team.

InVision

InVision is vergelijkbaar met Marvel, in dat het een gratis web en mobiele prototyping tool is. Het is een perfecte prototyping tool voor teams, dankzij functionaliteit die eenvoudig commentaar geven en samenwerking mogelijk maakt. Wat het onderscheidt van veel vergelijkbare soorten tools is hun versiebeheerfunctie, waarmee u uw wijzigingen indien nodig kunt terugdraaien naar een vorige versie.

InVision wordt gebruikt door innovatieve bedrijven zoals Adobe, Zappos, AT&T, Dell en Sony, evenals snelgroeiende startups zoals Prezi, Soundcloud, en Evernote. Het gebruik van InVision garandeert u niet hun succes, maar u kunt de voordelen van associatie niet ontkennen!

Axure

Om uw opties voor het ontwerpen van een mobiele app zonder een cent te betalen af te ronden, is hier een optie die betaald is als deze op de lange termijn wordt gebruikt, maar volledig gratis is om te gebruiken tijdens een 30-dagen proefperiode. Axure maakt eenvoudige app prototyping mogelijk dankzij zeer functionele ontwerpen (vergelijkbaar met de overgangen op Marvel). Net als de andere opties in dit artikel, biedt deze tool functionaliteit voor eenvoudige teamsamenwerking.

Proto.io

Proto.io noemt zichzelf een tool die je kan helpen “Prototypes te maken die echt aanvoelen.” Voor een ontwikkelaar van mobiele apps die op zoek is naar een realistisch en functioneel prototype, kan dit als muziek in de oren klinken. Ze voorzien gebruikers van meerdere UI bibliotheken, 3rd party integraties (met partners zoals Dropbox), en zelfs gebruikerstesten om ervoor te zorgen dat de gebruikerservaring naadloos is bij de lancering. Een gratis proefperiode geeft u 15 dagen toegang met levenslange toegang tot beperkte functies, of de optie om te upgraden naar een volledig functioneel account met meerdere projecten en functies, vanaf 24 dollar per maand.

Als je de perfecte wireframing- of prototyping-tool nog niet hebt gevonden, deelt Developer Drive een aantal aanvullende generieke opties om te overwegen.

Natuurlijk, als dit de omvang van je interesse en vermogen is als het gaat om app-ontwerp, zul je iemand moeten betalen om je kale wireframe of prototype naar het volgende niveau te tillen. Maar met een basisplan komen kan een goede manier zijn om op voorhand tijd en geld te besparen. Hoe beter u in staat bent om uw visie over te brengen aan een ontwerper, hoe gemakkelijker het zal zijn om het werkelijkheid te maken, en hoe minder geld u zult verspillen aan ontwerpversies die niet op één lijn liggen met uw visie.

Visual Design

Of u nu op zoek bent naar begeleiding bij het ontwerpen van een app voor iPhone, of hoe u een Android app ontwerpt, deze gratis tools kunnen u helpen uw hoofd te wikkelen rond het perfecte ontwerp voor een van beide mobiele besturingssystemen.

Soms kan een beetje inspiratie helpen een creatieve blokkade te verwijderen, en verdwalen in een ontwerptutorial kan je helpen erachter te komen hoe je het project helemaal zelf kunt afmaken.

Laudable Apps

Laudable Apps is een abare-boness website/app-galerie die zich specifiek richt op het tonen van prachtige iOS 7-ontwerpen. Er is geen tekst of andere afleiding, gewoon ontwerpen gepresenteerd zonder commentaar.

Wanneer u denkt specifiek over iOS, kunt u ook de tijd wilt nemen om de strenge indieningsrichtlijnen van de Apple App Store te bekijken. Aangezien ze een “geen uitzonderingen” houding, het houden van deze richtlijnen in gedachten terwijl het bepalen van hoe je een mobiele app te ontwerpen kan u helpen om dingen goed te krijgen de eerste keer, bespaart tijd en geld op de lange termijn.

Android Patterns

Of u nu uitsluitend ontwerpen voor een Android-apparaat, of zijn het creëren van twee versies van uw mobiele app (met een voor de Apple App Store), wil je jezelf vertrouwd te maken met de in’s en out’s van het ontwerp voor een Android-apparaat. Het zal je misschien verbazen om te weten dat dit beslist anders (en aanzienlijk minder rigide) is dan de iOS app ontwerpstandaarden. Het kan nuttig zijn om het indieningsmateriaal van de Google Play-winkel door te lezen, zoals deze lanceringschecklist.

U kunt ook Android Patterns gebruiken als uw spoedcursus in Android Design. Deze website is een bibliotheek van Android interactie patronen die u kunt gebruiken bij het maken van uw ontwerp. De interactiepatronen zijn gerangschikt per app-type en omvatten acties zoals navigatie, meldingen en scherminteracties. Hoewel deze patronen nuttig kunnen zijn voor een nieuwe ontwerper van een mobiele app, moeten ze worden beschouwd als een gids, maar niet als absolute regels.

Icons

Het toevoegen van enige dimensie aan je visuele elementen kan helpen om je prototype zo dicht mogelijk bij de uiteindelijke output te laten lijken. Icons8 biedt een bibliotheek van meer dan 53.800 iconen die volledig gratis te gebruiken zijn. Naast deze gigantische gratis bron, moet je ook deze gebruikersinterface ontwerptools bekijken voor verschillende manieren om pictogrammen te zoeken en te gebruiken wanneer je bepaalt hoe je een mobiele app ontwerpt.

Adobe Kuler

Adobe heeft veel bronnen voor mensen die op zoek zijn naar het ontwerpen van een mobiele app, van een beginner tot een gevorderd niveau van ontwerp, maar een van de eenvoudigste en meest nuttige is hun kleurenschema-tool. Kuler helpt zowel ontwerpers als niet-ontwerpers bij het uitzoeken van kleurenschema’s op basis van het kleurenwiel en verschillende kleurregels: monochromatisch, complementair, triade, etc. U kunt een kleurenschema maken van een afbeelding, of bladeren door de kleurenschema’s van anderen voor inspiratie.

Mobile Design Inspiration

Volgens CSSWinner is Mobile Design Inspiration de dichtste inspiratiegalerij voor het ontwerpen van mobiele apps, met app-ontwerpinspiraties beschikbaar voor en specifiek georganiseerd per iPhone, Android, Apple Watch en iPad. Nieuwe ontwerpen worden wekelijks toegevoegd, en hun sectie “Creatieve velden” kan extra inspiratie bieden als je ook werkt aan het ontwerpen van een app-logo.

Tuts+

Als je echt wilt weten hoe je een mobiele app ontwerpt zonder een dubbeltje te betalen, moet je overwegen je tijd te investeren in het opdoen van nieuwe vaardigheden. Leren hoe je je eigen app ontwerpt in plaats van iemand in te huren om het te doen, kan je geld besparen EN ook waardevolle vaardigheden opleveren die je later te gelde kunt maken.

Er zijn verschillende websites die uitstekende online cursussen in ontwerp bieden (Treehouse is een geweldige betaalde bron), maar Tuts+ biedt veel diepgaande kennis, volledig gratis, zonder in te boeten aan kwaliteit. Naast nuttige artikelen hebben ze ook extra lange bronnen over ontwerp, zoals ebooks.

How to Design a Mobile App Without Paying A Dime

U hoeft echt geen ontwerper in te huren om uw mobiele app te ontwerpen, vooral in de vroege stadia van wireframing en prototyping. Neem de tijd om je app te krijgen waar je wilt zijn op een basisniveau, dan zelfs als je uiteindelijk een ontwerper inhuurt, zal het project niet zo diep (en duur) zijn.

Met deze mobiele app ontwerphulpmiddelen, kun je erachter komen hoe je een mobiele app op je eigen kunt ontwerpen, en onderweg een paar nieuwe vaardigheden opdoen. Stel je de mogelijkheden voor het inhuren van een individu die hun bekwaamheid kunnen bewijzen in zowel het ontwerpen en ontwikkelen van een app!

Welke tips of tools zou u toevoegen aan deze lijst over hoe je een mobiele app te ontwerpen zonder een dubbeltje te betalen? We horen graag wat je denkt! Tweet je inzichten naar @icons8, en we zullen onze favorieten delen.

Over de auteur
Maddy Osman houdt van WordPress en schrijven. Als ze niet bezig is WordCamp Denver te helpen organiseren, deelt ze haar beste content marketing/SEO tips op haar blog, www.the-blogsmith.com. Blijf op de hoogte van haar laatste artikelen op het web op Twitter: MaddyOsman.