Een wireframe maken van je app-idee, ook zonder designervaring

Een wireframe is een schematische weergave van één scherm. Een rechthoek met een kruis erdoor staat voor een afbeelding, een paar horizontale lijnen voor tekst, een blok met een steekwoord erin voor een knop. Meer notatie heb je niet nodig. Juist doordat kleur, typografie en beeld ontbreken, gaat alle aandacht naar de vraag die er in dit stadium toe doet: wat staat er op dit scherm, en in welke volgorde?

Dat maakt wireframen vooral denkwerk. Je beslist per scherm wat het belangrijkste element is, welke actie je bovenaan zet en wat je durft weg te laten. Wie dat overslaat en meteen in een ontwerptool begint, verstopt die keuzes onder kleuren en lettertypes. Heb je je idee zelf nog niet scherp genoeg om die keuzes te maken, werk het dan eerst uit aan de hand van je app-idee uitwerken.

Leg je schetsen naast elkaar en teken per knop een pijl naar het scherm dat erop volgt. Begin bij de belangrijkste route: hoe komt iemand van het openen van de app naar het moment waarop die iets oplevert? Die route heet de happy path, en die moet zonder omwegen kloppen voordat je iets anders uitwerkt.

Tijdens het tekenen van de pijlen vind je de gaten. Een knop die nergens heen leidt, een scherm waar je wel in maar niet uit komt, een stap waarvoor een scherm mist, zoals een leeg beginscherm of een foutmelding. Dat zijn precies de dingen die je nu wilt ontdekken, op papier, en niet halverwege de bouw. Leg de flow daarna eens voor aan iemand uit je doelgroep en kijk waar diegene blijft haken; hoe je zulke reacties op waarde schat lees je in je app-idee valideren.

Digitaal werken heeft twee voordelen: je kunt je wireframes makkelijk delen en je past ze aan zonder alles opnieuw te tekenen. Meer dan een gratis account heb je in dit stadium niet nodig.

Twee valkuilen komen steeds terug. De eerste is te vroeg pixelperfect willen zijn: zodra kleuren en lettertypes het gesprek binnenkomen, gaat het niet meer over de structuur. De tweede is alles tegelijk uitwerken, waardoor je verzandt in randgevallen voordat de kern staat.

Een wireframe blijft een statisch plaatje. De logische volgende stap is je schermen aan elkaar koppelen, zodat iemand er doorheen kan klikken alsof de app al bestaat. Wat dat precies inhoudt en waarom het zulke eerlijke reacties losmaakt, lees je in wat is een klikbaar prototype.

Je wireframes zijn daarnaast het beste gespreksmateriaal dat je kunt meenemen naar een bouwpartij. Ze laten in één oogopslag zien welke schermen je voor je ziet en hoe ze samenhangen, veel duidelijker dan een document vol tekst. Hoe je zo'n gesprek voorbereidt lees je in je idee uitleggen aan een developer. Wil je dat een ontwerper je schetsen doorvertaalt naar een volwaardig ontwerp, kijk dan bij app laten ontwerpen. En wil je van je wireframe meteen naar iets dat klikt: dat is precies wat we bij OneDayBuild in één werkdag doen.