7 Prototypovacie nástroje pre web dizajnérov

Poznáte rozdiel medzi Drôtený rám, maketa a prototyp? Tieto tri výrazy sa často používajú zameniteľne a znamenajú to isté. Problém je, že by ste nemali.

Drôtený rám je a statické zobrazenie dizajnu s nízkou vernosťou. Poskytuje prehľad o vzhľade alebo tvare navrhnutého dizajnu, ale nie o jeho funkčnosti alebo pocitu. maketa poskytuje väčšie množstvo informácií. Mockups sú stredné až vysoko presné zobrazenia navrhovaného dizajnu. Mockups sú tiež statické a nepreukazujú interaktivitu.

prototypy, na druhej strane sú dynamický. Môžu predstavujú váš konečný dizajn takmer akýkoľvek stupeň detailov, ktorý si vyberiete. Prototyp môže byť dokonca testovaný ako keby to bol skutočný konečný produkt, pretože môže poskytnúť rovnaký vzhľad a pocit. Z troch by bol ten, ktorý by najviac vyvolal dojem, prototypom.

Ako vytvoriť prototyp

Cieľom prototypu je presne preukázať vybrané dizajnové prvky. Prototypy pre webové aplikácie alebo aplikácie sa zvyčajne vyvíjajú tri etapy:

1. Stránka, ktorá prúdi (ako môže používateľ navigovať), je načrtnutá.
2. Niekoľko verzií s nízkou vernosťou každej stránky sú postavené a testované na použiteľnosť.
3. Z získaných ponaučení sa pridávajú podrobnosti na vytvorenie vysoko presného modelu navrhovaného dizajnu.

V tomto príspevku sa budeme venovať niekoľkým nástrojom na vytváranie prototypov, ktoré vám pomôžu zjednodušiť proces, uľahčiť a preniesť prototypy oveľa rýchlejšie. Tu je 7 prototypov nástrojov vyskúšať.

Invision

InVision je podľa Forbesu v hornej časti zoznamu súkromných cloudových firiem na svete spolu so svietidlami ako Slack, Dropbox a MailChimp. Táto česť je čiastočne spôsobená "vždy-na" platformou InVision, ktorá ju prináša spoluprácu, spätnú väzbu a budovanie prototypov vysokej vernosti.

S programom InVision je možné spravovať projektové obrazovky a stavy z jedného miesta, spolupracovať v reálnom čase a udržiavať kontrolu verzie, zatiaľ čo budovanie pixelov - perfektné prototypy, ktoré majú vzhľad skutočných webových a mobilných aplikácií. S InVision môžete dokonca vykonávať bezplatné, neobmedzené testovanie na svojich prototypoch.

Ak chcete zistiť, čo sveta dizajnu a InVision viac ako 2 milióny používateľov miluje o tejto platforme, zaregistrujte sa na bezplatnú skúšobnú verziu. Ak chcete začať, stačí kliknúť na odkaz InVision.

Pidoco

Či už potrebujete a click-through wireframe, alebo a plne interaktívny UX prototyp, Pidoco vás tam dostane rýchlo a bez rozruchu. Začínajúc jednoduchou funkciou skicovania môžete vytvoriť súbor vlastné šablóny, vytvoriť interaktívne prvky potrebuješ, prezentujte svoj prototyp ostatným a čakajú na ich spätnú väzbu - čo by nemalo byť dlhé.

Spoločnosť Pidoco vám poskytne všetko, čo je potrebné na vytvorenie prototypov s nízkou vernosťou, ktoré vyžadujú rýchlu spätnú väzbu alebo modely s vysokou vernosťou, ktoré majú rovnaký vzhľad a dojem ako navrhovaný dizajn webov alebo aplikácií. Tento nástroj dokonca generuje špecifikácie dokumentov ktoré môžu slúžiť ako plány pre členov tímu alebo môžu byť klientom predložené na odhlásenie.

Proto.io

Proto.io bude ideálnou voľbou, ak potrebujete kvalitný prototypovací nástroj, ktorý vám pomôže s vašimi dizajnovými aktivitami v mobilnej aplikácii. Proto.io je špecializovaná platforma pre mobilné prototypy, ktorá beží na väčšine prehliadačov, nevyžaduje žiadne kódovanie, a umožňuje vám nasadzovať plne interaktívne prototypy mobilných aplikácií a simulácia ktoré majú vzhľad a pocit skutočnej veci.

