Průvodce prototypováním pro začátečníky

Prototypování, jako pojetí, existovalo už před Internetem. Lidé, kteří vyvíjeli nějaký nový fyzický produkt, obvykle nejprve tu věc sestavili a přesvědčovali se, zda funguje tak, jak si to představovali. První verzi si pak nechali patentovat a ukázali ji potenciálním investorům. Pokud měli vynálezci přístup k jistým výrobním prostředkům (například pracovali v nějaké továrně), pokračovali ve vývoji dál, odstraňovali chyby a nedostatky, dokud se nedostali až k modelu, který se mohl rovnou začít vyrábět.

Pamatujete si ještě na staré demo CD? Myslím ty, na nichž byly programy s omezenou funkcionalitou, nebo hry jen s jednou nebo dvěma herními úrovněmi? Prototypy se hodně podobají těmto demům, jen jsou ještě jednodušší.

Prototyp webu nebo aplikace sestavujete proto, abyste se přesvědčili, že bude fungovat tak, jak jste zamýšleli.

Jejich účelem až tak není přesvědčit perspektivní zákazníky, aby produkt zakoupili, spíše má napomoci udělat ho lepší. Prototyp webu nebo aplikace sestavujete proto, abyste se přesvědčili, že bude fungovat tak, jak jste zamýšleli. Můžete s ním také klientům nebo potenciálním investorům ukázat, jak předpokládáte, že bude fungovat.

V poslední době vidíme spoustu aplikací zaměřených na sestavování prototypů pro web, a také pro mobilní aplikace. Nu a teď byl vydán Adobe Experience Designer kombinující funkcionalitu specifik webu a mobilu, tedy “design aplikace” s prototypováním aplikace. Vzhledem k reputaci Adobe a jejich podílu na trhu v profesionálním sektoru, se zdá rozumné předpokládat, že mnozí lidé, kteří si dříve s prototypováním nelámali hlavu, se jím nyní začnou seriózně zabývat.

Podobně jako většina ostatních základních průvodců, i tento je pro začátečníky. Je určen lidem, kteří právě začínají pravidelně sestavovat prototypy, ať už jsou jejich předchozí zkušenosti v designérské branži jakékoli (nebo vůbec žádné).

V tomto průvodci se především pokusíme probrat základní principy. Pak zde najdete odkazy na jiné průvodce s dodatečnými informacemi, a samozřejmě také na obrovsky dlouhý seznam aplikací a nástrojů, s nimiž můžete později pracovat.

Wireframy a mockupy versus prototypy

Každý návrhář, který se už nějakou dobu pohybuje v branži, se už patrně setkal či pracoval s wireframy (tzv. skici webu) a (nebo) v nějakém obrázkovém editoru navrhoval mockupy (někdy se jim říká statické nákresy webu). To nejsou prototypy?

Ani nápad. Každopádně, ne vždy.

Hlavní potíž s wireframy a mockupy je v tom, že jsou … nu … statické. Existuje značná spousta informací týkajících se funkcionality dané věci, které jednoduše nedokážou vyjádřit. To může vést k mylným představám a nedorozuměním v myslích klientů nebo dokonce vývojářů o tom, jak se předpokládá, že bude daná věc fungovat. Z tohoto důvodu bývají prototypy obvykle nějakým způsobem interaktivní.

Nejběžnějšími výjimkami jsou konceptuální prototypy a výjimečně dobře zdokumentované statické prototypy. Hlavní odlišností není interaktivita samotná, ale že se s ní dají doručit informace o zamýšlené funkcionalitě produktu.

Při výrobě prototypů se často používají wireframy a mockupy, takže nikdo je nezavrhuje.

Kdy potřebujete prototyp?

Vždy, když potřebujete o něčem ukázat, jak se přepokládá, že bude fungovat. Tak je to.

