7 Prototyping-tools voor webontwerpers

Ken je het verschil tussen wireframe, mockup en prototype? Deze drie termen worden vaak door elkaar gebruikt om hetzelfde te betekenen. Het probleem is dat je dat niet zou moeten doen.

EEN wireframe is een statische, low-fidelity weergave van een ontwerp. Het geeft een overzicht van het uiterlijk of de vorm van een voorgesteld ontwerp, maar niet de functionaliteit of het gevoel. EEN mockup biedt een grotere hoeveelheid informatie. Mockups zijn afbeeldingen van gemiddelde tot hoge getrouwheid van een voorgesteld ontwerp. Mockups zijn ook statisch, en ze bewijzen geen interactiviteit.

prototypes, aan de andere kant, zijn dynamisch. Ze kunnen representeer uw uiteindelijke ontwerp tot bijna elk detail dat u kiest. Een prototype kan zelfs worden getest alsof het het eigenlijke eindproduct was, omdat het dezelfde look en feel kan bieden. Van de drie zou degene die het meeste indruk zou maken het prototype zijn.

Hoe een prototype te bouwen

Het doel van een prototype is nu om geselecteerde ontwerpkenmerken nauwkeurig te bewijzen. Prototypes voor web- of app-applicaties worden meestal ontwikkeld in drie fasen:

1. De paginastromen (hoe een gebruiker kan navigeren) worden geschetst.
2. Verschillende low-fidelity-versies van elke pagina zijn gebouwd en bruikbaarheid getest.
3. Uit de lessen die zijn geleerd, worden details toegevoegd om een ​​high-fidelity-model van uw ontwerp te creëren.

In dit bericht zullen we enkele prototyping-tools bekijken die kunnen helpen het proces te vereenvoudigen, dingen eenvoudiger te maken en prototypes veel sneller te laten werken. Hier zijn 7 prototyping tools om uit te proberen.

InVision

InVision staat volgens Forbes aan de top van de lijst van private cloud-bedrijven ter wereld, naast armaturen zoals Slack, Dropbox en MailChimp. Deze eer is voor een deel te danken aan het "always-on" -platform van InVision samenwerking, feedback en het bouwen van high-fidelity-prototypen zo eenvoudig.

Met InVision is het mogelijk om projectschermen en -statussen vanuit één locatie te beheren, in realtime samen te werken en versiebeheer te handhaven, het bouwen van pixel-perfecte prototypes met de look en feel van echte web- en mobiele apps. Met InVision kun je zelfs voer gratis en onbeperkt testen uit op uw prototypes.

Om te ontdekken wat de designwereld en InVision's meer dan 2 miljoen gebruikers zo leuk vinden aan dit platform, kun je je aanmelden voor een gratis proefversie. Klik gewoon op de InVision-link om aan de slag te gaan.

Pidoco

Of je een a nodig hebt doorklikbaar draadframe, of a volledig interactief UX-prototype, Pidoco brengt je er snel naartoe, zonder gedoe. Beginnend met de eenvoudige schetsfunctie, kunt u een set bouwen aangepaste sjablonen, maak de interactieve elementen jij hebt nodig, presenteer je prototype aan anderen, en wacht op hun feedback - die niet lang op zich laat wachten.

Pidoco biedt u alles wat u nodig hebt om low-fidelity-prototypen te bouwen en snelle, up-front feedback of high-fidelity-modellen te krijgen met dezelfde look en feel als uw voorgestelde web- of app-ontwerp. Deze tool genereert zelfs specificatiedocumenten die kunnen dienen als blauwdrukken voor teamleden, of kunnen worden gepresenteerd aan klanten voor het aftekenen.

Proto.io

Proto.io is een ideale keuze als u een prototype-tool van goede kwaliteit nodig hebt om u te helpen bij het ontwerp van uw mobiele apps. Proto.io is een dedicated platform voor mobiele prototyping dat werkt op de meeste browsers, vereist geen codering, en stelt u in staat om implementeer volledig-interactieve prototypen van mobiele apps en simulaties die het uiterlijk en het gevoel van het echte ding hebben.

