Kde vytvořit návrh aplikace?

Vymysleli jste mobilní aplikaci, která z fotky určí, zda jsou hranolky chutné, nebo dá cool odpověď na nepříjemnou frázi od neznámého člověka. Co bude dál? Vytvoření jednoduché aplikace stojí od 3 tisíc dolarů. Než budete hledat peníze, zkuste si vyrobit prototyp svého nápadu. Tímto způsobem můžete zkontrolovat, zda váš produkt publikum potřebuje. I když nevíte, jak kódovat, můžete služby využít k vytváření prototypových aplikací.

V tomto článku vám řekneme, jaké služby jsou k dispozici, kolik stojí výroba prototypu a na co si dát při výběru pozor.

Prototyp je prostředek k rychlé vizualizaci vašeho nápadu. Může být zobrazen zákazníkovi nebo uživateli. Můžete dokonce načrtnout nápad na ubrousek, ale to není příliš jasné: uživatel bude málo rozumět a vývojář bude nepohodlný implementovat plán. Namísto kreseb na papíře vytvářejí prototyp, který může vypadat jako sada obrazovek nebo dokonce velmi připomínat mobilní aplikaci, kde se mačkají tlačítka a dělají se přechody.

Jak vytvořit prototyp:

1. Formulujte myšlenku a požadavky na aplikaci.
2. Drátové modely se používají k zobrazení toho, jak budou uživatelé interagovat s rozhraním. Drátový model je kostrou aplikace. Zaměřuje se na chování uživatelů a obsah budoucího projektu.

Ukažte, co se stalo zákazníkovi a koncovým uživatelům.

Zpracovat připomínky a vylepšit prototyp.

Kroky vystavení uživatele a zlepšení se často opakují.

První věc, pro kterou potřebujete prototyp, je otestovat funkčnost vašeho nápadu a to, jak moc jej uživatelé potřebují. СBInsight píše, že startupy nejčastěji selhávají, protože je trh nepotřebuje. Prototypování šetří vývojářům a designérům hodiny přepracováním prototypu namísto předělání rozhraní samotného produktu, které by bylo dražší.

Jaké další výhody má prototyp?

• Můžete otestovat jakýkoli ze svých nápadů;

• vezměte to investorům, ukažte, jak skvělé to bude;
• najít díry v logice samotné myšlenky;
• můžete okamžitě něco změnit a neutratit za to svůj rozpočet;
• ukázat potenciálním uživatelům, aby pochopili, kde se mají zlepšit;
• ukažte to vývojářům, aby bylo hned jasné, kde kódovat a kolik to přibližně bude stát.

Existuje skvělý příklad toho, jak prototyp pomáhá při vytváření produktu. V The Founder si Ray Kroc znovu představuje, jak vypadá kuchyně rychlého občerstvení. Než udělají McDonald’s tak, jak je známe a milujeme, majitelé navrhnou kuchyni na tenisovém kurtu a otestují ji. Zpočátku to dopadá tak a tak, ale s třetí iterací najdou ideální uspořádání zón v kuchyni. Pokud by nejprve postavili restauraci a investovali statisíce do vybavení a komunikací, vedlo by to k velkým ztrátám.

Po montáži služba vytvoří aplikaci různého stupně propracování:

• Obrázky, které lze například přidat do prezentace.
• Prototyp k testování na vašem telefonu nebo k odeslání odkazu testerům. Bude to vypadat jako skutečná aplikace nebo mobilní web v závislosti na možnostech konkrétního návrháře.
• Hotová aplikace pro AppStore nebo PlayMarket.

Pokud se tedy chcete bez kódu vůbec obejít, vyberte si služby, které aplikaci sestaví. Pokud víte, jak kódovat nebo plánujete pracovat v týmu, vytvořte prototyp, který mohou vývojáři použít k vytvoření aplikace. Pro jakoukoli vlastní funkci budete s největší pravděpodobností potřebovat návrháře rozvržení, návrháře a vývojáře.