Jasně zřejmým příkladem je webová nebo mobilní aplikace. Aplikace vykazují tendenci být vybavené spoustou funkcionality, kterou nemusí být snadné ani rozpoznat, ani vydedukovat z pouhého mockupu. Prototyp však mohou požadovat i poměrně statické weby řízené obsahem.

A to z jednoho prostého důvodu. Měl jsem klienty, kteří se dívali na mockupy prostinkého obchodního webu a ptali se “Dobře, takže když oni kliknou na ty věci nahoře, ’O nás’, ’Služby’, a na ty další, přejdou tím na jiné stránky?”, nebo “Když kliknou na kontaktním formuláři na tlačítko Odeslat, já dostanu email?”

I jednoduché … úlohy často vnášejí neurčitost …prototypy mohou pomoci úspěšně dokončovat zadané úlohy bez zbytečných dohadů.

I jednoduché prohlížecí úlohy často vnášejí neurčitost pro některé uživatele a perspektivní klienty, mohou znejistět, hádat, co mají vlastně udělat, a prototypy mohou pomoci úspěšně dokončovat zadané úlohy bez zbytečných dohadů.

Kromě toho jsou vždy prospěšné při uživatelském testování. Konec konců, když už se vůbec rozhodnete podstoupit uživatelské testování, je nejlepší začít s nějakým počátečním náhledem projektu. Rozhodně nechcete, aby se přihodilo, že budete muset dělat obrovité změny v době, kdy myslíte, že už máte prakticky všechno hotové.

Čtyři druhy prototypů

Než začnete s prototypováním, měli byste určit, jaký druh prototypu použijete. V jakémkoli projektu můžete samozřejmě použít více druhů prototypů, ne pouze jeden, ostatně většina designérů to tak do jisté míry dělá.

Druh prototypu, který zvolíte, bude muset být ten pravý pro vás, pro klienta, pro projekt samotný a dokonce i pro specifickou fázi projektu, ve které se právě teď nacházíte. Možná to zní složitě, ale tak zlé to zase nebude.

Každý z prototypů je totiž zaměřený na jiné fáze designu. Pak už jen záleží na tom, jaké máte preference, a jak dobře je klient schopen chápat abstraktní vizuální pomůcky.

Klienti, kteří nemají příliš mnoho zkušeností s moderními designérskými procesy, asi očekávají, že uvidí něco “úhlednějšího”, takže vám možná řeknou, že by logo mělo být větší, že tamten řádek byste měli posunout o pár centimetrů doleva, a že jejich web nebude v latině, takže nemohli byste tam prosím dát nějaký text v češtině?

Pokud máte trable s tímhle, nejlepší bude vsadit na podrobnější prototypy — a mít spoustu kafe. Pokud ne, použijte něco méně konkrétního a soustřeďte se na mockupy zamýšlené funkcionality.

1: konceptuální prototypy

Ty se často v ničem a nijak nepodobají dokončenému produktu. U konceptuálních prototypů totiž na podrobnostech a rozvržení rozhraní nezáleží. Jediné, na čem v nich pracujete, jsou interakce a procesy.

Cílem jakéhokoli prototypu je ukázat, jak něco funguje, nebo bude fungovat. V tomto smyslu jde o prototypování v jeho nejčistší formě. Je doslova výhradně o fungování, a formou se v něm vůbec nezabýváme.

V této fázi designu mohou vypadat jako prakticky cokoliv. Můžete použít vývojový diagram, poznámky na samolepících bločcích, prezentaci PowerPointu, video vysvětlující postup jen s běžně nahrubo načrtnutými ilustracemi, nebo zaznamenejte sami sebe, jak mluvíte do kamery a divoce přitom gestikulujete. Vhodné je cokoliv, co věc vysvětlí a objasní.

Konceptuální prototypy se typicky používají v nejranější fázi projektu. Projekt možná ještě ani nemá jméno. Je to jen nápad na aplikaci nebo na web, a budete v té chvíli říkat něco jako: “Jo, myslím, že tohle by mělo zabrat, je to něco jako …”

