Top 9 gratis en betaalde prototyping-tools voor UX / UI-ontwerpers

Ontdek de beste prototyping-tools voor UX & UI-ontwerpers die uw productcreatie sneller en effectiever zullen maken.


Beste prototyping-tools voor UX / UI-ontwerpers

Prototype werkt beter dan duizend vergaderingen.

Het is tenslotte iets dat uw toekomstige gebruikers en belanghebbenden kunnen zien en doorklikken. Dat is een geweldige manier om hun feedback te verzamelen en uw product beter te maken – in een vroeg stadium, niet wanneer het bijna klaar is.

Daarom proberen ontwerpers op dit podium hun best te doen, en de juiste tools kunnen zeker helpen.

Maar het is moeilijk om te verdwalen in dit enorme aantal apps – gratis, betaald, webgebaseerd en desktop.

Om u te helpen bij het kiezen van de juiste software, heb ik 9 beste prototyping-tools voor 2020 op een rij gezet, zowel trendy als effectief.

Laten we ze controleren.

Top gratis tools voor prototyping

Wat heeft het voor zin om honderden uit te geven aan software als je gratis prototyping-tools kunt gebruiken?

Maar er is een vangstvrije tool die meestal eenvoudig is, met beperkte functionaliteit. Ze werken niet als je met een groot team van ontwikkelaars aan UI / UX-ontwerp werkt.

Maar als u aan een enkel project werkt, zoals uw bedrijfswebsite, zijn gratis tools misschien meer dan genoeg.

Ik heb een aantal prototyping-tools verzameld die je misschien wilt uitproberen – en het kost je geen cent.

Adobe XD

Platforms: macOS, Windows

Screenshot van Adobe XD Prototyping-tool

Adobe XD wordt geleverd met een opmerkelijk eenvoudige maar gebruiksvriendelijke interface, passend bij andere Creative Cloud-apps.

In het gedeelte Prototype kunnen ontwerpers tekengebieden of schermen koppelen, voltooide prototypen bekijken en deze delen voor beoordeling door klanten.

Kernfuncties:

  • Prototype stroomt. Ontwerpers kunnen overschakelen van ontwerpmodus naar prototype en tekengebieden verbinden. Het helpt hen de stroom van apps met meerdere schermen te communiceren en te schakelen tussen verschillende scenario’s.
  • Voice prototyping. Videomakers reageren op hun prototypes met stemtriggers en spraakweergave. Simpel gezegd, in Adobe XD kunnen ontwerpers spraakopdrachten gebruiken als trigger.
  • IOS- en Android-voorbeelden op het apparaat. Bij het bouwen van prototypen voor de iOS- of Android-app kunnen ontwerpers de preview bekijken van hun werk op compatibele apparaten met behulp van de XD mobiele app. Zo kunnen ze de app tegelijkertijd bekijken en testen.
  • Bestanden importeren in Sketch, Photoshop en Illustrator. Adobe-ontwerptools zijn compatibel met elkaar, dus u kunt één element in Illustrator kopiëren en in Adobe XD plakken. Naast Adobe-tools is er ook een plug-in voor Sketch.

Startersplan gebruikers hebben toegang tot onbeperkte gedeelde documenten, editors en gedeelde links (tot april 2020).

InVision

Platforms: webgebaseerd

Schermafbeelding van prototype-tool van Invision

InVision is verreweg de meest populaire tool voor wireframing, prototyping en mockups.

Kernfuncties:

  • Rijke interactieve prototypes bouwen. Het belangrijkste kenmerk dat ontwerpers helpt om efficiënt met InVision om te gaan en nieuwe, nette prototypes te maken.
  • Reacties achterlaten. Het ontwerpteam kan hun opmerkingen over verschillende prototypes schrijven. Bovendien kunnen ze de geschiedenis van wijzigingen bekijken: de bestanden worden geüpdatet zodra ze zijn bewerkt.
  • Synchronisatie. Projecten synchroniseren met cloudopslag zoals Google Drive of Dropbox. InVision heeft ook een projectbeheersysteem om de workflow efficiënt te organiseren.
  • Plug-ins. Sommige plug-ins waarmee gebruikers vanuit Sketch en Photoshop ontwerpen naar InVision kunnen sturen.

Gratis abonnement biedt één prototype met onbeperkte schermen, wat misschien genoeg is voor individuele ontwerpers.

Wonder

Platforms: web, iOS, Android

Screenshot van het prototype van Marvel

