Oavsett om du vill utforma en mobilapp, skrivbordsprogramvara eller helt enkelt försöka skapa en webbplats, genom att skapa UI Mockups, kan du få de första visuella bilderna av dina framtida projekt och presentera också designsidan för kunden på ett bättre sätt.
Skapa UI Mockups är annorlunda än Wireframing. Wireframing är som att skapa en blueprint för ditt hus eller teknikprojekt medan skapandet av en Mockup kommer upp med den faktiska kreativa utformningen (slutliga utseendet) av huset för kunderna.
Att ha tillgång till ett användbart Mockup-verktyg hjälper dig i UI-designfasen och påskyndar hela processen.
Det finns ingen brist på UI Mockup-verktyg; Men med så många alternativ att välja mellan kan det bli förvirrande om vilken som du bör börja använda först.
Oavsett om du är professionell ute efter att lägga till mer elverktyg till sin nuvarande arsenal eller en nybörjare som försöker händerna på Mockup-designen för första gången, kommer den här guiden att presentera dig för några av de bästa verktygen för att skapa UI Mockups i 2019.
- 1
MockFlow
- Pris - Gratis begränsad / Premium $ 19 månadsplan - $ 14 per användare per månad årlig plan
MockFlow är en premium cloud-based lösning som erbjuder Wireframe, Prototyping och UI Mockup verktyg för individer och organisation. Den kommer i både gratis och premium planer och kan också användas på din dator.
Prissättningen är uppdelad mellan årliga och månatliga planer. Jämfört med årliga planer är de månatliga planerna inte bara dyra men missar också några funktioner. På årliga planer får du inte bara en rimlig rabatt utan får också 3 månaders gratis service, offlineåtkomst och power-ups.
För att använda verktyget måste du registrera dig med ett gratis konto. Med de kostnadsfria kontona kan du skapa ett projekt i varje app, två granskare per projekt, ett begränsat urval av appar och inget stöd. Det fria kontot ger dock en bra uppfattning om användbarheten hos MockFlow.
MockFlow erbjuder offlineåtkomst på Windows och Mac OS-datorer. Med MockFlow-tillägg kan du använda verktyget med appar som Microsoft Office, Google Chrome, Google Dokument, Slack, JIRA och mer.
MockFlow har sex grundläggande funktioner, nämligen WireFrame och UI Mockups, Sitemap, StyleGuide, DesignCollab, Annotate Pro och Website Pro. För att skapa UI Mockups använder du det första WireFrame-alternativet från instrumentpanelen och klickar på + -ikonen.
Börja med att välja plattformen du vill skapa mockup för som iOS-enheter, smarta klockor, webbplats, Microsoft-appar etc.
Redigeringspanelen är uppdelad mellan 6 flikar. Från fliken Element kan du dra och släppa förkonstruerade objekt som Mobile-ram, ikoner, bakgrundsbilder, menyflikar, checkoutalternativ och mer eller du kan helt enkelt börja från en tom sida om du vill.
Objekten kan anpassas ytterligare med ett enkelt dubbelklick. Du kan gruppera flera element tillsammans för att göra det lättare att flytta och skala av användargränssnittet.
Andra flikar i redigeraren är Sidor, för att skapa flera sidor för samma app, fliken Bilder, fliken Flöde för att lägga till och kontrollera statusen för projekten, Spara och uppstart-fliken för att lägga till fler appar och mallar.
MockFlow är ett utmärkt mångsidigt verktyg för att skapa UI Mockups och mer. Premieplanerna betyder emellertid att det är för seriösa användare som kan utnyttja minst hälften av funktionen som erbjuds.
Prova MockFlow
- Läs också: 10 bästa gratis 3D-designprogram för nybörjare och avancerade användare
- 2
Balsamiq
- Pris - Gratis 30-dagars försök / Online-versionen börjar vid $ 9 per månad / Offline version börjar vid $ 89 evig licens
Balsamiq är en modern molnbaserad lösning för UI-designers och utvecklare som erbjuder en snabb, användbar, samverkande trådframställning. Om du föredrar en offline-lösning, fick Balsamiq det också.
Balsamiq erbjuder två versioner av verktyget, online och offline desktop app för Mac och Windows-datorer. Offlineversionen är ett inköp som kostar $ 89 för en enda användare. Onlineversionen börjar på $ 9 per månad per användare med plats för två projekt.
Lyckligtvis kan du registrera dig gratis och använda webbapplikationen i 30 dagar utan kostnad med obegränsade wireframes och obegränsade användare som erbjuds.
Registrering av gratis provkontot är enkelt men kräver att användarna validerar e-postmeddelandet. När du är färdig börjar du med att skapa ditt utrymme och ge det ett namn. Fortsätt sedan med att skapa ditt första projekt.
Projektredaktören har ett mycket enkelt och användarvänligt gränssnitt. Alla egenskaper är snygga spridda på verktygsfältet. Sidorna eller Wireframes visas på vänster sida och du kan lägga till flera sidor genom att klicka på + -ikonen ovanpå.
Du kan börja med att dra och släppa en mall till redigeraren eller börja från början med hjälp av grundläggande redigeringsverktyg. Använd alternativet Fler kontroller för att söka efter fler mallar och ikoner från biblioteket. Från skrivbordsapplikationer och scheman till hårdvaru- och layout-användargränssnitt har Balsamiq-biblioteket allt du behöver för att enkelt skapa Mockup och Wireframes.
För att ändra objektegenskaperna markerar du objektet och de alternativ som visas kommer att visas i rutan till höger.
Utvecklarna kan bjuda in klienter att göra en presentation genom att skicka en länk via e-post. Du kan också lägga till dina lagmedlemmar till projektet och tilldela en roll till varje lagmedlem.
Dessutom erbjuder Balsamiq integration med affärsappar som Google Drive, Confluence och Jira. UI-designresurserna på webbplatsen är användbara för såväl erfarna som nybörjare.
Balsamiq är ett utmärkt verktyg och det är utan tvekan en av de bästa i branschen med offline och online-programvarupaket. Kombinera det med gratis 30-dagars gratis prov och du får tillräckligt med tid för att utvärdera verktyget innan du köper.
Försök med Balsamiq
- Läs också: 8 fantastiska program för att skapa broschyrer och reglera marknadsföringsspelet
- 3
MockPlus
- Pris - Gratis provning / $ 59 per år Individuell licens / 199 USD evig licens / Lagplanen börjar vid 299 USD per år
För dem som letar efter ett flexibelt verktyg för att skapa mockups och prototyper för varje skärmstorlek och plattform, är MockPlus ett bra val. Det är ett offlineprogram och är tillgängligt för Windows, Mac, Android och iOS-enheter.
MockPlus används av några av de ledande namnen inom teknikindustrin, inklusive Microsoft och IBM. Det finns en 7-dagars gratis provförsök för att prova verktyget innan du köper.
MockPlus användargränssnitt är väl utformat och ser modernt ut. Det ger en bra mängd utrymme och stör inte arbetsytan med onödiga verktyg. Det har också ett flervinduppsättning att använda programvaran i flera fönster för bättre produktivitet.
Du kan enkelt bygga interaktiva prototyper genom att helt enkelt dra och släppa förkonstruerade komponenter till redaktören. Biblioteket är utrustat med över 3000 ikoner och nästan 200 förkonstruerade komponenter för att komma igång med alla stödjande drag-och-släppfunktioner.
Prototyperna kan testas direkt med hjälp av QR-koden som genereras av appen. Dessutom kan projekten publiceras på webben för att få kommentarer från kunder och teammedlemmar genom att dela en webblänk till prototypen.
MockPlus utmärker sig vad det gör, och funktionerna och funktionerna i denna prototypprogramvara gör det till ett idealiskt verktyg för UI- och UX-designers, oavsett deras kompetens.
Hämta MockPlus
- Läs också: 9 funktionell programvara för att skapa interaktiva tidslinjer på datorn
- 4
Moqups
- Pris - Gratis test / Börjar på $ 19 per månad - Personlig plan
Moqups är en molnbaserad webbapp som låter dig skapa wireframes, mockups, diagram och prototyper och samarbeta i realtid med andra teammedlemmar.
Det är ett premiumverktyg med personliga och lagkonton. Den kostnadsfria provningen kräver att du registrerar ett konto och erbjuder 5 MB lagring med ett projekt begränsat till 300 objekt.
Användargränssnittet liknar MockFlow, men verktygen och layouten är olika. Efter att du skapat ett nytt projekt kan du dra och släppa element från Stencil-fliken.
Du kan lägga till fler sidor i projektet, anpassa konturer, skapa mallar, ladda upp och lägga till bilder, bläddra bland det stora biblioteket med ikoner och lägg till kommentarer till projektet.
Objekten kan redigeras för att ändra storlek, rotera, anpassa och stila. Gruppfunktionen gör det enkelt att gruppera flera objekt för enklare rörelse.
När Mockup är klart kan du exportera till Google Drive, Dropbox eller datorns lokala inbyggda PNG, PDF eller HTML-format.
Moqups är ett lättanvänt verktyg för trådframställning och för att skapa diagram och mockups på nolltid. Registrera dig för det kostnadsfria kontot och använd verktyget för en snurr för att se om det är något som uppfyller ditt krav.
Prova Moqups
Slutsats
Oavsett om du är en professionell användargränssnitt eller bara en nybörjare, vet du vilka verktyg som ska användas för att skapa användargränssnitt. Om du letar efter ett trådverktyg, så rekommenderar jag dig att prova Wireframes.cc.
Det är en webbaserad app med minimalistisk design och en handfull funktioner för att skapa enkla och effektiva trådramar för appar eller webbplatser. När allt kommer omkring är det inte alltid bättre.
Men för UX / UI-designer som letar efter funktionsrika Mockup-verktyg bör du försöka alla de ovan rekommenderade verktygen. Alla dessa verktyg erbjuder en kostnadsfri försök eller ett grundläggande gratis konto utan några begränsningar för att komma igång.
Du kan tillbringa lite tid med vart och ett av dessa verktyg innan du bestämmer dig för den som kontrollerar de flesta rutorna i din måste-ha-lista.
Att veta att inget verktyg någonsin kommer att kunna möta allas behov, försökte vi inkludera de bästa verktygen för att skapa UI Mockups som kan möta de flesta designers behov.
Låt oss veta din favorit mockup och wireframing programvara eller om du tror att vi har uteslutit ett värdigt alternativ i den här listan i kommentarerna nedan.
