Mockup web stranice, također poznate kao mrežni grafički uređivači ili alati za dizajn, omogućuju korisnicima stvaranje različitih grafičkih dizajna, ilustracija, bannera, logotipa, prezentacija i više izravno iz web preglednika bez potrebe za instaliranjem specijaliziranog softvera na računalo. Ovi mrežni alati obično nude razne značajke i predloške koji olakšavaju proces stvaranja dizajna.
Za razliku od prototipova, za koje se pretpostavlja da stvarno funkcioniraju, mockupovi su statični vizualni elementi namijenjeni prikazivanju dizajna, atmosfere, boje i cjelokupne estetike. Neki dizajneri radije stvaraju svaki gumb i ikonu od nule, ali ako želite skočiti naprijed ili se poigrati tražeći inspiraciju, izgledi web stranica i softver dolaze s unaprijed instaliranim ovim elementima i mogu biti lakši za korištenje od softvera za grafički dizajn.
Web-mjesta u nastavku pomoći će vam da izradite makete zaslona web-lokacije, makete zaslona aplikacije, makete proizvoda i više. Većina dolazi s predlošcima izgleda web stranice ili kompletima korisničkog sučelja koji vam omogućuju da dizajnirate pomoću unaprijed izgrađenih elemenata kao što su gumbi. Odlično štede vrijeme ako se ikada nađete u nevolji i morate brzo predati izgled. Za svaku ćemo analizirati cijenu, prednosti i nedostatke, kao i kome se preporučuju.
1. Adobe XD. Web stranice za izradu izgleda
Adobe XD je odgovor obitelji Adobe na softver za digitalni dizajn. Sadrži sve detalje i nijanse koje biste očekivali od tvrtke koja stoji iza njega Photoshop i Illustrator, ali nudi i jednako visoku cijenu.
Međutim, ako tražite rasporede profesionalne razine sa svim detaljima, Adobe XD vas pokriva. Upravlja cijelim procesom dizajna, uključujući interaktivne prototipove, pa se čak integrira s drugim Adobe softverom ako želite stvoriti ili prilagoditi elemente u Photoshopu ili Illustratoru.
Također je prilično sofisticiran u svojim značajkama, s 3D efektima, animacijama i mogućnošću stvaranja biblioteke komponenti, mjesta za pohranu svih vaših elemenata poput gumba i ikona kako bi ih vaš tim mogao ponovno upotrijebiti u drugom projektu (ovo pomaže stalnim klijentima ako pogledajte iste kontrole na novom proizvodu). Tu su i posebne značajke kao što je Repeat Grid, koja štedi vrijeme kada morate uvijek iznova kopirati i lijepiti uzorak, i Padding, koja štiti veličine piksela prilikom uređivanja različite slojeva istih elemenata.
trošak:
- 9,99 USD mjesečno
- 99,99 USD godišnje (pretplatno)
Za: Web stranice za izradu izgleda
- Prikladno za cijeli proces dizajna, uključujući interaktivne prototipove
- sofisticirane značajke: 3D efekti, animacija i biblioteka komponenti
- Praktične značajke koje štede vrijeme: uvlačenje, uzorci koji se ponavljaju i jednostavno uređivanje
- Integrira se s drugim Adobe softverom
Cons:
- pretjerano ako samo želite jednostavan i brz izgled
Preporučeno za…
- ljudi koji su dovoljno ozbiljni u digitalnom dizajnu da žele vrhunski softver
- redoviti dizajn - ne za jednokratne ili pojedinačne projekte
2. Fluidno korisničko sučelje. Web stranice za izradu izgleda
Iako tehnički za izradu prototipa, Tekuće korisničko sučelje dovoljno je robustan za stvaranje zadivljujućih modela koji se kasnije mogu pretvoriti u interaktivne prototipove. Ovo je izvrstan izbor za iskusne dizajnere i dizajnerske timove koji rade na cijelom opsegu projekta.
Fleksibilno korisničko sučelje nije tako jednostavno za korištenje kao druge popularne web stranice s izgledom, što se možda neće svidjeti početnicima. Međutim, ima sve značajke profesionalne razine koje su vam potrebne za dizajn weba i aplikacija, uključujući okvire i biblioteku unaprijed izgrađenih komponenti i ikona korisničkog sučelja. Jedna od njegovih prednosti su njegovi alati za suradnju, koji korisnicima omogućuju pregled, komentiranje i uređivanje istih datoteka s bilo kojeg mjesta u svijetu.
trošak:
- Besplatni plan (1 projekt)
- 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]
Za: Web stranice za izradu izgleda
- napredne značajke prikladne za profesionalce
- nešto jeftiniji od sličnih mockup web stranica
- prvoklasna suradnja
- velika ugrađena biblioteka komponenti
- mobilne aplikacije i prebacivanje uređaja olakšavaju stvaranje izgleda za mobilne uređaje
Cons:
- krivulja ucenja
Preporučeno za…
- ljudi koji žele potpuni alat za dizajn, ali također vode računa o svom budžetu
3. InVision. Web stranice za izradu izgleda
Perpetuum izravna je konkurencija Adobe XD-u i još je jedan sveobuhvatni alat za makete i izradu prototipa, također sa skupom mjesečnom pretplatom. InVision dijeli mnoge sofisticirane značajke Adobe XD-a, uključujući precizne alate za animaciju za izradu prototipa, ali je malo manje jednostavan za korištenje kada je riječ o učinkovitosti i pojednostavljenju zadataka.
Također je vrijedno napomenuti da je InVision prvenstveno alat za izradu prototipova, pa su mnoge njegove značajke usmjerene na interaktivnost i efekte, a ne na statične slike. Međutim, ima sve što vam je potrebno za stvaranje sjajni rasporedi savršen za piksele, uključujući integraciju s Photoshopom i Sketchom, a s besplatnim dodatkom Inspect možete jednostavno transformirati bilo koji dizajn u programski kod. I povrh svega, tu je zauvijek besplatna verzija.
trošak:
- Besplatna verzija
- 7,95 USD mjesečno (naplaćuje se godišnje)
Za: Web stranice za izradu izgleda
- Prikladno za cijeli proces dizajna, uključujući interaktivne prototipove
- napredne značajke kao što su animacija i interaktivni efekti
- integrira se s Photoshopom i Sketchom
- besplatna verzija
Cons:
- upotrebljivost je malo složenija od Adobe XD-a
Preporučeno za…
- ljudi koji primarno trebaju alat za izradu prototipova, ali s mogućnostima maketa
4. Modifikator medija. Web stranice za izradu izgleda
Odmaknimo se od izgleda web stranica profesionalne razine... daleko iz hotela. Medijski modifikator nalazi se na drugom kraju spektra: vrlo ograničen značajkama i dubinom, ali iznimno praktičan. Možeš besplatno preuzimanje maketa izravno s web mjesta, ali za uklanjanje vodenog žiga i dobivanje visokokvalitetnih verzija morat ćete platiti.
Mediamodifier sličan je mrežnom uređivaču fotografija, ali s unaprijed učitanim predlošcima aplikacija i izgledom web stranica. Također imaju tisuće predložaka za više od samog digitalnog dizajna: majice, šalice za kavu, naslovnice knjiga itd. Sve što trebate učiniti je pronaći predložak koji vam se sviđa, dodati vlastitu sliku i... pa, to je sve što možete učiniti, zapravo. Ovo je jednostavna web stranica s izgledima kada vam je potrebno nešto brzo i jednostavno, ali ne i kada nekoga trebate impresionirati visokokvalitetnom grafikom.
trošak:
- Besplatni plan
- 9 USD mjesečno (naplaćuje se godišnje)
Za: Web stranice za izradu izgleda
- jednostavan za korištenje
- može stvoriti rasporede u sekundi
- mnogo predložaka na izbor
Cons:
- golih crta lica
- morate platiti za visokokvalitetnu rezoluciju
- morate platiti za uklanjanje vodenih žigova
Preporučeno za…
- kada samo trebate nešto jednostavno i brzo
- već ste izradili sliku, ali je trebate postaviti na pozadinu telefona/radne površine
- dobar izbor pozadina
5. MockFlow
Kada govorimo o mockup web stranicama koje su prikladne za cijeli proces dizajna, zapravo ne spominjemo mockupove. MockFlow jedan je od uistinu svestranih alata za dizajn koji će vas odvesti od okvira, preko maketa, pa sve do prototipova.
Uz mogućnosti wireframinga, MockFlow također nudi veću fleksibilnost s dodatnim dodacima u MockStoreu. Tamo možete pronaći "dodatke" kao što su dodatni paketi korisničkog sučelja, dodatni predlošci izgleda web stranice i posebne značajke kao što su korisničke osobe, sustavi dizajna ili prevoditelji. MockFlow je također poznat po svojoj jednostavnosti suradnje i dijeljenja, što ga čini odličnim rješenjem za timove. Web stranice za izradu izgleda
Trošak: web stranice za izradu izgleda
- Besplatni plan
- 14 USD mjesečno (naplaćuje se godišnje) [Premium]
- 30 USD mjesečno (naplaćuje se godišnje) [TeamPack s 3 korisnika]
Pros:
- izvrsne mogućnosti modeliranja žičanog okvira
- MockStore nudi dodatne značajke
- Širok izbor UI paketa i predložaka putem MockStorea
Cons:
- Premium plan košta više od drugog softvera za izgled, ali košta manje
Preporučeno za…
- ljudi koji trebaju dodatne alate kao što su sustavi dizajna ili scenariji
- velike timove koji trebaju napredne značajke suradnje
- jednostavni jednokratni projekti koji mogu imati koristi od besplatnog plana
6. Ptica rugalica. Web stranice za izradu izgleda
Američki drozd dobra je sredina između opsežnih značajki i pojednostavljene upotrebljivosti (iako je ocijenjen kao vrhunski alat). Najatraktivnija značajka je jednostavan WYSIWYG uređivač gdje jednostavno povučete i ispustite elemente na željeno mjesto. Ostala vrhunska web-mjesta s modelima imaju uređivače povuci i ispusti, ali korisničko sučelje Mockingbird-a toliko je jednostavno i jednostavno da je jasno namijenjeno početnicima i početnicima.
Međutim, cijena nije tako povoljna. S minimalnom cijenom od 11 USD mjesečno, ovo je jedna od najskupljih web stranica za izgled, unatoč tome što zapravo ne nudi ništa. S druge strane, to je ista cijena za bilo koji broj zaposlenika, tako da ako imate dovoljno veliki tim, možete opravdati trošak. Web stranice za izradu izgleda
trošak:
- 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 sučelje
- besplatna probna online verzija
Protiv: Stranice za izradu izgleda
- skupo
- Skup značajki nije robustan kao na drugim popularnim web stranicama s izgledom
Preporučeno za…
- početnici koji su zastrašeni složenijim sučeljima
- veliki timovi koji si ne mogu priuštiti pojedinačno članstvo na drugim mockup web stranicama
7. MockupsJar. Web stranice za izradu izgleda
MockupsJar je ista besplatna stranica za izgled kao i Mediamodifier: vi birate svoj predložak i na njega stavljate vlastitu sliku. Poput Mediamodifiera, nude izbor fotografija od prijenosnih računala do šalica i majica, ali u otličie ot Mediamodifier, možete besplatno preuzeti verziju visoke kvalitete. Web stranice za izradu izgleda
MockupsJar možda nema toliko predložaka maketa web stranica kao Mediamodifier, ali mogućnost učitavanja visokokvalitetne slike bez plaćanja to nadoknađuje. Međutim, možete učitati samo 20 slika visoke rezolucije; nakon toga ćete morati ili platiti ili ga preuzeti u niskoj rezoluciji. Besplatna verzija također ima oglase, ali općenito nije loša za besplatni mockup web stranice.
Trošak: web stranice za izradu izgleda
- Besplatni plan
- 5 € / mjesec (plaća se mjesečno)
Pros:
- lako samo
- besplatni plan nudi 20 slika visoke rezolucije
- bez vodenih žigova
Cons:
- golih crta lica
- potrebno je stvarati slike negdje drugdje
Preporučeno za…
- ljudi kojima se sviđa platforma Mediamodifier, ali ne žele platiti uklanjanje vodenih žigova
8.Moqups. Web stranice za izradu izgleda
Mokupi je još jedan svestrani digitalni dizajner za modele, prototipove i, naravno, modele. Njihov uređivač izvrsna je kombinacija naprednih značajki i WYSIWYG kontrola, pogodan i za početnike i za iskusne dizajnere. Međutim, 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 izradu izgleda
Korisnici hvale sposobnost Moqupsa za izradu dijagrama toka, što nije baš korisno za rasporede, ali je dobro za cijeli proces dizajna. Iako neka upotrebljivost može biti nezgodna, općenito je to održiva alternativa drugim web stranicama s generičkim izgledom, osobito ako ste jednako zainteresirani za okvire i prototipove.
trošak:
- 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 uređivača]
Za: Web stranice za izradu izgleda
- dobro izbalansiran alat za dizajniranje okvira, prototipova i maketa
- Dovoljno jednostavan za korištenje za početnike, dovoljno napredan za stručnjake
- Sjajne značajke planiranja kao što su dijagrami toka, karte web mjesta i ploče scenarija
Cons:
- na skupljoj strani
Preporučeno za…
- ljudi koji daju prednost modelima i prototipovima na istoj razini kao i modelima
9. Smartmockups. Web stranice za izradu izgleda
pametne makete je u istoj kategoriji kao Mediamodifier i MockupsJar, ali s boljom integracijom. Ovo je velika stvar ako ste snimili snimku zaslona visoke rezolucije za pregled u aplikaciji Marvel i samo je želite postaviti na oglednu pozadinu radne površine. Smartmockups također ima više značajki prilagodbe od ostalih besplatne web stranice s modelima, kao što je promjena boja, ali ova je značajka dostupna samo uz plaćeni plan. Web stranice za izradu izgleda
Kao i kod drugih web stranica s besplatnim maketama, ne očekujte previše osim toga da vaša slika bude postavljena na pozadinu predloška. Plaćena verzija ima pristup više od 6000 slikovnih predložaka za različite pozadine, uključujući majice, posjetnice i digitalne uređaje. Besplatni plan i dalje nudi oko 800 predložaka izgleda, ali morat ćete se pozabaviti vodenim žigovima.
trošak:
- Besplatna verzija
- 9 dolara mjesečno
Za: Web stranice za izradu izgleda
- integrira se s Marvel App, Dropbox, Figma, Unsplash i Canva
- plaćeni plan vam omogućuje da prilagodite sliku
- brzo i jednostavno
Cons:
- Besplatni plan ima vodene žigove
- potrebno je stvarati slike negdje drugdje
Preporučeno za…
- prvenstveno radite u aplikaciji Marvel, Canva ili Figma
Zašto ne postati profesionalac?
Kao što smo rekli gore, jedina svrha maketa je da izgledaju dobro. Ako puno ovisi o uspjehu vašeg modela—možda trebate pridobiti nezadovoljnog dionika ili predložiti ideju za više financiranja—onda definitivno želite da vaš model izgleda savršeno. U tom slučaju, zašto ga ne prepustiti u ruke profesionalca. Web stranice za izradu izgleda
Kada angažirate slobodnog dizajnera, svoj dizajn stavljate u ruke stručnjaka koji razumije detalje dizajna. Ne morate brinuti o cijenama softvera ili krivuljama učenja jer će se dizajner pobrinuti za to umjesto vas. A s našom zajednicom dizajnera iz cijelog svijeta, sigurno ćete pronaći dizajn u tom stiluonaj koji ti treba!
«АЗБУКА»
Ostavite komentar