Makety webových stránok: 4 populárne prístupy k prieskumu

Makety webových stránok

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í dizajnérov UI a UX (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 drôtov, pozrite si tento príspevok na webe najlepšie drôtové nástroje alebo širšiu zbierku nájdete v našom megahromade súborov najlepšie nástroje na návrh webu .



Generovať banner JS

Kliknutím na obrázok získate ďalšie informácie a vyzdvihnete si letenky(Obrázok: © Future / Toa Heftiba, Unsplash)

Nerobte chybu, keď si myslíte, že všetky makety webových stránok 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. UXPin sa tejto potrebe venuje od začiatku 10. rokov 20. storočia, ale niekoľko ďalších značiek, napríklad Adobe a InVision, sa teraz tiež snaží vytvoriť „jeden nástroj, ktorý by všetkým vládol“.

UXPin

UXPin sa môže pochváliť robustnými prototypmi, maketami, dokumentáciou a odovzdaním vývojármi

Ako sa teda tieto nástroje hromadia na vytvorenie makety? Môžu ich riešiť bez problémov - a potom aj niektoré. 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, Štúdio od spoločnosti InVision , umožňuje niekoľko pekne šikovných úprav animácií; zatiaľ čo Adobe XD vám umožní otvoriť súbory Photoshopu a Skice vo vnútri vašich návrhov XD a použiť farby, symboly, lineárne prechody a štýly znakov.

Studio InVision

Cieľom Studio by InVision je vytvoriť komplexný pracovný tok

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 end-to-end 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 návrhá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 napr Princíp , Framer , Moqups alebo Balsamiq stále vám môže poskytnúť všetko, čo potrebujete na vytvorenie 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.

Framer

Nástroje ako Framer sa špecializujú na interakcie

Na spodnom konci poskytujú Moqups a Balsamiq viac funkcií ako nedizajnové nástroje, ktoré sa niekedy používajú pre drôtové modely a makety (ako napr. Keynote ), ale sú obmedzené iba na málo verné vzory. 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 Photoshop CC , Skica alebo Illustrator CC , najmä tí, ktorí sú obzvlášť zruční alebo oboznámení s nástrojmi, ktoré umožňujú ovládanie až po pixel. 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 po rýchle prototypy pomocou Photoshopu CC , môže to byť jednoduchšie, ako si myslíte.

Photoshop CC

kresby ceruzkou, ktoré vyzerajú ako fotografie
Photoshop poskytuje jemnozrnnú kontrolu, ale pre jednoduché modely môže byť nadmerný

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šim najlepším. 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 však to, ž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 čo do činenia s náročným alebo ťažko uspokojiteľným klientom, ich obdarovanie nádhernou a pôsobivou maketou by si ich mohlo ľahšie získať.

makety je možné pretiahnuť do UXPin

Makety vytvorené vo Photoshope alebo Skici je možné pretiahnuť do UXPin

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, možno budete 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ť pravidelne komunikovať so svojím vývojárom, pretože tieto nástroje nie sú určené na spoluprácu.

04. Kódované makety

Ak ste hlavne dizajnér a nie ste spokojní s programovaním, potom to zjavne nie je možné. Ako sa uvádza v Sprievodca maketami , kódované modely nie sú predvolenou voľbou.

Väčšinu programovania je možné odložiť do fázy prototypovania (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.

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 márnotratné - 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.

Čítaj viac: