Innhold
- De beste trådrammeverktøyene
- 01. UXPin
- 02. Adobe XD
- 03. Aksel RP
- 04. Balsamiq Mockups
- 05. Skisse
- 06. Photoshop
- 07. Justinmind
- 08. Wireframe.cc
- 09. Invision Studio
- 10. InDesign
De beste trådrammeverktøyene gjør det mulig å spikre utformingen av nettstedet ditt eller appen din helt fra begynnelsen. Ved å få alle interessenter til å bli enige om hvordan brukergrensesnittet ditt vil fungere, blir buy-in bakt inn tidlig. Og det er viktig for å effektivisere prosessen din og forhindre feil sving og reversering underveis.
Noen av de beste trådrammeverktøyene laget spesielt med tanke på wireframing. Hvilken av disse du velger, avhenger i stor grad av om du ønsker å lage noe raskt og grovt, eller noe nærmere en fullt fungerende prototype.
På den andre siden av mynten vil ikke noen mennesker oppstyret av å eksportere designene sine fra en dedikert wireframing-app til en app for full design. I stedet foretrekker de å bygge trådrammene innen designprogramvare for generell bruk, slik at de kan utvikle alt på en plattform fra start til slutt. (Husk at du kan utvikle et nettsted med minst mulig oppstyr ved hjelp av en nettstedsbygger.)
Vi har anbefalinger i begge leirene. Vi har innsnevret det til 10 av de beste wireframing-verktøyene der ute. For mer praktiske verktøy, se vår liste over webdesignverktøy, denne listen over de beste UI-designverktøyene eller våre beste bærbare datamaskiner for programmering.
De beste trådrammeverktøyene
01. UXPin
Det beste trådrammeverktøyet generelt
Plattform: Nettleser | Gratis prøveperiode: Ja | Pris: Fra $ 19 per redaktør per måned
Intuitivt grensesnitt Leser skisse- og PS-filer Topp presentasjonsverktøy Ingen gratis versjonUXPin er et dedikert wireframing-verktøy som har et vakkert intuitivt grensesnitt, med tydelige ikoner og et solid bibliotek med UI-elementer du kan dra og slippe inn i trådrammene dine, samt komponenter for Bootstrap, Foundation, iOS og Android. Du kan importere og eksportere filer til Sketch og Photoshop, som gir deg muligheten til å utvikle trådrammene dine til fullstendige prototyper lenger ned på linjen.
Det er også noen gode samarbeidsfunksjoner for å jobbe med trådrammene dine med andre, og førsteklasses live presentasjonsverktøy for å vise designene dine til interessenter. Lett å hente for nybegynnere, og fullpakket med avanserte verktøy for de mer erfarne, er UXPin vårt beste trådrammeverktøy generelt.
02. Adobe XD
Det beste verktøyet for fullstendig design for wireframing
Plattform: MacOS, Windows, Android, ioS | Gratis prøveperiode: Nei, men begrenset gratisversjon | Pris: Fra £ 9,98 per måned (enkelt app) eller £ 49,94 per måned som en del av Creative Cloud
Tverrplattform Creative Cloud-integrasjon Avanserte funksjoner Full versjon krever abonnementAdobe XD ble lansert som en direkte konkurrent til Sketch, og er et vektorbasert designverktøy som er tilgjengelig for både Mac og Windows. Det er fullt kompatibelt med andre Adobe-verktøy som Photoshop og Illustrator, samt tjenester som Adobe Fonts og Adobe Stock. Og det er sterkt fokusert på å gjøre prosessen med å tegne trådrammer enkel for designere; fra å lage områdekart, flytskjemaer og storyboards til å bygge funksjonelle prototyper.
Merkbare funksjoner inkluderer et 'Repeat Grid' for rask design, auto-animasjon, stemmeavgivere og sterke samarbeidsverktøy. Du kan prøve Adobe XD gratis, men du trenger et Creative Cloud-abonnement for å få tilgang til hele spekteret av funksjoner.
03. Aksel RP
Det beste dedikerte trådrammeverktøyet for UX-proffer
Plattform: MacOS, Windows | Gratis prøveperiode : Ja | Pris: Fra $ 25 (pro) per bruker per måned
Bygg fungerende prototyper Avanserte funksjoner Læringskurve kan være overkillAxure lar deg ikke bare lage low-fi wireframes, men også legge til ekstra funksjonalitet og bygge high-fidelity også. Du kan bruke den til å lage interaktive HTML-modeller for både nettsteder og apper, og se appdesignet ditt på telefonen din med en innebygd delingsfunksjon.
Denne programvaren brukes av organisasjoner som Microsoft, Amazon og BBC, og inkluderer symboloverstyringsfunksjoner, en inspeksjonsmodus for utviklere, animasjonseffekter, lagring og deling av skyer, CSS-eksport og dokumentasjon. Et godt valg for erfarne UX-profesjonelle som ønsker å levere designene sine til utviklere.
04. Balsamiq Mockups
Det beste trådrammeverktøyet for low-fi design
Plattform: Mac, Windows, Linux, nettleser | Gratis prøveperiode: Ja | Pris: Fra $ 89 for en bruker for skrivebordet; fra $ 9 / måned for nettversjon
Raskt å bruke Holder ting enkelt Liten læringskurve Bare trådløse rammer med lav fi-fiBalsamiq Mockups gjør det veldig enkelt å hente og begynne å lage trådrammer, selv om du ikke har noen tidligere erfaring. Vi vil anbefale det for alle som ønsker å sette sammen for å få sammen en rask og lav-fi trådramme, i motsetning til en polert prototype.
Programvaren har flere dra-og-slipp-elementer, fra knapper til lister, hver utformet som en håndtegning, og du kan se hvordan trådrammen din vil se ut på tvers av forskjellige skjermstørrelser. Med samarbeidsverktøy og brukertesting pent integrert, er dette et godt valg for både ikke-tekniske og magre UX-team.
05. Skisse
Fullt designverktøy med sterkt UI-fokus
Plattform: Mac | Gratis prøveperiode: Ja | Pris: $99
Sterkt UI-fokus Lett, intuitivt grensesnitt Kun MacSelv om Sketch ikke er tilgjengelig for Windows, er det absolutt verdt å vurdere hvis du er en Mac-bruker. Siden lanseringen i 2010 revolusjonerte det hele markedet for verktøy for trådløs innramming og prototyping, og det er fortsatt laserfokusert på UI og ikonvektordesign i dag. Lett og enkel å bruke, grensesnittet er vakkert enkelt og intuitivt.
Sketch er et flott verktøy for å lage enkle wireframes, med sin symbolfunksjon som lar deg gjenta elementer automatisk på tvers av layoutet ditt. Det er utallige tredjeparts UI-sett å laste ned hvis du vil bygge en full prototype. Og i motsetning til Adobe-apper, er den tilgjengelig mot en engangsavgift uten abonnement.
06. Photoshop
Bransjestandarden for digital design
Plattform: Windows, Mac | Gratis prøveperiode: Ja | Pris: Fra $ 19,99 per måned som en del av Adobe Creative Cloud
Bransjestandard Kreativ skyintegrasjon Funksjonsrik Mangler elementbibliotekerPhotoshop er industristandarden når det gjelder designprogramvare generelt. Det er ikke noen spesifikke wireframing-funksjoner; det tilbyr ikke for eksempel biblioteker med grensesnittelementer. Men det er ingen grunn til at du ikke kan bruke den til wireframing. Faktisk, fordi det er så pent integrert med andre Adobe-verktøy og tjenester som Adobe Fonts og Adobe Stock, kan du godt finne Photoshop som det beste wireframe-verktøyet for deg. Spesielt hvis du allerede er kjent med programvaren. Og den er fullpakket med så mange funksjoner at du er i stand til å gjøre alt fra å skissere raske ideer, til å gruppere forskjellige elementer og lag for å bygge en robust trådramme.
07. Justinmind
Det beste trådrammen og prototypeverktøyet for ikke-teknologier
Plattform: Mac OS, Windows | Gratis prøveperiode: Nei, men begrenset gratisversjon | Pris: Fra $ 19 / måned
Bygg fungerende prototyper Egnet for nybegynnere Gratis versjon LæringskurveJustinmind er et annet verktøy som lar deg bygge alt fra tøffe trådrammer til fungerende prototyper, men er mer egnet for ikke-teknologier enn Axure RP. Den inkluderer et bibliotek med brukergrensesnittelementer, fra knapper og skjemaer til generiske former og en rekke widgets for iOS, SAP og Android.
Tilpasset styling er inkludert, slik at du kan legge til avrundede hjørner, beskjærte bilder eller fargevalg, eller importere grafikk ved å dra dem til nettleseren. Prototyper kan eksporteres som HTML. Det er til og med en begrenset versjon som er gratis, for alltid.
08. Wireframe.cc
Det beste trådrammeverktøyet i nettleseren
Plattform: Nettleser | Gratis prøveperiode: Ja | Pris: Fra $ 16 per måned
Holder ting enkelt Fjerner distraksjoner Ingenting å laste ned Mangler funksjoner (om enn med vilje)Det er et populært ordtak i virksomheten kjent som KISS-prinsippet: 'Keep it simple, stupid'. Og hvis du tar denne tilnærmingen til wireframing, kan Wireframe.cc være det beste valget for deg.
Dette nettleserbaserte verktøyet tilbyr et enkelt grensesnitt for å skissere trådrammene dine og unngår verktøylinjene og ikonene til en typisk app, så det er ingenting som bremser deg. Det er en begrenset fargepalett som hjelper deg med å unngå den aktuelle utsettelsesveien, og brukergrensesnittelementene er kontekstsensitive og vises bare når du trenger dem.
09. Invision Studio
Design programvare med sterkt samarbeid og responsive funksjoner
Plattform: Windows, Mac | Gratis prøveperiode: Nei, men begrenset gratis plan | Pris: Fra $ 13 per måned
Enkel å bruke Integrerer med Invision Freehand Free versjon Integreres ikke med mange verktøyInvision Studio er kanskje ikke så funksjonsrikt som Adobe XD, men for å lage trådrammer har det alt du trenger. Det er spesielt sterkt med responsive designfunksjoner, og det integreres fint med Invision Freehand for sanntids samarbeid med andre.
Grensesnittet er ganske enkelt å lære, og de forhåndslastede ikonene er veldig elegante og pent designet. Med praktiske funksjoner som kommentarer, overganger og skrivebordssynkronisering, er dette et veldig dyktig verktøy for å bygge alt fra low-fi wireframes til fullverdige prototyper.
10. InDesign
Desktop-publiseringsverktøy som er flott for å lage trådrammer
Plattform: Windows, Mac | Gratis prøveperiode: Ja | Pris: Fra $ 19,99 per måned som en del av Adobe Creative Cloud
Design interaktive PDF-filer Lag dine egne biblioteker Kreativ skyintegrasjon Mangler elementbibliotekerAdobe InDesign har lenge vært den mest populære programvaren for stasjonær publisering. Men i disse dager er det ikke lenger bare fokus på trykkdesign. Den siste versjonen kan også brukes til å lage noen ganske zippy interaktive PDF-filer, inkludert animasjoner, video og objekttilstander. Og mens de digitale funksjonene til InDesign hovedsakelig brukes til å lage e-bøker, e-brosjyrer og e-magasiner, er de like i stand til å lage trådrammer og mockups. Programvaren inkluderer også muligheten til å lage biblioteker med sideelementer, slik at du også kan lage samlinger av gjenbrukbare UI-grafikk.