Wonder is een andere prototyping-tool met vooraf geïnstalleerde elementen (knoppen, menu’s) voor verschillende platforms.

Kernfuncties:

  • Realistische prototypes bouwen. Ontwerpers kunnen ontwerpmodellen binnen enkele minuten omzetten in interactieve mobiele of webprototypes. Zonder een enkele regel code te schrijven.
  • Gebruikerstesten. Omdat UX een cruciale rol speelt bij het maken van elk digitaal product, kunnen ontwerpers feedback krijgen van gebruikers tijdens bètatests en wijzigingen aanbrengen om aan de behoeften van klanten te voldoen.
  • Geautomatiseerde creatie van ontwerpspecificaties. Marvel heeft een geïntegreerde Handoff-tool waarmee ontwerpers hun ontwerp aan ontwikkelaars kunnen overhandigen door ze een URL te sturen.

Het is vrij eenvoudig om de Marvel-app te gebruiken – de interface is duidelijk, dus zelfs beginners kunnen ermee omgaan.

Bovendien heeft Marvel een plug-in voor Sketch voor betere interacties en productief werk.

Figma

Platforms: webgebaseerd

Screenshot van het prototype van Figma

Figma is een cloudgebaseerde ontwerptool die lijkt op Sketch, maar nog beter is voor teamsamenwerking.

Firma maakt het supereenvoudig om prototypen te bouwen met behulp van overgangen, en daarvoor hoeft u geen enkele app van derden te downloaden.

Kernfuncties:

  • Soepele overdracht. Het enige dat het UI / UX-team hoeft te doen is een link met ontwikkelaars delen, en ze hebben toegang tot alle informatie – leeslijnen, grafische middelen, metingen klaar om te worden geëxporteerd.
  • Alles-in-één platform. Ontwerpers kunnen gemakkelijk wisselen tussen ontwerpbestand en live prototype. De bewerkingen verschijnen direct in het prototype.
  • Samenwerking. Teamleden, inclusief klanten, kunnen eenvoudig voltooide ontwerpen bekijken, feedback in realtime achterlaten en communiceren via Slack geïntegreerd in Figma.
  • Plug-ins. Ontwerpers kunnen Figma’s kernfunctionaliteiten uitbreiden door plug-ins te gebruiken zoals Unsplash, Figmotion, Color Bling, enzovoort – meer dan 100 voor nu.

Figma is gratis voor individuele ontwerpers – maximaal 2 editors en 3 projecten.

Webflow

Platforms: webgebaseerd

Screenshot van Webflow-prototypetool

Webflow is een multifunctioneel hulpmiddel en het is de beste keuze als je dat wilt weten hoe u webdesign maakt – en veel oefenen.

Met Webflow maakt u een website-UI, animaties en lay-out en hun verdere publicatie.

Kernfuncties:

  • Ontwikkelen&ontwerp. Ontwerpers zetten hun ontwerp om in een schone code die voldoet aan alle vereiste normen. Een ontwerper wordt op zijn beurt ook een ontwikkelaar.
  • 3D-animaties / transformaties. Het UI / UX-team maakt 3D CSS-transformaties zonder de code te hoeven schrijven.
  • Een breed scala aan componenten. Webflow bevat aanpasbare formulieren, vervolgkeuzemenu’s, tabbladen, responsieve websitenavigatie, enzovoort.
  • Webflow CMS. Met Webflow CMS kunnen website-eigenaren hun site beheren – in elke browser of apparaat.
  • Integraties. Als volwaardige websitebouwer heeft Webflow integraties met Google Analytics, Google Optimize, MailChimp, Zapier.

Webflow is dus een uitstekende keuze voor ontwerpers die alles zelf moeten doen.

Top betaalde prototyping-tools

Bij betaalde software kun je extraatjes verwachten, zoals onbeperkte schijfruimte, nieuwe handige functies, privé-plug-ins en lettertypen en nog veel meer.

Laten we eens kijken welke prototyping-tools hun geld waard zijn in 2020.

Schetsen

Platforms: macOS

Schermafbeelding van prototype-tool

Als u ooit in de buurt bent gekomen van het ontwerpen van de gebruikersinterface, weet ik zeker dat u hiervan hebt gehoord. Vandaag, Schetsen is een van de meest populaire en krachtige prototyping-tools.

Met Sketch kunnen gebruikers wireframes, mockups en prototypes bouwen en communiceren met andere prototyping-tools dankzij meerdere plug-ins. 

