Topp 15 verktyg för Wireframing och Mockup för mobilappar 18 nov 2019

Det första steget i praktiskt taget vilken process som helst är att kartlägga den och ta fram en plan för hur man ska gå till väga. Tänk på det. Innan du bygger ett hus skapar du en ritning. Innan du spelar en fotbollsmatch tar du och ditt lag fram en spelplan. Innan du skriver en uppsats till din engelsklektion skriver du upp en detaljerad översikt. Samma sak gäller för att skapa en mobilapp. Faktum är att ett av de viktigaste stegen i utvecklingsprocessen för mobilappar är att skapa en struktur för din app. Och när jag säger struktur menar jag organiserat och förenklat innehåll och element.

Skapa en struktur för din app kan dock ta mycket tid och energi, om du inte har rätt verktyg på plats. Det är därför många mobilutvecklare börjar med ett verktyg för wireframing eller mockup för mobilappar. Wireframes för mobilappar kan inte bara hjälpa till att spara värdefull tid (och pengar!) utan också hjälpa utvecklarna att fokusera på användarupplevelsen.

Vad gör en bra wireframe eller mockup-verktyg?

Här kommer den svåra delen. Det finns egentligen inte riktigt någon lösning som passar alla när det gäller wireframing. Varje designteam har en unik designprocess och mobilapp. Så vad kan du leta efter? Till att börja med är det viktigt att du använder en uppdaterad programvara (oroa dig inte – alla verktygen nedan är uppdaterade och stabila). Sedan är det viktigt att leta efter en programvara som innehåller ett UI-kit eller ett uppladdningsalternativ, vilket innebär att den antingen har ett inbyggt bibliotek med UI-komponenter eller att du kan ladda upp UI-kits.

Det sagt, ta gärna en titt på våra 15 favoritverktyg för Wireframing & Mockup-verktyg för mobilapplikationer och se vilket som fungerar bäst för dig.

Justinmind

Justinmind är ett allt-i-ett-verktyg som kan skapa wireframes och prototyper för appar med hög trovärdighet. Det är mer exklusivt för design av mobilappar än de nuvarande vanliga designverktygen, på grund av det goda stödet för gester, övergångar och interaktiva effekter. Du kan skapa interaktiva wireframes med hjälp av animationer och interaktioner utan någon kod inblandad. Kom snabbt igång med ett antal anpassningsbara mallar med hjälp av dess drag-and-drop-gränssnitt. Verktyget erbjuder också stöd för onlinepresentationer så att användare kan dela wireframes på distans.
Prissättning: Med ett skrivbordsbaserat program som Mockplus kan du enkelt och snabbt skapa prototyper för din mobilapp. Mockplus har gjort sin applikation mycket enkel att använda så att du inte behöver data eller teknisk expertis för att utföra den. Du kan hitta mallar för Android, iPad och iPhone i varje storlek enligt dina specifika behov. Mockplus har också över 200 komponenter och mer än 3000 ikoner. Med ett enkelt dra-och-släpp kan du bygga interaktiva prototyper utan ansträngning.
Prissättning: $199 (Pro) per år/ $399 (obegränsad) per användare för livstid
Webbplats: www.mockplus.com

Balsamiq

Balsamiq Wireframes är ett populärt verktyg för wireframing av mobilappar som är lätt att använda tack vare sin drag-och-släpp-funktion. Det har också ett skissläge för brainstorming och ett rent wireframe-läge för presentation, och du kan enkelt växla mellan dem. En annan bra sak är att det erbjuder en 30-dagars gratis provperiod för att prova det innan du binder dig. Om du letar efter ett flexibelt, bekvämt och snabbt wireframe-verktyg kan det här vara det rätta.
Prissättning: 9 dollar (2 projekt) / 49 dollar (20 projekt) / 199 dollar (200 projekt) per månad
Webbplats: www.balsamiq.com

Proto.io

