Top 15 værktøjer til wireframing og mockup af mobilapps 18 Nov 2019

Det første skridt i stort set alle processer er at kortlægge den og udarbejde en angrebsplan. Tænk over det. Før du bygger et hus, laver du et blueprint. Før du spiller en fodboldkamp, udarbejder du og dit hold en spilplan. Før du skriver et essay til engelskundervisningen, udarbejder du en detaljeret plan. Det samme gælder for at skabe en mobilapp. Faktisk er et af de vigtigste trin i mobilapp-udviklingsprocessen at skabe en struktur for din app. Og når jeg siger struktur, henviser jeg til organiseret og forenklet indhold og elementer.

Skabelse af en struktur for din app kan dog tage meget tid og energi, medmindre du selvfølgelig har det rigtige værktøj på plads. Derfor starter mange mobiludviklere ud med et wireframing- eller mockup-værktøj til mobilapps. Wireframes til mobilapps kan ikke kun hjælpe med at spare værdifuld tid (og penge!), men også hjælpe udviklerne med at fokusere på brugeroplevelsen.

Hvad gør et godt wireframe- eller mockup-værktøj?

Her er den svære del. Der er ikke rigtig en one-size-fits-all-løsninger, når det kommer til wireframing. Hvert designteam har en unik designproces og mobilapp. Så hvad kan du kigge efter? For det første er det vigtigt, at du anvender en opdateret software (bare rolig – alle nedenstående værktøjer er opdaterede og stabile). Derefter er det vigtigt at kigge efter en software, der indeholder et UI-kit eller en upload-mulighed, hvilket betyder, at den enten har et indbygget UI-komponentbibliotek eller at du kan uploade UI-kits.

Det sagt, er du velkommen til at tage et kig på vores top 15 favorit Mobile App Wireframing & Mockup Tools og se, hvilket der fungerer bedst for dig.

Justinmind

Justinmind er et alt-i-ét-værktøj, der er i stand til at skabe wireframes og prototyper til apps med høj troværdighed. Det er mere eksklusivt på design af mobilapps end de nuværende mainstream-designværktøjer på grund af den gode understøttelse af gestusoperationer, overgange og interaktive effekter. Du kan oprette interaktive wireframes ved hjælp af animationer og interaktioner uden at have kode involveret. Kom hurtigt i gang med en række skabeloner, der kan tilpasses ved hjælp af dens træk-og-slip-grænseflade. Værktøjet tilbyder også online præsentationsstøtte, så brugerne kan dele wireframes eksternt.
Prisfastsættelse: Priser: Fra 19 USD/måned
Websted: www.justinmind.com

Mockplus

Med et desktopbaseret program som Mockplus kan du nemt og hurtigt lave prototyper på din mobilapp. Mockplus har gjort deres applikation meget let at bruge, så du behøver ikke data eller teknisk ekspertise for at udføre den. Du kan finde Android-, iPad- og iPhone-skabeloner i hver størrelse i henhold til dine specifikke behov. Mockplus har også over 200 komponenter og mere end 3000 ikoner. Med et simpelt træk-og-slip kan du bygge interaktive prototyper uden besvær.
Priser: 199 $ (Pro) pr. år/ 399 $ (ubegrænset) pr. bruger i hele livet
Website: www.mockplus.com

Balsamiq

Balsamiq Wireframes er et populært wireframing-værktøj til mobile apps, som er nemt at bruge takket være dets træk-og-slip-funktionalitet. Det har også en skitsetilstand til brainstorming og en ren wireframe-tilstand til præsentation, og du kan nemt skifte mellem dem. En anden god ting er, at det tilbyder en 30-dages gratis prøveperiode, så du kan prøve det af, før du binder dig. Hvis du leder efter et fleksibelt, praktisk og hurtigt wireframe-værktøj, er dette måske lige det rigtige.
Priser: $9 (2 projekter) / $49 (20 projekter) / $199 (200 projekter) pr. måned
Website: www.balsamiq.com

Proto.io

