Tady je situace: jste vývojář a máte všechny potřebné nástroje ke kódování úžasné aplikace. Ale trochu jste se zasekli, co se týče designu. Jak bez zvládnutí standardních návrhářských nástrojů, jako je Adobe Photoshop, navrhnout mobilní aplikaci, která bude odrážet vašeho vnitřního génia? Jak vytvořit aplikaci, která bude vizuálně úžasná a zároveň se v ní uživatelé budou snadno orientovat?“

Nezoufejte, máme dobrou zprávu. Možná nemáte mnoho (nebo žádné) zkušenosti s UX/designem, ale k vytvoření vizuálně ohromujícího finálního projektu je nutně nepotřebujete. Tato řešení vám pomohou v procesu, jak navrhnout mobilní aplikaci – každé z nich tento slib splní, aniž byste museli zaplatit jediný cent.

Jak navrhnout mobilní aplikaci

Wireframing zahrnuje vytvoření minimálního produktu, který v podstatě představuje kostru pro návrh vaší aplikace. Pokud byste svou aplikaci přirovnali ke startupu, mohli byste tuto fázi návrhu označit jako minimální životaschopný produkt (koncept zpopularizovaný knihou The Lean Startup).

Wireframing je zásadní fází, když procházíte procesem, jak navrhnout mobilní aplikaci, protože vám umožňuje přemýšlet o struktuře odděleně od finálních prvků návrhu. Umožňuje vám také efektivně předat vaši koncepci všem relevantním stranám – spolupracovníkům, designérům nebo investorům -, aniž byste vy osobně potřebovali jakékoli zkušenosti s designem, abyste tyto myšlenky přesně vyjádřili.

Při tomto důležitém základním kroku, jak navrhnout mobilní aplikaci, vám mohou být nápomocny následující nástroje:

Tužka a papír

Pro ty, kteří opravdu nechtějí utrácet ani korunu, je vhodná stará dobrá spolehlivá tužka a papír, na které si můžete načrtnout své prvotní nápady na aplikaci jako hrubý návrh designu. I když někteří dávají přednost přímému přechodu do Photoshopu nebo prototypovacího nástroje, tato metoda může být ideální pro rychlé zachycení nápadů v jejich průběhu. Jako bonus navíc nepotřebujete žádné speciální školení ani zvládnutí nástroje, abyste z této metody wireframingu vytěžili maximum.

Android a/nebo iOS skicovací papír

Pro ty, kteří zjišťují, jak navrhnout mobilní aplikaci, existuje speciální nástroj wireframing, který má na mysli právě vás. Za rozumnou cenu zdarma si můžete stáhnout papíry s bodovou mřížkou, na kterých jsou vytištěny iPhony a iPady. Jedná se o ideální řešení návrhu pro vývojáře, kteří potřebují lepší vizualizaci, než jakou jim může poskytnout tužka a papír. Tento papír s náčrtky pro iOS je také ideální pro storyboarding nebo zobrazení různých stavů, jak bude vaše aplikace vypadat při používání.

Tento papír s náčrtky pro iOS obsahuje čáry mřížky pro všechny výchozí prvky uživatelského rozhraní na výše uvedených zařízeních iOS. U verze tohoto skicovacího papíru pro systém Android je na papíře vytištěno 8 modelů telefonů. Na rozdíl od papíru pro systém iOS (který má bodovou mřížku) však tento papír nemá žádné čáry.

MockFlow

Pokud hledáte trochu techničtější nástroj pro tvorbu drátěného modelu mobilní aplikace, zvažte něco jako MockFlow. MockFlow je online řešení pro tvorbu wireframů, které si flexibilně poradí s jakýmkoli typem designového projektu – ať už se jedná o mobilní nebo webovou aplikaci (nebo něco úplně jiného). K dispozici je základní bezplatná verze, která umožňuje pracovat na jednom projektu najednou, až 1 GB úložiště a dva členy týmu. Další funkce (více projektů, úložiště a členů týmu) můžete odemknout, když přejdete na placený plán, který začíná na 14 dolarech měsíčně.

WireframeApp je další možnost tvorby wireframů pomocí webové aplikace podobně jako MockFlow. Všechny plány jsou placené, ale často můžete najít cenově dostupnou doživotní nabídku (celkem pod 49 dolarů), pokud se přihlásíte k odběru jejich e-mailového zpravodaje nebo na AppSumo.

Prototypování

Prototypování je dalším krokem, jak navrhnout mobilní aplikaci poté, co jste dokončili wireframing. Smyslem této další fáze je vytvořit funkční verzi návrhu, podobnou tomu, jak chcete, aby vypadal finální projekt.