Na základě šablon lze vytvořit základní prototyp nebo aplikaci. Novinářka Arina Tarasova se například podělila o to, jak se projektovému týmu podařilo vytvořit funkční aplikaci pro zimní festival umění Surikov v Krasnojarsku pomocí služby Glide:

„Úkolem bylo vyprávět o festivalu a udělat projekt co nejpohodlnější. Opustili jsme myšlenku prezentovat projekty na stavitelích, jako jsou Wix, Readymag, Tilda a další, protože se otevírají v prohlížeči, což není vždy pohodlné. Také QR kódy a audio ze Soundcloudu nevypadají příliš lákavě a pro projekt jsme vytvořili spoustu multimediálních formátů.

K této akci město spouští značkový trolejbus s QR kódem pro naši aplikaci. Otevře se aplikace a lidé si zapnou audioprůvodce, který jde po trase tohoto trolejbusu, a podívají se na mapu Surikovových míst.

Nepotřebovali jsme žádné speciální znalosti ve vývoji. V odlehčeném režimu, kde jsme prováděli i další pracovní úkony, trvalo vytvoření aplikace 2-3 dny, aby pochopila rozhraní a integrovala tam všechny naše multimediální soubory. Bez vývojáře se tedy ve fázi prototypu rozhodně obejdete.

Z mínusů: použili jsme bezplatnou verzi a existují omezení na barevné kombinace. Pokud šablony zcela neodpovídají vaší vizi, je to nepohodlné, ale vše lze vyřešit přihlášením k odběru služby.

Uvnitř zdroje si můžete prohlédnout statistiky návštěvníků. Tak víme, že lidé aplikaci používají.“

Dále se podíváme na zdroje, kde můžete postavit prototyp bez znalostí vývoje.

Platforma pro vytváření prototypů a progresivních webových aplikací využívajících Tabulky Google jako databáze pro aplikace. V roce 2021 Glide vydává novou verzi, kde lze tabulky vytvářet a upravovat v rámci jejich webové verze.

Chcete-li vytvořit aplikaci, strukturujte informace do tabulky, poté Glide sestaví novou aplikaci. Existuje komunita, kde můžete chatovat, požádat o radu nebo se pochlubit svou aplikací.

• velká knihovna placených a bezplatných šablon;
• Stránky a aplikační bloky lze konfigurovat přes webové rozhraní a upravovat informace v tabulce;
• můžete přidávat obrázky a videa;
• vestavěný chat, nákupní košík a komentáře;
• Google Analytics je připojen;
• Aplikaci lze používat přes odkaz, není třeba nic dalšího instalovat.

Kolik to je: K dispozici je bezplatná verze, omezená velikostí tabulky a 100 MB úložiště, se značkou zdrojů. Placené verze začínají na 12 USD měsíčně. Nebrandová verze s vlastní doménou od 32 $ měsíčně.

Pokročilý stavitel prototypů drag-and-drop. Vše se děje v prohlížeči a existují aplikace, které uživatelům ukáží prototyp.

Svůj prototyp můžete ukázat lidem na Proto.io Spaces.

• velká knihovna prvků;
• knihovnu šablon, ale aplikaci můžete sestavit z prvků;
• existují pluginy pro editory pro přidání vlastního designu při zachování všech vrstev;
• pohodlné přidání odkazu na testovací službu, například Usertesting;
• můžete sdílet odkaz na prototyp – otevře se v mobilním prohlížeči, vloží jej na váš web nebo poskytne přístup v mobilní aplikaci.

Kolik to je: 15denní zkušební přístup ke všem funkcím bez připojení karty. Od 24 $ měsíčně – můžete dělat 5 projektů současně. Existují slevy pro studenty a veřejné organizace.

Bezplatná aplikace pro stolní počítače, která vytváří plně interaktivní prototypy pro jakoukoli platformu. Výsledek je vidět na Androidu, iOS a v prohlížeči.

• snadno použitelné šablony;
• editor je nutné stáhnout, existuje verze pro MacOS a Windows a mobilní aplikace;
• import z Photoshopu a Illustratoru;
• export do html a nativní aplikace *.apk pro zařízení Android;
• můžete přidat aplikaci do Usertesting a získat zpětnou vazbu od skutečných uživatelů;
• existuje společná editace.

