Technologickí zakladatelia používajú týchto 5 zdrojov na stavbu svojho prvého prototypu

Volám sa Marina Chernyshova a som produktová dizajnérka a mentorka. V mojom predošlom článku „ Nedostatok rozpočtu? Použite tieto metodológie dizajnu na zostavenie svojho prvého MVP bez dizajnéra na plný úväzok “, opísal som, prečo podľa mňa nie vždy začínajúce startupy potrebujú dizajnéra na plný úväzok a ako pristupovať k návrhu prvého prototypu z teoretického hľadiska. V tomto článku by som vás chcel pozvať pozrieť sa na tú praktickejšiu stránku. Zdieľam užitočné zdroje, ktoré môžu zakladatelia a podnikatelia v oblasti nových technológií použiť na vytvorenie svojho prvého prototypu.

Ak máte záujem a čas si svoj produkt naplno navrhnúť sami, potom vám odporúčam naučiť sa Figma. Figma je cloudový dizajnový softvér, ktorý sa primárne používa na kreslenie, navrhovanie a prototypovanie nápadov pred krokom vývoja projektu. Pomocou tohto nástroja môžu dizajnéri spolupracovať na vytváraní rozložení, pridávať obrázky, experimentovať s farbami a písmami a oveľa viac, a to všetko prostredníctvom webového prehliadača. Figma je výkonný nástroj, no zároveň sa veľmi jednoducho používa a veľmi pomáha pri komunikácii medzi všetkými členmi tímu.

Okrem Figmy je celkom vhodné používať FigJam a Figma Slides. FigJam je tabuľový nástroj špeciálne navrhnutý pre tímovú spoluprácu. Umožňuje tímom spolupracovať v reálnom čase, vizualizovať nápady a spoločne brainstormovať. Figma Slides je prezentačný nástroj prispôsobený pre dizajnérov a ich tímy. FigJam a Figma Slides sú dobré pre ľudí, ktorí už Figmu používajú, aby mali všetky vaše návrhy, tabule a prezentácie v jednom ekosystéme.

Drôtené modely

Drôtové modely sú hrubé schematické vizuálne znázornenia digitálneho produktu, ako je webová stránka, aplikácia alebo softvérové rozhranie. V mojom predchádzajúcom článku som vysvetlil, čo je tok používateľov – je to vizuálny diagram, ktorý mapuje cestu, ktorú používateľ prechádza produktom alebo webovou stránkou, aby splnil konkrétnu úlohu alebo cieľ*.* Na základe toku používateľov môžete vytvoriť prvý jednoduchý verzia drôtových modelov.

Drátové modely sú potrebné na pochopenie štruktúry produktu predtým, ako vy alebo váš tím začnete navrhovať produkt. Pomáhajú tímom zosúladiť sa s požiadavkami a udržiavať konverzácie o dizajne UX zamerané a konštruktívne bez toho, aby ich rozptyľovali nuansy dizajnu, ako sú farby, písma a ikony.

Drôtené modely môžu byť realizované celkom inak, môžu byť vysoko detailné a nízko detailné. Nižšie nájdete niekoľko základných príkladov:

• Ľavý obrázok (používateľské rozhranie podobné drôtovému modelu s blokmi obsahu)
• Pravý obrázok (High-fidelity UI s grafmi a podrobnými komponentmi)

Odporúčam začať tým najjednoduchším možným: usporiadajte hlavné obrazovky s približnými hlavičkami a tlačidlami a netrápte sa príliš textami.

Ak pracujete vo Figme, rámy sa dajú okamžite vytvoriť v realistickej veľkosti prostredníctvom šablón.

Ak chcete vytvoriť podrobnejšie drôtové modely s realistickejšími prvkami rozhrania, môžete použiť hotové prvky Figma na vytváranie drôtových modelov, aby ste ušetrili veľa času (napr. túto knižnicu ).

V tejto fáze už môžete vytvoriť prototyp, ktorý nebude venovať pozornosť maličkostiam, ako sú farby alebo písma, a ukázať ho jednému z vašich priateľov. Ak ide o mobilnú aplikáciu, môžete odkaz otvoriť z telefónu, aby vyzeral realistickejšie. Je dôležité skontrolovať, či existujú všetky potrebné prechody medzi všetkými obrazovkami a používateľ sa môže vrátiť späť alebo akciu zrušiť.

Hotové knižnice komponentov

Nie je potrebné navrhovať všetko od začiatku. Je veľmi užitočné preskúmať hotové prostriedky v komunite Figma, ktoré môžete použiť pri navrhovaní svojho produktu.

Vo Figme je veľa dostupných knižníc, ako napríklad Material UI. Tieto knižnice obsahujú množstvo užitočných prvkov, od sady ikon až po už zostavené stránky.

Prvky zvyčajne už obsahujú všetky stavy (umiestnenie kurzora myši a vybrané stavy, varovania, popisy atď.). Celé abstrakcie rozhrania môžu byť zostavené z malých komponentov, napríklad modálny dialóg s tlačidlami a tabuľkami vo vnútri. Okrem samotných prvkov môžu existovať aj pokyny, ako ich správne používať s okrajmi, medzerami atď. Tieto knižnice vyvinuli komponenty a dokonca celé rozloženia, ktoré môžu vývojári použiť.

Ak je to potrebné, môžete tam v budúcnosti pridať svoje vlastné prvky. Ak napríklad potrebujete nejaké grafy, môžete ich prevziať z inej knižnice. Ak potrebujete neštandardný prvok, môže byť navrhnutý od začiatku a pridaný do knižnice so všetkými stavmi.

Hotové grafické podklady

Každý produkt môže vyzerať oveľa dospelejšie a premyslenejšie vďaka vyváženej a dobre navrhnutej grafike: ilustrácie, ikony, animácie atď.

Nie je potrebné strácať čas navyše, tu môžete použiť aj hotové sady. Existuje veľa takýchto súprav v rôznych štýloch a farbách. Možno ich nájsť aj v komunita Figma alebo Spline komunita ak máte radi 3D grafiku. Veľké súpravy sú často platené za komerčné využitie, ale sú celkom cenovo dostupné.

Tieto aktíva možno použiť nielen v rámci vášho produktu, ale aj pre vaše marketingové materiály, obrázky na sociálnych sieťach a prezentácie. Môžete tam nájsť rôzne prezentačné šablóny a meniť ich v závislosti od vášho štýlu.

Referencie a inšpirácia

Existuje niekoľko platforiem zbierajúcich používateľské toky a snímky obrazovky rôznych produktov, ako napr pageflows.com alebo mobbin.com . Môžete ich preskúmať pre analýzu konkurencie alebo len inšpiráciu. Sú skutočne užitočné, keď pracujete na konkrétnej funkcii a viete, že ide o rozšírený vzor UX, ako je kontrola alebo ukladanie položky do obľúbených. Môžete ich prehľadávať podľa kategórií alebo vyhľadávať určitú funkciu podľa kľúčových slov.

Pri práci na hladkej používateľskej skúsenosti je vždy lepšie spoľahnúť sa na existujúce riešenia, pretože sú jasné a používateľom známe. Aj keď pracujete na inovatívnych funkciách, vždy môžete použiť vzory s podobným významom z inej oblasti.

Záver

V súčasnosti je digitálny trh dosť konkurenčný a používatelia majú skúsenosti s dobrým UX a UI. Je lepšie to nezanedbávať ani v počiatočnej fáze vývoja produktu ako zbytočnú stratu času na „dekorácie“, ale snažiť sa to využiť ako konkurenčnú výhodu.

Podľa môjho názoru existuje rovnováha medzi úplným nedostatkom dizajnu a množstvom času stráveného nad dokonalým dizajnom každej obrazovky. Hladké UX je možné dosiahnuť vďaka zjednodušeniu a vyhýbaniu sa zbytočným krokom a akciám a prijateľné používateľské rozhranie môže byť veľmi jednoduché, ale atraktívne.

Hlavnou vecou je neváhať s použitím hotových riešení a nepreskakovať kroky pred návrhom, ako je vytvorenie používateľského toku. V tomto prípade sa výrazne zníži riziko, že urobíte chybu alebo stratíte čas, čo ušetrí vaše zdroje a neovplyvní motiváciu.