Dôležitosť prototypov vašich návrhov

Ako dizajnér je nevyhnutné, aby ste sa predtým, ako sa jednoducho ponoríte do projektu a pustili sa do tvorby, museli pustiť do začiatku procesu a vyskúšať svoje nápady, aby ste sa uistili, že sú najefektívnejším spôsobom, ako dosiahnuť to, na čom pracujete. Prototypovanie ponúka spôsob, ako otestovať, čo vyzerá skvele a hodí sa na daný účel, či už ide o webovú stránku alebo softvér.



Prototyp je definovaný ako počiatočná alebo predbežná verzia, z ktorej sú vyvinuté ďalšie formy. To vám poskytuje prehľad o funkčnosti vášho dizajnu a akýchkoľvek zmenách potrebných na to, aby bola vaša práca potešením z používania.



Účelom tohto článku je poskytnúť vám prehľad rôznych dostupných typov prototypov, navrhnúť, kedy by sa mali využiť, a tiež niekoľko príkladov softvéru alebo služieb, ktoré vám môžu pomôcť pri prototypovaní.

V tomto článku sa zameriame na vytváranie prototypov pre web. Zručnosti a nápady však možno ľahko preniesť na projekty vývoja softvéru alebo dokonca grafický dizajn práca.



Leonardo da Vinci nakreslil pomocou pera a papiera vzory

Leonardo da Vinci nakreslil pomocou pera a papiera vzory

Rovnako ako väčšina konceptov vo svete technológií, aj prototypy je možné rozdeliť do rôznych skupín. Trik spočíva v použití správneho typu prototypov pre správny typ práce a v správny čas. Celú dizertačnú prácu by ste mohli napísať jednoducho o kategorizácii prototypov, ale pre naše účely v tomto článku sa zameriame na päť hlavných prístupov: koncepčný, realizovateľný, horizontálny, vertikálny a storyboarding. Aj keď ich použitie závisí od toho, aký druh práce robíte, sú založené na poradí, čo by sa malo urobiť ako prvé. Pamätajte tiež na to, že jedno bez druhého nemôže existovať.

obal na macbook pro 15 a kryt klávesnice
  • Koncepčné : Tento typ prototypov vám umožňuje analyzovať rôzne typy prístupov k vašim návrhom. Ak ste napríklad mali web založený výlučne na údajoch, aké prístupy by ste mohli prototypovať, aby ste určili, čo je najefektívnejšie?
  • Uskutočniteľnosť : Aj keď to nemusí nevyhnutne predstavovať rozšírenie koncepčných prototypov, uskutočniteľnosť môže predtým profitovať z koncepčných prototypov. Realizovateľnosť prototypov určuje, aké praktické sú rôzne riešenia. To by mohlo zahŕňať skúmanie finančných dôsledkov prístupu, uskutočniteľnosti dokončenia z hľadiska časového harmonogramu alebo dokonca softvéru alebo súboru zručností potrebných na úplné dokončenie projektu.
  • Horizontálne : Aj keď je abstraktný v názve, horizontálny prototyp objasní kľúčové komponenty projektu, bude obsahovať rozsah funkcií a to, čo sa od vášho projektu vyžaduje. Ak napríklad navrhujete webovú stránku, ktorá je založená hlavne na prezentácii a navigácii fotografií, musíte zvážiť najlepší spôsob, ako si ich používateľ môže prezerať, prechádzať nimi, zdieľať ich atď. Tento typ prototypov je dôležitý, pretože reálne by ste mohli skončiť s implementáciou ďalších a ďalších funkcií nad rámec toho, čo by sa považovalo za praktické. Tu by ste objasnili, čo je potrebné a čo nie je potrebné.
  • Vertikálne : Vertikálne prototypy sa zameriavajú na testovanie kľúčových komponentov. Robí sa to včas, aby sa zabezpečilo, že všetko, čo je pre projekt potenciálne ambiciózne a ústredné, je praktické. Je mylná predstava, že návrhári by mali začať jednoducho a pomaly robiť svoj projekt ambicióznejším. Týmto potenciálne strácajú čas prácou, len aby sa zastavili, keď pristupujú k niečomu príliš ambicióznemu a nedosiahnuteľnému, ešte horšie však je, že je to ústredné pre fungovanie dizajnu.
  • Storyboarding : Možno by sa východiskovým bodom každého skutočného grafického návrhu malo rozhodnúť, ako by mal byť projekt prezentovaný a v akom poradí by mali byť informácie poskytované používateľovi. Tento typ prototypov vyžaduje logiku a pri navrhovaní pre web by ho nemali prehliadnuť. Konkrétne by ste tu rozložili navigáciu na webe alebo webovej aplikácii, za čo budete v dlhodobom horizonte vďační, najmä ak máte veľa informácií a stránok, s ktorými môžete pracovať, keď sa budete blížiť ku koncu. váš projekt.

