Mockup-websides, ek bekend as online grafyske bewurkers of ûntwerpark, kinne brûkers ferskate grafyske ûntwerpen, yllustraasjes, banners, logo's, presintaasjes en mear direkt fan har webblêder meitsje sûnder de needsaak om spesjale software op har kompjûter te ynstallearjen. Dizze online ark biede normaal in ferskaat oan funksjes en sjabloanen dy't it proses foar oanmeitsjen fan ûntwerp makliker meitsje.

Oars as prototypen, dy't wirklik funksjonearje moatte, binne mockups statyske fisuele eleminten dy't bedoeld binne om ûntwerplayouts, sfear, kleur en algemiene estetyk te sjen. Guon ûntwerpers leaver elke knop en ikoan fanôf it begjin oan te meitsjen, mar as jo foarút wolle springe of spielje wolle foar ynspiraasje, komme webside-layouts en software foarladen mei dizze eleminten en kinne makliker te brûken wêze dan software foar grafysk ûntwerp.

De ûndersteande siden sille jo helpe by it meitsjen fan webside-skermmockups, app-skermmockups, produktmockups, en mear. De measte komme mei sjabloanen foar webside-yndieling as UI-kits wêrmei jo kinne ûntwerpe mei foarôfboude eleminten lykas knoppen. Se binne geweldige tiidbesparers as jo josels oait yn in knyp fine en in yndieling fluch moatte oerjaan. Foar elk sille wy de priis analysearje, pros en kons, likegoed as oan wa't se wurde oanrikkemandearre.

1. Adobe XD. Websites foar it meitsjen fan layouts

Adobe XD is it antwurd fan 'e Adobe-famylje op software foar digitale ûntwerp. It hat alle details en nuânses dy't jo soene ferwachtsje fan it bedriuw efter Photoshop en Illustrator, mar it biedt ek in like hege priis.

As jo ​​​​lykwols op syk binne nei layouts fan profesjonele klasse mei alle details, hat Adobe XD jo behannele. It behannelet it heule ûntwerpproses, ynklusyf ynteraktive prototypes, en yntegreart sels mei oare Adobe-software as jo eleminten wolle oanmeitsje of oanpasse yn Photoshop of Illustrator.

It is ek frij ferfine yn har funksjes, mei 3D-effekten, animaasjes, en de mooglikheid om in komponintbibleteek te meitsjen, in plak om al jo eleminten lykas knoppen en ikoanen op te slaan, sadat jo team se wer brûke kin yn in oar projekt (dit helpt klanten werhelje as se sjogge deselde kontrôles op it nije produkt). D'r binne ek spesjale funksjes lykas Repeat Grid, dat tiid besparret as jo in patroan hieltyd wer moatte kopiearje en plakke, en Padding, dy't beskermet pikselgrutte by it bewurkjen oars lagen fan deselde eleminten.

Kosten:

  • $ 9,99 / moanne
  • $ 99,99 per jier (foarbetelle)

Pros: Websites foar it meitsjen fan layouts

  • Geskikt foar it hiele ûntwerpproses, ynklusyf ynteraktive prototypes
  • ferfine funksjes: 3D effekten, animaasje en komponint bibleteek
  • Handige tiidbesparjende funksjes: ynspringen, herhalen fan patroanen en maklike bewurkjen
  • Yntegreart mei oare Adobe-software

Cons:

  • overkill as jo gewoan in ienfâldige en rappe yndieling wolle

Oanrikkemandearre foar…

  • minsken dy't serieus genôch binne oer digitaal ûntwerp om top-tier software te wollen
  • reguliere ûntwerp - net foar ienmalige of yndividuele projekten

2. Fluid UI. Websites foar it meitsjen fan layouts

Hoewol technysk foar prototyping, Floeiende UI is robúst genôch om prachtige mockups te meitsjen dy't letter kinne wurde omboud ta ynteraktive prototypes. Dit is in poerbêste kar foar betûfte ûntwerpers en ûntwerpteams dy't wurkje oan 'e heule omfang fan in projekt.

De fleksibele brûkersynterface is net sa brûkerfreonlik as oare populêre layoutwebsides, dy't miskien net oansprekke foar begjinners. It hat lykwols alle funksjes fan profesjonele kwaliteit dy't jo nedich binne foar web- en app-ûntwerp, ynklusyf wireframes en in bibleteek fan foarôfboude UI-komponinten en ikoanen. Ien fan har foardielen is syn gearwurkingsark, wêrtroch brûkers deselde bestannen fan oer de hiele wrâld kinne besjen, kommentaar en bewurkje.

