Mockup webstránky, známe aj ako online grafické editory alebo dizajnové nástroje, umožňujú užívateľom vytvárať rôzne grafické návrhy, ilustrácie, bannery, logá, prezentácie a ďalšie priamo z ich webového prehliadača bez potreby inštalácie špecializovaného softvéru do svojho počítača. Tieto online nástroje zvyčajne ponúkajú množstvo funkcií a šablón, ktoré uľahčujú proces vytvárania dizajnu.
Na rozdiel od prototypov, o ktorých sa predpokladá, že skutočne fungujú, sú makety statické vizuálne prvky, ktoré majú ukázať dizajnové rozloženie, atmosféru, farbu a celkovú estetiku. Niektorí dizajnéri uprednostňujú vytvorenie každého tlačidla a ikony od začiatku, ale ak chcete skočiť dopredu alebo sa pohrať s inšpiráciou, rozloženia webových stránok a softvér sú vopred nahrané s týmito prvkami a môžu byť jednoduchšie na používanie ako softvér na grafický dizajn.
Stránky uvedené nižšie vám pomôžu vytvoriť makety obrazovky webových stránok, makety obrazovky aplikácií, makety produktov a ďalšie. Väčšina prichádza so šablónami rozloženia webových stránok alebo súpravami používateľského rozhrania, ktoré vám umožňujú navrhovať pomocou vopred vytvorených prvkov, ako sú tlačidlá. Skvele šetria čas, ak sa niekedy ocitnete v núdzi a potrebujete rýchlo odovzdať rozloženie. Pre každý analyzujeme cenu, výhody a nevýhody, ako aj komu sa odporúčajú.
1. Adobe XD. Webové stránky na vytváranie rozložení
Adobe XD je odpoveďou rodiny Adobe na softvér na digitálny dizajn. Má všetky detaily a nuansy, ktoré by ste očakávali od spoločnosti za sebou Photoshop a Illustrator, no ponúka aj rovnako vysokú cenu.
Ak však hľadáte rozloženia na profesionálnej úrovni so všetkými detailmi, Adobe XD vám pomôže. Zvláda celý proces návrhu vrátane interaktívnych prototypov a dokonca sa integruje s iným softvérom Adobe, ak chcete vytvárať alebo upravovať prvky vo Photoshope alebo Illustratore.
Je tiež dosť sofistikovaný vo svojich funkciách, s 3D efektmi, animáciami a možnosťou vytvoriť knižnicu komponentov, miesto na uloženie všetkých vašich prvkov, ako sú tlačidlá a ikony, aby ich váš tím mohol znova použiť v inom projekte (to pomáha opakovaným zákazníkom, ak na novom produkte vidia rovnaké ovládacie prvky). K dispozícii sú aj špeciálne funkcie, ako napríklad Repeat Grid, ktorá šetrí čas, keď potrebujete kopírovať a prilepiť vzor znova a znova, a Padding, ktorý chráni rôzne veľkosti pixelov pri úprave vrstvy rovnakých prvkov.
náklady:
- 9,99 dolárov mesačne
- 99,99 dolárov ročne (predplatené)
Výhody: Webové stránky na vytváranie rozložení
- Vhodné pre celý proces navrhovania vrátane interaktívnych prototypov
- sofistikované funkcie: 3D efekty, animácie a knižnica komponentov
- Pohodlné funkcie šetriace čas: odsadenie, opakujúce sa vzory a jednoduché úpravy
- Integruje sa s iným softvérom Adobe
Nevýhody:
- prehnané, ak chcete len jednoduché a rýchle rozloženie
Odporúča sa pre…
- ľudí, ktorí to s digitálnym dizajnom myslia natoľko vážne, že chcú špičkový softvér
- bežný dizajn - nie na jednorazové alebo individuálne projekty
2. Fluidné používateľské rozhranie. Webové stránky na vytváranie rozložení
Hoci technicky ide o prototypovanie, Tekuté používateľské rozhranie je dostatočne robustný na to, aby vytvoril úžasné makety, ktoré možno neskôr previesť na interaktívne prototypy. Je to vynikajúca voľba pre skúsených dizajnérov a dizajnérske tímy, ktoré pracujú na celom rozsahu projektu.
Flexibilné používateľské rozhranie nie je také užívateľsky prívetivé ako iné obľúbené webové stránky s rozložením, čo nemusí osloviť začiatočníkov. Má však všetky funkcie na profesionálnej úrovni, ktoré potrebujete na dizajn webu a aplikácií, vrátane drôtových modelov a knižnice vopred vytvorených komponentov používateľského rozhrania a ikon. Jednou z jeho výhod sú nástroje na spoluprácu, ktoré používateľom umožňujú prezerať, komentovať a upravovať rovnaké súbory odkiaľkoľvek na svete.
náklady:
- Bezplatný plán (1 projekt)
- 8,25 $/mesiac (účtované ročne) [Sólo]
- 19,08 $ mesačne (účtované ročne) [Pro]
- 41,58 $ mesačne (účtované ročne) [Tím]
Výhody: Webové stránky na vytváranie rozložení
- pokročilé funkcie vhodné pre profesionálov
- o niečo lacnejšie ako podobné makety webových stránok
- prvotriedna spolupráca
- veľká vstavaná knižnica komponentov
- mobilné aplikácie a prepínanie zariadení zjednodušiť vytváranie rozložení pre mobilné zariadenia
Nevýhody:
- Krivka učenia
Odporúča sa pre…
- ľudí, ktorí chcú plnohodnotný dizajnový nástroj, no zároveň dbajú na svoj rozpočet
3. InVision. Webové stránky na vytváranie rozložení
Invision je priamym konkurentom Adobe XD a je ďalším nástrojom na vytváranie modelov a prototypov typu všetko v jednom, ktorý má tiež drahé mesačné predplatné. InVision zdieľa mnoho sofistikovaných funkcií Adobe XD, vrátane presných animačných nástrojov na prototypovanie, ale je o niečo menej užívateľsky prívetivý, pokiaľ ide o efektivitu a zefektívnenie úloh.
Za zmienku tiež stojí, že InVision je primárne nástroj na prototypovanie, takže mnohé z jeho funkcií sú zamerané skôr na interaktivitu a efekty než na statické obrázky. Má však všetko, čo na vytvorenie potrebujete skvelé rozloženia pixel-perfect, vrátane integrácie s Photoshopom a Sketch a s bezplatným doplnkom Inspect, môžete jednoducho premeniť akýkoľvek dizajn na vývojársky kód. A k tomu všetkému je tu navždy bezplatná verzia.
náklady:
- Bezplatná verzia
- 7,95 $ mesačne (účtované ročne)
Výhody: Webové stránky na vytváranie rozložení
- Vhodné pre celý proces navrhovania vrátane interaktívnych prototypov
- pokročilé funkcie, ako sú animácie a interaktívne efekty
- integruje sa s Photoshopom a Sketch
- bezplatná verzia
Nevýhody:
- použiteľnosť je o niečo zložitejšia ako Adobe XD
Odporúča sa pre…
- ľudia, ktorí primárne potrebujú nástroj na prototypovanie, ale s možnosťou makety
4. Modifikátor médií. Webové stránky na vytváranie rozložení
Poďme preč od profesionálneho usporiadania webových stránok... ďaleko z hotela. Modifikátor médií je na druhom konci spektra: veľmi obmedzené funkcie a hĺbka, ale mimoriadne pohodlné. Môžeš makety na stiahnutie zadarmo priamo z webu, ale ak chcete odstrániť vodoznak a získať vysokokvalitné verzie, budete musieť zaplatiť.
Mediamodifier je podobný online editoru fotografií, ale s predinštalovanými šablónami aplikácií a rozložením webových stránok. Majú tiež tisíce šablón pre viac než len digitálne návrhy: tričká, hrnčeky na kávu, obaly kníh Všetko, čo musíte urobiť, je nájsť šablónu, ktorá sa vám páči, pridať svoj vlastný obrázok a ... no, to je všetko, čo môžete urobiť, naozaj. Toto je jednoduchá webová stránka s rozložením, keď potrebujete niečo rýchle a jednoduché, ale nie vtedy, keď potrebujete na niekoho zapôsobiť kvalitnou grafikou.
náklady:
- Voľný plán
- 9 $ mesačne (účtované ročne)
Výhody: Webové stránky na vytváranie rozložení
- jednoduché použitie
- dokáže vytvoriť rozloženie v priebehu niekoľkých sekúnd
- veľa šablón na výber
Nevýhody:
- holé črty
- za kvalitné rozlíšenie musíte zaplatiť
- musíte zaplatiť za odstránenie vodoznakov
Odporúča sa pre…
- keď potrebujete niečo jednoduché a rýchle
- už ste vytvorili obrázok, ale musíte ho umiestniť na pozadie telefónu/pracovnej plochy
- dobrý výber pozadia
5. MockFlow
Keď hovoríme o maketových webových stránkach, ktoré sú vhodné pre celý proces navrhovania, v skutočnosti nehovoríme o maketách. MockFlow je jedným zo skutočne všestranných návrhárskych nástrojov, ktoré vás prevedú od drôtových modelov, cez makety až po prototypy.
Okrem možností wireframingu ponúka MockFlow aj väčšiu flexibilitu s ďalšími doplnkami v MockStore. Nájdete tam „príslušenstvo“, ako sú ďalšie balíky používateľského rozhrania, ďalšie šablóny rozloženia webových stránok a špeciálne funkcie, ako sú napríklad používateľské osoby, dizajnové systémy alebo prekladatelia. MockFlow je tiež známy svojou jednoduchosťou spolupráce a zdieľania, vďaka čomu je skvelým riešením pre tímy. Webové stránky na vytváranie rozložení
Cena: Webové stránky na vytváranie rozložení
- Voľný plán
- 14 $/mesiac (fakturované ročne) [Premium]
- 30 USD/mesiac (účtované ročne) [TeamPack s 3 používateľmi]
Pros:
- vynikajúce možnosti drôtového modelovania
- MockStore poskytuje ďalšie funkcie
- Široký výber balíkov používateľského rozhrania a šablón cez MockStore
Nevýhody:
- Prémiový plán stojí viac ako iný softvér na rozloženie, ale stojí menej
Odporúča sa pre…
- ľudí, ktorí potrebujú ďalšie nástroje, ako sú dizajnové systémy alebo storyboardy
- veľké tímy, ktoré potrebujú pokročilé funkcie spolupráce
- jednoduché jednorazové projekty, ktoré môžu využívať bezplatný plán
6. Mockingbird. Webové stránky na vytváranie rozložení
Mockingbird je dobrým stredom medzi rozsiahlymi funkciami a zjednodušenou použiteľnosťou (hoci je hodnotený ako špičkový nástroj). Najatraktívnejšou funkciou je jednoduchý WYSIWYG editor, v ktorom jednoducho presúvate prvky na požadované miesto. Iné špičkové mockupové webové stránky majú editory drag-and-drop, ale používateľské rozhranie Mockingbird je také jednoduché a priamočiare, že je jasne zamerané na začiatočníkov a nováčikov.
Cena však nie je taká výhodná. S minimálnou cenou 11 dolárov mesačne je to jedna z najdrahších webových stránok s rozložením, napriek tomu, že v skutočnosti nič neponúka. Na druhej strane je to rovnaká cena pre ľubovoľný počet zamestnancov, takže ak máte dostatočne veľký tím, viete si náklady ospravedlniť. Webové stránky na vytváranie rozložení
náklady:
- 11 USD/mesiac (účtované ročne): 3 projekty
- 17 $ // mesačne (účtované ročne): 10 projektov
- 32 USD/mesiac (účtované ročne): 25 projektov
- 68 $ // mesačne (účtované ročne): neobmedzené projekty
Pros:
- mimoriadne pohodlné
- WYSIWYG rozhranie
- bezplatná skúšobná verzia online
Nevýhody: Stránky na vytváranie rozložení
- vrúcne
- Sada funkcií nie je taká robustná ako iné populárne webové stránky s rozložením
Odporúča sa pre…
- začiatočníkov, ktorí sú vystrašení zložitejšími rozhraniami
- veľké tímy, ktoré si nemôžu dovoliť individuálne členstvo s inými modelovými webmi
7. MockupsJar. Webové stránky na vytváranie rozložení
MaketyJar je rovnaká bezplatná stránka s rozložením ako Mediamodifier: vyberiete si šablónu a prekryjete ju vlastným obrázkom. Rovnako ako Mediamodifier ponúkajú výber fotografií z fotografií od notebookov po hrnčeky a tričká, ale v отличие от Mediamodifier, môžete si stiahnuť verziu vo vysokej kvalite zadarmo. Webové stránky na vytváranie rozložení
MockupsJar síce nemá toľko šablón pre makety webových stránok ako Mediamodifier, ale možnosť nahrať kvalitný obrázok bez platenia to vynahrádza. Môžete však nahrať iba 20 obrázkov s vysokým rozlíšením; potom budete musieť buď zaplatiť, alebo si ho stiahnuť v nízkom rozlíšení. Bezplatná verzia má tiež reklamy, ale celkovo to nie je zlé pre webovú stránku s bezplatným modelom.
Cena: Webové stránky na vytváranie rozložení
- Voľný plán
- 5 € / mesiac (platí sa mesačne)
Pros:
- ľahké len
- bezplatný plán ponúka 20 obrázkov s vysokým rozlíšením
- žiadne vodoznaky
Nevýhody:
- holé črty
- treba vytvárať obrázky inde
Odporúča sa pre…
- ľudia, ktorí majú radi platformu Mediamodifier, ale nechcú platiť za odstránenie vodoznakov
8.Moqupy. Webové stránky na vytváranie rozložení
Moqupy je ďalší všestranný digitálny dizajnér pre makety, prototypy a samozrejme makety. Ich editor je skvelou kombináciou pokročilých funkcií a WYSIWYG ovládania, vhodný pre začiatočníkov aj skúsených dizajnérov. Majú však iba dva cenové plány v závislosti od počtu používateľov, takže tímy väčšie ako tri budú musieť zaplatiť navyše. Webové stránky na vytváranie rozložení
Používatelia chvália schopnosť Moqups vytvárať vývojové diagramy, čo nie je práve užitočné pre rozloženie, ale je dobré pre celý proces návrhu. Aj keď určitá použiteľnosť môže byť nepríjemná, celkovo je to životaschopná alternatíva k iným webovým stránkam so všeobecným rozložením, najmä ak sa rovnako zaujímate o drôtené modely a prototypy.
náklady:
- 16 $ mesačne (účtované ročne) [Pro - 3 redaktori]
- 49 $/mesiac (účtované ročne) [Neobmedzené - neobmedzení redaktori]
Výhody: Webové stránky na vytváranie rozložení
- dobre vyvážený nástroj na navrhovanie drôtových modelov, prototypov a makiet
- Užívateľsky dostatočne prívetivý pre začiatočníkov, dostatočne pokročilý pre expertov
- Skvelé funkcie plánovania, ako sú vývojové diagramy, mapy stránok a storyboardy
Nevýhody:
- na drahšej strane
Odporúča sa pre…
- ľudia, ktorí uprednostňujú makety a prototypy na rovnakej úrovni ako makety
9. Smartmockups. Webové stránky na vytváranie rozložení
inteligentné makety je v rovnakej kategórii ako Mediamodifier a MockupsJar, ale s lepšou integráciou. To je veľký problém, ak ste si urobili snímku obrazovky s ukážkou vo vysokom rozlíšení v aplikácii Marvel a chcete ju umiestniť na vzorové pozadie pracovnej plochy. Smartmockups má tiež viac funkcií prispôsobenia ako ostatné bezplatné webové stránky s maketami, ako je napríklad zmena farieb, ale táto funkcia je dostupná len s plateným programom. Webové stránky na vytváranie rozložení
Rovnako ako pri iných bezplatných modelových webových stránkach nečakajte príliš veľa okrem toho, že váš obrázok bude prekrývať pozadie šablóny. Platená verzia má prístup k viac ako 6000 800 šablónam obrázkov pre rôzne pozadia, vrátane tričiek, vizitiek a digitálnych zariadení. Bezplatný plán stále ponúka približne XNUMX šablón rozloženia, ale budete sa musieť vysporiadať s vodoznakmi.
náklady:
- Bezplatná verzia
- 9 dolárov za mesiac
Výhody: Webové stránky na vytváranie rozložení
- integruje sa s Marvel App, Dropbox, Figma, Unsplash a Canva
- platený plán vám umožňuje prispôsobiť obrázok
- rýchle a jednoduché
Nevýhody:
- Bezplatný plán má vodoznaky
- treba vytvárať obrázky inde
Odporúča sa pre…
- pracujete primárne v Marvel App, Canva alebo Figma
Prečo sa nestať profesionálom?
Ako sme už povedali vyššie, jediným účelom makiet je vyzerať dobre. Ak na úspechu vašej makety záleží veľa – možno potrebujete vyhrať nad nespokojným zainteresovaným subjektom alebo navrhnúť nápad na viac financií – potom určite chcete, aby vaša maketa vyzerala perfektne. V tom prípade to nezverte do rúk profesionála. Webové stránky na vytváranie rozložení
Keď si najmete dizajnéra na voľnej nohe, zveríte svoj dizajn do rúk odborníka, ktorý rozumie jemnostiam a nevýhodám dizajnu. Nemusíte sa starať o ceny softvéru alebo krivky učenia, pretože dizajnér sa o to postará za vás. A s našou komunitou dizajnérov z celého sveta to určite nájdete dizajn s týmto štýlomten, ktorý potrebujete!
«АЗБУКА»
Оставить комментарий