2: prototypy s nízkou precizností

O prototypy s nízkou precizností (low-fi) se jedná tehdy, když už začínáte brát v úvahu layout, velikost obrazovky, a další uchopitelnější záležitosti. Obvykle se vyrábějí rychle a ještě rychleji zahazují.

Jejich účelem je poskytnout co nejrychlejší způsob iterací přes nápady, dokud vy a (nebo) váš klient nejste spokojeni se základy. Takže je neberte příliš vážně a moc se s nimi nepárejte. Většina z nich bude mít krátkou životnost a to je jen dobře.

Jak už jsem uvedl výše, termín “prototypy s nízkou precizností ” se často dají zaměnit za „wireframy“. Vskutku, tato fáze se často realizuje na papíru.

Když se dělají v nějaké aplikaci, je rozumné použít nějaký takový, který má základní prototypové funkce, jako jsou propojování na jiné obrazovky, anotace, atd. Předností aplikací vyrábějících wireframy je, že umožňují snadnější spolupráci přes Internet, co do užívání ale bývají pomalejší.

Používají se také v počáteční fázi projektu, ale když už patrně máte nějaký obchodní model i nápad, jak by se měl projekt jmenovat. Je na čase protřídit myriády nápadů, které se vám honí hlavou, a iterovat do té doby, dokud nebudete mít něco, o čem si už jste dost jisti, že bude fungovat.

3: prototypy se střední precizností

Prototyp s nízkou precizností někdy prostě nedokáže fungování dostatečně vysvětlit a objasnit, a na prototyp s vysokou precizností by bylo momentálně nutné vynaložit neúnosně mnoho práce. Možná ještě nemáte kompletně v kupě směrnice pro stylování, nebo ještě nemáte zhotovené všechny grafické assety.

Tak či onak, je to druh prototypů, který se může hodit v počáteční až střední fázi designu. Často se vyrábějí s nějakými prototypovacími aplikacemi, které v hojné míře využívají simulovanou interakci. Mohou se také budovat s HTML a CSS, obvykle s pomocí nějakého CSS frameworku.

Jo, mezi největší prototypovací nástroje, které jsou právě k dispozici, patrně patří Bootstrap a Foundation.

Měli byste v nich použít svou představu o značce (brand imagery), pokud nějakou máte, postačí ale zdarma dostupné obrázky (tzv. stock images, stock photos). S takovými obrázky či fotografiemi prvků uživatelského rozhraní se simulované rozhraní obvykle vybuduje rychleji. Mnohé prototypovací aplikace jsou vybavené knihovnami těchto prvků, abyste mohli pracovat ještě rychleji.

Tyto druhy prototypů jsou skvělé pro lidi, kteří nemají rádi přílišné abstrakce, pro své úvahy potřebují doslovnější znění, tedy aproximaci, která je už poměrně blízko tomu, jak to bude nakonec vypadat a fungovat. Pro ně je snadnější ignorovat hlavičku, která “ještě není dokončená ”, než nějaký naskicovaný obrazec, který vůbec nevypadá jako webové záhlaví, na které jsou zvyklí.

Pro tyto klienty možná bude vhodné, abyste si rychle připravit wireframy svých nápadů, ale klientům je nikdy neukazujte. Vyrobte prototyp se střední úrovní preciznosti, z něhož snadněji pochopí, kam směřujete.

4: prototypy s vysokou precizností

Ták, a máme projekt v kupě. Pro každou obrazovku máte mockup a všechno vypadá skvěle. Nastal čas ukázat lidem, jak by to mělo fungovat, a se vší parádou, když ho někdo konečně integruje s backendovým kódem.

Prototypy s vysokou precizností obvykle slouží k tomu, abyste od klientů získali konečný souhlas s designem. Nemůžete jim však prostě odeslat soubory PSD. Tento materiál musí být interaktivní.