Následující nástroje se hodí k tomu, jak navrhnout mobilní aplikaci, aniž byste zaplatili desetikorunu, protože jsou všechny 100% zdarma!!!

Marvel

Marvel je webová aplikace, která je k dispozici také pro iOS a Android. Kromě možnosti navrhovat na jakémkoli zařízení, které vám nejvíce vyhovuje, umožňuje tento nástroj snadno proměnit vaše náčrty ve funkční prototypy. Kromě možnosti přidávat základní prvky návrhu můžete také návrhy propojovat a vytvářet tak tok. Aplikace Marvel umožňuje vytvářet interaktivní hotspoty a realistické přechody a můžete si vybrat akce, například zda chcete na návrh najet, kliknout, přejet prstem, štípnout a další. Díky spoustě integrací třetích stran si Marvel rozumí s mnoha dalšími nástroji, které již používáte, a se spolupracovníky ve vašem týmu.

InVision

InVision je podobný Marvelu, protože je to bezplatný nástroj pro tvorbu webových a mobilních prototypů. Je to ideální prototypovací nástroj pro týmy díky funkcím, které umožňují jednoduché komentování a spolupráci. Od mnoha podobných typů nástrojů jej odlišuje funkce správy verzí, která umožňuje v případě potřeby vrátit změny k předchozí verzi.

InVision používají inovativní společnosti jako Adobe, Zappos, AT&T, Dell a Sony, ale i rychle rostoucí startupy jako Prezi, Soundcloud a Evernote. Použití InVision vám nezaručí jejich úspěch, ale výhody asociace nemůžete popřít!“

Axure

Pro doplnění možností, jak navrhnout mobilní aplikaci bez placení desetikoruny, je zde možnost, která je placená, pokud ji používáte dlouhodobě, ale během 30denní zkušební doby je zcela zdarma. Axure umožňuje snadné prototypování aplikací díky vysoce funkčním návrhům (podobně jako přechody na Marvelu). Stejně jako ostatní možnosti v tomto článku poskytuje tento nástroj funkce pro snadnou týmovou spolupráci.

Proto.io

Proto.io se označuje za nástroj, který vám pomůže vytvořit „Prototypy, které působí reálně“. Pro vývojáře mobilních aplikací, kteří chtějí vytvořit realistický a funkční prototyp, to může být hudba pro vaše uši. Uživatelům dodávají několik knihoven uživatelského rozhraní, integrace s třetími stranami (s partnery, jako je Dropbox) a dokonce i uživatelské testování, které zajistí, že uživatelské prostředí bude po spuštění bezproblémové. Bezplatná zkušební verze vám umožní 15denní přístup s doživotním přístupem k omezeným funkcím nebo možnost upgradu na plně funkční účet s více projekty a funkcemi, který začíná na 24 dolarech měsíčně.

Pokud jste ještě nenašli dokonalý nástroj pro tvorbu drátěného modelu nebo prototypu, sdílí Developer Drive několik dalších obecných možností, které je třeba zvážit.

Jestliže je toto rozsah vašeho zájmu a schopností, pokud jde o návrh aplikace, budete si muset zaplatit někoho, kdo váš holý drátěný model nebo prototyp posune na vyšší úroveň. Ale přijít se základním plánem může být dobrý způsob, jak ušetřit čas a peníze předem. Čím lépe dokážete návrháři sdělit svou vizi, tím snadnější bude její realizace a tím méně peněz vyplýtváte na verze návrhu, které se neshodují s vaší vizí.

Vizuální design

Ať už hledáte návod, jak navrhnout aplikaci pro iPhone, nebo jak navrhnout aplikaci pro Android, tyto bezplatné nástroje vám pomohou vytvořit dokonalý design pro oba mobilní operační systémy.

Někdy vám trocha inspirace pomůže odstranit tvůrčí blok a zabřednutí do výukového programu pro návrh vám pomůže přijít na to, jak dokončit projekt zcela samostatně.

Laudable Apps

Laudable Apps je abare-boness webová stránka/galerie aplikací, která se zaměřuje speciálně na prezentaci krásných návrhů pro iOS 7. Nenajdete zde žádný text ani jiné rušivé prvky, pouze návrhy prezentované bez komentářů.

Když už přemýšlíte konkrétně o iOS, možná byste si také měli udělat čas na prostudování přísných pokynů pro odesílání aplikací do Apple App Store. Vzhledem k tomu, že mají přístup „bez výjimek“, můžete mít tyto pokyny na paměti při určování způsobu navrhování mobilní aplikace, což vám pomůže udělat věci správně hned napoprvé a z dlouhodobého hlediska ušetřit čas i peníze.

Vzorce pro Android