Proto.io er et wireframing- og prototyping-værktøj, der er rettet mod brugeroplevelsestests. Som wireframing-værktøj giver det dig ikke kun mulighed for at oprette interaktive wireframes, men du kan også teste, hvordan brugerne interagerer med dine wireframes, og indsamle tidlig brugerfeedback. Det er en fantastisk software til wireframing og prototyping af mobiler, da det også giver brugerne mulighed for at se prototyperne offline og leveres med en masse mobile widgets. du kan enten direkte indlejre dine wireframes på et websted eller indsende dem til brugertestplatforme. Proto.io er tilgængelig på Android, iOS, desktop eller i webbrowseren. Den tilbyder også en risikofri, gratis prøveperiode på 15 dage.
Priser: $24 (Freelance)/ $40 (Startup)/ $80 (Agency)/ $160 (Corporate) pr. måned, faktureres årligt
Website: www.proto.io

Moqups

Moqups er en rent webbaseret platform, der bruges til at skabe en wireframe til web- og mobilapplikationer. Den største fordel ved de webbaserede platforme er, at du kan arbejde hvor som helst. Moqups blev stillet gratis til rådighed for udviklersamfundet i hele verden. Du kan skabe enkle wireframe, solid model og UI-koncepter ved at bruge denne online mockup, og dens indbyggede skabeloner kan bruges direkte. De betalte abonnementer starter fra 13 til 20 dollars om måneden med et defineret antal brugere.
Priser: 20 dollars (trio, 7 dollars pr. ekstra bruger)/13 dollars (enkeltbruger)/ Custom (virksomhed) pr. måned, faktureres årligt
Website: www.moqups.com

InVision

InVision er et fantastisk værktøj skabt af designere for designere. Foretrækker du at skabe dine wireframes på et whiteboard, hvor alle kan bidrage og revidere? Så er dette måske det rette værktøj for dig. Med InVision opretter du interaktive mockups og deler dem med dit team, som så kan afgive kommentarer direkte på skærmen. Du har også adgang til to do-lister i realtid, så andre kan deltage i diskussionen.
Prisfastsættelse: Gratis
Websted: www.invisionapp.com

Fluid UI

Fluid UI er et andet førende og populært wireframing- og mockup-værktøj. Fluid UI bruger de nyeste teknologier som HTML5, JavaScript og CSS. Du kan nemt oprette layouts ved at trække elementer fra disse biblioteker ind. Fluid UI giver dig en fantastisk måde at kortlægge dine projekter visuelt på ved at oprette links til at forbinde skærme og danne et diagram over, hvordan alting passer sammen. Fluid UI har en unik funktion, der lader en bruger interagere med UI-designet via forskellige enheder såsom mobiler, tablets og stationære computere.
Priser: $8,25 (solo) / $19,08 (pro) / $41,58 (team) pr. måned
Website: www.fluidui.com

Pidoco

Pidoco er en cloud-hosted mockup-software, der leveres med brugerdefinerede skabeloner, interaktive elementer og nem skitsering til hurtig og effektiv wireframing. Med hensyn til samarbejde kan brugerne dele og redigere skærmbilleder sammen med andre brugere og indsamle kommentarer i realtid. Du kan også oprette brugerdefinerede byggeblokke og genbruge dem. Det er muligt at integrere Pidoco med forskellige andre programmer såsom Jira, Planio og mere via deres API.
Prisfastsættelse: Gratis med begrænsede funktioner/ $9,99 (Basic)/ $59 (Pro)/ $199 (ubegrænset) pr. måned
Website: www.pidoco.com

Protoshare

ProtoShare er et webbaseret wireframing- og mockup-værktøj, som du kan bruge til at skabe interaktive wireframes til mobile apps (samt websites). Det indeholder et bibliotek med træk-og-slip-elementer, et sitemap og mulighed for at bruge brugerdefinerede CSS-elementer og indsætte dine egne elementer. Strømlin dit arbejde ved at oprette Masters og skabeloner fra bunden og genbruge dem på tværs af flere sider eller projekter.
Priser: 29 $ (standard) / 49 $ (professionel) / 59 $ (erhverv) pr. person pr. måned
Websted: www.protoshare.com

Wireframe.cc

