Mockup web stranice, poznate i kao mrežni grafički uređivači ili alati za dizajn, omogućavaju korisnicima da kreiraju različite grafičke dizajne, ilustracije, banere, logotipe, prezentacije i još mnogo toga direktno iz svog web pretraživača bez potrebe za instaliranjem specijaliziranog softvera na svoje računalo. Ovi online alati obično nude niz funkcija i predložaka koji olakšavaju proces kreiranja dizajna.

Za razliku od prototipova, koji bi zapravo trebali funkcionirati, makete su statični vizualni elementi namijenjeni prikazivanju dizajna, atmosfere, boje i cjelokupne estetike. Neki dizajneri radije kreiraju svako dugme i ikonu od nule, ali ako želite skočiti naprijed ili se poigrati za inspiraciju, izgledi web stranice i softver dolaze unaprijed učitani sa ovim elementima i mogu biti lakši za korištenje od softvera za grafički dizajn.

Donje stranice pomoći će vam da napravite makete ekrana web stranice, makete ekrana aplikacija, makete proizvoda i još mnogo toga. Većina dolazi s predlošcima izgleda web stranice ili kompletima korisničkog sučelja koji vam omogućavaju da dizajnirate koristeći unaprijed napravljene elemente kao što su gumbi. Oni sjajno štede vrijeme ako se ikada nađete u nevolji i trebate brzo predati izgled. Za svaku ćemo analizirati cijenu, pro i cons, kao i kome se preporučuju.

1. Adobe XD. Web stranice za kreiranje izgleda

Adobe XD je odgovor porodice Adobe na softver za digitalni dizajn. Ima sve detalje i nijanse koje biste očekivali od kompanije koja stoji iza Photoshop i Illustrator, ali nudi i jednako visoku cijenu.

Međutim, ako tražite profesionalne izglede sa svim detaljima, Adobe XD će vas pokriti. On upravlja cijelim procesom dizajna, uključujući interaktivne prototipove, pa čak i integrira se s drugim Adobe softverom ako želite da kreirate ili prilagodite elemente u Photoshopu ili Illustratoru.

Također je prilično sofisticiran u svojim karakteristikama, s 3D efektima, animacijama i mogućnošću kreiranja biblioteke komponenti, mjesta za pohranjivanje svih vaših elemenata poput dugmadi i ikona kako bi ih vaš tim mogao ponovo koristiti u drugom projektu (ovo pomaže da se kupci ponavljaju ako pogledajte iste kontrole na novom proizvodu). Tu su i posebne funkcije kao što je Repeat Grid, koja štedi vrijeme kada trebate kopirati i zalijepiti uzorak iznova i iznova, i Padding, koji štiti različite veličine piksela prilikom uređivanja slojeva istih elemenata.

Troškovi:

  • 9,99 USD/mjesečno
  • 99,99 USD godišnje (prepaid)

Prednosti: Web stranice za kreiranje izgleda

  • Pogodno za cijeli proces dizajna, uključujući interaktivne prototipove
  • sofisticirane karakteristike: 3D efekti, animacija i biblioteka komponenti
  • Pogodne funkcije koje štede vrijeme: uvlačenje, ponavljanje uzoraka i jednostavno uređivanje
  • Integrira se sa drugim Adobe softverom

Cons:

  • previše ako želite jednostavan i brz izgled

Preporučeno za…

  • ljudi koji su dovoljno ozbiljni u digitalnom dizajnu da žele vrhunski softver
  • uredan dizajn - ne za jednokratne ili pojedinačne projekte

2. Fluid UI. Web stranice za kreiranje izgleda

Iako tehnički za izradu prototipa, Fluid UI je dovoljno robustan da stvori zapanjujuće modele koji se kasnije mogu pretvoriti u interaktivne prototipove. Ovo je odličan izbor za iskusne dizajnere i dizajnerske timove koji rade na cjelokupnom obimu projekta.

Fleksibilno korisničko sučelje nije tako jednostavno kao druge popularne web stranice s izgledom, što se možda neće svidjeti početnicima. Međutim, ima sve funkcije profesionalnog nivoa koje su vam potrebne za dizajn weba i aplikacija, uključujući žičane okvire i biblioteku unaprijed izgrađenih UI komponenti i ikona. Jedna od njegovih prednosti su alati za saradnju, koji omogućavaju korisnicima da pregledaju, komentiraju i uređuju iste datoteke s bilo kojeg mjesta na svijetu.