Toho se obvykle dociluje jedním ze dvou způsobů. Někdo používá statický HTML a CSS, aby dal dohromady dokončené vizuální pomůcky tak, aby byly polo-interaktivní. Jiní používají aplikace, které importují obrázky, nebo dokonce nezpracované PSD soubory, a přidávají pseudointeraktivní schopnosti, které mají napodobovat finální funkcionalitu aplikace.

S některými aplikacemi můžete dokonce předvádět tyto prototypy na webu jako dema (nebo na mobilním zařízení, pokud pracujete na aplikaci).

 

Metody prototypování

Teď, když jsme prošli hlavní druhy prototypů, jaké můžete připravovat, je na čase seznámit se s nástroji, s nimiž se vyrábějí. Většinu z nich, i jejich základní použití, jsem sice zmínil už v předchozí sekci; teď bych se jim rád věnoval trochu podrobněji.

Opět chci zdůraznit, že metodu byste měli volit podle toho, s čím jste jak vy, tak i váš klient, zvyklí pracovat a dobře se v tom vyznáte.

Video nebo prezentační prototypy

Vyrábějí se často proto, aby prodaly nějakou myšlenku, ještě dřív, než se udělá jakákoli konkrétní práce. Proto jsou obvykle směrovány na potenciální investory. Mohou se sice použít i pro klienty; pro komunikaci s klienty však často existují účinnější způsoby. Zvolte, co je pro vás nejprospěšnější.

Prototypy, které jsou založené na videu a prezentaci, a vyrábějí se za účelem prodeje nápadů, obvykle dodržují vzorec komerčního stylu nabídky:

1. Úvod do problému, s kterým se divák může identifikovat (patrně ho tíží).
2. Předvedeme, jak náš produkt tento problém vyřeší.
3. (Volitelný krok) digitálně realizovaný maskot předvádí rituální taneček a vykřikuje chytlavý slogan.

V některých těchto prototypech se používají jen ikony, text a ilustrace. V jiných najdete animace; a další, aby ještě lépe předvedly funkčnost, používají živé akce. A v tom je, dobrá … ten vtip. Jestliže prodáváte nápady, děláte to dobře.

Působivý příklad, v němž se kombinuje video s papírovými prototypy, najdete v tomto videu.

Wireframy

Wireframy (skici) se dají vyrábět na papíru nebo v aplikacích. Téměř vždy se považují za prototypy s nízkou precizností, přestože je můžete povýšit na prototypy se střední precizností, pokud do nich investujete patřičně času. Vynaložené úsilí se však vyplatí jen výjimečně.

Wireframy se navrhují obvykle tak, aby se daly rychle kreslit i zahazovat. Právě proto je tak atraktivní kreslit je na papíru. Aplikace sice mohou být daleko preciznější, a existující wireframy také můžete snadno editovat; nic ale nepřekoná rychlost, s jakou jste schopni udělat si náčrtek, který je určen jen vám, nikomu jinému … nikdy.

Jak už jsem však uvedl výše, wireframy založené na aplikacích mají tu přednost, že snadněji napodobují funkcionalitu rozhraní. Když ťukáte na papírový náčrtek, slyšíte jen plesk, plesk, plesk, nic se neděje.

Může to být zábavné, ale možná to nevyjadřuje, co jste tím chtěli sdělit.

Můžete však zvolit kombinaci obojího: na papíru podchytit nejzákladnější pojmy, a pomocí aplikace je dotvářet a snadno sdílet.

Papírové prototypy

Ty se liší od wireframů tím, že jsou mnohem víc než pouhé náčrtky, kresby rukou. V tomto druhu prototypu se na papíru vytváří fyzický, i když stále jen plochý, model rozhraní. Jeden z nich jste mohli vidět v odkazu na video uvedeném výše.

