5 gode verktøy for å lage UI mockups for nettsteder og apps

Uansett om du vil designe en mobilapp, Desktop-programvare eller bare prøve å designe et nettsted, ved å lage UI Mockups, kan du få de første bildene av dine fremtidige prosjekter og presentere ideen til kunden på en bedre måte.

Opprette UI Mockups er forskjellig fra Wireframing. Wireframing er som å skape et blåkopi for ditt hus eller engineering prosjekt mens skape en Mockup kommer opp med den faktiske kreative design (endelig utseende) av huset for kundene.

Å ha tilgang til et hendig Mockup-verktøy hjelper deg i UI-designfasen og øker også hele prosessen.

Det er ingen mangel på UI Mockup verktøy; Men med så mange alternativer å velge mellom, kan det bli forvirrende om hva som er en du bør begynne å bruke først.

Enten du er profesjonell ute etter å legge til flere kraftverktøy til sitt nåværende arsenal eller en nybegynner som prøver hendene hans ved Mockup-design for første gang, vil denne veiledningen vise deg 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 cloud-basert løsning som tilbyr Wireframe, Prototyping og UI Mockup verktøy for enkeltpersoner og organisasjon. Den kommer i både gratis og premium planer og kan også brukes på din PC.

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

For å bruke verktøyet må du registrere deg med en gratis konto. De gratis kontoene tillater deg å lage ett prosjekt i hver app, to anmeldere per prosjekt, begrenset utvalg av apper og ingen støtte. Den gratis kontoen gir imidlertid en god ide om bruken av MockFlow.

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

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

Begynn med å velge plattformen du vil lage mockup for, for eksempel iOS-enheter, smarte klokker, nettsider, Microsoft-apper, etc.

Redigeringspanelet er delt mellom 6 faner også. Fra Element-fanen kan du dra og slippe forhåndsdefinerte objekter som Mobil ramme, ikoner, bakgrunnsbilder, menyfaner, betalingsalternativer og mer, eller du kan bare starte fra en tom side hvis du vil.

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

Andre faner i redigeringsprogrammet er Sider, for å lage flere sider for samme app, Bilder-fanen, Flow-fanen for å legge til og kontrollere statusen til prosjektene, Store og Oppstart-fanen for å legge til flere apper og maler.

MockFlow er et utmerket multifunksjonsverktøy for å lage UI Mockups og mer. Premieplanene betyr imidlertid at det er for seriøse brukere som kan benytte seg av minst halvparten av funksjonen den har på tilbud.

Prøv MockFlow

Les også: 10 beste gratis 3D design programvare for nybegynnere og avanserte brukere

Balsamiq

Pris - Gratis 30-dagers prøveversjon / Online versjon starter på $ 9 per måned / Offline versjon starter på $ 89 evigvarende lisens

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

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

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

Registrering av gratis prøveversjonskonto er enkelt, men krever at brukerne bekrefter e-postadressen. Når du er ferdig, begynn 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 redigereren eller starte fra grunnen ved hjelp av grunnleggende redigeringsverktøy. Bruk alternativet Flere kontroller for å søke etter flere maler og ikoner fra biblioteket. Fra desktop applikasjoner og diagrammer til maskinvare og layout UI, har Balsamiq bibliotek alt du trenger for å lage en Mockup og Wireframes med letthet.

For å endre objektegenskapene, velg objektet, og de aktuelle alternativene vises i ruten til høyre.

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

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

Balsamiq er et utmerket verktøy og med offline og online programvarepakke er det utvilsomt en av de beste i bransjen. Kombiner det med en gratis prøveperiode på 30 dager, og du får 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 per år Individuell lisens / $ 199 evigvarende lisens / Team plan starter på $ 299 per år

For de som leter etter et fleksibelt verktøy for å lage mockups og prototyping for hver skjermstørrelse og -plattform, er MockPlus et godt valg. Det er et offlineprogram 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øveversjon for å prøve verktøyet før du kjøper.

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

Du kan enkelt bygge interaktive prototyper ved å bare dra og slippe forhåndsdefinerte komponenter til redaktøren. Biblioteket er utstyrt med over 3000 ikoner og nesten 200 forhåndsdefinerte komponenter for å komme i gang med alle støtter dra og slipp-funksjonalitet.

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

MockPlus utmerker seg hva det gjør, og funksjonene og funksjonene til denne prototypingsprogramvaren gjør det 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 / Starter på $ 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 lagmedlemmer.

Det er et premium verktøy med personlige og team kontoer. Gratis prøveversjon krever at du registrerer en konto og tilbyr 5 MB lagringsplass med ett prosjekt begrenset til 300 objekter.

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

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

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

Når Mockup er klar, kan du eksportere til Google Disk, Dropbox eller datamaskinens lokale PNG-, PDF- eller HTML-format.

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

Prøv Moqups

Konklusjon

Enten du er en profesjonell brukergrensesnittsdesigner eller bare en nybegynner, vet du hvilke verktøy som skal brukes til å opprette UI Mockups, er viktig. Hvis du er ute etter bare et wireframingverktø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.

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

Du kan tilbringe litt tid med hvert av disse verktøyene før du bestemmer deg for den som sjekker de fleste boksene i din må-ha-liste.

Å vite det faktum at ikke et verktøy vil kunne imøtekomme alles behov, forsøkte vi å inkludere de beste verktøyene for å skape UI Mockups som kan oppfylle de fleste designernes behov.

Gi oss beskjed om din favoritt mockup- og wireframing-programvare, eller hvis du tror at vi har utelatt et verdig alternativ i denne listen i kommentarene nedenfor.