Na vytvorenie tohto nástroja sa kombinujú tri časti: palubná doska, editor a prehrávač. Prístrojová doska slúži ako hlavná kontrola a projektový manažér. Editor sa skladá zo súboru nástrojov, ktoré emulujú dizajn a vytvárajú interakcie. S prehrávačom si môžete prezrieť svoj prototyp vo svojom webovom prehliadači, komunikovať s ním, vyžiadať si spätnú väzbu a otestovať ho na skutočných mobilných zariadeniach. Ak je dizajn mobilnej aplikácie vašou vecou, ​​je to pre vás nástroj.

Webflow

Pre každého, kto hľadá all-in-one dizajn, prototypovanie a vývojový nástroj, hľadanie končí tu. Po prvé, s Webflow môžete stavať a otestovať prototypy s vysokou vernosťou musíte pomôcť pri návrhu. Ale tu je miesto, kde rozdiel príde - všetko, čo stavíte, je poháňané výrobou pripravené HTML / CSS a JavaScript. Výsledok?

Môžeš plynulo prechádzať od plne interaktívneho prototypu k rozvinutému produktu. Prototyp, dizajn a vývoj sa dodávajú v rovnakom balíku, ktorý zahŕňa aj potrebné funkcie a možnosti spolupráce. A mimochodom, všetko reaguje tiež.

PowerMockup

Táto sada špeciálnych prototypov bola vyvinutá s používateľom PowerPoint. PowerMockup je v skutočnosti doplnok programu PowerPoint, ktorý môžete použiť vytvoriť drôtené rámy a makety pre webové stránky, aplikácie pre stolné počítače alebo mobilné aplikácie. Je to jednoducho otázka výberu tvarov a návrhových prvkov z knižnice PowerMockup a ich odstránenie na snímku programu PowerPoint.

Potom môžete použite funkciu prezentácie a animácie programu PowerPoint a ukážte svoj dizajn s ostatnými. Môžete tiež pridať svoje vlastné tvary a prvky do knižnice a zdieľať ich s ostatnými používateľmi aplikácie PowerPoint, ak chcete.

LucidChart

Lucidchart je on - line aplikácia s knižnica dizajnových prvkov a typov zariadení z ktorých môžete rýchlo stavať drôtené rámy alebo figuríny vášho webu alebo návrhov mobilných aplikácií. Má a čisté a užívateľsky príjemné rozhranie, a obsahuje technológiu "drag and drop", interaktívne demonštračné schopnosti, a technológiu vrstvy, ktorá vám umožňuje vytvárať veľmi komplexné simulácie.

Lucidchart je tiež užitočným nástrojom vytváranie profesionálne vyzerajúcich diagramov pracovných postupov projektu a vývojových diagramov, a jeho funkcie spolupráce fungujú hladko a ľahko sa používajú.

HotGloo

Emulácia navrhovaného návrhu UX môže niekedy predstavovať výzvy. To je dôvod, prečo potrebujete HotGloo. S obrovským knižnica prvkov a Galéria miniaplikácií UI, export a zdieľanie funkcií, ako aj spoluprácu s členmi tímu, ktoré ste začali v takmer bezprostrednom čase.

Ak máte akékoľvek otázky alebo potrebujete nejakú pomoc, majú úplnú dokumentáciu, ako aj užitočné video tutoriály a živé webináre k dispozícii. Vytvorte si svoje prototypy priamo vo svojom prehliadači, zdieľajte ich a ukážte ich na akomkoľvek mobilnom zariadení. Môžete dokonca exportujte svoju prácu do HTML. Skenovanie a prototypovanie nebolo nikdy jednoduchšie a zábavnejšie!

Zbaliť ho

Z tohto zoznamu môžete vybrať z nástrojov venovaných špeciálnym účelom, nástroju typu všetko v jednom, ktorý určite stojí za pohľad. Jedná sa o všetky najkvalitnejšie nástroje, takže nie je žiadne riziko a vždy si môžete prezrieť demo alebo požiadať o bezplatnú skúšobnú verziu.

Tieto produkty majú veľkú užívateľskú základňu. Používajú ich alebo odporúčajú veľké spoločnosti. Takže bez ohľadu na to, ktorý z nich si môžete vybrať, ocitnete sa v dobrej spoločnosti. Či už hľadáte maket, drôtený rám alebo prototypovací nástroj, nájdete nástroj pre vaše potreby vyššie.