Troškovi:

  • Besplatan plan (1 projekat)
  • 8,25 USD mjesečno (naplaćuje se godišnje) [Solo]
  • 19,08 USD mjesečno (naplaćuje se godišnje) [Pro]
  • 41,58 USD mjesečno (naplaćuje se godišnje) [Tim]

Prednosti: Web stranice za kreiranje izgleda

  • napredne funkcije pogodne za profesionalce
  • nešto jeftinije od sličnih mockup web stranica
  • prvoklasna saradnja
  • velika ugrađena biblioteka komponenti
  • mobilne aplikacije i zamjena uređaja olakšavaju kreiranje izgleda za mobilne uređaje

Cons:

  • krivulja učenja

Preporučeno za…

  • ljudi koji žele punopravni alat za dizajn, ali također vode računa o svom budžetu

3. InVision. Web stranice za kreiranje izgleda

InVision je direktan konkurent Adobe XD-u i još jedan sve-u-jednom alat za izradu prototipa, također sa skupom mjesečnom pretplatom. InVision dijeli mnoge od sofisticiranih karakteristika Adobe XD-a, uključujući precizne alate za animaciju za izradu prototipa, ali je malo manje prilagođen korisniku kada je u pitanju efikasnost i pojednostavljenje zadataka.

Takođe je vredno napomenuti da je InVision prvenstveno alat za izradu prototipa, tako da su mnoge njegove karakteristike fokusirane na interaktivnost i efekte, a ne na statične slike. Međutim, ima sve što vam je potrebno za stvaranje odlični rasporedi pixel-perfect, uključujući integraciju sa Photoshopom i Sketch-om, i sa besplatnim dodatkom Inspect, možete lako transformisati bilo koji dizajn u programski kod. I kao vrh svega, tu je zauvijek besplatna verzija.

Troškovi:

  • Besplatna verzija
  • 7,95 USD mjesečno (naplaćuje se godišnje)

Prednosti: Web stranice za kreiranje izgleda

  • Pogodno za cijeli proces dizajna, uključujući interaktivne prototipove
  • napredne funkcije kao što su animacija i interaktivni efekti
  • integrira se sa Photoshopom i Sketchom
  • besplatna verzija

Cons:

  • upotrebljivost je malo složenija od Adobe XD

Preporučeno za…

  • ljudi kojima je prvenstveno potreban alat za izradu prototipa, ali sa mockup mogućnostima

4. Modifikator medija. Web stranice za kreiranje izgleda

Odmaknimo se od izgleda web stranica na profesionalnom nivou... daleko od hotela. Modifikator medija je na drugom kraju spektra: vrlo ograničenih karakteristika i dubine, ali izuzetno zgodan. Možeš besplatno preuzimanje maketa direktno sa stranice, ali da biste uklonili vodeni žig i dobili visokokvalitetne verzije, morat ćete platiti.

Mediamodifier je sličan online uređivaču fotografija, ali s unaprijed učitanim predlošcima aplikacija i izgledom web stranice. Takođe imaju hiljade šablona za više od digitalnog dizajna: majice, šolje za kafu, korice knjiga itd. Sve što treba da uradite je da pronađete šablon koji vam se sviđa, da dodate svoju sliku i... pa, to je sve što možete da uradite, zaista. Ovo je jednostavna web stranica s izgledom za one koji vam trebaju nešto brzo i jednostavno, ali ne i kada trebate nekoga impresionirati visokokvalitetnom grafikom.

Troškovi:

  • Besplatni plan
  • 9 USD mjesečno (naplaćuje se godišnje)

Prednosti: Web stranice za kreiranje izgleda

  • jednostavan za korištenje
  • može kreirati raspored u sekundi
  • mnogo šablona za odabir

Cons:

  • gole karakteristike
  • morate platiti za visokokvalitetnu rezoluciju
  • potrebno je platiti uklanjanje vodenih žigova

Preporučeno za…

  • kada vam treba nešto jednostavno i brzo
  • već ste kreirali sliku, ali morate je postaviti na pozadinu telefona/desktopa
  • dobar izbor pozadina

5. MockFlow