Jaká je cena: K dispozici je zkušební doba 15 dní se všemi funkcemi. Nástroj pro vytváření drátěných modelů však můžete používat zdarma. Od 19 USD měsíčně s neomezeným počtem prototypů.

Propojuje neomezený počet uživatelů pro plánování, návrh aplikací a prototypování.

• zahrnuje všechny fáze: od psaní logiky po interaktivní prototyp;
• existují rozšíření pro prohlížeče;
• knihovna šablon;
• asi tisíc pluginů pro připojení služeb třetích stran;
• spolupráce na prototypu: do Trello můžete přidat karty ze stránek prototypu.

Kolik to je: Volný plán obsahuje 1 projekt (až 200 objektů) a 5 MB prostoru. Pokud pracujete pro veřejnou nebo vzdělávací organizaci, požádejte o bezplatný účet. Placené předplatné od 16 $ měsíčně.

Udělá z návrhu Figma interaktivní prototyp a dokonce i nativní aplikaci bez programování. Existuje aplikace pro testování.

• pracuje s Figmou;
• spojuje reálná data;
• generuje nativní kód pro Android a iOS.

Kolik: neomezený počet projektů zdarma, ale projekt můžete sdílet maximálně třikrát, projekt bude mít logo zdroje. Placené předplatné od 19 € měsíčně. Umožňují vám sdílet váš projekt bez omezení a zahrnují technickou podporu prostřednictvím e-mailu. S tarifem začínajícím na 49 EUR měsíčně přidáte svou značku a získáte technickou podporu, dokud nebude aplikace zveřejněna.

Shromažďuje prototypy a plnohodnotné mobilní aplikace pomocí dat z tabulek. Ideální například pro malé živnostníky, kteří si chtějí vytvořit účetní systém sami.

• zpracování dat z různých tabulek a databází, hlavní věcí je správné uspořádání informací v nich;
• integrace map;
• aplikace mohou používat NFC nebo QR kódy;
• existují šablony;
• Abyste ji mohli používat, budete si muset aplikaci stáhnout.

Za kolik: Můžete zdarma testovat a ukazovat, placené plány začínají, pokud potřebujete připojit více než 10 lidí – od 5 $ měsíčně.

Vytváří prototypy a plně funkční hlasové aplikace pro nástroje Alexa a akce Google. Existuje facebooková skupina, kde se můžete pochlubit nebo požádat o radu. Jsou aktivně aktualizovány a naslouchají nápadům uživatelů.

• prototyp lze vyrobit v prohlížeči nebo jej okamžitě stáhnout do chytrého telefonu a otestovat;
• logika a struktura jsou vytvářeny přetahováním bloků;
• umíte pracovat v týmu;
• existuje režim desky;
• testovací režim na webu.

Kolik: dva projekty zdarma pro individuální použití. Od 40 $ měsíčně potřebuje každý editor samostatný plán

Vhodné pro začátečníky. Ve webové verzi si můžete sestavit stránku po stránce interaktivní prototyp aplikace pro všechna zařízení včetně chytrých hodinek. Pro zobrazení prototypu si uživatel bude muset nainstalovat aplikaci.

Se svým samostatným produktem dokáže proměnit váš papírový prototyp na interaktivní prototyp. Vyfoťte své náčrty, propojte objekty, které musí být interaktivní s jinými objekty a obrazovkami

• kromě aplikací můžete v návrháři vytvářet prototypy webových stránek;
• importujte rozvržení ze skici, nebo můžete použít hotové rozvržení skici z knihovny;
• přidání gifů, videí a map k prototypu;
• můžete komentovat a sdílet odkaz na prototyp.

Kolik: zdarma pro jeden projekt, více od 12 $ měsíčně.

Tento designér má nejvíce funkcí pro týmovou práci s designérem. Invision má plugin Craft, který promění maketu designu na prototyp přímo ve Sketch. Prototyp můžete ukázat uživateli prostřednictvím aplikace. Pokud máte nějaké potíže, můžete se zeptat na oficiální účet technické podpory na Twitteru.

