Je bent druk aan de slag gegaan met een concept, je hebt mensen gesproken en je hebt dingen geleerd. Wellicht heb je zelfs al wat zaken écht gevalideerd met je interviews. Wat ga je dan doen? Yep, een prototype bouwen. Daar houdt het vaak op voor veel aspiranten. Maar waarom eigenlijk? Hoe moeilijk is dat, een prototype bouwen?
Niet heel moeilijk, maar je hebt wel een beetje doorzettingsvermogen nodig.
Als eerste is het even de keus hoeveel tijd je hebt. Heb je minder dan 2 dagdelen en heb je weinig tot geen kennis van HTML of CSS dan zou ik kiezen voor één van de standaard oplossingen waarmee je in korte tijd een goed uitziende pagina kunt bouwen. Denk hierbij aan Wix, Launchrock of (mijn favoriet) Unbounce waarmee je eenvoudig tot iets aardigs komt.
Heb je wel een klein beetje verstand van HTML en CSS maar is één en ander wat roestig, of ben je gewoon onzeker of het genoeg is? Dan is het raadzaam om op Codeacademy wat gratis cursussen te volgen. HTML en CSS zijn handige markup talen waar je als founder je leven lang plezier van zult blijven houden, al is het maar om bijvoorbeeld snel een landingspagina in elkaar te zetten voor een marketingactie, of een nieuwsbrief op te maken.
Maar hoe kom je dan tot een prototype?
Laat ik beginnen door te stellen dat je eerste ‘homepage’ een levend ding is: het hoeft niet de eerste keer perfect te zijn, maar het moet wel een fijne basis vormen om mee verder te werken zodat je niet eindigt door iedere week een nieuwe pagina te moeten bouwen.
Aan de slag
Kies als eerste een framework waarop je je code wilt bouwen. Een framework is een verzameling code die een aantal zaken voor jou vast heeft uitgezocht en waarmee je eenvoudig en snel een goede start kunt maken. Er zijn er heel veel, maar in dit geval opteer ik voor Twitter Bootstrap. Dit is een framework dat de laatste maanden enorm aan populariteit heeft gewonnen vanwege de vele opgemaakte elementen en het gebruiksgemak. Ook heeft Bootstrap een zeer actieve community en goede documentatie. Mocht je Bootstrap saai of te standaard vinden, dan kun je ook gebruik maken van thema’s. Deze zijn gratis te vinden op bijvoorbeeld Bootswatch.com of bijvoorbeeld via de marktplaats van Envato of Creativemarket waar je voor weinig geld complete thema’s vind.
Daarna zijn er nogal wat keuzes die je moet maken. Bijvoorbeeld je logo, je huisstijl, de opmaak van je pagina en een aantal zaken die je wellicht al wel vast in elkaar wilt zetten, maar die nog niet noodzakelijk functioneel zijn. Ook kan het in gevallen zinvol zijn om je pagina’s responsive te maken: hiermee werkt je homepage op ieder device mooier.
Voor de mensen die zelf Photoshop kunnen openen heb ik goed nieuws: open Photoshop en zet iets in elkaar dat je leuk, functioneel, mooi genoeg vind. Design is niet iets waar je upfront al geld aan uit moet geven, dat komt later wel. Belangrijkste vraag: is het geloofwaardig genoeg als logo/beeldmerk? Mocht je nu enorm klunzig zijn, geen design-oog hebben of er gewoon geen zin in hebben dan kun je altijd kijken op online marktplaatsen om goedkoop een logo te scoren. (denk: aan 300,- tot 900 euro voor een logo).
Voor Kupata ben ik zelf in Photoshop aan de slag gegaan om iets te maken waar ik me niet te erg voor zou schamen. Qua huisstijl heb ik een aantal elementen gekozen waarvan ik dacht dat ze later in mijn applicatie bruikbaar konden zijn, zoals een aantal kleurstalen en twee kleurschema’s. Deze heb ik later overigens allemaal weer weggegooid, dus til er niet te zwaar aan. Het is inherent dat je je uiteindelijk enigzins zult schamen voor de in elkaar gehackte pagina, maar dit is niet erg. Probeer de verleiding te weerstaan om toch die designer te bellen die geld kost. Kans genoeg dat je een groot deel van de stijl later toch wel weer anders doet.
Typografie
Eén ding wil ik hier nog noemen: typgrafie. Met goede typografie op je website ziet alles er net iets beter uit. Bootstrap bevat standaard al sterke fonts, maar mocht je hier vanaf willen wijken dan raad ik Typesetwith.me aan, een fijne tool om snel tot een goed leesbaar font te komen.
Mocht je geen zin/tijd/energie hebben om uit te zoeken hoe je een goede frontend in elkaar hackt, koop het gewoon. Envato is een marktplaats voor standaard thema’s en landingpagina’s, wellicht zit daar iets goeds tussen. Bedenk dat goedkoop ook vaak duurkoop is: het aanpassen van een gekocht thema kan best een klus zijn. Kies dus iets waar je ‘out of the box’ mee verder wilt, zonder allerlei modificaties. Envato heeft overigens niet alleen een marktplaats voor WordPress thema’s, landingpagina’s maar ook voor video’s, muziek en bijvoorbeeld de broodnodige stockfoto’s.
Meten is weten
Omdat bezoekers voorlopig nog (erg) schaars zijn is het belangrijk om goed door te meten. Denk hierbij aan het aantal mensen dat op bepaalde knoppen drukt. Google Analytics is hierbij jouw eerste keuze omdat het pakket eenvoudig op te zetten is, en Analytics veel dingen (zoals doelen) prima voor elkaar heeft. Bedenk dat het in het begin zeker niet gaat om de aantallen. Niemand zal je ooit vragen hoeveel bezoekers er op je homepage komen, dus kijk naar specifieke zaken.
Ship it!
Dit lijkt de eenvoudigste – maar is de moeilijkste – stap. Ga van start. Ik ken teveel mensen (mezelf incluus) die te lang door blijven prutsen op een eerste product. Je eerste product heeft bugs. Je eerste product heeft missende code, en er zijn dingen stuk die je niet snel meer kunt oplossen. Helaas. Het beste devies: ship it! Zet t live, stuur de eerste versie door naar wat mensen die je hebt gesproken en laat ze het eens bekijken. Release early, release often. LinkedIN is ook een prima plek: laat weten wat je aan het doen bent.
Wees je er van bewust dat je niet te lang in de ‘build’ fase blijft. Het releasen van iets – hoe klungelig ook – laat zien dat je er serieus over bent, en dat je graag wil leren. Dus: ga weer verder met leren.