Prvky rozhraní se obvykle kreslí, vystřihují, někdy se dělají i jejich kopie, abyste jich měli několik, a pak se dávají dohromady na jiném listu papíru. Předností tohoto postupu je flexibilita. Když je celý wireframe na jediném listu papíru, tak když tento list zahodíte, přišli jste i o celý wireframe. Zde můžete měnit uspořádání prvků na papírovém modelu tak dlouho, dokud s ním nebudete spokojeni. Zjistili jste poté, co jste několikrát změnili uspořádání věcí, že má nějaký prvek špatnou velikost? Prostě si vystřihněte jeho novou verzi.

Tyto prototypy mají také tendenci více se blížit „realitě“ než wireframy. I když se nebude dít nic světoborného, klient může ťukat do papírového modelu. Cítí ho, simuluje se skutečná činnost. Takováto hmatová zkušenost někdy vysvětlí klientovi víc, než cokoliv, co mu ukážete, na co se může jen dívat.

Chceme-li lépe pochopit nějaký objekt, potřebujeme s ním mít fyzický kontakt. Polovina designu uživatelských prožitků je o znovuvytvoření fyzické interakce s digitálním rozhraním.

Prototypy se střední a vysokou precizností vyráběné aplikacemi

Ty mají s papírovými prototypy velmi mnoho společného. Prototypy vyráběné v nějaké aplikaci, jako je třeba Invision, nebo v jedné z mnoha jiných, které jsou k dispozici (viz seznam níže), se typicky dělají z předem připravených prvků rozhraní, a sestavují dohromady tak, aby napodobovaly finální produkt.

Rozdíl je ovšem v tom, že zde se vše odehrává na obrazovce. Jo, a můžete ho také udělat s finálními grafikami a brandingem (se všemi atributy produktu, které mají o něm zanechat v návštěvnících trvalou představu), takže prototyp pak bude vypadat přesně tak, jako dokončený produkt. A jak jsem se zmínil výše, některé aplikace umějí předvést demo produktu v prohlížeči a na mobilních zařízeních.

Tím se vnáší do hry opět hmatový pocit, a právě to si přejete, to je žádoucí. Můžete-li dodat klientům tento pocit, a jim se bude líbit, v zásadě už máte jejich finální schválení v kapse.

Kód

Pokud chcete mít interakce, dobrý způsob, jak se k nim dostat, je samozřejmě budovat prototypy rozhraní s kódem. Pro prototypy založené na kódu byste se mohli rozhodnout z těchto důvodů (stačí jeden z nich):

• prostě se lépe hodí pro váš workflow (jako když jinak stejně navrhujete v prohlížeči);
• váš web nebo aplikace má spoustu tlačítek a jiných interaktivních prvků;
• kód z prototypu můžete použít ve finálním produktu, čímž ušetříte čas;
• chcete předvádět funkcionalitu rozhraní v prohlížeči, nechcete se otravovat s nějakou aplikací;
• rádi pracujete s klávesnicí, neradi klikáte.

Prototypování v prohlížeči může být o něco pomalejší, zejména pokud se stále ještě prototypy hodně přepracovávají. Nedoporučuju je pro rané fáze projektu, nejlepší jsou pro prototypy se střední a vysokou precizností.

Přesto je to jeden z nejlepších způsobů, jakým lze předvést téměř dokončený projekt, pokud rádi pracujete s HTML a CSS.

Prototypování s frameworky

Je třeba připomenout, že pokud budujete prototypy pomocí nějakého frameworku, můžete značně urychlit prototypování založené na kódu. Pokud přitom používáte framework, který zamýšlíte použít i pro finální projekt, máte jako bonus, že všeobecně budete muset mnohem méně kódovat.

Poznámka na okraj, jistí lidé vybudovali editory webových stránek, kde se pracuje ve stylu „drag and drop“, jsou založené na oblíbenějších frameworcích jako jsou Bootstrap a Foundation. Když použijete některý z nich, můžete v nich případně vytvářet cokoliv, od prototypů s nízkou precizností až po finální produkt s kódem.

