Inhoud
- De beste wireframe-tools
- 01. UXPin
- 02. Adobe XD
- 03. Axure RP
- 04. Balsamiq-modellen
- 05. Schets
- 06. Photoshop
- 07. Justinmind
- 08. Wireframe.cc
- 09. Invision Studio
- 10. InDesign
Met de beste wireframe-tools kunt u vanaf het begin het ontwerp van uw website of app bepalen. Door ervoor te zorgen dat alle belanghebbenden het eens worden over hoe uw gebruikersinterface zal werken, wordt de buy-in al vroeg ingebakken. En dat is essentieel om uw proces te stroomlijnen en onderweg verkeerde afslagen en omkeringen te voorkomen.
Enkele van de beste wireframe-tools die speciaal zijn gemaakt met het oog op wireframing. Welke van deze u kiest, hangt grotendeels af van of u iets snel en ruw wilt maken, of iets dat dichter bij een volledig functionerend prototype ligt.
Aan de andere kant van de medaille willen sommige mensen niet het gedoe van het exporteren van hun ontwerpen van een speciale wireframing-app naar een volledige ontwerp-app. In plaats daarvan geven ze er de voorkeur aan om hun wireframes te bouwen met algemene ontwerpsoftware, zodat ze alles van begin tot eind op één platform kunnen ontwikkelen. (Onthoud dat u met een websitebouwer een site kunt ontwikkelen met een minimum aan gedoe.)
We hebben aanbevelingen in beide kampen. We hebben het teruggebracht tot 10 van de beste tools voor wireframing die er zijn. Zie voor meer handige tools onze verzameling webontwerptools, deze lijst met de beste UI-ontwerptools of onze beste laptops om te programmeren.
De beste wireframe-tools
01. UXPin
De beste wireframe-tool in het algemeen
Platform: Webbrowser | Gratis proefperiode: Ja | Prijs: Vanaf $ 19 per editor per maand
Intuïtieve interface Leest Sketch- en PS-bestanden Top presentatietools Geen gratis versieUXPin is een speciale wireframing-tool met een prachtig intuïtieve interface, met duidelijke pictogrammen en een solide bibliotheek met UI-elementen die je naar je wireframes kunt slepen en neerzetten, evenals componenten voor Bootstrap, Foundation, iOS en Android. U kunt bestanden importeren en exporteren naar Sketch en Photoshop, wat u de mogelijkheid geeft om uw wireframes verder te ontwikkelen tot volledige prototypes.
Er zijn ook enkele geweldige samenwerkingsfuncties om met anderen aan uw wireframes te werken, en eersteklas live presentatietools om uw ontwerpen te laten zien aan belanghebbenden. Gemakkelijk op te pikken voor beginners en boordevol geavanceerde tools voor de meer ervaren, UXPin is over het algemeen onze beste wireframe-tool.
02. Adobe XD
De beste volledige ontwerptool voor wireframing
Platform: MacOS, Windows, Android, ioS | Gratis proefperiode: Nee, maar een beperkte gratis versie | Prijs: Vanaf £ 9,98 per maand (enkele app) of £ 49,94 per maand als onderdeel van Creative Cloud
Cross-platform Creative Cloud-integratie Geavanceerde functies Voor de volledige versie is een abonnement vereistAdobe XD, gelanceerd als een directe concurrent van Sketch, is een vectorgebaseerde ontwerptool die beschikbaar is voor zowel Mac als Windows. Het is volledig compatibel met andere Adobe-tools zoals Photoshop en Illustrator, evenals met services zoals Adobe Fonts en Adobe Stock. En het is sterk gericht op het gemakkelijk maken van het schetsen van wireframes voor ontwerpers; van het maken van plattegronden, stroomdiagrammen en storyboards tot het bouwen van functionele prototypes.
Opvallende kenmerken zijn onder meer een 'Herhaalraster' voor snel ontwerpen, automatische animatie, stemactiveringen en krachtige samenwerkingstools. Je kunt Adobe XD gratis uitproberen, maar je hebt een Creative Cloud-abonnement nodig om toegang te krijgen tot alle functies.
03. Axure RP
De beste speciale wireframe-tool voor UX-professionals
Platform: MacOS, Windows | Gratis proefperiode: Ja | Prijs: Vanaf $ 25 (pro) per gebruiker per maand
Bouw werkende prototypes Geavanceerde functies Leercurve Misschien overdrevenMet Axure kunt u niet alleen low-fi wireframes maken, maar ook extra functionaliteit toevoegen en ook high-fidelity-frames bouwen. U kunt het gebruiken om interactieve HTML-mockups te maken voor zowel websites als apps, en uw app-ontwerp op uw telefoon bekijken met een ingebouwde deelfunctie.
Deze software wordt gebruikt door organisaties als Microsoft, Amazon en de BBC en bevat functies voor het overschrijven van symbolen, een inspectiemodus voor ontwikkelaars, animatie-effecten, opslag en delen in de cloud, CSS-export en documentatie. Een geweldige keuze voor ervaren UX-professionals die hun ontwerpen aan ontwikkelaars willen overhandigen.
04. Balsamiq-modellen
De beste wireframe-tool voor low-fi-ontwerpen
Platform: Mac, Windows, Linux, webbrowser | Gratis proefperiode: Ja | Prijs: Vanaf $ 89 voor één gebruiker voor desktop; vanaf $ 9 / maand voor webversie
Snel in gebruik Houdt de zaken eenvoudig Kleine leercurve Alleen low-fi wireframesBalsamiq Mockups maakt het heel gemakkelijk om wireframes op te pakken en te beginnen met het maken van wireframes, zelfs als je geen eerdere ervaring hebt. We raden het iedereen aan die een snel en low-fi draadframe wil samenstellen, in plaats van een gepolijst prototype.
De software bevat verschillende elementen voor slepen en neerzetten, van knoppen tot lijsten, elk gestileerd als een hand-tekening, en u kunt zien hoe uw draadframe eruit zal zien op verschillende schermformaten. Met goed geïntegreerde samenwerkingstools en gebruikerstests is dit een uitstekende keuze voor zowel niet-techneuten als slanke UX-teams.
05. Schets
Volledige ontwerptool met een sterke UI-focus
Platform: Mac | Gratis proefperiode: Ja | Prijs: $99
Sterke UI-focus Lichtgewicht Intuïtieve interface Alleen MacHoewel Sketch niet beschikbaar is voor Windows, is het zeker het overwegen waard als u een Mac-gebruiker bent. Sinds de lancering in 2010 heeft het een revolutie teweeggebracht in de hele markt voor tools voor wireframing en prototyping, en het blijft vandaag de dag laserfocus op UI en pictogramvectorontwerp. Lichtgewicht en gebruiksvriendelijk, de interface is prachtig eenvoudig en intuïtief.
Sketch is een geweldig hulpmiddel voor het maken van eenvoudige wireframes, met de Symbol-functie waarmee u elementen automatisch in uw lay-out kunt herhalen. Er zijn talloze UI-kits van derden om te downloaden als u een volledig prototype wilt bouwen. En in tegenstelling tot Adobe-apps is het beschikbaar voor een eenmalige vergoeding zonder abonnement.
06. Photoshop
De industriestandaard voor digitaal ontwerp
Platform: Windows, Mac | Gratis proefperiode: Ja | Prijs: Vanaf $ 19,99 per maand als onderdeel van Adobe Creative Cloud
Industriestandaard Creatieve cloud-integratie Rijk aan functies Ontbreekt elementbibliothekenPhotoshop is de industriestandaard als het gaat om ontwerpsoftware in het algemeen. Er zijn geen specifieke wireframing-functies; het biedt bijvoorbeeld geen bibliotheken met interface-elementen. Maar er is geen reden waarom u het niet voor wireframing kunt gebruiken. Inderdaad, omdat het zo goed is geïntegreerd met andere Adobe-tools en -services zoals Adobe Fonts en Adobe Stock, vind je Photoshop misschien wel de beste wireframe-tool voor jou. Vooral als u al bekend bent met de software. En het zit boordevol functies dat u alles kunt doen, van snelle ideeën schetsen tot het groeperen van verschillende elementen en lagen om een robuust draadframe te bouwen.
07. Justinmind
De beste wireframe- en prototypetool voor niet-techneuten
Platform: Mac OS, Windows | Gratis proefperiode: Nee, maar een beperkte gratis versie | Prijs: Vanaf $ 19 / maand
Bouw werkende prototypes Geschikt voor beginners Gratis versie LeercurveJustinmind is een ander hulpmiddel waarmee je alles kunt bouwen, van ruwe wireframes tot werkende prototypes, maar het is meer geschikt voor niet-techneuten dan Axure RP. Het bevat een bibliotheek met UI-elementen, van knoppen en formulieren tot algemene vormen en een reeks widgets voor iOS, SAP en Android.
Aangepaste opmaak is inbegrepen, zodat u afgeronde hoeken, bijgesneden afbeeldingen of kleurovergangen kunt toevoegen of afbeeldingen kunt importeren door ze naar de browser te slepen. Prototypes kunnen als HTML worden geëxporteerd. Er is zelfs een beperkte versie die voor altijd gratis is.
08. Wireframe.cc
De beste wireframe-tool in de browser
Platform: Webbrowser | Gratis proefperiode: Ja | Prijs: Vanaf $ 16 per maand
Houdt dingen eenvoudig Verwijdert afleidingen Niets om te downloaden Ontbreekt aan functies (zij het met opzet)Er is een populair gezegde in het bedrijfsleven dat bekend staat als het KISS-principe: ‘Houd het simpel, dom’. En als u die benadering van wireframing volgt, is Wireframe.cc wellicht de beste keuze voor u.
Deze browsergebaseerde tool biedt een eenvoudige interface voor het schetsen van uw wireframes en schuwt de werkbalken en pictogrammen van een typische app, dus er is niets dat u vertraagt. Er is een beperkt kleurenpalet om u te helpen die bepaalde weg van uitstelgedrag te vermijden, en UI-elementen zijn contextgevoelig en verschijnen alleen wanneer u ze nodig heeft.
09. Invision Studio
Ontwerp software met sterke samenwerking en responsieve functies
Platform: Windows, Mac | Gratis proefperiode: Nee, maar beperkt gratis abonnement | Prijs: Vanaf $ 13 per maand
Gemakkelijk te gebruiken Integreert met Invision Freehand Free-versie Kan niet met veel tools worden geïntegreerdInvision Studio is misschien niet zo rijk aan functies als Adobe XD, maar voor het maken van wireframes heeft het alles wat je nodig hebt. Het is vooral sterk in responsieve ontwerpfuncties en het kan goed worden geïntegreerd met Invision Freehand voor realtime samenwerking met anderen.
De interface is vrij eenvoudig te leren en de voorgeladen pictogrammen zijn erg gestroomlijnd en mooi ontworpen. Met handige functies zoals opmerkingen, overgangen en desktopsynchronisatie is dit een zeer capabele tool voor het bouwen van alles, van low-fi wireframes tot prototypes met volledige functionaliteit.
10. InDesign
Desktop publishing tool die geweldig is voor het maken van wireframes
Platform: Windows, Mac | Gratis proefperiode: Ja | Prijs: Vanaf $ 19,99 per maand als onderdeel van Adobe Creative Cloud
Ontwerp interactieve PDF's Creëer uw eigen bibliotheken Creatieve cloud-integratie Gebrek aan elementbibliothekenAdobe InDesign is al lang de meest populaire desktop publishing-software die er is. Maar tegenwoordig is het niet langer alleen gericht op printontwerp. De nieuwste versie kan ook worden gebruikt om een aantal behoorlijk pittige interactieve PDF's te maken, inclusief animaties, video en objectstatussen. En hoewel de digitale functies van InDesign voornamelijk worden gebruikt voor het maken van e-books, e-brochures en e-magazines, zijn ze net zo goed in staat om wireframes en mockups te maken. De software biedt ook de mogelijkheid om bibliotheken met pagina-elementen te maken, zodat u ook verzamelingen herbruikbare UI-afbeeldingen kunt maken.
