Tech-oprichters gebruiken deze 5 bronnen om hun eerste prototype te bouwen

Mijn naam is Marina Chernyshova en ik ben productontwerper en mentor. In mijn eerdere artikel, “ Weinig budget? Gebruik deze ontwerpmethodologieën om uw eerste MVP te bouwen zonder een fulltime ontwerper ,,Ik beschreef waarom volgens mij de early-stage startups niet altijd een fulltime designer nodig hebben en hoe je het ontwerpen van het eerste prototype vanuit een theoretisch oogpunt aanpakt. In dit artikel wil ik je uitnodigen om naar de meer praktische kant te kijken. Ik deel de nuttige bronnen die oprichters en early tech-ondernemers kunnen gebruiken voor het bouwen van hun eerste prototype.

Als u de interesse en tijd heeft om uw product zelf volledig te ontwerpen, raad ik u aan om Figma te leren. Figma is een cloudgebaseerde ontwerpsoftware die voornamelijk wordt gebruikt om ideeën te tekenen, ontwerpen en prototypen te maken vóór een projectontwikkelingsstap. Met deze tool kunnen de ontwerpers samenwerken om de lay-outs te maken, afbeeldingen toe te voegen, te experimenteren met kleuren en lettertypen en nog veel meer, allemaal via een webbrowser. Figma is een krachtig instrument, maar tegelijkertijd heel gemakkelijk te gebruiken en erg handig voor communicatie tussen alle teamleden.

Naast Figma is het ook erg handig om FigJam en Figma Slides te gebruiken. FigJam is een whiteboardtool die speciaal is ontworpen voor samenwerkend teamwerk. Het stelt teams in staat om in realtime samen te werken, ideeën te visualiseren en samen te brainstormen. Figma Slides is een presentatietool die speciaal is ontworpen voor ontwerpers en hun teams. FigJam en Figma Slides zijn goed voor mensen die Figma al gebruiken om al hun ontwerpen, whiteboards en presentaties in één ecosysteem te hebben.

Draadmodellen

Wireframes zijn ruwe schematische visuele representaties van een digitaal product, zoals een website, app of software-interface. In mijn vorige artikel legde ik uit wat de User Flow is — het is een visueel diagram dat het pad in kaart brengt dat een gebruiker door een product of website neemt om een specifieke taak of doel te bereiken*.* Op basis van User Flow kunt u de eerste eenvoudige versie van de wireframes maken.

Wireframes zijn nodig om de productstructuur te begrijpen voordat u of uw team begint met het ontwerpen van het product. Ze helpen teams om de vereisten op elkaar af te stemmen, waardoor UX-ontwerpgesprekken gericht en constructief blijven zonder afgeleid te worden door de nuances van het ontwerp, zoals kleuren, lettertypen en pictogrammen.

Wireframes kunnen op verschillende manieren worden gerealiseerd, ze kunnen hoog-gedetailleerd en laag-gedetailleerd zijn. Zie hieronder enkele basisvoorbeelden:

• Linker afbeelding (Wireframe-achtige gebruikersinterface met inhoudsblokken)
• Rechterafbeelding (High-fidelity UI met grafieken en gedetailleerde componenten)

Ik raad aan om met de eenvoudigste aanpak te beginnen: regel de hoofdschermen met bij benadering kopteksten en knoppen en besteed niet te veel aandacht aan de teksten.

Als u in Figma werkt, kunt u via de sjablonen direct realistische frames in het gewenste formaat maken.

Om meer gedetailleerde wireframes te maken met meer realistische interface-elementen, kunt u kant-en-klare Figma-assets gebruiken voor wireframing om veel tijd te besparen (bijvoorbeeld deze bibliotheek ).

In dit stadium kunt u al een prototype maken zonder op de kleine dingen te letten, zoals kleuren of lettertypen, en het aan een van uw vrienden laten zien. Als dit een mobiele app is, kunt u de link vanaf uw telefoon openen om het er realistischer uit te laten zien. Het is belangrijk om te controleren of er alle benodigde overgangen tussen alle schermen zijn en of een gebruiker terug kan gaan of de actie kan annuleren.