Někteří lidé je však používají jen proto, aby rychle vybudovali prototypy, a pro finální projekt pak používají vlastní kód. Funguje obojí.

Návody a průvodci pro prototypování

Když už jsme probrali veškeré základy, můžeme se konečně pustit do podrobností. Podobně jako u všeho ostatního v designu a v životě, neexistuje žádný jediný správný způsob, jak sestavit nějaký prototyp. Musí to být takový způsob, který vyhovuje vám. To znamená, že úspěšné designérské postupy mívají společného jen málo.

Následuje několik odlišných průvodců pro prototypování, soustřeďují se na různé metody a úrovně preciznosti, jen abyste věděli, kde byste mohli začít. Vezměte si z nich to, co vám vyhovuje, a ignorujte, co ne.

(Nezařazujeme sem aplikačně specifické návody, protože je jich prostě příliš mnoho.)

Navrhujte lépe a rychleji procesem zvaným rapid prototyping

Tento průvodce od Smashing Magazine se soustřeďuje na metodologii rychlého budování prototypů, s častými iteracemi.

Jak já rychle připravuji prototypy webů

Tohle je osobněji laděný článek, který napsal Nick Pettit na blogu Treehouse. Seznamuje čtenáře s jeho vlastním přístupem k prototypování.

Jak rychle budovat weby s workflow založeným na rapid prototyping

To je třetí článek o „svižném prototypování“. Zdá se, že je oblíbený. Je tady u nás, na Webdesigner Depot, a nastiňuje několik tipů i úskalí neodmyslitelně spojených s tímto procesem.

Průvodce po prototypech s nízkou precizností pro skeptiky

Další článek ze Smashing Magazine, tento se podrobně zabývá tvorbou prototypů s nízkou precizností.

Jak my děláme prototypy

V tomto obsáhlém a zcela upřímném fascinujícím článku popisuje agentura Newfangled podrobně, jak u nich postupují při tvorbě prototypů. Točí se okolo prototypování na černobílých obrazovkách v prohlížeči a předkládají přesvědčivé argumenty, proč byste je měli vyzkoušet.

Jak testovat použitelnost prototypů

Další z článků zde na WDD je celý věnován tomu, přesvědčit, že prototypování má smysl. Pokud uděláte testy použitelnosti až poté, co dokončíte finální projekt, pravděpodobně jste ho udělali špatně.

Elektronická kniha zdarma: Praktický průvodce prototypováním, od UXPin

Budete-li chtít tuto knihu získat, budete muset uvést několik osobních informací (nebo zalhat), každopádně od vás nechtějí žádné peníze! Obsahuje další informace o oblíbených prototypovacích metodách, návody založené na aplikacích a doporučené postupy od předních společností jako jsou Google, Apple, Zurb a další.

Kromě toho ji sepsali lidé od UXPin, což je prototypovací aplikace, takže možná nemusí být úplně nestranná v tom ohledu, jakou aplikaci bude doporučovat. Rozhodně však obsahuje spoustu dobrých informací.

 

Prototypovací nástroje a aplikace

Dobrá, dost bylo teorie. Je na čase pustit se do tvorby prototypů. Za předpokladu, že se nehodláte napořád spokojit jen s papírovými modely či kódem, v jistou chvíli budete chtít použít nějakou aplikaci.

Dobrá zpráva: je spousta skvělých aplikací, z nichž můžete vybírat. Špatná zpráva: je spousta skvělých aplikací, z nichž můžete vybírat.

Opět chci zdůraznit, že vše záleží na tom, jakým způsobem pracujete. Potřebujete být schopni předvádět mobilní aplikace? Potřebujete synchronizovat soubory s Google Drive, Dropboxem nebo nějakou jinou službou? A co takhle integrace s Github? Prototypy s nízkou, střední, nebo vysokou precizností? Pokročilé skriptování?