Proto.io är ett wireframing- och prototyping-verktyg som är inriktat på tester av användarupplevelser. Som ett verktyg för wireframing låter det dig inte bara skapa interaktiva wireframes, utan du kan också testa hur användarna interagerar med dina wireframes och samla in tidig användarfeedback. Det är en utmärkt programvara för wireframing och prototyper för mobiler eftersom den också låter användarna se prototyperna offline och levereras med många mobila widgets.Du kan antingen direkt bädda in dina wireframes på en webbplats eller skicka in dem till plattformar för användartestning. Proto.io är tillgänglig för Android, iOS, dator eller webbläsare. Den erbjuder också en riskfri, kostnadsfri provperiod på 15 dagar.
Prissättning: 24 dollar (frilans) / 40 dollar (startup) / 80 dollar (byrå) / 160 dollar (företag) per månad, faktureras årligen
Webbplats: www.proto.io

Moqups

Moqups är en renodlat webbaserad plattform som används för att skapa en wireframe för webb- och mobilapplikationer. Den största fördelen med de webbaserade plattformarna är att du kan arbeta var som helst. Moqups gjordes tillgängligt kostnadsfritt för utvecklargemenskapen över hela världen. Du kan skapa enkla wireframe, solida modeller och UI-koncept genom att använda denna online mockup och dess inbyggda mallar kan användas direkt. De betalda planerna börjar från 13 till 20 dollar per månad med ett definierat antal användare.
Prissättning: 20 dollar (trio, 7 dollar per varje ytterligare användare)/13 dollar (enskild användare)/ Custom (företag) per månad, faktureras årligen
Webbplats: www.moqups.com

InVision

InVision är ett fantastiskt verktyg skapat av designers för designers. Föredrar du att skapa dina wireframes på en whiteboard där alla kan bidra och revidera? Då kan det här vara verktyget för dig. Med InVision skapar du interaktiva mockups och delar dem med ditt team, som sedan kan lämna kommentarer direkt på skärmen. Du har också tillgång till listor med uppgifter att göra i realtid, så att andra kan delta i diskussionen.
Prissättning: Priser: Gratis
webbplats: www.invisionapp.com

Fluid UI

Fluid UI är ett annat ledande och populärt verktyg för wireframing och mockup. Fluid UI använder den senaste tekniken som HTML5, JavaScript och CSS. Du kan enkelt skapa layouter genom att dra in element från dessa bibliotek. Fluid UI ger dig ett bra sätt att kartlägga dina projekt visuellt genom att skapa länkar för att sammanfoga skärmar och bilda ett diagram över hur allting passar ihop. Fluid UI har en unik funktion som låter en användare interagera med UI-designen via olika enheter som mobiler, surfplattor och stationära datorer.
Prissättning: $8,25 (solo) / $19,08 (pro) / $41,58 (team) per månad
Webbplats: www.fluidui.com

Pidoco

Pidoco är en molnhostad mockup-programvara som levereras med anpassade mallar, interaktiva element och enkel skissning för snabb och effektiv wireframing. När det gäller samarbete kan användarna dela och redigera skärmar tillsammans med andra användare och samla in kommentarer i realtid. Du kan också skapa anpassade byggblock och återanvända dem. Det är möjligt att integrera Pidoco med olika andra programvaror som Jira, Planio med flera via deras API.
Prissättning: Gratis med begränsade funktioner/ $9,99 (Basic)/ $59 (Pro)/ $199 (obegränsad) per månad
Website: www.pidoco.com

Protoshare

ProtoShare är ett webbaserat wireframing- och mockup-verktyg som du kan använda för att skapa interaktiva wireframes för mobilappar (såväl som webbplatser). Det innehåller ett bibliotek med drag-and-drop-element, en webbplatskarta och möjligheten att använda anpassad CSS och infoga egna element. Effektivisera ditt arbete genom att skapa Masters och Mallar från grunden och återanvända dem på flera sidor eller projekt.
Prissättning: 29 dollar (standard) / 49 dollar (professional) / 59 dollar (business) per person och månad
Webbplats: www.protoshare.com

Wireframe.cc

Wireframe.cc är ett enkelt och okomplicerat verktyg för wireframes som är idealiskt för den som precis har börjat. Det gör det möjligt att lägga till anteckningar till specifika markeringsområden för kommentarer och recensioner också. Det kanske dock inte är lika funktionsrikt som andra verktyg. Det finns en begränsad färgpalett för att hjälpa dig att undvika den speciella vägen för prokrastinering, och UI-element är kontextkänsliga och visas bara när du behöver dem.
Prissättning: Gratis / $16 (solo) / $39 (trio) / $99 (obegränsad) per månad
Webbplats: www.wireframe.cc

Axure

Axure är ett wireframing- och mockup-verktyg för företag med animationer, adaptiva vyer och funktioner för betingat flöde som gör det möjligt för dig att ställa in flödet för användarupplevelsen. Användare kan lägga till anteckningar till wireframes för att spara projektanteckningar. Om du vill göra wireframing, prototyping och diagramming i ett och samma verktyg är Axure ett utmärkt val.
Prissättning: 29 dollar (pro) / 49 dollar (team) / 99 dollar (enterprise) per användare och månad
Webbplats: www.axure.com

UXPin

UXPin är ett verktyg för wireframing, UX-design och mockup som har funktioner för att dela, kommentera och granska samt funktioner som godkännandebegäran, uppgiftstilldelning och Slack- eller e-postmeddelanden, så att användarna kan effektivisera arbetsflöden. Den enkla dra-och-släpp-funktionen låter dig dra ikoner, anpassade UI-element och bilder för att förbättra en wireframe.
Administratörer kan ställa in team- och rollbaserad behörighetsåtkomst och låsa viktiga projekt.
Prissättning: Gratis/ $29 (Pro)/ $49 (Team)/ Custom (Enterprise, faktureras månadsvis)
Website: www.uxpin.com

Figma

Figma är det första allt-i-ett-designverktyget som är baserat i webbläsaren. Designers kan hålla sig organiserade med hjälp av lagerpanelen, som håller alla artboards och UI-element lagrade på ett och samma ställe. Förutom att vara ett utmärkt verktyg för fristående designers erbjuder Figma samarbete i realtid för ditt team. Figma gör det med fördel möjligt för flera användare att arbeta på ett projekt samtidigt, och alla ändringar sparas i ett projekt. Lagkamraterna kommunicerar genom att kommentera elementen.
Prissättning: Gratis (starter)/ 12 dollar (professionell)/ 45 dollar (organisation)
Webbplats: www.figma.com

Sketch

Sketch är ett fantastiskt appdesignverktyg för vektorredigering, prototypering och samarbete. Verktyget erbjuder en digital designverktygslåda för appbyggande som innehåller massor av designsymboler som kan återanvändas och delas inom designgemenskapen. Du kan till och med lägga till data till dina designer och omvandla dem till användarflödesdiagram.
Prissättning: För en personlig licens betalar användarna 99 dollar per år. Alternativt erbjuder Sketch ett paket per enhet (volymlicens) för 89 dollar/år/enhet.
Webbplats: www.sketch.com

MarvelApp

Sist men inte minst finns MarvelApp. MarvelApp är en riktigt cool multifunktionell designplattform som kan användas för att skapa wireframing av mobilappar för flera enheter. Den här applikationen gör det möjligt för sina användare att sätta ihop design snabbt och effektivt via dess drag-and-drop-funktion. MarvelApp låter också användarna väcka sina prototyper till liv med realistiska skärmövergångar (med hjälp av triggers, dvs. hover, swipe eller click).
Prissättning: Priserna börjar på 12 dollar/månad (Pro-paketet).
Website: www.marvelapp.com

Start wireframing today!

När man utformar en mobilapp bör användarupplevelsen alltid stå högst upp på listan. Utan den kommer din app att ansluta sig till miljontals mobilappar som försvinner i havet av oupptäckta. Det vill du väl inte ha nu, eller hur? Därför bör du vara medveten om de processer som behövs när du skapar wireframes för appar. Du kan använda en kombination av verktygen på den här listan för att skapa dina wireframes; börja med en webbaserad app och gå vidare till en molnbaserad app för en mer detaljerad iteration av din wireframe.