Kada govorimo o mockup web stranicama koje su prikladne za cijeli proces dizajna, zapravo ne spominjemo makete. MockFlow je jedan od zaista svestranih dizajnerskih alata koji će vas odvesti od žičanih okvira, preko maketa, pa sve do prototipova.

Pored mogućnosti uokvirivanja, MockFlow također nudi veću fleksibilnost s dodatnim dodacima u MockStore-u. Tamo možete pronaći "dodatke" kao što su dodatni paketi korisničkog sučelja, dodatni predlošci izgleda web stranice i posebne karakteristike kao što su korisničke ličnosti, sistemi dizajna ili prevodioci. MockFlow je također poznat po svojoj lakoći saradnje i dijeljenja, što ga čini odličnim rješenjem za timove. Web stranice za kreiranje izgleda

Cijena: Web stranice za kreiranje izgleda

  • Besplatni plan
  • 14 USD mjesečno (naplaćuje se godišnje) [Premium]
  • 30 USD mjesečno (naplaćuje se godišnje) [TeamPack sa 3 korisnika]

Pros:

  • odlične mogućnosti modeliranja žičanog okvira
  • MockStore nudi dodatne funkcije
  • Širok izbor UI paketa i šablona preko MockStore-a

Cons:

  • Premium plan košta više od drugog softvera za raspored, ali košta manje

Preporučeno za…

  • ljudi kojima su potrebni dodatni alati kao što su sistemi za dizajn ili ploče priča
  • veliki timovi kojima su potrebne napredne funkcije za saradnju
  • jednostavni jednokratni projekti koji mogu imati koristi od besplatnog plana

6. Ptica rugalica. Web stranice za kreiranje izgleda

američki drozd je dobra sredina između opsežnih funkcija i pojednostavljene upotrebljivosti (iako je ocijenjen kao vrhunski alat). Najatraktivnija karakteristika je jednostavan WYSIWYG editor gdje jednostavno prevlačite i ispuštate elemente na željenu lokaciju. Druge vrhunske mockup web stranice imaju editore za prevlačenje i ispuštanje, ali korisničko sučelje Mockingbird-a je toliko jednostavno i jasno da je jasno namijenjeno početnicima i početnicima.

Međutim, cijena nije tako povoljna. Uz minimalnu cijenu od 11 USD mjesečno, ovo je jedna od najskupljih web stranica za izgled, iako zapravo ne nudi ništa. S druge strane, to je ista cijena za bilo koji broj zaposlenih, tako da ako imate dovoljno veliki tim, možete opravdati trošak. Web stranice za kreiranje izgleda

Troškovi:

  • 11 USD/mjesečno (naplaćuje se godišnje): 3 projekta
  • 17 USD // mjesečno (naplaćuje se godišnje): 10 projekata
  • 32 USD/mjesečno (naplaćuje se godišnje): 25 projekata
  • 68 USD // mjesečno (naplaćuje se godišnje): neograničeni projekti

Pros:

  • izuzetno udoban
  • WYSIWYG interfejs
  • besplatna probna verzija na mreži

Protiv: Sajtovi za kreiranje izgleda

  • skupo
  • Skup funkcija nije tako robustan kao druge popularne web stranice sa izgledom

Preporučeno za…

  • početnike koji se plaše složenijih interfejsa
  • veliki timovi koji si ne mogu priuštiti pojedinačno članstvo na drugim mockup web stranicama

7. MockupsJar. Web stranice za kreiranje izgleda

MockupsJar je ista besplatna stranica za izgled kao i Mediamodifier: birate svoj predložak i prekrivate svoju sliku na njemu. Poput Mediamodifier-a, oni nude izbor fotografija zaliha od laptopa do šoljica i majica, ali, u Za razliku od Mediamodifier, možete besplatno preuzeti verziju visokog kvaliteta. Web stranice za kreiranje izgleda

MockupsJar možda nema toliko predložaka za mockup web stranice kao Mediamodifier, ali mogućnost postavljanja slike visokog kvaliteta bez plaćanja to nadoknađuje. Međutim, možete postaviti samo 20 slika visoke rezolucije; nakon toga ćete morati ili platiti ili preuzeti u niskoj rezoluciji. Besplatna verzija također ima oglase, ali generalno nije loša za besplatnu mockup web stranicu.

Cijena: Web stranice za kreiranje izgleda

  • Besplatni plan
  • 5 € / mjesec (plaća se mjesečno)