Některé nebo všechny z těchto schopností nabízejí aplikace vypsané níže. U každé z nich vypisuji její nejpodstatnější schopnosti, abyste si mohli udělat představu, kam byste se asi měli podívat.

Je třeba připomenout, že mnohé z nich byly původně známé jako nástroje pro wire-framing. U softwaru tohoto druhu je běžné, že se do něho integrují schopnosti potřebné pro interaktivní prototypy. Prospěšnost těchto aplikací pro vás může být proto různá.

Adobe Experience Design CC

Tohle je právě nejnovější nabídka na trhu, a je přichystaná tak, aby dodala vážného konkurenta na do jisté míry saturovaný trh. Není to jen aplikace na výrobu wireframů nebo prototypů; je to designérská aplikace. Je jako Sketch, nebo teď už mrtvý Fireworks, posouvá však věci o krok dál, protože umožňuje dělat prototypy všeho, co jste právě navrhli.

Momentálně je jen pro Mac, a jen jako náhled, ale před koncem roku vyjde i verze pro Windows.

Předběžná verze je zdarma, jakmile se vydá finální verze, bude součástí subskripčního plánu Creative Cloud společnosti Adobe.

Prezentační software

Microsoft PowerPoint, Apple Keynote, LibreOffice Impress a Google Slides, se všemi se dají vyrábět prototypy. Většinou se bude jednat o konceptuální variantu prototypů. Můžete však napodobit jisté množství interaktivity, když propojíte jednotlivé snímky prezentace.

Bude také slušně fungovat pro prototypování webů řízených obsahem, a je také dost pravděpodobné, že některý z těchto programů už používáte. Pokud ne, Impress a Slides jsou zdarma.

Invision

Invision je další z “celebrit”, s více prototypováním s vysokou precizností. Zdůrazňuje řízení verzí, a je hrdá na svou spolupráci v reálném čase a funkce zpětných vazeb. Podobně jako aplikace Marvel, také má animace, vkládání prototypů, dema v zařízení, a další věci.

Kromě toho nedávno koupili Silver Flows, což je nástroj, který integruje prototypovací funkcionalitu se Sketchem. Mají v úmyslu s jeho pomocí integrovat Sketch s jejich online softwarem.

K dispozici je plán zdarma, můžete však vyrobit jen jediný prototyp. Poté můžete začít s 15 dolary měsíčně.

Justinmind

Zdá se, že Justinmind se záměrně orientuje na vytváření aplikačních prototypů s vysokou precizností. Web se také zmiňuje o prototypování responzivních webů. Jsou zde také in-app dema.

Ceny momentálně začínají na 19 dolarech na každého uživatele, měsíčně, pokud zaplatíte za rok.

Marvel App

Marvel App je obrovitá aplikace (jedna z “celebrit” v prototypování), má plán zdarma, a rozumné ceny pro všechny upgrady. Mezi schopnosti, které stojí za to zmínit, patří: podpora pro Photoshop a Sketch, synchronizace s Drive a Dropbox, vkládání prototypů do webových stránek a schopnosti, které přemění prototypy na animované prezentace.

Jedná se zcela jistě o prototypy s vysokou precizností.

Axure

Axure je trochu podivná, protože má funkce pro prototypování s nízkou preciznosti i s vysokou precizností. Je ještě podivnější, než se zdá, protože je to desktopová aplikace s jednorázovou cenou. Je navržena pro korporace a velké týmy, má schopnosti pro psaní vlastní dokumentace, pro správu projektů a další věci.

Standardní vydání je k mání za 289 dolarů na licenci.

HotGloo

HotGloo se specializuje na wiredramy a prototypy s nízkou až střední precizností. Začala původně jako aplikace na výrobu wireframů, nyní však obsahuje i funkcionalitu pro pokročilejší prototypy.

Zatímco ostatní aplikace se soustřeďují na prototypování aplikací, HotGloo odstartoval s webovými designéry. Takže v něm můžete dělat obojí, opravdu.

