Obsah
- 01. End-to-end UX nástroje
- 02. Vyhradené mockupové nástroje
- 03. Softvér na grafický dizajn
- 04. Kódované makety
Makety webových stránok je možné vytvoriť rôznymi spôsobmi. Je pravda, že neexistuje „najlepší“ prístup, ale v závislosti od určitých štýlov a preferencií určitých dizajnérov UI a UX návrhárov (a od procesu návrhu) budú niektoré fungovať lepšie ako iné.
V tomto článku sa pozrieme na výhody a nevýhody štyroch najobľúbenejších možností: end-to-end UX nástroje, makety nástrojov, nástroje grafického dizajnu, ako aj kódované vzory, ktoré začínajú stierať hranice medzi maketami webových stránok. a prototypy.
Ak konkrétne hľadáte nástroje na vytváranie rámcov, pozrite si tento príspevok o najlepších nástrojoch na vytváranie drôtov alebo širšiu zbierku, pozrite si náš podrobný prehľad najlepších nástrojov na návrh webu.
- Slovník pojmov: Makety vs drôtové modely vs prototypy
Nerobte chybu, keď si myslíte, že všetky makety webov sú rovnaké. Jednoduché rozhodnutia o platformách, vernosť a kódovanie prinesú výrazne odlišné výsledky. Skôr ako začnete s návrhovým procesom, vedzte, čo chcete a aké sú vaše ciele - ak chcete nástroj, ktorý podporuje všetky tri fázy, je najlepšie začať s jeho používaním, než aby ste prešli do polovice procesu. Rovnako tak, ak potrebujete hviezdnu, plne realistickú maketu, nezabudnite, že v určitom okamihu budete používať editor grafického dizajnu.
01. End-to-end UX nástroje
Na najvyššej úrovni sú end-to-end nástroje, ktorých cieľom je uspokojiť celý pracovný tok: makety, prototypy, dokumentácia, odovzdávanie vývojárom a návrhové systémy. Spoločnosť UXPin sa tejto potrebe venuje už od začiatku 10. rokov 20. storočia, ale niekoľko ďalších značiek, ako sú Adobe a InVision, sa teraz tiež snaží vytvoriť „jeden nástroj, ktorý by vládol všetkým“.
Ako sa teda tieto nástroje hromadia na vytvorenie makety? Môžu ich zvládnuť bez problémov - a potom nejaké. S UXPin môžete napríklad vytvárať makety s viacerými stavmi a interakciami. Napodobňuje dokonca niektoré funkcie Photoshopu a Skice zahrnutím nástroja Pero.
Na druhej strane, Studio od InVision umožňuje niektoré pekne šikovné úpravy animácií; zatiaľ čo Adobe XD vám umožňuje otvárať súbory Photoshopu a Skice vo vnútri vašich návrhov XD a aplikovať farby, symboly, lineárne prechody a štýly znakov.
- Získajte Adobe Creative Cloud už teraz
Najdôležitejšie je, že end-to-end nástroje teraz ponúkajú návrhové systémy na zabezpečenie konzistencie makiet naprieč projektmi. Dizajnové systémy poskytujú každému jediný zdroj pravdy o aktívach a princípoch návrhu naprieč nástrojmi. Ak plánujete vytvoriť veľa makiet, táto funkcia sa stane takmer povinnou.
Pri výbere komplexného nástroja na tvorbu makety vášho webu stojí za zváženie nasledujúce aspekty:
- Vernosť: Aký mocný je nástroj na vizuálny a interakčný dizajn?
- Dôslednosť: Aké funkcie zabezpečujú konzistentnosť dizajnu vo vašej práci?
- Presnosť: Odrážajú prvky, s ktorými pracujete, „zdroj pravdy“ vo vašej organizácii?
- Spolupráca: Môžete spolupracovať so zainteresovanými stranami alebo inými dizajnérmi?
- Odovzdanie vývojárom: Ako nástroj generuje špecifikácie a aktíva pre vývojárov?
02. Vyhradené mockupové nástroje
Menej robustné riešenia ako Principle, Framer, Moqups alebo Balsamiq vám môžu stále poskytnúť všetko, čo potrebujete na zostavenie svojej makety - prídete len o ďalšie funkcie pracovného toku a konzistencie dizajnu. Tieto nástroje sú navrhnuté tak, aby čo najviac uľahčili proces tvorby, takže sa môžete viac sústrediť na štylistické rozhodnutia a menej na to, ako s programom manipulovať.
Vyhradené makety nástrojov majú jasné výhody: Začiatočníci majú úžitok z ich ľahkého použitia, zatiaľ čo odborníci oceňujú návrhy špeciálne prispôsobené ich pokročilým potrebám. Na pokročilejšom konci sa nástroje ako Framer a Principle špecializujú na animácie a interakcie s maketami.
Na spodnom konci poskytujú Moqups a Balsamiq viac funkcií ako nedizajnové nástroje, ktoré sa niekedy používajú pre drôtové modely a makety (napríklad Keynote), ale sú obmedzené iba na návrhy s nízkou vernosťou. Môžu však byť celkom užitočné, ak je cieľom vytvoriť veľmi rýchlo drôtové modely s nízkou vernosťou.
Pokiaľ ide o mockupové nástroje, musíte sa rozhodnúť, či bude stačiť jednoduché riešenie wireframing, alebo či potrebujete pokročilejší dizajn obrazovky. Bez ohľadu na to, aký model náradia si vyberiete, uistite sa, že ste ochotní akceptovať stratu spoločného pracovného toku a menej funkcií konzistencie dizajnu, ktoré ponúkajú end-to-end nástroje.
03. Softvér na grafický dizajn
Niektorí dizajnéri prisahajú na softvér, ako sú Photoshop CC, Sketch alebo Illustrator CC, najmä tí, ktorí majú špeciálne skúsenosti alebo sú oboznámení s nástrojmi, ktoré umožňujú ovládanie až po pixely. Platformy grafického dizajnu fungujú najlepšie, ak sa zameriavate na najvyššiu úroveň realizmu a vizuálnej vernosti. A ako vysvetľujeme v našom sprievodcovi rýchlymi prototypmi pomocou aplikácie Photoshop CC, môže to byť jednoduchšie, ako si myslíte.
Práca v softvéri na grafický dizajn vám poskytuje prístup k takmer nekonečnému výberu vysoko definovaných farieb, takže ak pracujete v rámci obmedzení prísnej a prednastavenej farebnej schémy - napríklad podľa konkrétnych pravidiel pre značku, potom môžu byť tieto programy vaše najlepšie možnosť. Viac ako farebné možnosti, tieto programy ponúkajú oveľa viac vizuálnych nástrojov, ktoré vám umožňujú zvládnuť detailnosti detailov.
Nevýhodou použitia tohto typu softvéru je, že môže byť ťažké preložiť, keď je čas začať kódovať dizajn. To, čo fungovalo vo Photoshope, nemusí vždy fungovať v kóde (prvky ako písma, tiene, prechodové efekty atď.), Čo sa môže premietnuť do zbytočného času hľadaním riešení pre fázu prototypov.
U stránok náročných na štýl môže pomôcť vylúčenie konkrétnych vizuálnych detailov počas fázy makety. V takom prípade vám Photoshop alebo Sketch poskytnú najviac možností. Podobne, ak máte do činenia s náročným alebo ťažko uspokojiteľným klientom, predstavenie nádherného a pôsobivého modelu ich môže ľahšie získať.
Za zmienku stojí tiež to, že makety vytvorené vo Photoshope alebo Skici je možné pomocou UXPin pretiahnuť do fázy prototypov. To vám umožní ľahko animovať všetky vrstvy (bez sploštenia) pomocou niekoľkých kliknutí a zabezpečí sa, že nemusíte začínať od nuly, keď je čas na vytvorenie prototypu.
Ak vizuály nie sú vašou jedinou prioritou, môžete byť efektívnejší pomocou nástroja, ktorý vám umožní vykonávať wireframing, makety a prototypy na jednom mieste. Softvér pre grafický dizajn môže byť pre makety väčším problémom, ako stojí za to, pokiaľ nehľadáte optimálnu vizualizáciu - určite budete musieť so svojím vývojárom pravidelne komunikovať, pretože tieto nástroje nie sú určené na spoluprácu.
04. Kódované makety
Ak ste hlavne dizajnérom a programovanie vám nie je príjemné, potom to zjavne nie je možné. Ako sa uvádza v príručke The Mockups, kódované modely nie sú predvolenou voľbou.
Väčšinu programovania je možné odložiť na fázu prototypu (ak vytvárate prototyp HTML / JavaScript) alebo dokonca neskôr (ak používate prototypový nástroj). Ale aj napriek zložitosti a potenciálnym prekážkam existuje veľa slušných dizajnérov, ktorí obhajujú zavedenie kódu do fázy makety.
- 27 krokov k dokonalému rozloženiu webových stránok
Aj keď vylepšenia nástrojov a technológií znamenajú, že sa v dizajne rozloženia otvára čoraz viac možností, nie všetko je ľahké (alebo dokonca možné) znovu vytvoriť v kóde. Počnúc kódom budete hneď vedieť, čo môžete a čo nemôžete robiť. Ak vám vyhovuje kód, dá sa tiež tvrdiť, že začať s týmto je menej zbytočné - maketa aj tak skončí v HTML / CSS.
Ale ako sme už spomínali, makety s kódovaním nie sú populárnou stratégiou, a to z viacerých dôvodov, ako je náročnosť programovania. Ak začnete programovať príliš skoro, môže to obmedziť vašu kreativitu a pripravenosť experimentovať, pretože je ľahké sa starať o uskutočniteľnosť vašich nápadov v kóde, nie o to, ako vzrušujúco by mohli vyzerať.
Je len na vás, kedy zavediete kódovanie. Len sa uistite, že poznáte svoje ciele v oblasti dizajnu a vývojárov informujte o tom, ako uprednostňujete funkcie.