Dobre, takže sme stanovili základnú cestu, ktorou sa treba pri prototypovaní dizajnu vydať, ale aké funkcie by ste mali hľadať, keď prichádzate k prezeraniu nekonečných možností prototypových nástrojov? Je prirodzenou reakciou mnohých technologicky zameraných ľudí hľadať softvér, ktorý obsahuje všetko, takže strach z toho, že nebudete mať určitú funkciu, je nadbytočný. To nie je ideálny spôsob hľadania softvérového balíka na vytváranie prototypov, najmä ak ste v hre relatívne nový.



jsFiddle je všestrannejšia webová aplikácia, ktorá vám umožňuje doladiť rôzne prvky, vďaka čomu je testovanie omnoho analytickejšie

jsFiddle je všestrannejšia webová aplikácia, ktorá vám umožňuje doladiť rôzne prvky, vďaka čomu je testovanie omnoho analytickejšie

Ak hľadáte, ako bude vyzerať váš návrh, skôr ako sa pustíte do mrzutosti skutočného vývoja, mali by ste sa poobzerať po nástroji, ktorý poskytuje editor WYSIWYG (What You See Is What You Get). Aj keď to znie archaicky, môže vám to ušetriť veľa drahocenného času. Mali by ste sa poobzerať po aplikáciách, ktoré vám umožnia priamo manipulovať s rôznymi aspektmi vášho rozhrania, ako aj poskytnúť vám prvky a objekty, ktoré by ste potrebovali na dokončenie projektu. Ďalej uvádzame niekoľko bezplatných možností, ktoré vám umožňujú graficky vytvárať svoje návrhy a aplikácie:

  • InVision , webový a mobilný model a nástroj na vytváranie prototypov používateľského rozhrania
  • UXPin , séria nástrojov pre návrh UX, ktorú vytvorili dizajnéri UX
  • Zmes , nástroj frontend development
  • Slipy , nástroj na vytváranie prototypov aplikácií
  • Ceruzka , nástroj na tvorbu prototypov grafického používateľského rozhrania otvoreného zdroja

Je zrejmé, že existuje veľa možností. Toto je niekoľko možností, ktoré sú viac funkcií a ktoré by ste určite mali preskúmať.

Prototypový kód

Aj keď krajina, kde môžete robiť všetko graficky, by bola blažená, realita je taká, že aby ste skutočne vytvorili niečo svoje, pravdepodobne budete musieť manipulovať s jeho prvkami pomocou kódu, či už pridávaním animácie, určitým štýlom alebo rozprávaním čo robiť, keď na to používateľ klikne. Ale online sú k dispozícii niektoré nástroje, ktoré vám umožňujú napísať kód a potom skontrolovať výsledok v takmer reálnom čase.

CSSDesk vám umožní okamžite vidieť štýly pridané k vášmu dokumentu, šetrič v reálnom čase, keď ste

CSSDesk vám umožní okamžite vidieť štýly pridané k vášmu dokumentu, šetrič v reálnom čase, keď testujete nový nápad