Plány začínají na 14 dolarech měsíčně a plán může zahrnovat až 10 spolupracovníků.

Proto.io

Áááááá jsme zase zpátky u prototypování s vysokou preciznosti s Proto.io. Má složité interakce, animace, exporty, tisk, vkládání, a předvádění na zařízení, a všechno je vestavěné. Ceny startují na 24 dolarech měsíčně, lze ale také vyzkoušet na 15 dní zdarma, chcete-li ho prubnout.

Solidify

Solidify nám přinesla Zurb, stejná firma, která dělá framework Foundation. Je navržená pro zpracování (získávání zpětných vazeb) všeho možného, od náčrtků až po prototypy s vysokou precizností a mockupy.

Solidify se nesoustřeďuje ani tak na animace a jiné prezentační nástroje, ale na nabídku hojnosti uživatelských testovacích schopností. Můžete spouštět testy osobně nebo vzdáleně a sdílet výsledky se svým týmem.

POP

POP se od ostatních aplikací liší tím, že pomáhá vyrábět hybridy načrtnutých wiredramů a digitálních prototypů. Začínáte tím, že pořídíte snímky svých náčrtků s iPhonem, Androidem nebo s Windows phone, a přeměníte tyto náčrty na interaktivní prototyp.

Pokud většinu své práce děláte na papíře, může to být skvělý způsob, jak sdílet výsledky. Služba je zadarmo pro dva projekty, pak plány startují na 10 dolarech měsíčně.

Flairbuilder

Flairbuilder je další desktopová aplikace, přestože má pro projekty online prohlížeč. Zdá se, že se orientuje na wiredramy a prototypy se střední precizností. Má schopnosti umožňující přidávat interakce, umí dělat dema v zařízení a speciální důraz klade na design založený na mřížce.

Platí se za ni jednorázově 99 dolarů. Přemrštěná cena, jistě, ale pořád levnější než Axure.

Flinto

Flinto má momentálně dvě verze: aplikace Mac a webová odlehčená (Lite) verze. Čím se liší? Mac verze přináší složitější animace, funkce a interakce. Umožňuje také importovat assety ze Sketche, což webová verze neumí.

Stojí 99 dolarů jakožto jednorázový nákup. Je zajímavé, že odlehčená verze Lite (která stojí měsíčně 20 dolarů) zahrnuje licenci pro desktopovou verzi, čímž dostáváte nejlepší z obou světů.

UXPin

UXPin je aplikace zaměřená na prototypy se střední až vysokou precizností a obsahuje všechny schopnosti, jaké od takové aplikace očekáváme. Jako jen několik málo dalších zahrnuje také spolupráci v reálném čase a má vestavěné funkce pro testování použitelnosti a správu projektů.

Na rozdíl od ostatních aplikací je snahou UXPin být designérsky soběstačnou. Jakmile jste v ní, můžete přeskočit Photoshop, Sketch, nebo co máte jiného, a změnit své wiredramy na mockupy. Zní to ambiciózně, přinejmenším, ale pokud funguje tak, jak slibuje, myslím, že by byla prospěšná pro spoustu designérů.

Ceny startují na 19 dolarech měsíčně, pro jednoho uživatele.

Napsal Ezequiel Bruni

Ezequiel Bruni je designér webů a uživatelských prožitků, bloger a ctižádostivý fotograf žijící v Mexiku. Když zrovna není ponořený až po své jemně cizelované uši do webových skic a front-endového kódu, ani někde nepokřikuje o tomtéž, oddává se pivu, pizze, románům z žánru fantasy a scénkám „na stojáka“. Další články, které napsal Ezequiel Bruni, najdete zde.

Článek byl původně zveřejněn na serveru www.webdesignerdepot.com. Celý článek v originálním znění najdete na The beginner’s guide to UX prototyping.

Přeložil: RNDr. Jan Pokorný