Enten du ønsker å designe en mobilapp, Desktop-programvare eller ganske enkelt prøve å designe et nettsted, ved å lage UI-mockups, kan du få de første visningene av fremtidige prosjekter og også presentere designideen for klienten på en bedre måte.

Å lage UI-modeller er annerledes enn Wireframing. Wireframing er som å lage en blåkopi for ditt hus eller ingeniørprosjekt, mens det å lage en Mockup kommer med den faktiske kreative designen (endelige utseende) av huset for kundene.

Å ha tilgang til et praktisk Mockup-verktøy hjelper deg i UI-prosjekteringsfasen og også øke hastigheten på hele prosessen.

UI Mockup-verktøy mangler ingen mangel; Imidlertid, med så mange alternativer å velge mellom, kan det bli forvirrende hva du bør begynne å bruke først.

Enten du er en profesjonell som ønsker å legge til flere maktverktøy til hans nåværende arsenal eller en nybegynner som prøver seg på Mockup-design for første gang, vil denne guiden introdusere deg for noen av de beste verktøyene for å lage UI-mockups i 2019.

Hva er de beste verktøyene for å lage UI-mockups?

MockFlow

• Pris - Gratis begrenset / Premium $ 19 månedlig plan - $ 14 per bruker per måned årlig plan

MockFlow er en premium skybasert løsning som tilbyr Wireframe, Prototyping og UI Mockup-verktøy for enkeltpersoner og organisasjoner. Den kommer i både gratis- og premiumplaner og kan brukes på PC-en din også.

Prisene er delt mellom årlige og månedlige planer. Sammenlignet med årlige planer, er de månedlige planene ikke bare dyre, men går også glipp av noen funksjoner. På årlige planer får du ikke bare en rimelig rabatt, men får også 3-måneders gratis service, offline tilgang og power-ups.

For å bruke verktøyet, må du registrere deg med en gratis konto. Gratiskontoer lar deg opprette ett prosjekt i hver app, to anmeldere per prosjekt, begrenset utvalg av apper og ingen støtte. Imidlertid gir gratis kontoen en god ide om brukbarheten til MockFlow.

MockFlow tilbyr offline tilgang på datamaskiner som kjører Windows og Mac OS. MockFlow-utvidelsene lar deg bruke verktøyet med apper som Microsoft Office, Google Chrome, Google Docs, Slack, JIRA og mer.

MockFlow har seks grunnleggende funksjoner, nemlig WireFrame og UI Mockups, Sitemap, StyleGuide, DesignCollab, Annotate Pro og Website Pro. For å lage UI-mockups, bruk det første WireFrame-alternativet fra dashbordet og klikk på + -ikonet.

Begynn med å velge plattformen du vil lage mockup for, for eksempel iOS-enheter, smartklokker, nettsted, Microsoft-apper, etc.

Redigeringspanelet er delt mellom 6 faner også. Fra Element-fanen kan du dra og slippe forhåndsdesignede objekter som mobilramme, ikoner, bakgrunnsbilder, menyfaner, kassealternativer og mer, eller du kan ganske enkelt starte fra en tom side hvis du vil.

Objektene kan videre tilpasses med et enkelt dobbeltklikk. Du kan gruppere flere elementer for enklere bevegelse og skalering av brukergrensesnittet.

Andre faner i redigereren er Sider, for å opprette flere sider for den samme appen, Bilder-fanen, Flow-fane for å legge til og sjekke statusen til prosjektene, Lagre og Power-UP-fanen for å legge til flere apper og maler.

MockFlow er et utmerket flerbruksverktøy for å lage UI-mockups og mer. Premium-planene betyr imidlertid at det er for seriøse brukere som kan benytte seg av minst halvparten av funksjonen den har på tilbudet.

Prøv MockFlow

• Les også: 10 beste gratis 3D-designprogramvare for nybegynnere og avanserte brukere

Balsamiq

• Pris - Gratis prøveperiode på 30 dager / Online-versjon starter på $ 9 per måned / Offline-versjonen starter på $ 89 perpetual License

Balsamiq er en moderne skybasert løsning for UI-designere og -utviklere som tilbyr en rask, tilgjengelig, samarbeidende wireframing. Hvis du foretrekker en offline løsning, fikk Balsamiq den også dekket.

Balsamiq tilbyr to versjoner av verktøyet, online og offline desktop-app for Mac- og Windows-datamaskiner. Den offline versjonen er et kjøp på én gang som koster 89 dollar for en enkelt bruker. Online-versjonen starter på $ 9 per måned per bruker med plass til to prosjekter.

Heldigvis kan du registrere deg gratis og bruke nettappen i 30 dager gratis med ubegrensede wireframes og ubegrensede brukere som tilbys.

Det er enkelt å registrere seg for den gratis prøvekontoen, men brukerne må validere e-posten. Når du er ferdig, kan du begynne med å lage din plass og gi den et navn. Fortsett deretter med å lage ditt første prosjekt.

Prosjektredaktøren har et veldig enkelt og brukervennlig grensesnitt. Alle egenskapene er pent spredt på verktøylinjen. Sidene eller Wireframes vises på venstre side, og du kan legge til flere sider ved å klikke på + -ikonet øverst.

Du kan begynne med å dra og slippe en mal til redaktøren eller starte fra bunnen av ved å bruke grunnleggende redigeringsverktøy. Bruk alternativet Flere kontroller for å søke etter flere maler og ikoner fra biblioteket. Fra stasjonære applikasjoner og diagrammer til maskinvare- og layout-brukergrensesnitt, Balsamiq-biblioteket har alt du trenger for å lage en Mockup og Wireframes med letthet.