• režim desky;
• projektový management pro designéry;
• testování;
• ví, jak rychle vložit informace o šabloně, například jména nebo fotografie z Unsplash;
• můžete vytvářet vlákna komentářů ke konkrétním sekcím projektu;
• komentování v reálném čase.

Kolik: Zdarma až pro 10 aktivních uživatelů, více – 7.95 $ za uživatele měsíčně.

Vhodné pro majitele MacBooků, potřebujete účet vývojáře Apple. Prototyp můžete ukázat v Origami, mobilní aplikaci pro iPhone nebo z MacBooku s nainstalovaným Origami. Existuje aktivní komunita, kde můžete klást otázky.

• výkonné animace;
• funkce „exportu kódu“, které umožňují převádět vizuální návrhy na psaný kód;
• můžete testovat na mobilním zařízení připojeném k notebooku;
• Existuje podpora pro Figma a Sketch.

Jak moc: zdarma.

Všechny zmíněné služby slibují relativně nízkou vstupní bariéru. Ale v každém případě budete muset rozumět editoru a základní terminologii. Aby toho bylo dosaženo, mnoho služeb vytváří podpůrné komunity. Thunkable například podporuje možnost položit otázku na webu, Bravostudio nabízí e-mailovou podporu v placených verzích a Voiceflow uvádí jako hlavní výhodu svou aktivní komunitu podpory. I když používáte bezplatnou verzi zdroje, požádejte o pomoc na interních fórech; práce na podobných projektech může zvýšit vaši šanci na odpověď.

Existuje také možnost registrace na školicích stránkách. Například No Code nabízí osobní konzultace a skupinová sezení při vytváření aplikace v rámci placeného předplatného. Na Makerpadu se můžete zeptat na fóru a sledovat další výukové programy a získat personalizovanou podporu s placeným předplatným.

Odmítnutí odpovědnosti Tento odborný článek vznikl na základě rozhovoru s mentorem Solvery.

Chtěli jste někdy vytvořit aplikaci, ale nevěděli jste, kde začít? Ať už jste podnikatel, vývojář, produktový manažer nebo jen zvědavý, tento článek vám ukáže, jak vytvořit design mobilní aplikace, i když nemáte s designem žádné zkušenosti.

Proč si prostě nenajmout designéra?

Najít a najmout slušného návrháře je velmi obtížné, návrháři jsou drazí. Nejde jen o náklady na najmutí designéra, ale o čas a úsilí najít takového, který se hodí pro váš projekt.

Navíc budete muset svou vizi a nápad vysvětlit designérovi a nakonec projdete mnoha iteracemi, než získáte to, co chcete. A co je nejdůležitější, nechcete utratit všechny peníze za návrh aplikace, který by nakonec nemusel fungovat.

Tak proč to neudělat sám? K vytvoření vysoce kvalitního prototypu pro vaši aplikaci ve skutečnosti nemusíte být designérem.

Definujte účel své aplikace

Než začnete s návrhem, je důležité určit jeho účel.

Jaký problém vaše aplikace řeší?

Jaké funkce bude mít vaše aplikace?

Kdo bude tuto aplikaci používat, jaké budou uživatelské scénáře?

Zamyslete se nad odpověďmi na tyto otázky, protože určují, jaké prvky návrhu použijete a jak budou uživatelé s vaší aplikací pracovat.

Aplikační drátěný model

Wireframing je proces vytváření nízkověrné (hrubé) verze aplikace. Cílem je vytvořit vizuální mapu rozložení a funkčnosti konečného produktu. Jakmile je drátěný model připraven, můžete začít přidávat vizuální prvky a funkce, aniž byste se museli obávat, zda budou prvky spolupracovat.

Drátové modely můžete použít k vizualizaci toku obsahu, identifikaci vzorů a nekonzistencí v designu a rozhodování o směru vašeho produktu.

Aplikační drátěný model se obvykle skládá ze dvou hlavních komponent: uživatelského toku, rozvržení obrazovky.