Obľúbeným nástrojom na online testovanie JavaScriptu, CSS, HTML alebo dokonca CoffeeScript je jsFiddle v ktorom by ste vytvorili nové husle (alebo projekt) a potom ste schopní priamo zobraziť výsledky na plátne. Podobne CSSHat , ktorý premení vrstvy Photoshopu na CSS3, je vynikajúci na prácu s HTML. CSS Desk poskytuje ukážky vášho kódu na plátne v reálnom čase.

Práca s týmito druhmi nástrojov vám umožňuje v reálnom čase vidieť, aké by boli najefektívnejšie prostriedky na dosiahnutie niečoho. Užitočnejšie však je, že mnohé z nich vám umožňujú skutočne zmeniť prostredie, v ktorom je váš kód spustený. Napríklad pomocou jsFiddle zmeníte verziu HTML a typ JavaScriptu, s ktorým pracujete. To je neoceniteľné pri práci s prototypmi pre niečo podobné ako webové stránky, pretože je pravdepodobné, že bude existovať niekoľko desiatok rôznych prostredí, v ktorých bude váš návrh fungovať. To opäť slúži na zdôraznenie dôležitosti prototypov pre všetky projekty.

Ako vedľajšia poznámka stojí za zmienku, že myšlienka využívania týchto služieb na písanie predbežného kódu neplatí iba pre prototypy. Je užitočné rýchlo otestovať nápad alebo prístup k problému pomocou vyššie uvedených webových stránok. Týmto spôsobom môžete ušetriť čas počas vývoja, pretože môžete v podstate testovať kód v reálnom čase!

Storyboardy a návrh algoritmov

Každý vývojár alebo dizajnér vie, že algoritmus je jadrom projektu. Oxfordský slovník angličtiny definuje algoritmus ako: súbor pravidiel pre riešenie problému v konečnom počte krokov, ako pre hľadanie najväčšieho spoločného deliteľa. Zjednodušene, je to plán, čo čo robí a v akom poradí. Ako by ste sa napríklad dostali z jednej stránky na druhú, povedzme zo stránky zobrazujúcej fotografiu, na stránku, ktorá poskytuje možnosť kúpiť si fotografiu? Algoritmus vám umožní naplánovať rôzne trasy, ktoré môže používateľ v rámci vášho projektu použiť na naplánovanie navigácie.

macbook air vs macbook pro pre programovanie

OmniGraffle

OmniGraffle je nabitý vstavanými funkciami, ktoré vám umožňujú skutočne ľahko vytvárať grafy, storyboardy a rozhrania rozloženia

K tomu by vývojový diagram určite padol vhod. To vám umožní logickým spôsobom vás sprevádzať rôznymi fázami aplikácie. To znamená, že je jednoduchšie začať niečo navrhovať, najmä keď viete, kam váš projekt smeruje a ktoré prvky musia komunikovať a na čo odkazovať. Existuje výrazný nedostatok dôstojných online nástrojov, ktoré vám to umožnia. Existuje však množstvo nástrojov, ktoré poskytujú vynikajúce funkcie dostupné pre pracovnú plochu.

Vyskúšajte niektorú z týchto možností:

  • OmniGraffle , aplikácia na vytváranie diagramov pre Mac OS X a iPad
  • Microsoft Visio , profesionálny nástroj na vytváranie diagramov
  • yEd , desktopový editor grafov pre vytváranie vysoko kvalitných diagramov
  • Tvorivo , webový diagram a nástroj na spoluprácu
  • Lucidchart , webový nástroj pre diagramy, mapy, drôtové modely a myšlienkové mapy

Efektívne testovanie vašich prototypov

Testovanie prototypu je v prvom rade rovnako dôležité ako prototypovanie dizajnu. Pre začiatočníkov vám umožňuje vypnúť prípadné chyby a dať vám pocit, ako bude vaša aplikácia fungovať, keď ju navrhnete. Aj keď to nebude ako posledná verzia svieža a plynulá, poskytne vám dobrý prehľad o tom, čo sa darí a čo treba vyradiť alebo premyslieť. Táto malá časť sa nebude zaoberať myšlienkou podrobného testovania prototypu, pretože to je sám o sebe úplne iný článok. Namiesto toho krátko preskúmame niektoré spôsoby testovania, ktoré navrhnú niektoré spôsoby testovania vášho projektu, od raného prototypu po finálnu verziu.