Hvis du vil endre objektegenskapene, velger du objektet, og de aktuelle alternativene vises på høyre side av ruten.

Utviklerne kan invitere klienter til å lage en presentasjon ved å sende en lenke via e-post. Du kan også legge til teammedlemmene dine i prosjektet og tildele en rolle til hvert teammedlem.

I tillegg tilbyr Balsamiq også integrasjon med forretningsapper som Google Drive, Confluence og Jira. UI-designressursene på nettstedet er nyttige for erfarne og nybegynnere.

Balsamiq er et utmerket verktøy, og med offline og online programvarepakke er det utvilsomt noe av det beste i virksomheten. Kombiner det med gratis prøveperiode på 30 dager, så får du nok tid til å vurdere verktøyet før du kjøper.

Prøv Balsamiq

• Les også: 8 fantastisk programvare for å lage hefter og styre markedsføringsspillet

MockPlus

• Pris - Gratis prøveversjon / $ 59 i året Individuell lisens / $ 199 evigvarende lisens / Teamplan starter på $ 299 per år

For de som leter etter et fleksibelt verktøy for å lage mockups og prototyping for alle skjermstørrelser og plattformer, er MockPlus et godt valg. Det er en offline applikasjon og er tilgjengelig for Windows, Mac, Android og iOS-enheter.

MockPlus brukes av noen av de ledende navnene i teknologibransjen, inkludert Microsoft og IBM. Det er en 7-dagers gratis prøveperiode for å prøve verktøyet før du kjøper.

Brukergrensesnittet til MockPlus er godt lagt opp og ser moderne ut. Det gir god plass og ikke rot arbeidsområdet med unødvendige verktøy. Den har også et alternativ med flere vinduer for å bruke programvaren i flere vinduer for bedre produktivitet.

Du kan enkelt lage interaktive prototyper ved å dra og slippe forhåndsdesignede komponenter til redaktøren. Biblioteket er utstyrt med over 3000 ikoner og nesten 200 forhåndsdesignede komponenter for å sette i gang all støtte for dra-og-slipp-funksjonalitet.

Prototypene kan testes umiddelbart ved hjelp av QR-koden generert av appen. I tillegg kan prosjektene publiseres på nettet for å få kommentarer fra klienter og teammedlemmer ved å dele en nettkobling til prototypen.

MockPlus utmerker seg med hva den gjør, og funksjonene og funksjonene til denne prototypeprogramvaren gjør den til et ideelt verktøy for UI- og UX-designere uavhengig av deres ekspertise.

Last ned MockPlus

• Les også: 9 funksjonsrik programvare for å lage interaktive tidslinjer på PC

Moqups

• Pris - Gratis prøveversjon / Begynner $ 19 per måned - Personlig plan

Moqups er en skybasert webapp som lar deg lage wireframes, mockups, diagrammer og prototyper og samarbeide i sanntid med andre teammedlemmer.

Det er et førsteklasses verktøy med personlige kontoer og teamkontoer. Den gratis prøveperioden krever at du registrerer en konto og tilbyr 5 MB lagringsplass med ett prosjekt begrenset til 300 objekter.

Brukergrensesnittet ligner på MockFlow, men verktøyene og utformingen er forskjellige. Etter å ha opprettet et nytt prosjekt kan du dra og slippe elementer fra sjablonen Stencil.

Du kan legge til flere sider i prosjektet, tilpasse konturer, lage maler, laste opp og legge til bilder, bla gjennom det store biblioteket med ikoner og legge til kommentarer til prosjektet.

Objektene kan redigeres for å endre størrelse, rotere, justere og style. Grupperingsfunksjonen gjør det enkelt å gruppere flere objekter for enklere bevegelse.

Når mockupen er klar, kan du eksportere til Google Drive, Dropbox eller datamaskinens lokale innkjørings PNG-, PDF- eller HTML-format.

Moqups er et brukervennlig verktøy for wireframing og for å lage diagrammer og mockups på kort tid. Registrer deg på gratiskontoen og ta verktøyet for et snurr for å se om det er noe som tilfredsstiller kravet ditt.

Prøv Moqups

Konklusjon

Enten du er en profesjonell UI-designer eller bare en nybegynner, er det viktig å vite hvilke verktøy du kan bruke for å lage UI-mockups. Hvis du er ute etter bare et wireframing-verktøy, vil jeg anbefale deg å prøve Wireframes.cc.

Det er en nettbasert app med minimalistisk design og en håndfull funksjoner for å lage enkle og effektive wireframes for apper eller nettsteder. Tross alt er ikke alltid bedre.

For UX / UI-designer som leter etter funksjonsrike Mockup-verktøy, bør du prøve alle de ovenfor anbefalte verktøyene. Alle disse verktøyene tilbyr en gratis prøveversjon eller grunnleggende gratis konto uten begrensninger for å komme i gang.

Du kan tilbringe litt tid med hvert av disse verktøyene før du bestemmer deg for det som sjekker flest bokser i must-have-listen.

Når vi kjente til at ikke ett verktøy noensinne vil være i stand til å dekke alles behov, prøvde vi å ta med de beste verktøyene for å lage UI-mockups som kan dekke de fleste av designernes behov.

Gi oss beskjed om favorittprogrammet for mockup og wireframing, eller hvis du tror vi har ekskludert et verdig alternativ i denne listen i kommentarfeltet nedenfor.