Pros:

  • jednostavno jednostavno
  • besplatni plan nudi 20 slika visoke rezolucije
  • bez vodenih žigova

Cons:

  • gole karakteristike
  • treba kreirati slike na drugom mjestu

Preporučeno za…

  • ljudi koji vole platformu Mediamodifier, ali ne žele da plate da uklone vodene žigove

8.Moqups. Web stranice za kreiranje izgleda

moqups je još jedan svestrani digitalni dizajner za makete, prototipove i, naravno, makete. Njihov uređivač je odlična kombinacija naprednih funkcija i WYSIWYG kontrola, pogodan i za početnike i za iskusne dizajnere. Međutim, oni imaju samo dva plana cijena, ovisno o tome koliko korisnika imate, tako da će timovi veći od tri morati dodatno platiti. Web stranice za kreiranje izgleda

Korisnici hvale Moqups-ovu sposobnost da kreira dijagrame toka, što nije baš korisno za izglede, ali je dobro za cijeli proces dizajna. Iako neka upotrebljivost može biti nezgodna, generalno gledano, to je održiva alternativa drugim web stranicama s generičkim izgledom, posebno ako ste podjednako zainteresirani za žičane okvire i prototipove.

Troškovi:

  • 16 USD mjesečno (naplaćuje se godišnje) [Pro - 3 urednika]
  • 49 USD mjesečno (naplaćuje se godišnje) [Neograničeno - Neograničeno urednika]

Prednosti: Web stranice za kreiranje izgleda

  • dobro izbalansiran alat za dizajniranje žičanih okvira, prototipova i maketa
  • Dovoljno jednostavan za početnike, dovoljno napredan za stručnjake
  • Odlične značajke planiranja kao što su dijagrami toka, mape web stranica i ploče priča

Cons:

  • na skupljoj strani

Preporučeno za…

  • ljudi koji daju prioritet maketama i prototipovima na istom nivou kao i makete

9. Smartmockups. Web stranice za kreiranje izgleda

pametni modeli je u istoj kategoriji kao Mediamodifier i MockupsJar, ali sa boljom integracijom. Ovo je velika stvar ako ste napravili snimak ekrana u visokoj rezoluciji pregleda u Marvel aplikaciji i samo ga želite postaviti na uzorak pozadine radne površine. Smartmockups također ima više mogućnosti prilagođavanja od ostalih besplatne web stranice s maketama, kao što je promjena boja, ali ova funkcija je dostupna samo uz plaćeni plan. Web stranice za kreiranje izgleda

Kao i kod drugih besplatnih mockup web stranica, ne očekujte previše osim preklapanja slike na pozadini predloška. Plaćena verzija ima pristup preko 6000 šablona slika za različite pozadine, uključujući majice, vizit karte i digitalne uređaje. Besplatni plan i dalje nudi oko 800 predložaka izgleda, ali morat ćete se pozabaviti vodenim žigovima.

Troškovi:

  • Besplatna verzija
  • 9 dolara mjesečno

Prednosti: Web stranice za kreiranje izgleda

  • integrira se sa Marvel aplikacijom, Dropboxom, Figma, Unsplash i Canva
  • plaćeni plan vam omogućava da prilagodite sliku
  • brzo i jednostavno

Cons:

  • Besplatni plan ima vodene žigove
  • treba kreirati slike na drugom mjestu

Preporučeno za…

  • radite prvenstveno u Marvel aplikaciji, Canvi ili Figmi

Zašto ne postati profesionalac?

Kao što smo već rekli, jedina svrha maketa je da izgledaju dobro. Ako mnogo zavisi od uspjeha vašeg modela—možda trebate pridobiti nezadovoljnu dionicu ili predložiti ideju za više sredstava—onda definitivno želite da vaš model izgleda savršeno. U tom slučaju, zašto to ne prepustiti profesionalcima. Web stranice za kreiranje izgleda

Kada unajmite slobodnog dizajnera, svoj dizajn stavljate u ruke stručnjaka koji razumije sve detalje dizajna. Ne morate brinuti o cijenama softvera ili krivuljama učenja jer će se dizajner pobrinuti za vas. A sa našom zajednicom dizajnera iz cijelog svijeta, sigurno ćete pronaći dizajn u tom stiluonaj koji ti treba!

  «АЗБУКА»