Simulátory sú užitočným nástrojom nielen na to, aby ste videli, aký výkon má niečo na mobilnom zariadení, ale tiež na to, aby ste si pomohli predstaviť, ako bude vyzerať váš návrh.

Simulátory sú užitočným nástrojom nielen na to, aby ste videli, aký výkon má niečo na mobilnom zariadení, ale tiež na to, aby ste si pomohli predstaviť, ako bude vyzerať váš návrh.

Na vyskúšanie prototypu môžete použiť rôzne metódy. Niektoré metódy môžu byť pre prácu, ktorú robíte, praktické a iné nemusia platiť. Aj keď na otestovanie konečného návrhu môžete použiť emuláciu, nemusíte túto metódu jednoducho obmedziť na testovanie prototypov a v skutočnosti sa od vás vyžaduje, aby ste pomocou tohto otestovali svoju záverečnú prácu. Existuje nespočetné množstvo nástrojov, ktoré vám umožňujú emulovať vaše webové stránky, väčšina z nich je k dispozícii zadarmo online, ale nie sú vhodné na testovanie niečoho, čo v podstate ešte nebolo vyrobené.

Ak ste už využili predtým navrhnuté grafické nástroje, je pravdepodobné, že je v nich zahrnutý určitý stupeň zabudovaného testovania. Avšak aj niečo také, ako je ukážka na skutočnom zariadení, môže prejsť dlhú cestu. Nástroje ako CSSDesk a jsFiddle vám umožňujú vidieť v reálnom čase kód, ktorý píšete.

Ak chcete jednoducho poslať ukážku svojej práce na zariadenie, Zobraziť mierku je nepostrádateľným nástrojom. Umožňuje vám posielať obrázky, náhľady a návrhy Photoshopu priamo do vášho mobilného zariadenia. To je obzvlášť užitočné, ak navrhujete web a poskytuje vám pekné a ľahké riešenie. Navyše je zadarmo a je k dispozícii pre iOS a Android.

Podobne je k dispozícii celý rad rôznych emulátorov. Napríklad Android simulátor, ktorý je možné stiahnuť pomocou Zatmenie IDE alebo simulátor iOS, ktorý je súčasťou balenia Xcode . Oba umožňujú simulovať návrhy.

Nájdite si svoju vlastnú cestu

Neexistuje žiadny stanovený spôsob, ako by ste mali otestovať svoje prototypy. Dúfame však, že po prečítaní tohto článku sa lepšie oboznámite s rôznymi typmi testovania, ktoré sú k dispozícii, a kedy by ste ich mali využiť. Najdôležitejšie je, že sme sa dotkli myšlienky testovania prototypov.

Cieľom nástrojov, ktoré sú navrhnuté v tomto článku, je poskytnúť vám celý rad jednoduchých, ale vysoko efektívnych prostriedkov na prototypovanie vašich návrhov. Aj keď väčšina nástrojov, ktoré sú uvedené v tomto článku, sú zamerané na navrhovanie webových stránok, mnohé z nich majú schopnosť byť použité na prototypovanie aplikačných rozhraní a simulátory Android a iOS uľahčujú ukážku vašich návrhov.

ako zostrojiť zlatý obdĺžnik

Záver

Užitočnosť prototypov nebude zrejmá, kým to skutočne neurobíte. Ak jednoducho trávite čas plánovaním toho, kde bude mať váš dizajn formu, ako sa bude používateľ pohybovať a aké informácie a funkcie je potrebné zahrnúť, určite ušetríte veľa času nielen v oblasti dizajnu, ale aj vývoja. . Prototyp v zásade umožňuje logický prístup k projektu; niečo, čo by sa malo brať veľmi vážne, najmä preto, že logika je niečo, čo môže spôsobiť alebo narušiť vašu prácu.

Slová : Daniel Bramhall

Tento článok sa pôvodne objavil v sieťový časopis číslo 252.