Mockup-webbplatser, även kända som grafiska redaktörer online eller designverktyg, gör det möjligt för användare att skapa olika grafiska mönster, illustrationer, banners, logotyper, presentationer och mer direkt från sin webbläsare utan att behöva installera specialiserad programvara på sin dator. Dessa onlineverktyg erbjuder vanligtvis en mängd olika funktioner och mallar som gör designprocessen enklare.
Till skillnad från prototyper, som faktiskt ska fungera, är mockups statiska visuella element avsedda att visa designlayouter, atmosfär, färg och övergripande estetik. Vissa designers föredrar att skapa varje knapp och ikon från grunden, men om du vill hoppa vidare eller leka för inspiration, kommer webblayouter och programvara förinstallerade med dessa element och kan vara enklare att använda än programvara för grafisk design.
Webbplatserna nedan hjälper dig att skapa skärmmodeller för webbplatser, skärmmodeller för appar, produktmodeller och mer. De flesta kommer med webbplatslayoutmallar eller UI-kit som låter dig designa med förbyggda element som knappar. De är fantastiska tidssparare om du någon gång hamnar i en kläm och behöver lämna över en layout snabbt. För varje kommer vi att analysera priset, fördelar och nackdelar, samt till vem de rekommenderas.
1. Adobe XD. Webbplatser för att skapa layouter
Adobe XD är Adobe-familjens svar på programvara för digital design. Den har alla detaljer och nyanser du kan förvänta dig av företaget bakom Photoshop och Illustrator, men det erbjuder också ett lika högt pris.
Men om du letar efter professionella layouter med alla detaljer, har Adobe XD dig täckt. Den hanterar hela designprocessen, inklusive interaktiva prototyper, och integreras till och med med annan Adobe-programvara om du vill skapa eller anpassa element i Photoshop eller Illustrator.
Det är också ganska sofistikerat i sina funktioner, med 3D-effekter, animationer och möjligheten att skapa ett komponentbibliotek, en plats för att lagra alla dina element som knappar och ikoner så att ditt team kan använda dem igen i ett annat projekt (detta hjälper återkommande kunder om de se samma kontroller på den nya produkten). Det finns även specialfunktioner som Repeat Grid, som sparar tid när du behöver kopiera och klistra in ett mönster om och om igen, och Padding, som skyddar pixelstorlekar när du redigerar olika lager av samma element.
kostnad:
- $9,99/månad
- 99,99 USD per år (förbetalt)
Fördelar: Webbplatser för att skapa layouter
- Lämplig för hela designprocessen, inklusive interaktiva prototyper
- sofistikerade funktioner: 3D-effekter, animering och komponentbibliotek
- Bekväma tidsbesparande funktioner: indrag, upprepande mönster och enkel redigering
- Integreras med annan Adobe-programvara
Nackdelar:
- overkill om du bara vill ha en enkel och snabb layout
Rekommenderas för…
- människor som är tillräckligt seriösa när det gäller digital design för att vilja ha mjukvara i toppklass
- vanlig design - ingen för engångsprojekt eller enskilda projekt
2. Fluid UI. Webbplatser för att skapa layouter
Även om det är tekniskt för prototyper, Fluid UI är robust nog att skapa fantastiska mockups som senare kan omvandlas till interaktiva prototyper. Detta är ett utmärkt val för erfarna designers och designteam som arbetar med hela omfattningen av ett projekt.
Det flexibla användargränssnittet är inte lika användarvänligt som andra populära layoutwebbplatser, vilket kanske inte tilltalar nybörjare. Den har dock alla funktioner av professionell kvalitet du behöver för webb- och appdesign, inklusive trådramar och ett bibliotek med förbyggda UI-komponenter och ikoner. En av dess fördelar är dess samarbetsverktyg, som tillåter användare att se, kommentera och redigera samma filer från var som helst i världen.
kostnad:
- Gratis plan (1 projekt)
- 8,25 USD/månad (faktureras årligen) [Solo]
- 19,08 USD per månad (faktureras årligen) [Pro]
- 41,58 USD per månad (faktureras årligen) [Team]
Fördelar: Webbplatser för att skapa layouter
- avancerade funktioner lämpliga för proffs
- något billigare än liknande mockup-webbplatser
- förstklassigt samarbete
- stort inbyggt komponentbibliotek
- mobilappar och enhetsbyte göra det enklare att skapa layouter för mobila enheter
Nackdelar:
- inlärningskurva
Rekommenderas för…
- människor som vill ha ett fullfjädrat designverktyg, men som också är uppmärksamma på sin budget
3. InVision. Webbplatser för att skapa layouter
InVision är en direkt konkurrent till Adobe XD och är ytterligare ett allt-i-ett mockup- och prototypverktyg, även det med ett dyrt månadsabonnemang. InVision delar många av de sofistikerade funktionerna i Adobe XD, inklusive exakta animeringsverktyg för prototyper, men är lite mindre användarvänlig när det kommer till effektivitet och effektivisering av uppgifter.
Det är också värt att notera att InVision främst är ett prototypverktyg, så många av dess funktioner är fokuserade på interaktivitet och effekter snarare än statiska bilder. Den har dock allt du behöver för att skapa bra layouter pixel-perfekt, inklusive integration med Photoshop och Sketch, och med gratistillägget Inspect kan du enkelt omvandla vilken design som helst till utvecklarkod. Och till råga på allt, det finns en evig gratisversion.
kostnad:
- Gratis version
- 7,95 USD per månad (faktureras årligen)
Fördelar: Webbplatser för att skapa layouter
- Lämplig för hela designprocessen, inklusive interaktiva prototyper
- avancerade funktioner som animering och interaktiva effekter
- integreras med Photoshop och Sketch
- gratis version
Nackdelar:
- användbarhet är lite mer komplex än Adobe XD
Rekommenderas för…
- människor som i första hand behöver ett prototypverktyg, men med mockup-möjligheter
4. Mediemodifierare. Webbplatser för att skapa layouter
Låt oss gå bort från webbplatslayouter på professionell nivå... långt borta från hotellet. Mediemodifierare är i andra änden av spektrumet: mycket begränsad i funktioner och djup, men extremt bekväm. Du kan gratis nedladdning mockups direkt från webbplatsen, men för att ta bort vattenstämpeln och få högkvalitativa versioner måste du betala.
Mediamodifier liknar en online fotoredigerare, men med förinstallerade appmallar och webbplatslayouter. De har också tusentals mallar för mer än bara digital design: t-shirts, kaffemuggar, bokomslag etc. Allt du behöver göra är att hitta en mall du gillar, lägga till din egen bild och... ja, det är allt du kan göra, egentligen. Det här är en enkel webbplats med layouter för när du behöver något snabbt och enkelt, men inte för när du behöver imponera på någon med högkvalitativ grafik.
kostnad:
- Gratis plan
- 9 USD per månad (faktureras årligen)
Fördelar: Webbplatser för att skapa layouter
- lätt att använda
- kan skapa layouter på några sekunder
- många mallar att välja mellan
Nackdelar:
- kala drag
- du måste betala för högkvalitativ upplösning
- måste betala för att ta bort vattenstämplar
Rekommenderas för…
- när du bara behöver något enkelt och snabbt
- du har redan skapat en bild, men du måste placera den på din telefon/skrivbordsbakgrund
- bra urval av bakgrunder
5. MockFlow
När vi pratar om mockup-webbplatser som är lämpliga för hela designprocessen nämner vi egentligen inte mockups. MockFlow är ett av de verkligt mångsidiga designverktygen som tar dig från wireframes, genom mockups och hela vägen till prototyper.
Förutom wireframing-möjligheter erbjuder MockFlow också större flexibilitet med ytterligare tillägg i MockStore. Där kan du hitta "tillbehör" såsom ytterligare UI-paket, ytterligare webbplatslayoutmallar och specialfunktioner som användarpersonas, designsystem eller översättare. MockFlow är också känt för sin lätthet att samarbeta och dela, vilket gör det till en fantastisk lösning för team. Webbplatser för att skapa layouter
Kostnad: Webbplatser för att skapa layouter
- Gratis plan
- 14 USD/månad (faktureras årligen) [Premium]
- 30 USD/månad (faktureras årligen) [TeamPack med 3 användare]
Fördelar:
- utmärkta wireframe-modelleringsmöjligheter
- MockStore tillhandahåller ytterligare funktioner
- Brett urval av UI-paket och mallar via MockStore
Nackdelar:
- Premiumplanen kostar mer än andra layoutprogram, men kostar mindre
Rekommenderas för…
- människor som behöver ytterligare verktyg som designsystem eller storyboards
- stora team som behöver avancerade samarbetsfunktioner
- enkla engångsprojekt som kan dra nytta av gratisplanen
6. Mockingbird. Webbplatser för att skapa layouter
Mockingbird är en bra mellanväg mellan omfattande funktioner och förenklad användbarhet (även om det är klassat som ett avancerade verktyg). Den mest attraktiva funktionen är den enkla WYSIWYG-redigeraren där du helt enkelt drar och släpper element till önskad plats. Andra populära mockup-webbplatser har dra-och-släpp-redigerare, men Mockingbirds användargränssnitt är så enkelt och okomplicerat att det tydligt är riktat till nybörjare och nybörjare.
Priset är dock inte så bekvämt. Med ett minimipris på $11 per månad är detta en av de dyraste layoutwebbplatserna, trots att den faktiskt inte erbjuder någonting. Å andra sidan är det samma pris för hur många anställda som helst, så om du har ett tillräckligt stort team kan du motivera kostnaden. Webbplatser för att skapa layouter
kostnad:
- $11/månad (faktureras årligen): 3 projekt
- $17 // månadsvis (faktureras årligen): 10 projekt
- $32/månad (faktureras årligen): 25 projekt
- $68 // månadsvis (faktureras årligen): obegränsade projekt
Fördelar:
- extremt bekväm
- WYSIWYG-gränssnitt
- gratis provversion online
Nackdelar: Webbplatser för att skapa layouter
- дорого
- Funktionsuppsättningen är inte lika robust som andra populära layoutwebbplatser
Rekommenderas för…
- nybörjare som skräms av mer komplexa gränssnitt
- stora team som inte har råd med individuellt medlemskap med andra mockup-webbplatser
7. MockupsJar. Webbplatser för att skapa layouter
MockupsJar är samma gratis layoutsida som Mediamodifier: du väljer din mall och lägger över din egen bild på den. Liksom Mediamodifier erbjuder de ett urval av stockfoton från bärbara datorer till muggar och t-shirts, men i отличие от Mediamodifier, du kan ladda ner den högkvalitativa versionen gratis. Webbplatser för att skapa layouter
MockupsJar kanske inte har så många webbplatsmockupmallar som Mediamodifier, men möjligheten att ladda upp en högkvalitativ bild utan att betala kompenserar för det. Du kan dock bara ladda upp 20 högupplösta bilder; efter det måste du antingen betala eller ladda ner den i låg upplösning. Gratisversionen har också annonser, men totalt sett är det inte så illa för en gratis mockup-webbplats.
Kostnad: Webbplatser för att skapa layouter
- Gratis plan
- 5 € / månad (betalas månadsvis)
Fördelar:
- lätt bara
- gratis plan erbjuder 20 högupplösta bilder
- inga vattenstämplar
Nackdelar:
- kala drag
- måste skapa bilder någon annanstans
Rekommenderas för…
- personer som gillar Mediamodifier-plattformen men inte vill betala för att ta bort vattenstämplarna
8.Moqups. Webbplatser för att skapa layouter
moqups är en annan mångsidig digital designer för mockups, prototyper och, naturligtvis, mockups. Deras editor är en fantastisk kombination av avancerade funktioner och WYSIWYG-kontroller, lämplig för både nybörjare och erfarna designers. De har dock bara två prisplaner, beroende på hur många användare du har, så lag större än tre kommer att behöva betala extra. Webbplatser för att skapa layouter
Användare berömmer Moqups förmåga att skapa flödesscheman, vilket inte precis är användbart för layouter, men är bra för hela designprocessen. Även om en del användbarhet kan vara besvärlig, är det totalt sett ett lönsamt alternativ till andra generiska layoutwebbplatser, särskilt om du är lika intresserad av wireframes och prototyper.
kostnad:
- 16 USD/månad (faktureras årligen) [Pro - 3 redaktörer]
- 49 USD/månad (faktureras årligen) [Obegränsat – Obegränsat med redaktörer]
Fördelar: Webbplatser för att skapa layouter
- välbalanserat verktyg för att designa wireframes, prototyper och mockups
- Användarvänlig nog för nybörjare, tillräckligt avancerad för experter
- Fantastiska planeringsfunktioner som flödesscheman, webbplatskartor och storyboards
Nackdelar:
- på den dyrare sidan
Rekommenderas för…
- människor som prioriterar mockups och prototyper på samma nivå som mockups
9. Smartmockups. Webbplatser för att skapa layouter
Smarta mockups är i samma kategori som Mediamodifier och MockupsJar, men med bättre integration. Det här är en stor sak om du har tagit en högupplöst skärmdump av förhandsvisningen i Marvel-appen och bara vill placera den på ett exempel på skrivbordsbakgrund. Smartmockups har också fler anpassningsfunktioner än andra gratis webbplatser med mockups, som att ändra färger, men den här funktionen är endast tillgänglig med en betalplan. Webbplatser för att skapa layouter
Som med andra gratis mockup-webbplatser, förvänta dig inte för mycket utöver att ha din bildöverlagring på mallens bakgrund. Den betalda versionen har tillgång till över 6000 800 bildmallar för en mängd olika bakgrunder, inklusive T-shirts, visitkort och digitala enheter. Den kostnadsfria planen erbjuder fortfarande cirka XNUMX layoutmallar, men du måste hantera vattenstämplar.
kostnad:
- Gratis version
- $9 per månad
Fördelar: Webbplatser för att skapa layouter
- integreras med Marvel App, Dropbox, Figma, Unsplash och Canva
- den betalda planen låter dig anpassa bilden
- snabbt och enkelt
Nackdelar:
- Gratisplanen har vattenstämplar
- måste skapa bilder någon annanstans
Rekommenderas för…
- du arbetar främst i Marvel App, Canva eller Figma
Varför inte bli proffs?
Som vi sa ovan är det enda syftet med mockups att se bra ut. Om det är mycket som ligger bakom framgången med din mockup – kanske du behöver vinna över en missnöjd intressent eller lägga fram en idé för mer finansiering – så vill du definitivt att din mockup ska se perfekt ut. I så fall, varför inte lämna det i händerna på en professionell. Webbplatser för att skapa layouter
När du anlitar en frilansdesigner lägger du din design i händerna på en expert som förstår designens ins och outs. Du behöver inte oroa dig för programpriser eller inlärningskurvor eftersom designern tar hand om det åt dig. Och med vår community av designers från hela världen kommer du garanterat att hitta designa med den stilenden du behöver!
«АЗБУКА»
Оставить комментарий