Uživatelské scénáře – Jak bude vypadat cesta uživatele ve vaší aplikaci? Kolik bude obrazovek, za co budou zodpovědné? Jak se mezi nimi bude uživatel pohybovat?

Rozložení obrazovky – z jakých prvků se tyto obrazovky budou skládat? Hlavním cílem je zde určit nejlepší umístění pro různé prvky: například co by mělo být umístěno v horní části obrazovky nebo jaká oblast je nejvhodnější pro videoobsah?

Najděte inspiraci

Vždy je těžké začít od nuly, může být pohodlnější začít s návrhem tím, že se podíváte na to, co vytvořili ostatní.

Najděte inspiraci pro svou další aplikaci procházením App Store nebo Google Play v podobné kategorii a zjistěte, zda nenajdete něco užitečného nebo zajímavého. Hledejte podobnosti v designu a funkčnosti, což vám může poskytnout nápady, kde začít.

Když se pustíte do vytváření vlastní aplikace, pořizování snímků vašich oblíbených obrazovek a prvků uživatelského rozhraní jako reference vám určitě pomůže.

Mobbin Design — Rozsáhlá spravovaná knihovna mobilních rozhraní.

Behance je největší sociální síť pro designéry, která může předvádět a hledat práci.

Dribbble je platforma pro designéry, kde mohou předvést svou práci.

Využijte výhod hotových konstrukčních systémů

Všechny mobilní aplikace se skládají ze stejných prvků rozhraní. Není třeba znovu vynalézat kolo pokaždé, když začínáte nový projekt.

Designové systémy šetří čas tím, že spojují všechny prvky potřebné pro návrh aplikace do jednoho balíčku: bloky, prvky, produktové karty (rozvržení se zástupnými symboly pro obsah, jako jsou obrázky nebo text), navigační lišty, domovské obrazovky s tlačítky nebo nabídkami atd. d.

Využijte předpřipravené designové systémy, které obsahují všechny komponenty, které potřebujete, a spojte je do dokonalého designu.

Vytvořte první verzi svého návrhu

Celým smyslem procesu návrhu je dělat chyby a poučit se z nich. Budete překvapeni, jak se může váš prvotní nápad lišit od konečného výsledku po několika iteracích, takže začněte na své aplikaci pracovat co nejdříve.

Nevymýšlejte ve své hlavě dokonalý obrázek, ale prostě to začněte dělat.

Proměňte svůj návrh v prototyp a získejte zpětnou vazbu

Jakmile máte návrh aplikace, je čas vytvořit prototyp. V tomto okamžiku se chcete ujistit, že tok vaší aplikace je správný a že váš návrh odpovídá účelu vašeho projektu.

Vytvoření prototypu vám také pomůže získat zpětnou vazbu od ostatních lidí, kteří nemusí být technicky zdatní. Když prezentujete své nápady osobně nebo používáte video, může být pro lidi obtížné poradit, co funguje a co ne, bez určité vizuální reprezentace.

Užitečné služby pro prototypování:

Obr je univerzální nástroj, který usnadňuje spolupráci a dostupnost pro UX designéry, vývojáře a všechny ostatní členy týmu.

Proto.io. t – poskytuje široký výběr komponent, šablon a také umožňuje vytvářet dynamické přechody mezi obrazovkami

zázrak – Marvel vám umožňuje jít nad rámec statických maket a zavádí interaktivitu, dynamické přechody a gesta, aby prototypy ožily a poskytly skutečný uživatelský zážitek pro každého, kdo je testuje.

Fáze – nástroj pro tvorbu prototypů mobilních aplikací od 0, má velké množství různě připravených šablon, hotových knihoven komponent a obrazovek.

Ukažte prototyp různým lidem a zeptejte se jich, co si o něm myslí. Pokud mohou aplikaci bez problémů používat, pak jste na návrhu aplikace odvedli dobrou práci.

Závěr

Po těchto krocích budete mít osvědčený designový prototyp vaší aplikace, se kterým můžete buď zajít za vývojáři, nebo jej implementovat sami pomocí no-code.