Uanset om du vil designe en mobilapp, desktop-software eller blot forsøge at designe et websted, ved at oprette UI-mockups, kan du få de første visuals af dine fremtidige projekter og også præsentere designideen til klienten på en bedre måde.

Oprettelse af UI-modeller er anderledes end Wireframing. Wireframing er som at oprette en plan for dit hus eller ingeniørprojekt, mens skabelse af en Mockup kommer med det faktiske kreative design (det endelige udseende) af huset til kunderne.

At have adgang til et praktisk Mockup-værktøj hjælper dig i UI-designfasen og fremskynder også hele processen.

UI Mockup-værktøjer mangler ikke; Men med så mange muligheder at vælge imellem, kan det blive forvirrende, hvilken der skal bruges først.

Uanset om du er en professionel, der ønsker at tilføje flere elværktøjer til hans nuværende arsenal eller en nybegynder, der prøver sine hænder på Mockup-design for første gang, vil denne guide introducere dig til nogle af de bedste værktøjer til at oprette UI-modeller i 2019.

Hvad er de bedste værktøjer til at oprette UI-mockups?

MockFlow

• Pris - Gratis begrænset / Premium $ 19 månedlig plan - $ 14 pr. Bruger-pr måned månedlig plan

MockFlow er en premium skybaseret løsning, der tilbyder Wireframe, Prototyping og UI Mockup-værktøjer til enkeltpersoner og organisationer. Det leveres i både gratis og premium planer og kan også bruges på din pc.

Prisfastsættelsen er delt mellem årlige og månedlige planer. Sammenlignet med årlige planer er de månedlige planer ikke kun dyre, men går også glip af nogle funktioner. På årlige planer får du ikke kun en rimelig rabat, men får også 3 måneders gratis service, offline adgang og power-ups.

For at bruge værktøjet skal du tilmelde dig en gratis konto. De gratis konti giver dig mulighed for at oprette et projekt i hver app, to korrekturlæsere pr. Projekt, begrænset udvalg af apps og ingen support. Imidlertid giver den gratis konto en rimelig idé om MockFlows anvendelighed.

MockFlow tilbyder offline adgang på Windows og Mac OS kørende computere. MockFlow-udvidelserne giver dig mulighed for at bruge værktøjet med apps som Microsoft Office, Google Chrome, Google Docs, Slack, JIRA og mere.

MockFlow har seks grundlæggende funktioner, nemlig WireFrame og UI Mockups, Sitemap, StyleGuide, DesignCollab, Annotate Pro og Website Pro. For at oprette UI-mockups skal du bruge den første WireFrame-indstilling fra instrumentbrættet og klikke på + -ikonet.

Begynd med at vælge den platform, du vil oprette mockup til som iOS-enheder, smarture, website, Microsoft-apps osv.

Redigeringspanelet er også delt mellem 6 faner. Fra fanebladet Element kan du trække og slippe foruddesignede objekter som mobilramme, ikoner, baggrundsbilleder, menufaner, checkmuligheder og mere, eller du kan blot starte fra en tom side, hvis du vil.

Objekterne kan yderligere tilpasses med et enkelt dobbeltklik. Du kan gruppere flere elementer sammen for lettere at bevæge og skalere UI.

Andre faner i editoren er Sider, for at oprette flere sider til den samme app, fanen Billeder, fanen Flow for at tilføje og kontrollere status for projekterne, Store og Power-UP-fanen for at tilføje flere apps og skabeloner.

MockFlow er et fremragende multifunktionsværktøj til at oprette UI-modeller og mere. Premium-planerne betyder imidlertid, at det er for seriøse brugere, der kan bruge mindst halvdelen af ​​den funktion, den har på tilbud.

Prøv MockFlow

• Læs også: 10 bedste gratis 3D-designsoftware til begyndere og avancerede brugere

Balsamiq

• Pris - Gratis prøveperiode på 30 dage / Online-version starter ved $ 9 pr. Måned / Offline-version starter ved $ 89 evig licens

Balsamiq er en moderne skybaseret løsning til UI-designere og -udviklere, der tilbyder en hurtig, tilgængelig, samarbejdsbaseret wireframing. Hvis du foretrækker en offline løsning, fik Balsamiq den også dækket.

Balsamiq tilbyder to versioner af værktøjet, online og offline desktop-app til Mac- og Windows-computere. Offlineversionen er et engangskøb, der koster $ 89 for en enkelt bruger. Online-versionen starter ved $ 9 per måned per bruger med plads til to projekter.

Heldigvis kan du tilmelde dig gratis og bruge webappen i 30 dage gratis med ubegrænsede wireframes og ubegrænsede brugere, der tilbydes.

Tilmelding til den gratis prøvekonto er let, men kræver, at brugerne validerer e-mailen. Når det er gjort, skal du begynde med at oprette din plads og give den et navn. Fortsæt derefter med at oprette dit første projekt.

Projektredaktøren har en meget enkel og brugervenlig grænseflade. Alle egenskaber er pænt spredt på værktøjslinjen. Siderne eller wireframes vises på venstre side, og du kan tilføje flere sider ved at klikke på + -ikonet øverst.

Du kan begynde med at trække og slippe en skabelon til redaktøren eller starte fra bunden ved hjælp af grundlæggende redigeringsværktøjer. Brug indstillingen Flere kontrol til at søge efter flere skabeloner og ikoner fra biblioteket. Fra desktop applikationer og diagrammer til hardware og layout UI'er har Balsamiq bibliotek alt hvad du har brug for for at oprette en Mockup og Wireframes let.