Drie onderdelen vormen samen deze tool: een dashboard, een editor en een speler. Het dashboard fungeert als uw hoofdcontrole en projectmanager. De editor bestaat uit een reeks hulpmiddelen om uw ontwerp te emuleren en de interacties op te bouwen. Met de speler kunt u uw prototype bekijken in uw webbrowser, ermee communiceren, feedback vragen en testen op echte mobiele apparaten. Als het ontwerp van mobiele apps jouw ding is, is dit de tool voor jou.

Webflow

Voor iedereen die op zoek is naar een alles-in-een ontwerp, prototyping en ontwikkelingstool, de zoekopdracht eindigt hier. Allereerst kan dat met Webflow bouw en test de high-fidelity prototypes je moet je ontwerpinspanningen helpen. Maar hier komt het verschil uit: alles wat je bouwt wordt aangedreven door HTML / CSS en JavaScript die klaar zijn voor productie. Het resultaat?

Jij kan naadloos over van een volledig interactief prototype naar een ontwikkeld product. Prototype, ontwerp en ontwikkeling komen in hetzelfde pakket, dat ook de vereiste samenwerkingsfuncties en -mogelijkheden omvat. En trouwens, alles is responsief ook.

PowerMockup

Deze toolset met speciale prototypes is ontwikkeld met de PowerPoint-gebruiker in gedachten. PowerMockup is in feite een PowerPoint-invoegtoepassing die u kunt gebruiken maak wireframes en mockups voor websites, desktop-apps of mobiele apps. Het is gewoon een kwestie van vormen en ontwerpelementen uit de PowerMockup-bibliotheek selecteren en deze op een PowerPoint-dia plaatsen.

Dan kunt u gebruik de slideshow- en animatiefuncties van PowerPoint om uw ontwerp met anderen te bekijken. U kunt ook uw eigen vormen en elementen toevoegen aan de bibliotheek en deze desgewenst delen met andere PowerPoint-gebruikers.

Lucidchart

Lucidchart is een online applicatie met een bibliotheek met ontwerpelementen en apparaattypen van waaruit u snel wireframes of mockups van uw website of mobiele app-ontwerpen kunt bouwen. Het heeft een schone, gebruikersvriendelijke interface, en het biedt slepen en neerzetten technologie, interactieve demonstratiemogelijkheden, en een laagtechnologie waarmee u zeer complexe simulaties kunt bouwen.

Lucidchart is ook een handig hulpmiddel voor het creëren van professioneel ogende projectstroomschema's en stroomdiagrammen, en de samenwerkingsfuncties werken soepel en zijn gemakkelijk te gebruiken.

HotGloo

Het emuleren van de voorgestelde UX van een ontwerp kan soms uitdagingen opleveren. Dat is waarom je HotGloo nodig hebt. Met een enorme element bibliotheek en UI-widgetgalerij, exporteren en delen functies en samenwerking met teamleden waarmee u in bijna geen tijd aan de slag kunt.

Als je vragen hebt of hulp nodig hebt, hebben ze ook een volledige documentatie nuttige video-tutorials en live webinars beschikbaar. Maak uw prototypen rechtstreeks in uw browser, deel ze of bekijk ze op elk mobiel apparaat. Je kan zelfs exporteer uw werk naar HTML. Wireframing en prototyping is nog nooit zo eenvoudig en leuk geweest!

Inpakken

Er is genoeg om uit deze lijst te kiezen, van hulpprogramma's voor speciale doeleinden tot een alles-in-één-tool die zeker de moeite waard is om te bekijken. Dit zijn allemaal tools van topkwaliteit, dus er is geen risico aan verbonden, en u kunt altijd een demo bekijken of een gratis proefversie aanvragen.

Deze producten hebben een groot gebruikersbestand. Ze worden gebruikt door of aanbevolen door grote bedrijven. Dus welke u ook kiest, u bevindt zich in goed gezelschap. Of u nu op zoek bent naar een mockup-, wireframe- of prototyping-tool, u vindt hierboven een tool voor uw behoeften.