Kosten:

  • Fergees plan (1 projekt)
  • $ 8,25 / moanne (jierliks ​​fakturearre) [Solo]
  • $ 19,08 per moanne (jierliks ​​fakturearre) [Pro]
  • $ 41,58 per moanne (jierliks ​​fakturearre) [Team]

Pros: Websites foar it meitsjen fan layouts

  • avansearre funksjes geskikt foar professionals
  • wat goedkeaper as ferlykbere mockup-websides
  • earste klasse gearwurking
  • grutte ynboude komponint bibleteek
  • mobile apps en apparaat switching meitsje it makliker te meitsjen yndielings foar mobile apparaten

Cons:

  • learkurve

Oanrikkemandearre foar…

  • minsken dy't wolle in folweardich design ark, mar binne ek bewust fan harren budzjet

3. InVision. Websites foar it meitsjen fan layouts

InVision is in direkte konkurrint foar Adobe XD en is in oar alles-yn-ien mockup- en prototyping-ark, ek mei in djoer moanliks abonnemint. InVision dielt in protte fan 'e ferfine funksjes fan Adobe XD, ynklusyf presys animaasje-ark foar prototyping, mar is in bytsje minder brûkerfreonlik as it giet om effisjinsje en streamlining fan taken.

It is ek de muoite wurdich op te merken dat InVision primêr in prototyping-ark is, sadat in protte fan har funksjes rjochte binne op ynteraktiviteit en effekten ynstee fan statyske ôfbyldings. It hat lykwols alles wat jo nedich binne om te meitsjen grutte yndielings pixel-perfekt, ynklusyf yntegraasje mei Photoshop en Sketch, en mei de fergese Inspect-add-on kinne jo elk ûntwerp maklik transformearje yn ûntwikkelderskoade. En om it allegear ôf te meitsjen, is d'r in foar altyd fergese ferzje.

Kosten:

  • Fergees ferzje
  • $ 7,95 per moanne (jierliks ​​fakturearre)

Pros: Websites foar it meitsjen fan layouts

  • Geskikt foar it hiele ûntwerpproses, ynklusyf ynteraktive prototypes
  • avansearre funksjes lykas animaasje en ynteraktive effekten
  • yntegreart mei Photoshop en Sketch
  • frije ferzje

Cons:

  • brûkberens is in bytsje komplekser as Adobe XD

Oanrikkemandearre foar…

  • minsken dy't primêr nedich in prototyping ark, mar mei mockup mooglikheden

4. Media modifier. Websites foar it meitsjen fan layouts

Litte wy fuortgean fan webside-yndielingen op profesjonele nivo ... fier fuort fan hotel. Media modifier is oan 'e oare ein fan it spektrum: tige beheind yn funksjes en djipte, mar ekstreem handich. Do kinst fergees download mockups direkt fan 'e side, mar om it wettermerk te ferwiderjen en ferzjes fan hege kwaliteit te krijen, moatte jo betelje.

Mediamodifier is fergelykber mei in online foto-bewurker, mar mei foarôf laden app-sjabloanen en webside-layouts. Se hawwe ek tûzenen sjabloanen foar mear dan allinich digitale ûntwerpen: t-shirts, kofjemokken, boek covers ensfh Alles wat jo hoege te dwaan is in sjabloan te finen dy't jo leuk fine, jo eigen ôfbylding tafoegje en ... goed, dat is alles wat jo kinne dwaan, echt. Dit is in ienfâldige webside mei yndielingen foar wannear't jo wat fluch en maklik nedich binne, mar net foar wannear't jo immen moatte yndruk meitsje mei grafiken fan hege kwaliteit.

Kosten:

  • Fergees plan
  • $ 9 per moanne (jierliks ​​fakturearre)

Pros: Websites foar it meitsjen fan layouts

  • maklik te brûken
  • kin meitsje yndielings yn sekonden
  • in protte sjabloanen om út te kiezen

Cons:

  • bleate funksjes
  • jo moatte betelje foar hege kwaliteit resolúsje
  • moatte betelje om wettermerken te ferwiderjen

Oanrikkemandearre foar…

  • as jo gewoan wat ienfâldich en fluch nedich binne
  • jo hawwe al in ôfbylding makke, mar jo moatte it pleatse op jo tillefoan / buroblêd eftergrûn
  • goede seleksje fan eftergrûnen

5. MockFlow

As wy prate oer mockup-websides dy't geskikt binne foar it heule ûntwerpproses, neame wy mockups net echt. MockFlow is ien fan 'e wirklik alsidige ûntwerpynstruminten dy't jo sille nimme fan wireframes, fia mockups, en oant prototypes.

