5 kroků, jak z nuly vytvořit funkční aplikaci
6 min čtení„Čím dříve spustíte Váš projekt, tím dříve vyděláte peníze. O nic jiného přeci nejde.“
Zdá se vám, že spuštění nové aplikace je pro Vás finančně nedosažitelnou věcí? Že je za tím příliš mnoho složitých aktivit, které nebudete schopni zprocesovat? Pojdme se společně podívat na to, jak může vypadat efektivní vývojový proces od nuly až ke spuštění funkční aplikace.
Na konci článku zjistíte, že spuštění Vaší mobilní či webové aplikace může mít hladký proces a být i finančně efektivní. A že vlastně nezáleží, jestli vyvíjíte aplikaci pro android, iphone nebo třeba windows. Ve všech přípradech probíhá vyvíjení aplikace na míru podobně.
Celé vytváření aplikace lze shrnout do 5 jednoduchých kroků. Každý z nich má svůj cíl, ale celkově následují ten jeden hlavní – ušetřit Vám peníze a dostat investované peníze zpět co nejrychleji.
5 kroků vývoje aplikace
- Cíl: specifikovat Vaší myšlenku a MVP (minimum viable product)
- Cíl: vytvořit hlavní myšlenku Vaší aplikace, která bude jasná všem zainteresovaným účastníkům.
- Cíl: vytvořit si přesnou vizualizaci, jak by měla aplikace vypadat.
- Cíl: vytvořit uživatelské prostředí, které bude prozákaznické .
- Cíl: Odstartujte svůj projekt bez chyb a v co nejkratší době.
1. Vytvoření základní myšlenky
Cíl je jednoduchý. Základem je spolupráce mezi nositelem myšlenky a vývojovým týmem – oba musí být na stejné straně barikády.
Z osobních zkušeností Vám doporučuji se v průběhu vývoje aplikace zaměřit na následující 3 body:
- Specifikovat si MVP – „minimum viable product“ pro vstup na trh,
- stanovit si střednědobou vizi (1 rok),
- stanovit si dlouhodobou vizi (3-5 let).
Poznámka: Buďte si opravdu jistí, že Váš projekt má jasně definovanou přidanou hodnotu, kterou přinese svým zákazníkům.
S vytvořením myšlenky Vám pomůže článek: Jak vymyslet úspěšnou aplikaci? Položte si těchto 5 otázek
Dlouhodobá vize (3–5 let)
Prvním krokem je stanovení si Vaší dlouhodobé vize. Ta Vám pomůže určit základní směr, kterým se vydat a vybrat tak správné technologie pro vývoj. Díky tomu budete vědět, kolik členů vývojářského týmu budete v dlouhodobém horizontu potřebovat a jaké schopnosti mají mít: programování pro iOS aplikace, pro Android nebo stačí tým webových vývojářů?
Jasná vize také pomáhá Vašim specialistům vyhodnotit, jakou databázi použijete, v jakém časovém horizontu se budou jednoltivé části aplikace vyvíjet, apod. Podobných technických věcí je spousta, ale stačí nad tím popřemýšlet a Vaši vizi sdílet s celým týmem. Oni Vám poté pomohou vyhodnotit zvolení správné technologie.
Střednědobá vize (1 rok)
V průběhu tvorby střednědobé vize byste měli znát odpověďi na následující tři otázky:
- Na co se zaměříme v prvním roce?
- Jak rychlý bude progres?
- Jak bude financovaný celý byznys a vývoj aplikace?
Dokázali jste si odpovědět na všechny stanovené otázky? Super!
Odpovědi Vám totiž pomohou alokovat správné množství zdrojů na začátku. Největší náklady Vás budou pravděpodobně čekat na začátku vývoje aplikace. Zároveň s přihlédnutím k dlouhodobé vizi si můžete připravit data a backend pro API integrace do mobilních aplikací nebo pro integraci třetích stran, které budou tvořeny až v delším časovém horizontu.
Při plánování vám přijdou vhod informace o nákladech. Shrnuli jsme je do článků Kolik stojí vývoj aplikace a na čem cena závisí? a Kolik stojí provoz mobilní aplikace?
Minimum Viable Product – MVP (Při spuštění)
MVP je rozhodující pro úspěšný start Vašeho projektu. Proč?
- Robustnost a počet funkcionalit určuje délku vývoje před vstupem aplikace na trh. Jedná se o fázi, kdy do rozpočtu nepřicházejí žádné příjmy a Vy z něj pouze čerpáte finanční prostředky.
- Na druhou stranu, pokud Vaše aplikace nebude disponovat dostatečným množstvím důležitých funkcionalit může se stát, že ztratíte důvěru svých uživatelů.
Mnoho společnosti využívá MVP k několika zásadním krokům:
- Získání zpětných vazeb z trhu,
- nalezení tzv. early adopters (první zákazníků Vaší služby) - obvykle to jsou fanoušci, kteří sdílí vaši vizi, fandí vám a odpustí drobné nedostatky,
- otestování marketingových kanálů.
Vaše MVP můžete také konzultovat s lidmi, kteří nemají přímé spojení s Vaší společností / Vaším produktem. Mohou to být respondenti z uživatelského výzkumu, UX návrháři a další. Tito lidé Vám mohou pomoci přinést nezaujatý pohled, silnou zpětnou vazbu i nové zkušenosti.
Jak správně stanovit MVP? Přečtěte si MVP při vývoji aplikací: Jak ověřit nápad bez zbytečných ztrát
Jedním z následujících kroků je tvorba skic v průběhu idealizace webové stránky.
2. Koncept skicování
Ruční skicování je fantastickou věcí, která Vám pomůže přenést myšlenky do papírové podoby. Dobrá UX skica dokáže spojit celý tým. Pokud své myšlenky dokážete přenést na papír, budou si všichni schopni aplikaci živě představit. A to je klíčový moment.
Jste schopni na základě daných obrázků porozumět účelu webové stránky nebo aplikace?
(https://www.getharvest.com/apps-and-integrations/iphone)
Mé osobní doporučení je i přidání krátkých poznámek, které budou sloužit k dovysvětlení daných funkcionalit nejen pro majitele firmy, ale i lidem, kteří se nepohybují ve vývojářském světě.
Není důležité mít vše perfektně znázorněno. V této fázi je klíčové, aby všichni v týmu dokázali porozumět tomu, jak daná aplikace bude fungovat.
Chcete víc příkladů? Na následujícím odkaze můžete nalézt 40 briliantních ukázek skic.
Pokud se rozhodnete tvořit skicy bude dobré, když si stanovíte určitý harmonogram. Já vždy doporučuji mít minimálně tři dny. Jeden den na kreativitu v rámci kreslení celého konceptu webové nebo mobilní aplikace. Poté následuje den volna, kde si myšlenka správně „sedne“ a další den se vrhněte znovu na zhodnocení této myšlenky. Tato fáze je perfektní pro případné úpravy.
Jaká je hlavní výhoda skic? Šetří náklady.
Jakákoliv změna a úprava nestojí téměr nic a přitom již máte něco reálného od čeho se můžete odpíchnout. Ujasnění si myšlenky nyní vám ušetří desítky až stovky tisíc korun oproti přeprogramovávání hotového díla.
V momentě, kdy si budete jisti hlavním konceptem celé mobilní či webové aplikace, je čas jít do dalšího kroku.
Tip: Pokud Vás skicy zaujaly a neumíte si představit je kreslit, doporučuji zakoupit kurzy na Udemy nebo se nám ozvěte a my Vám rádi pomůžeme..
Poznámka: tvorba skic je nejčastější formou, jak mohou majitelé společnosti znázornit své myšlenky pro celý svůj tým.
3. Wireframy
Wireframy jsou klasicky tvořeny UX designérem jako šablony pro grafické designéry. Dobré wireframy jsou detailnější než skicy, které jsme si představily v předchozím kroku.
Proč je wireframe aplikace tolik důležitý, a to speciálně pro větší projekty?
- Wireframy pomáhají redukovat celkové náklady na projekt. V průběhu jejich tvorby můžete jednoduše aplikovat nebo měnit interakce ve Vaší aplikaci s nulovým rozpočtem na grafický design, kódování a programování.
- Čistá vizualizace všech elementů a obrazovek. Je mnohem jednodušší specifikovat určitou akci vizuálně pomocí wireframů než pouhým slovním popsáním.
- Wireframy Vás chrání před nežádoucími jevy. Zažili jste někdy nedorozumění s webovým designérem nebo vývojářem softwaru? Správné wireframy pomáhají k jednoduššímu řešení problému.
- Můžete je začít testovat s Vaší cílovou skupinou. Čím dříve získáte feedback od potenciálních klientů, tím dříve můžete jejich poznatky implementovat a ušetřit tak další peníze za pozdější změny.
Nejlepším řešením při tvorbě wireframů je nechat je tvořit UX designéry a konzultovat je přímo s majitelem. Minimalizuje se tak nedorozumění v oblasti funkcionalit a účelu aplikace.
V několika případech, jako jsou například malé projekty, můžete tvorbu wireframů přeskočit a rovnou se pustit do grafického designu. Často ale záleží na kvalitě a jasnosti vytvořených skic. Berte v úvahu skutečnost, že každá provedená změna v grafickém návrhu je mnohem dražší než změna, která je provedena v průběhu tvorby skic a wireframů.
Pro weby, kde není potřeba grafika na míru, lze využít z desítek tisíc již vytvořených grafických šablon.
Poznámka: Wireframy jsou vytvářeny speciálně pro grafické designéry. Cílem je zajistit, aby celá cesta uživatele v aplikaci byla intuitivní.
4. Grafický design aplikace
Primárním cílem grafických designerů je zachytit uživatelskou pozornost, emočně na ni zapůsobit a podporovat příjemnou uživatelskou zkušenost.
Druhým cílem designerů je vytvořit konstantní vizuál, který se bude prolínat napříč celým webem nebo aplikací.
Airbnb je výborným příkladem toho, jak budovat vizuální identitu. Na následujícím obrázku můžete vidět, jeden z příkladů.
Dbejte na to, aby velikost písma byla dostatečná, tedy opravdu čitelná a tlačítka jasně vyjadřovaly co se stane, když na ně uživatel klikne. Nezapomeňte na vytváření dostatečného prostoru mezi jednotlivými prvky (a to zejména v mobilním rozlišení) - někteří uživatelé mohou disponovat opravdu velkými prsty.
Jaké jsou další tipy pro design?
- Ilustrujte aktivní i neaktivní elementy a rozdíly mezi nimi.
- Ilustrujte pohybové efekty, a to včetně jejich změn po interakci.
- Ilustrujte akční tlačítka, která budou mít stejný styl, aby uživatelé vždy věděli, že je daný prvek klikatelný.
- Zůstaňte u jednoho grafického stylu a nemixujte ho s 2D nebo 3D designem (pokud za tím není speciální význam).
- Pokud využíváte stínování, nezapomeňte ho poté využít v rámci celé mobilní nebo webové aplikace.
A máme za sebou design. Pojďme se teď společně vrhnout na kódování!
Tip: Více o vizuální hiearchii naleznete na interaction design foundation.
Poznámka: Grafický design tvoříte primárně pro kodéry a vývojáře, kteří potřebují vědět, co mají dělat.
5. Kódování a programování
Na začátku každého projektu je nutné nakódovat celý design. Není nutné mít hned při spuštění všechny funkce vyvinuty na 100%. Jak jsme se již bavili, v první části je důležité si odprioritizovat, co pro spuštění chcete mít hotovo (MVP - minimum viable product).
Proč? Pokud nebudete příliš lpět na programování nepodstatných drobností a zaměříte se na vývoj nejdůležitějších funkcí, můžete spustit produkt rychleji. Velmi rychle získáte zpětnou vazbu od uživatelů a tyto znalosti mohou posloužit k lepšímu směřování Vašeho produktu i celého vývoje.
Nezapomeňte:
„Čím rychleji spustíte Váš projekt, tím rychleji vyděláte peníze. Nic více v tom není.“
Vývoj mobilních aplikací můžete urychlit a také zlevnit multiplatformním vývojem. Co to je a proč byste jej měli zvážit jsme sepsali do článku Proč vyvíjet mobilní aplikaci v React Native
Nyní – po spuštění projektu – začíná nikdy nekončící cyklus:
- UX, UI, marketing a sales testování,
- UX, UI, marketing a sales optimalizace,
- probíhající vývoj + přidání dalších funkcí.
Více se dočtete v dalších článcích anebo nám napište a společně se vrhneme na vývoj té nejlepší mobilní či webové aplikace pro Váš produkt.
Pokračujte ve čtení:
Domluvte si nezávaznou konzultaci
Ondřej Lang
Managing Partner & Growth Hacker
Finalista Startupper of the Year 2019. Vítěz cen SDGs ČR 2019 s Mavimi. Vítěz Masters Gate CZ 2017 v kategorii malé a střední eshopy s Ráj kování. Ondřej konzultuje digitální projekty. Dívá se na věci z různých pohledů a perspektiv. Jeho doporučení firmám přináší nárůsty obratu o desítky %. Pokud chcete růst, pište na ondrej@creativehandles.com.