Kernfuncties:

  • Prototyping. Gebruikers maken interactieve en robuuste prototypes met Sketch en bekijken hun ontwerp om te zien hoe ze in actie werken.
  • Vector bewerken. Aangezien Sketch een vectorgebaseerde ontwerptool is, gebruikt het UI-team vectorbewerkingsfuncties om bestaande vormen te maken en te bewerken.
  • Presets toevoegen, opslaan, exporteren. Ontwerpers maken favoriete voorinstellingen en slaan deze op in Sketch. Vervolgens kunnen ze deze voorinstellingen exporteren om te delen met teamleden.
  • Code exporteren. Design kan worden geëxporteerd als een code. Zo draagt ​​het bij aan de samenwerking tussen ontwerpers en ontwikkelaars.
  • Honderden plug-ins. Sketch biedt veel handige plug-ins die het ontwerpproces vereenvoudigen en de algehele ervaring verbeteren.

Kosten: $ 99 voor de persoonlijke licentie

Beginsel

Platforms: macOS

Schermafbeelding van het prototype van het principe

Beginsel meer populaire prototyping-tool voor het bouwen van geanimeerde en interactieve interfaces.

Kernfuncties:

  • Geanimeerde interfaces bouwen. Principe laat ontwerpers interactieve en geanimeerde gebruikersinterfaces maken.
  • Prototypes exporteren en bekijken. Als ontwerpers moeten zien hoe een prototype er op een telefoon uitziet, kunnen ze de Principle-app voor iPhone downloaden en hun smartphone met Mac verbinden om de preview te testen.
  • Meerdere schermen. U kunt meerdere schermen maken voor een app met meerdere schermen.
  • Importeren. Ontwerpers importeren Sketch-bestanden en maken ze geanimeerd als ze statisch zijn.

Kosten: $ 129

Axure

Platforms: macOS, Windows

Screenshot van het prototype van Axure

Axure is een progressieve UX-prototypingtool die ontwerpers helpt prototypen te bouwen voor zowel web- als mobiele platforms.

Kernfuncties:

  • Prototyping. De nieuwste Axure-versie (RP 9) wordt geleverd met de mobiele modus met aanraakcursors en mobiele schuifbalken om de mobiele ervaring, schaalopties, snelkoppelingen voor volgende / vorige pagina’s, enzovoort te verbeteren.
  • Vorm widgets. Axure biedt aangepaste styling, inclusief typografie, randen en vullingen, stijleffecten waarmee ontwerpers aangepaste elementen kunnen toevoegen.
  • Documentatie toevoegen. Ontwerpers kunnen documentatie opnemen in hun prototypes en diagrammen. Het helpt bij het schrijven van gedetailleerde informatie over elk prototype of diagram – hoe het prototype werkt, de belangrijkste componenten van de app en meer.
  • Samenwerking op hoog niveau. Ontwerpers werken in Axure samen met hun collega’s aan hetzelfde prototype. Het is gemakkelijk om ontwerpen te delen met aandeelhouders of potentiële gebruikers om hun feedback te krijgen.

Kosten: $ 29 voor Axure RP 9 Pro-versie per maand ($ 495 – eeuwigdurend)

JustInMind

Platforms: macOS, Windows

Screenshot van Just In Mind-prototypetool

Een van de grootste voordelen van JustInMind prototyping tool is de desktopversie. Je kunt het op je computer installeren en in de offline modus werken, zelfs als je op dit moment geen internetverbinding hebt.

Kernfuncties:

  • Vooraf geïnstalleerde UI-kits. JustInMind bevat UI-kits waarmee prototyping van zowel web- als mobiele versies gemakkelijker en sneller gaat.
  • Beheer van vereisten. Ontwerpers kunnen alle projectvereisten aan het prototypeproces toevoegen en tekst linken. Op deze manier beheren ze alle vereisten en zorgen ze ervoor dat ze allemaal worden uitgevoerd.
  • Integratie. JustInMind kan worden geïntegreerd met Sketch, Adobe Suite, JIRA om samenwerkingsprocessen uit te breiden.
  • Samenwerking. Ontwerpers delen hun werk met teamleden, werken snel samen en laten opmerkingen achter.

Kosten: $ 29 per maand ($ 228 per jaar)

Dat is het! Zoals je ziet, is er een grote keuze aan prototyping-tools – voor individuele ontwerpers en teamspelers.

En het is alleen aan jou om te gebruiken, dus kies verstandig.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map