Hoe weinig of afwezig uw ervaring in ontwerpen, UI / UX of codering ook mag zijn, u kunt nog steeds een goed MVP (Minimum Viable Product) van uw idee maken. Ja, zelfs zonder een mede-oprichter met technische kennis.
Zoals ik beloofde, hier is een kort overzicht van tools om te beginnen met je eigen handen een prototype of een MVP van de app te maken.
- 1. Schets de reis van de klant – maak basisframes en user stories met Xmind.
- 2. Bepaal hoe de gebruikersinterface eruit zou moeten zien – bereid mockups en screens voor
- 3. Breng uw app tot leven – gebruik Google Sheets en Google Forms om deze te vullen met realistische dummy-gegevens.
- 4. Breng het prototype in werking – verbind alles met Zapier
Natuurlijk zijn er duizenden verschillende manieren om uit te kiezen. Ik noem alleen de meest populaire en handige. Ik wil je inspireren om het idee uit je hoofd te nemen en grof te schetsen, zonder in te gaan op de details van de gebruikersinterfaces. Ik zal proberen de kosten hiervoor zo laag mogelijk te houden.
Laten we een klein beetje ophelderen wat we van een MVP verwachten:
- Eenvoudigheid
- Duidelijkheid
- Gratis of tegen minimale kosten
- Voldoende werkbaar om de waarde te tonen
- Geen toeters en bellen
Schematisch gezien moet je deze stappen doorlopen:
1. Schets de reis van de klant – maak basisframes en user stories met Xmind.
Maak basisframes en user stories met Xmind
Ze zeggen dat het “de meest populaire tool voor mind-mapping of story mapping op de planeet is.” Geen wonder, want het is open-sourced, geweldig voor mind-mapping en brainstormen, eenvoudig om samen te werken. Het is ook erg intuïtief, gebruiksvriendelijk en beschikbaar in een gratis versie.
Tip: kaarten opslaan als Evernote-notes is een geweldige manier om ze te delen.
Voor meer inspiratie, lees ons recente artikel over story-mapping.
2. Bepaal hoe de gebruikersinterface eruit zou moeten zien – bereid mockups en screens voor
Met moderne tools kan uw eerste MVP-schets er zo strak uitzien als u wilt, zelfs als deze binnen enkele dagen is opgebouwd. Onze nummer 1 keuze is Sketch.Met Sketch kunt u uw ontwerpen tot leven zien komen met interactieve hotspots, dynamische componenten en animaties voordat de ontwikkeling is begonnen. Waarom we dol zijn op Sketch, is dat het ondanks de vele functies, relatief eenvoudig te gebruiken is, dus de leercurve is vrij kort.
Tip: probeer hun Artboards te gebruiken. Het verandert uw statische schermen in interactieve prototypes, zonder ooit Sketch te verlaten. Niet alleen dat, maar u kunt ze ook testen met de Sketch Mirror-app en ze delen op Sketch Cloud. Probeer beide eens, ze zijn werkelijk geweldig!
Alternatieve tools die het waard zijn te vemelden, zijn: Webflow – voor website modellen:
pronto.io – voor prototyping van apps:
Adobe XD – voor zowel ontwerpen als prototyping:
Bubble.is – dat tegelijkertijd een visuele programmeertool en een cloud platform is:
Intuïtieve interfaces en gratis plannen is wat ze gemeen hebben. En toch hebt u geen kennis van codering nodig om ze te gebruiken.
Webflow is een beetje ingewikkelder dan de meeste doe-het-zelf website-tools die er zijn. Maar naar mijn mening is het een zeer efficiënte manier om de basis van HTML en CSS te leren. Omdat je op een gegeven moment toch nog een beetje gerelateerde kennis moet bezitten.
proto.io is vrij eenvoudig te gebruiken. Het heeft ook een Sketch-plug-in geïntegreerd.
Adobe XD heeft een geweldige iPhone-app waarmee u een voorbeeld kunt bekijken van hoe een toepassing eruit zou zien op het apparaat.
Om visuals voor te bereiden en afbeeldingen te bewerken, raad ik aan MS PowerPoint te gebruiken.
Vroeger zagen we PowerPoint vooral als een hulpmiddel voor het geven van een presentatie. Met de updates van de laatste jaren kan het u echter veel meer opleveren. Alles wat u maar kunt bedenken om aan afbeeldingen te bewerken, kan daar worden gedaan:
Ik zal er een paar opnoemen:
- Pictogrammen – de set is groot genoeg om bijna alles te maken
- Callouts, buttons, vormen met de mogelijkheid om te bewerken, vervormen, hervormen, etc.
- Invoegen van schermafbeeldingen en schermopnamen
Tip: sla afbeeldingen die op een dia-slide zijn gemaakt op als png of jpeg (of kies uit vele andere formats).
3. Breng uw app tot leven – gebruik Google Sheets en Google Forms om deze te vullen met realistische dummy-gegevens.
Als u Google Drive nog nooit hebt gebruikt, begin er dan mee. Google Sheets heeft een fantastisch scala aan functies die, indien gecombineerd, nuttig kunnen zijn als een MVP (minimaal levensvatbaar product). Ze gebruiken als een database is ook de snelste database instelling die u kunt bedenken.
Tip: voor testgegevens raad ik aan de Random generator add-on te gebruiken voor Google Sheets.
Google Forms is de eenvoudigste manier om informatie te verzamelen en op te slaan in een – gemakkelijk te lezen, bewerken en manipuleren – spreadsheet. Zelfs zonder de native embedding functie van een Google-Form op een website te vermelden.
Typeform is een alternatieve tool met tientallen vooraf gebouwde sjablonen en voorbeelden.
Trouwens, zelfs nadat je live bent gegaan, is een professionele setup-database (zoals SQL of JSON) nog steeds niet altijd nodig. In de vroege stadia, wanneer je slechts tientallen hits per dag hebt, is het meestal niet de moeite waard om een database vanaf nul op te zetten, of de inspanning waard om PHP-code te onderhouden, of de kosten waard voor het gebruik van een externe tool. Dat is waarmee Google Forms opnieuw kan helpen.
4. Breng het prototype in werking – verbind alles met Zapier
Zapier is een geweldige automatiseringstool, het kan samen met meer dan 1500 apps worden gebruikt en kan, indien slim gebruikt, een backend voor u vervangen.
Ik werd geïnspireerd door de ervaring van deze man met het bouwen van een naadloze online ervaring met bijna geen code. Kijk wat ze gebruikten en raak ook geïnspireerd:
- Slack voor team chat
- Acuity Scheduling voor het plannen van afspraken
- Stripe om betalingen te verwerken
- Google Forms voor het verzamelen van klantenfeedback
- Google Sheets voor een backup leads database
Uw MVP zal zo vaak veranderen als u het herhaalt, en in verschillende fasen zult u verschillende tools gebruiken. Het doel is om de meeste kreuken glad te strijken voordat de gebruiker de app of website ervaart. Bovendien is het ook leuk om je idee live te bekijken, nietwaar?
Verder wil ik nog de nadruk leggen op een belangrijke stap – een presentatie of een pitch. Dus hier is nog een snelle tip: maak een account aan op Animaker.com en maak een kleine, leuk geanimeerde presentatie voor uw idee.
Wederom is er geen ervaring nodig in het maken van animaties nodig, Animaker is vrij eenvoudig te gebruiken. Het heeft ook een voiceover-opnamefunctie met de mogelijkheid om een .mp3-bestand te downloaden. Zelfs als je besloten hebt dat animatie niet jouw ding is, gebruik dit dan om je dia’s in te plaatsen.
Afhankelijk van de aard van uw product, kunt u ook specifieke WordPress-plugins of Shopify toevoegen, om nog maar te zwijgen over platforms voor het bouwen van websites, logo-makers, enz. Het is gewoon fascinerend hoeveel dingen u zelf kunt doen met behulp van moderne technologieën. U bent van harte welkom om degenen die u het leukst vindt te delen in reacties.
Conclusie
Wanneer de blauwdruk van uw MVP klaar is, gebruikt u deze om uw idee aan potentiële investeerders te presenteren (de volgende keer ben ik van plan enkele tips uit mijn ervaring over het verkrijgen van de financiering te delen), een CTO of een bureau in te huren, om collega’s te inspireren of om partners aan te moedigen.