Hvis du vil ændre objektegenskaber, skal du vælge objektet, og de relevante indstillinger vises i højre rude.

Udviklerne kan invitere klienter til at lave en præsentation ved at sende et link via e-mail. Du kan også tilføje dine teammedlemmer til projektet og tildele en rolle til hvert teammedlem.

Derudover tilbyder Balsamiq også integration med forretningsapps som Google Drive, Confluence og Jira. UI-designressourcerne på webstedet er nyttige for både erfarne og begyndere.

Balsamiq er et fremragende værktøj, og med offline og online softwarepakke er det uden tvivl en af ​​de bedste i branchen. Kombiner det med gratis prøveperiode på 30 dage, så får du nok tid til at vurdere værktøjet, før du foretager et køb.

Prøv Balsamiq

• Læs også: 8 bedøvende software til at oprette pjecer og styre marketingspil

MockPlus

• Pris - Gratis prøveversion / $ 59 pr. År Individuel licens / $ 199 evig licens / Teamplan starter ved $ 299 pr. År

For dem, der leder efter et fleksibelt værktøj til at oprette mockups og prototype til enhver skærmstørrelse og platform, er MockPlus et godt valg. Det er en offline applikation og er tilgængelig til Windows-, Mac-, Android- og iOS-enheder.

MockPlus bruges af nogle af de førende navne i tech-branchen, herunder Microsoft og IBM. Der er en 7-dages gratis prøveperiode til at prøve værktøjet, før du foretager et køb.

Brugergrænsefladen til MockPlus er godt anlagt og ser moderne ud. Det giver en god mængde plads og rod ikke arbejdsområdet med unødvendige værktøjer. Det har også en mulighed med flere vinduer til at bruge softwaren i flere vinduer for bedre produktivitet.

Du kan nemt opbygge interaktive prototyper ved blot at trække og slippe foruddesignede komponenter til redaktøren. Biblioteket er udstyret med over 3000 ikoner og næsten 200 foruddesignede komponenter, så du kan komme i gang med alle understøttende træk-og-slip-funktioner.

Prototyperne kan straks testes ved hjælp af QR-koden, der er genereret af appen. Derudover kan projekterne offentliggøres på nettet for at få kommentarer fra klienter og teammedlemmer ved at dele et weblink til prototypen.

MockPlus udmærker sig i, hvad det gør, og funktionerne og funktionerne i denne prototypesoftware gør det til et ideelt værktøj for UI- og UX-designere uanset deres ekspertise.

Download MockPlus

• Læs også: 9 funktionsrig software til at oprette interaktive tidslinjer på pc

Moqups

• Pris - Gratis prøveversion / starter på $ 19 pr. Måned - personlig plan

Moqups er en skybaseret webapp, der giver dig mulighed for at oprette wireframes, mockups, diagrammer og prototyper og samarbejde i realtid med andre teammedlemmer.

Det er et premium værktøj med personlige konti og teamkonti. Den gratis prøveversion kræver, at du registrerer en konto og tilbyder 5 MB lagerplads med et projekt, der er begrænset til 300 objekter.

Brugergrænsefladen ligner MockFlow, men værktøjerne og layouten er forskellige. Efter oprettelse af et nyt projekt kan du trække og slippe elementer fra fanen Stencil.

Du kan tilføje flere sider til projektet, tilpasse konturer, oprette skabeloner, uploade og tilføje billeder, gennemse fra det store bibliotek med ikoner og tilføje kommentarer til projektet.

Objekterne kan redigeres for at ændre størrelse, rotere, justere og style. Grupperingsfunktionen gør det nemt at gruppere flere objekter for lettere at bevæge sig.

Når Mockup er klar, kan du eksportere til Google Drive, Dropbox eller din computers lokale drive-in PNG, PDF eller HTML format.

Moqups er et brugervenligt værktøj til wireframing og til at oprette diagrammer og modeller på kort tid. Tilmeld dig den gratis konto og tag værktøjet til en drejning for at se, om det er noget, der opfylder dit krav.

Prøv Moqups

Konklusion

Uanset om du er en professionel UI-designer eller bare en nybegynder, er det vigtigt at vide, hvilke værktøjer der skal bruges til at oprette UI-modeller. Hvis du kun leder efter et wireframing-værktøj, vil jeg anbefale dig at prøve Wireframes.cc.

Det er en webbaseret app med minimalistisk design og en håndfuld funktioner til at skabe enkle og effektive wireframes til apps eller websteder. Når alt kommer til alt er det ikke altid bedre.

For UX / UI-designer, der er på udkig efter funktionsrige Mockup-værktøjer, skal du prøve alle ovenstående anbefalede værktøjer. Alle disse værktøjer tilbyder en gratis prøveversion eller en grundlæggende gratis konto uden nogen begrænsninger for at komme i gang.

Du kan tilbringe nogen tid med hvert af disse værktøjer, før du beslutter dig for det, der markerer flest felter på din must-have-liste.

Da vi kendte til, at ikke et værktøj nogensinde vil være i stand til at imødekomme alles behov, forsøgte vi at inkludere de bedste værktøjer til at oprette UI-modeller, der kan imødekomme de fleste af designernes behov.

Fortæl os om din foretrukne mockup- og wireframing-software, eller hvis du synes, vi har udelukket et værdigt alternativ på denne liste i kommentarerne herunder.