Neist wireframing-mooglikheden biedt MockFlow ek gruttere fleksibiliteit mei ekstra tafoegings yn 'e MockStore. Dêr kinne jo "aksessoires" fine, lykas ekstra UI-pakketten, ekstra sjabloanen foar webside-yndieling en spesjale funksjes lykas brûkerspersoanen, ûntwerpsystemen of oersetters. MockFlow is ek bekend om syn gemak fan gearwurking en dielen, wêrtroch it in geweldige oplossing is foar teams. Websites foar it meitsjen fan layouts

Kosten: Websites foar it meitsjen fan layouts

  • Fergees plan
  • $ 14 / moanne (jierliks ​​fakturearre) [Premium]
  • $ 30 / moanne (jierliks ​​fakturearre) [TeamPack mei 3 brûkers]

Pros:

  • poerbêst wireframe modeling mooglikheden
  • MockStore biedt ekstra funksjes
  • Brede seleksje fan UI-pakketten en sjabloanen fia MockStore

Cons:

  • It premium plan kostet mear as oare layoutsoftware, mar kostet minder

Oanrikkemandearre foar…

  • minsken dy't ekstra ark nedich binne lykas ûntwerpsystemen of storyboards
  • grutte teams dy't nedich avansearre gearwurking funksjes
  • ienfâldige ienmalige projekten dy't kinne profitearje fan it fergese plan

6. Mockingbird. Websites foar it meitsjen fan layouts