Wireframe.cc er et simpelt og ligetil wireframe-værktøj, der er ideelt for dem, der lige er kommet i gang. Det giver dig mulighed for at tilføje annotationer til specifikke markup-områder til kommentarer og anmeldelser også. Det er dog måske ikke så funktionsrigt som andre værktøjer. Der er en begrænset farvepalet for at hjælpe dig med at undgå den særlige vej til udsættelse, og UI-elementer er kontekstafhængige og vises kun, når du har brug for dem.
Prisfastsættelse: Gratis / $16 (solo) / $39 (trio) / $99 (ubegrænset) pr. måned
Websted: www.wireframe.cc

Axure

Axure er et wireframing- og mockup-værktøj i virksomhedskvalitet, der leveres med animation, adaptive visninger og funktioner til betinget flow, der giver dig mulighed for at indstille brugeroplevelsesflowet. Brugere kan tilføje annotationer til wireframes for at gemme projektnoter. Hvis du ønsker at lave wireframing, prototyping og diagrammering i ét værktøj, er Axure et godt valg.
Priser: 29 $ (pro) / 49 $ (team) / 99 $ (enterprise) pr. bruger pr. måned
Website: www.axure.com

UXPin

UXPin er et wireframing-, UX-design- og mockup-værktøj, der leveres med funktioner til deling, kommentering og gennemgang samt funktioner som godkendelsesanmodninger, opgavetildelinger og Slack/emailmeddelelser, så brugerne kan strømline arbejdsgangene. Den enkle træk og slip-funktionalitet giver dig mulighed for at trække ikoner, brugerdefinerede UI-elementer og billeder for at forbedre en wireframe.
Administratorer kan indstille team- og rollebaseret adgangstilladelse og låse vigtige projekter.
Prisfastsættelse: Gratis/ $29 (Pro)/ $49 (Team)/ Custom (Enterprise, faktureres månedligt)
Websted: www.uxpin.com

Figma

Figma er det første alt-i-ét designværktøj baseret i browseren. Designere kan holde sig organiseret ved hjælp af lagpanelet, som holder alle artboards og UI-elementer gemt ét sted. Ud over at være et fremragende værktøj for selvstændige designere tilbyder Figma samarbejde i realtid for dit team. Figma giver med fordel mulighed for, at flere brugere kan arbejde på et projekt på samme tid, og alle ændringer gemmes i ét projekt. Holdkammeraterne kommunikerer ved at kommentere på elementerne.
Prisfastsættelse: Gratis (starter)/ $12 (professionel)/ $45 (organisation)
Websted: www.figma.com

Sketch

Sketch er et fantastisk app-designværktøj til vektorredigering, prototyping og samarbejde. Værktøjet tilbyder en digital designværktøjskasse til app-bygning, som indeholder masser af designsymboler, der kan genbruges og deles inden for designfællesskabet. Du kan endda tilføje data til dine designs og omdanne dem til brugerflowdiagrammer.
Prisfastsættelse: For en personlig licens betaler brugerne 99 USD/år. Alternativt tilbyder Sketch en pakke pr. enhed (volumenlicens) til 89 dollars/år/enhed.
Websted: www.sketch.com

MarvelApp

Sidst, men ikke mindst, er der MarvelApp. MarvelApp er en rigtig fed multifunktionel designplatform, der kan bruges til at lave wireframing af mobilapps til flere enheder. Denne applikation giver sine brugere mulighed for at sammensætte designs hurtigt og effektivt via sin træk-og-slip-funktion. MarvelApp giver også brugerne mulighed for at bringe deres prototyper til live med realistiske skærmovergange (ved hjælp af triggere, dvs. hover, swipe eller klik).
Prissætning:
Website: www.marvelapp.com

Start wireframing today!

Når man designer en mobilapp, bør brugeroplevelsen altid stå øverst på listen. Uden den vil din app slutte sig til millioner af mobilapps, der er tabt i havet af uopdagede apps. Det vil du ikke have nu, vel? Derfor bør du være opmærksom på de processer, der er nødvendige, når du laver wireframes til apps. Du kan bruge en kombination af værktøjerne på denne liste til at skabe dine wireframes; starte med en webbaseret app og gå videre til en cloud-baseret app til en mere detaljeret iteration af din wireframe.