Ať už navrhujete výhradně pro zařízení se systémem Android, nebo vytváříte dvě verze své mobilní aplikace (s jednou pro Apple App Store), budete se chtít seznámit s tím, co je a co není součástí návrhu pro zařízení se systémem Android. Možná vás překvapí, že se rozhodně liší (a jsou podstatně méně přísné) než standardy návrhu aplikací pro iOS. Může být užitečné pročíst si materiály pro předkládání aplikací v obchodě Google Play, například tento kontrolní seznam pro spuštění.

Jako rychlokurz designu pro Android můžete také použít vzory pro Android. Na této webové stránce najdete knihovnu vzorů interakce se systémem Android, které můžete použít při vytváření návrhu. Vzory interakce jsou uspořádány podle typu aplikace a zahrnují akce, jako je navigace, oznámení a interakce s obrazovkou. Přestože tyto vzory mohou být pro začínajícího návrháře mobilních aplikací užitečné, měli byste je brát jako vodítko, ale ne jako absolutní pravidla.

Ikony

Přidání určitého rozměru vizuálním prvkům může pomoci vašemu prototypu, aby vypadal co nejblíže konečnému výstupu. Icons8 poskytuje knihovnu více než 53 800 ikon, které jsou k dispozici zcela zdarma. Kromě tohoto gigantického bezplatného zdroje byste se měli podívat také na tyto nástroje pro návrh uživatelského rozhraní, kde najdete různé způsoby vyhledávání a používání ikon, když se rozhodujete, jak navrhnout mobilní aplikaci.

Adobe Kuler

Adobe má mnoho zdrojů pro ty, kteří chtějí navrhnout mobilní aplikaci, od začátečnické až po pokročilou úroveň návrhu, ale jedním z nejjednodušších a nejužitečnějších je jejich nástroj pro barevné schéma. Kuler pomáhá designérům i nedesignérům vybírat barevná schémata na základě barevného kola a různých barevných pravidel: monochromatických, komplementárních, triádových atd. Barevné schéma můžete vytvořit z obrázku nebo si pro inspiraci prohlédnout předložená barevná schémata ostatních.

Mobile Design Inspiration

Podle CSSWinner je Mobile Design Inspiration nejhustší inspirační galerií pro design mobilních aplikací, kde jsou k dispozici inspirace pro design aplikací a jsou uspořádány speciálně pro iPhone, Android, Apple Watch a iPad. Nové návrhy jsou přidávány každý týden a jejich sekce „Creative Fields“ může poskytnout další inspiraci, pokud pracujete také na návrhu loga aplikace.

Tuts+

Pokud opravdu chcete vědět, jak navrhnout mobilní aplikaci, aniž byste zaplatili desetikorunu, měli byste zvážit investici svého času do získání nových dovedností. Naučit se navrhovat vlastní aplikaci místo toho, abyste si na to někoho najali, vám může ušetřit peníze A také získat cenné dovednosti, které můžete později zpeněžit.

Existuje několik webových stránek, které nabízejí vynikající online kurzy v oblasti designu (Treehouse je úžasný placený zdroj), ale Tuts+ nabízí spoustu hlubokých znalostí, a to zcela zdarma, aniž byste museli obětovat kvalitu. Kromě užitečných článků mají také další dlouhé zdroje o designu, například elektronické knihy.

Jak navrhnout mobilní aplikaci, aniž byste zaplatili desetník

Na návrh mobilní aplikace si opravdu nemusíte najímat designéra, zejména v raných fázích wireframingu a prototypování. Věnujte nějaký čas tomu, abyste svou aplikaci dostali tam, kde ji chcete mít na základní úrovni, a pak, i když si nakonec najmete designéra, nebude projekt tak hluboký (a drahý).

Pomocí těchto nástrojů pro návrh mobilních aplikací můžete zjistit, jak navrhnout mobilní aplikaci sami, a cestou získat několik nových dovedností. Představte si možnosti zaměstnání pro člověka, který dokáže prokázat své schopnosti při navrhování i vývoji aplikace!

Jaké tipy nebo nástroje byste přidali do tohoto seznamu, jak navrhnout mobilní aplikaci, aniž byste zaplatili desetikorunu? Rádi si poslechneme vaše názory! Napište své postřehy na @icons8 a my se s vámi podělíme o naše favority.

O autorovi
Maddy Osman miluje WordPress a psaní. Když není zrovna zaneprázdněna pomocí při organizaci WordCampu Denver, sdílí své nejlepší tipy pro obsahový marketing/SEO na svém blogu www.the-blogsmith.com. Sledujte její nejnovější články napříč webem na Twitteru: MaddyOsman.

.