Mockingbird is in goede midden tusken wiidweidige funksjes en ferienfâldige brûkberens (hoewol't it wurdt rated as in hege-ein ark). De meast oantreklike funksje is de ienfâldige WYSIWYG-bewurker wêr't jo eleminten gewoan slepe en droppe nei de winske lokaasje. Oare top mockup-websides hawwe drag-and-drop-bewurkers, mar de brûkersynterface fan Mockingbird is sa ienfâldich en rjochtlinich dat it dúdlik rjochte is op begjinners en begjinners.

De priis is lykwols net sa handich. Mei in minimumpriis fan $ 11 per moanne is dit ien fan 'e djoerste layoutwebsides, nettsjinsteande it feitlik neat oan te bieden. Oan 'e oare kant is it deselde priis foar elk oantal meiwurkers, dus as jo in grut genôch team hawwe, kinne jo de kosten rjochtfeardigje. Websites foar it meitsjen fan layouts

Kosten:

  • $ 11 / moanne (jierliks ​​fakturearre): 3 projekten
  • $ 17 // moanliks (jierliks ​​fakturearre): 10 projekten
  • $ 32 / moanne (jierliks ​​fakturearre): 25 projekten
  • $ 68 // moanliks (jierliks ​​fakturearre): ûnbeheinde projekten

Pros:

  • ekstreem noflik
  • WYSIWYG ynterface
  • frije proef online

Cons: Sites foar it meitsjen fan layouts

  • djoer
  • De funksje set is net sa robúst as oare populêre layout-websides

Oanrikkemandearre foar…

  • begjinners dy't wurde yntimidearre troch mear komplekse ynterfaces
  • grutte teams dy't net kinne betelje yndividuele lidmaatskip mei oare mockup websiden

7. MockupsJar. Websites foar it meitsjen fan layouts

MockupsJar is deselde frije layoutside as Mediamodifier: jo kieze jo sjabloan en oerlizze jo eigen ôfbylding derop. Lykas Mediamodifier, biede se in seleksje fan stockfoto's fan laptops oant mokken en t-shirts, mar, yn Oars as Mediamodifier, jo kinne de ferzje fan hege kwaliteit fergees downloade. Websites foar it meitsjen fan layouts

MockupsJar hat miskien net safolle webside-mockup-sjabloanen as Mediamodifier, mar de mooglikheid om in ôfbylding fan hege kwaliteit te uploaden sûnder te beteljen makket it goed. Jo kinne lykwols allinich 20 ôfbyldings mei hege resolúsje uploade; dêrnei sille jo moatte betelje of downloade yn lege resolúsje. De fergese ferzje hat ek advertinsjes, mar oer it algemien is it net te min foar in fergese mockup-webside.

Kosten: Websites foar it meitsjen fan layouts

  • Fergees plan
  • 5 € / moanne (moanliks betelle)

Pros:

  • maklik gewoan
  • fergees plan biedt 20 ôfbyldings mei hege resolúsje
  • gjin wettermerken

Cons:

  • bleate funksjes
  • moatte meitsje ôfbyldings earne oars

Oanrikkemandearre foar…

  • minsken dy't it Mediamodifier-platfoarm leuk fine, mar net wolle betelje om de wettermerken te ferwiderjen

8. Moqups. Websites foar it meitsjen fan layouts

moqups is in oare alsidich digitale ûntwerper foar mockups, prototypes en, fansels, mockups. Harren bewurker is in geweldige kombinaasje fan avansearre funksjes en WYSIWYG-kontrôles, geskikt foar sawol begjinners as betûfte ûntwerpers. Se hawwe lykwols mar twa priisplannen, ôfhinklik fan hoefolle brûkers jo hawwe, dus teams grutter dan trije sille ekstra moatte betelje. Websites foar it meitsjen fan layouts

Brûkers priizgje it fermogen fan Moqups om flowcharts te meitsjen, wat net krekt nuttich is foar layouts, mar goed is foar it heule ûntwerpproses. Wylst guon brûkberens ûnhandich kin wêze, is it oer it algemien in libbensfetber alternatyf foar oare generyske opmaakwebsides, foaral as jo like ynteressearre binne yn wireframes en prototypes.

Kosten:

  • $ 16 / moanne (jierliks ​​yn rekken brocht) [Pro - 3 bewurkers]
  • $ 49 / moanne (jierliks ​​fakturearre) [Unbeheind - Unbeheinde bewurkers]

Pros: Websites foar it meitsjen fan layouts

  • goed lykwichtige ark foar it ûntwerpen fan wireframes, prototypes en mockups
  • Brûkersfreonlik genôch foar begjinners, avansearre genôch foar saakkundigen
  • Geweldige planningfunksjes lykas flowcharts, sitemaps en storyboards

Cons:

  • oan de djoerdere kant

Oanrikkemandearre foar…

  • minsken dy't mockups en prototypes op itselde nivo as mockups prioritearje

9. Smartmockups. Websites foar it meitsjen fan layouts

smart mockups is yn deselde kategory as Mediamodifier en MockupsJar, mar mei bettere yntegraasje. Dit is in grut probleem as jo in skermôfbylding mei hege resolúsje hawwe nommen fan 'e foarbyld yn' e Marvel-app en it gewoan wolle pleatse op in foarbyld fan buroblêdeftergrûn. Smartmockups hat ek mear oanpassingsfunksjes dan oaren frije websiden mei mockups, lykas it feroarjen fan kleuren, mar dizze funksje is allinich beskikber mei in betelle plan. Websites foar it meitsjen fan layouts

Lykas by oare fergese mockup-websides, ferwachtsje net te folle dan it hawwen fan jo ôfbylding op 'e eftergrûn fan' e sjabloan. De betelle ferzje hat tagong ta mear as 6000 ôfbyldingssjabloanen foar in ferskaat oan eftergrûnen, ynklusyf T-shirts, visitekaarten en digitale apparaten. It fergese plan biedt noch altyd sawat 800 layoutsjabloanen, mar jo moatte omgean mei wettermerken.

Kosten:

  • Fergees ferzje
  • $ 9 per moanne

Pros: Websites foar it meitsjen fan layouts

  • yntegreart mei Marvel App, Dropbox, Figma, Unsplash en Canva
  • it betelle plan lit jo de ôfbylding oanpasse
  • fluch en maklik

Cons:

  • It fergese plan hat wettermerken
  • moatte meitsje ôfbyldings earne oars

Oanrikkemandearre foar…

  • jo wurkje primêr yn Marvel App, Canva of Figma

Wêrom net in profesjoneel wurde?

Lykas wy hjirboppe seine, is it ienige doel fan mockups om goed te sjen. As d'r in protte rydt op it sukses fan jo mockup - miskien moatte jo in ûntefreden belanghawwende oerwinne of in idee foar mear finansiering pleatse - dan wolle jo perfoarst dat jo mockup perfekt sjocht. Yn dat gefal, wêrom lit it net yn 'e hannen fan in profesjoneel. Websites foar it meitsjen fan layouts

As jo ​​​​in freelance ûntwerper hiere, sette jo jo ûntwerp yn 'e hannen fan in ekspert dy't de ins en outs fan ûntwerp begrypt. Jo hoege jo gjin soargen te meitsjen oer softwareprizen of learkurven, om't de ûntwerper it foar jo sil soargje. En mei ús mienskip fan ûntwerpers fan oer de hiele wrâld, binne jo wis te finen ûntwerp mei dy styldyjinge dy't jo nedich hawwe!

  «АЗБУКА»