Kant-en-klare componentbibliotheken

Het is niet nodig om alles vanaf nul te ontwerpen. Het is erg nuttig om de kant-en-klare assets in de Figma-community te verkennen die u kunt gebruiken om uw product te ontwerpen.

Er zijn veel beschikbare bibliotheken in Figma, zoals Material UI. Deze bibliotheken bevatten veel nuttige elementen, variërend van een set iconen tot reeds samengestelde pagina's.

De elementen bevatten meestal al alle toestanden (Hover en geselecteerde toestanden, waarschuwingen, beschrijvingen etc.). Hele interface-abstracties kunnen worden samengesteld uit kleine componenten, bijvoorbeeld een modale dialoog met knoppen en tabellen erin. Naast de elementen zelf, kunnen er instructies zijn over hoe ze correct te gebruiken met marges, spaties etc. Deze bibliotheken hebben componenten en zelfs hele lay-outs ontwikkeld die de ontwikkelaars kunnen gebruiken.

Als het nodig is, kunt u in de toekomst uw eigen elementen toevoegen. Als u bijvoorbeeld grafieken nodig hebt, kunt u deze uit een andere bibliotheek halen. Als u een niet-standaardelement nodig hebt, kunt u dit helemaal opnieuw ontwerpen en toevoegen aan de bibliotheek met alle staten.

Kant-en-klare grafische middelen

Elk product kan er veel volwassener en doordachter uitzien dankzij evenwichtige en goed ontworpen graphics: illustraties, pictogrammen, animaties, etc.

Het is niet nodig om hier extra tijd aan te besteden, hier kunt u ook kant-en-klare sets gebruiken. Er zijn veel van dergelijke sets in verschillende stijlen en kleuren. Ze zijn ook te vinden in de Figma-gemeenschap of Spline-gemeenschap als je van 3D-graphics houdt. Vaak worden de grote sets betaald voor commercieel gebruik, maar ze zijn vrij betaalbaar.

Deze assets kunnen niet alleen binnen uw product worden gebruikt, maar ook voor uw marketingmateriaal, afbeeldingen voor sociale netwerken en pitch decks. U kunt daar verschillende presentatiesjablonen vinden en deze aanpassen aan uw stijl.

Referenties & Inspiratie

Er zijn verschillende platforms die gebruikersstromen en screenshots van verschillende producten verzamelen, zoals paginaflows.com of mobbin.com . U kunt ze verkennen voor concurrentieanalyse of gewoon inspiratie. Ze zijn erg handig wanneer u aan een bepaalde functie werkt en u weet dat dit een wijdverbreid UX-patroon is, zoals het uitchecken of opslaan van een item in de favorieten. U kunt ze doorbladeren op categorieën of zoeken naar een bepaalde functionaliteit op trefwoorden.

Werkend aan een soepele gebruikerservaring, is het altijd beter om te vertrouwen op bestaande oplossingen omdat ze duidelijk en bekend zijn voor gebruikers. Zelfs als u werkt aan innovatieve functionaliteit, kunt u altijd patronen gebruiken die qua betekenis vergelijkbaar zijn met die van een ander gebied.

Conclusie

Tegenwoordig is de digitale markt behoorlijk competitief en zijn gebruikers ervaren in goede UX en UI. Het is beter om dit niet te verwaarlozen, zelfs niet in de beginfase van productontwikkeling, als een onnodige verspilling van tijd aan "decoraties", maar probeer het te gebruiken als een concurrentievoordeel.

Naar mijn mening is er een balans tussen het complete gebrek aan design en veel tijd die wordt besteed aan het perfecte design van elk scherm. Soepele UX kan worden bereikt door vereenvoudiging en het vermijden van onnodige stappen en acties, en een acceptabele UI kan heel simpel maar aantrekkelijk zijn.

Het belangrijkste is om niet te aarzelen om kant-en-klare oplossingen te gebruiken en geen stappen over te slaan voor het ontwerp, zoals het maken van de gebruikersstroom. In dit geval wordt het risico op fouten of tijdverspilling aanzienlijk verminderd, wat uw middelen bespaart en de motivatie niet beïnvloedt.