Je na čase náš grafický návrh smyšlené aplikace Vánočníček dokončit. Pokud nevíte o co jde, tak vězte že se chystám navázat na tento blogpost. Pokud tedy první díl nemáte projetý, nedoporučuji se pouštět do čtení tohoto druhého. Chyběli by Vám souvislosti, které byly již probrány a bez nich by jste nebyli schopni tento tutoriál dokončit.

Otevřete si tedy svůj původní pracovní soubor s aplikací Vánočníček a zkontrolujte si, že Vám z minulého dílu nic neuniklo a máte tedy hotové dva screeny (Splash a Home). V tomto druhém článku náš design aplikace dokončíme. Konkrétně tedy dokreslíme zbývající dva screeny a na závěr zkusíme naší aplikaci vložit do grafické makety telefonu a udělat jednoduchý promo obrázek.

Takže dle našeho wireframu přichází na řadu design Gifts screenu. Už z pohledu je jasné, že bude hodně vycházet z Home screenu. Takže zduplikujte skupinu "Screen: Home" a přejmenujte jí na "Screen: Gifts". V Action baru přibylo tlačítko domečku, který by nás měl po tapnutí vracet na Home screen. Zduplikujeme si tedy skupinu btn_plus a přejmenujeme jí na btn_home, odmažeme ikonku domečku a zbytek (separator) umístíme přesně dle obrázku. Nyní si nakreslíme ikonku domečku nebo pro ty málo tvořivé si stáhneme již hotovou odsud. Ikonku opět umístíme přesně do layoutu (viz. obrázek). A poté jí 2x zduplikujte a zkopírujte jednotlivé styly vrstev z ic_plus_focused a ic_plus_pressed. Protože, chceme zachovat stejné styly napříc celé aplikace.

Pokud jste tak ještě neudělali, odmažte textovou vrstvu "Vánočníček". A místo ní uděljete novou s obsahem "Manželka", ovšem nyní už systémovým písmem Droid Sans Bold a použijte velikost 24px. Přidejte vnější stín. Tento text se bude vypisovat programově. (Definici vnějšího stínu je potřeba říci programátorovi).

Nyní se přesunume do CONTENT, tedy do tvorby obsahu. Pokud jste si správně zduplikovali Home screen, ponechte si jen jednu položku a na té budeme pracovat. Smažte z ní ikonu Santa čapky a místo ní si umístěte ikonu dárku, pomoct si zase můžeme třeba zde. Z ikonky je potřeba odmazat odraz stejně jako bylo u ic_check. Dále jí přebarvíme na #ffd027 a přidáme vnější 1px bílý stín. Poté si vytvoříme novou textovou vrstvu a napíšeme "Ruční mixér z tržnice", použijte Droid Sans Regular, 22px, barva #b11e1e. Všiměte si velikost textové vrstvy, určete jí přesnou hranici, kam až může zasahovat. Také novou ikonu a textovou vrstvu je potřeba správně zarovnat. Pokud je to možné, řadíme vždy na stejnou vertikální úroveň jako již hotové vrstvy.

Vzhledem k tomu, že text v dárku může být dlouhý na více řádků, proto musíme změnit barevný přechod na pozadí položky. Mohli bychom ho nechat, ale u dlouhých textů by vypadal blbě. Jinak platí stále to, že po dlouhém tapnutí na položku se zobrazí kontextové menu s položkami edit a smazat. Po krátkém tapnutí se naše položka stane aktivní, což symbolizuje, že tento dárek na seznamu máme koupený. Přechod tedy smažte a nahraďte to dvěma tvary (obdelníky), kde jeden (480x94px) tvar reprezentuje pozadí a druhý dělíci linku (480x2px). Pozadí bude mít bílou barvu #FFFFFF a linka světle šedou #e5e5e5.

Máme hotovu jednu položku, kterou můžeme zduplikovat a zkusit si vytvořit text na dva řádky. Pozadí položky nyní bude mít velikost 480x132px, linka zůstává 2px. Dbejte na přesné zarovnání. Odsazení mezi řádky jsme použil 30px. S dárkem nehýbeme.

Nyní si položku několikrát zduplikujeme a podle wireframu přepíšeme jednotlivé položky. Také si vytvoříme jednu nebo dvě neaktivní položky, to jsou ty, které máme na seznamu, ale zatím jsme je nekoupili. Funkčně to máme vymyšlené tak, že po tapnutí na neaktivní položku (šedá ikonka a text) se jí změní barva a navíc se nám zařadí nahoru za poslední aktivní položku. A obráceně.

Opět nesmíme zapomenou na stav, kdy chceme změnit stav nějaké položky, tedy pressed a focused stav. Použijeme tedy na jedné položce stejný styl jako na Home screen, tedy vyplnění žlutou barvou #ffd027. Ale ejhle zjistíme, že stejnou barvou máme udělané aktivní ikonky a to nejde do sebe. Takže jim změníme barvu na stejnou jako je na Home screen počet koupených dárků. To dává smysl že?

Gift screen je hotový. Zbývá nám About screen, který vychází ze Splash screen, takže si ho zduplikujte. Po menší rozvaze jsem se rozhodl ho přepracovat oproti wireframu. Odmažte ic_check a text "seznam dárků". Ikonku dárku umístěte na spodek obrazu, tak aby vykukuvala jen jeho půlka.

A nyní přidáme texty. Všechny texty jsou jsou fontem Chaparral Pro Bold a je na ně aplikovaný stejný styl jako má Vánočníček. O aplikaci a slogan má velikost textu 30px a proklad mezi řádky je 44px. Jméno je velikostí 48px a emailová adresa 28px (proklad stejný).

No a je to. Vepsáním svého jména (moje nepište :)) do About screen jste úspěšně zakončili tento tutoriál. Nyní si múžete své plátno zvětšit na 1920x800px a pyšně se podívat na svojí práci.

Na začátku článku jsem slíbil jednoduchý postup, jak udělat pěkný promo obrázek naší aplikace. Takže se na to ještě v rychlosti podíváme. Potřebujete nějaký pěkný model mobilu (nejlépe aktuální model). Ke stažení dávám model Samsung Galaxy S pro rozlišení screenu 480x800, tedy ideální pro náš vzorový příklad. Je to PSD i PNG.

http://dl.dropbox.com/u/20904455/Blog/tut1_android/Samsung_Nexus_S%20-%20prom...

Soubor si otevřete a telefon jednou zduplikujte. Z našehho návrhu aplikace si vybereme dva screeny. Subjektivně vybírám vždy ty, o kterých si myslím, že jsou nejhezčí nebo z nich je jasně vidět smysl aplikace. Vybereme si tedy dva screeny a přeneseme je do promo obrázku. Umístíme je přesně na screen telefonu.

Jeden telefon si zmenšíme na 85% na výšku i šířku a umístíme za nezvětšený telefon. Takto dosáhneme jednoduchého vizuálního dojmu, že jsou telefony za sebou (perspektiva).

Pak už nám chybí jen doplnit nějaký text a promo obrázek tak dokončit. Jednotlivé parametry textu Vám již vypisovat nebudu, věřím že si s tím pohrajete sami. Pokud bychom měli již nadesignovanou ikonku aplikace, toto by bylo vhodné místo, kde bychom jí k promo textu přilepili. Jak vytvořit takovou aplikační ikonku pro Androida se můžeme podívat v nějakém dalším článku...

 

To je dnes vše.

Konec teorie. Dnes se podíváme na reálnou praxi toho, jak v grafickém programu zkreslit aplikaci pro Android. Čelý článek bude mít charakter tutorialu, jak při designování postupovat. Budu popisovat vlastní praxi, je možné že není 100% správná a najdou se designeři, kteří to dělají jinak. Způsobů, jak se do cíle dostat je několik. Dnes Vám ukážu svůj.

1.) Zadání

Dlouze jsme přemýšlel, jakou vzorovou aplikaci udělat a vzhledem k tomu, že se pozvolna blíží Vánoce, tak jsem se rozhodl pro takový jednoduchý Wishlist. Připravíme si design aplikace, která pokud by se zrealizovala, tak by sloužila pro vytvoření seznamu blízkých, kterým chceme o Vánocích nadělit dárky. A samozřejmě ke každé osobě pak možnost přidávat dárky, které si přeje a které již máme nakoupené. Vzhledem k tomu, že tutoriál budu psát v češtině, design aplikace (texty) bude také v češtině. Naše aplikace ponese také české jméno = Vánočníček. Jdeme na to.

2. Wireframe

Jak jsme si řekli v minulých dílech seriálu, základem úspěšného návrhu aplikace je dobrá příprava ve formě skicy nebo wireframu. Proto ani já tento krok nezanedbám a připravil jsem wireframe aplikace, kterou si dnes nadesignujeme v grafickém programu. Model jsem kreslil v Balsamiq Mockups. Design naší apliakce se bude skládat ze 4 screenů.

 

3.) Grafika

Návrh designu budu připravovat v grafickém programu Adobe Photoshop, nicméně pro samotnou tvorbu se dá použít i jiné programy (Adobe Fireworks, Gimp, Corel atd.) - jen jednotlivé funkce a nabídky budete mít jinde.

Takhle by měl vypadak dnešní výsledek:

Takže začínáme... Nejprve si vytvoříme nový dokument o rozměrech 480x800, protože budeme kreslit naší aplikaci v hdpi rozlišení.

A v něm si nastavíme patřičnou mřížku, kterou budeme v návrhu dodržovat. U Androida je výhodné využívat mřížku násobku 3. Vzhledem k tomu, že budeme dělat jednodušší návrh s méně detaily, uděláme si mřížku po 12 pixelech.

Vytvoříme si novou skupinu "Screen: Splash" a do ní umístíme naší první vrstu: Status bar. Pokud jí nemáte, můžete si jí stáhnout zde a umístit do dokumentu jako samostatnou vrstvu zarovnanou zcela nahoru. Bude nám zabírat 36px na výšku.

Splash screen je první obrazovka, která je vidět při zapnutí aplikace (loadovací obrazovka). U naší jednoduché aplikace, by snad ani nebyla potřeba, ale schválně jsem jí do tutoriálu zařadil, abychom si ukázali, jak na ní. Obecně se na ní nachází logo a motiv aplikace. Je to taky screen, který celou aplikaci prodává, proto musí být, jak se říká vymazlená...

V našem příkladu si vytvoříme nový tvar přes šířku obrazu a výškou 764px (36px zabírá status bar). Tento tvar vyplníme barvou #b80101 a ve stylech mu přidáme vzorek. který dávám ke stažení. Vzorku nastavte 20% krytí.

http://dl.dropbox.com/u/20904455/Blog/tut1_android/vanocnicek_pattern.pat

Duplikací tohoto tvaru si vytvoříme novou vrstvu, na které uděláme barevný přechod (#000000 -> #9e9e9e). Této vrstvě nastavíme krytí na 20%.

Nyní vytvoříme jednoduché logo naší aplikace, které se bude skládat pouze z textu Vánočníček. Font jsem použil Chaparral Pro Bold, pokud tento font nevlasníte, můžete si pomoct nějakým podobným. Prostrkávání nastavte na -30. Text je velký 75px a má následující styly:

Nyní potřebujeme použít něco jako hlavní motiv naší aplikace. Je zbytečné, abychom se s něčím do našeho příkladu složitě kreslili, proto použijememe již hotovou pěknou ikonku ve velikosti 512x512px, kterou si můžete stáhnout zde. Ikonu si umístěte do obrazu a zmenšete jí na 320x320px. Vertikálně jí zarovnejte na střed layoutu.

Dále si stejným fontem napíšeme text "seznam dárků". Styl zkopírujte z textu "Vánočníček" a pouze upravte barvu na #ffd027. Hodila by se nám ještě menší ikonka odškrtuné položky, proto si pomůžeme tady. Jen jí lehce upravíme - odstraníme odlesk. Uděláme tedy výběr, vytvoříme vrstvu výjmutím a tuto vrstu smažeme. Opět zkopírujeme a vložíme stejný styl vrstvy do této ikonky.

Vytvoříme si novou skupinu, do které vložíme text i ikonku a celou skupinu vycentrujeme s textem Vánočníček a ikonou dárku. A tím máme hotový splash screen.

Nyní se pustíme do návrhu Home screen. Abychom si práci urychlili, tak celou skupinu se Splash screenem zduplikujeme a přejmenujeme na "Screen: Home". Skupinu se Splash screenem si dáme jako neviditelnou. A nyní již budeme pracovat jen se skupinou "Screen: Home", ze které odmažeme ikonu dárku, odškrtnutí a text "seznam dárků". Naše logo Vánočníček si zmenšíme ze 75px na 36px. Vrstvy Přechod a BG+vzorek si zmenšíme na 480x72px -> vytvoříme z něho pozadí pro Action bar. A do volné plochy 480x692px vytvoříme nový tvar vyplněný barvou: #FFFFFF. Pro lepší pochopení jak to poskládat se podívejte na následující obrázek:

Logo horizontálně vycentrujeme s pozadím Action baru a přesně zarovnáme na 36px od kraje (3. kostka v mřížce). Zarovnávání je důležité, protože to pak nejen vizuálně bude dobře vypadat, ale může se podle toho řídit i případný programátor aplikace.

Podle wireframe patří ještě do actionbaru tlačítko pro přidání osoby do seznamu. Takže si vytvoříme novou vrstvu o velikosti 2x72px, vyplníme jí bílou barvou (#FFFFFF) a nastavíme jí krytí 50%. S jejím umístěním nám pomůže mřížka (viz obrázek). Dále si nakreslíme jednoduchou ikonku pluska, která se vlastně skládá ze 3 tvarů. Pokud si na to netroufáte, tak si jí můžete stáhnout zde. Ikonce dáme stejný styl vrstvy, jako má naše logo Vánočníček a překryjeme jí bílou barvou.

Abychom měli tlačítko kompletní, je potřeba mu dodělat ostatní stavy a to stav kdy je označené kurzorem (focused) a ve stavu zmáčknutém (pressed). Základem je, že stavy u všech tlačítek by měli být, pokud to je možné, stejným stylem, tak aby uživatel aplikace si byl jistý, co se mu děje pod rukama. Druhým pravidlem, kterým se řídím, pochází z reality: focused stav je něco co mám označené, něco co držím -> na něco ukazuji -> snažím se to zviditelnit. A pressed stav -> měním stav té věci -> něco zmáčknu -> promáčknu atd. Ikonku si tedy dvakrát zduplikujeme a doděláme oba stavy. Ikonka ve focused stavu se akorát změní barevně (použijeme stejnou barvu z textu "seznam dárků", tedy: #ffd027) a ve focused stavu vyměníme vnější stín za 1px bílý vnitřní stín.

Nyní se vrhneme na obsah, kde je potřeba vytvořit seznam (ListView) jednotlivých položek. Postupuji vždy tak, že si nejprve vytvořím všechny prvky jedné položky do jedné skupiny a tu následně rozkopíruji a upravím jen to, co je nezbytně nutné. Takže si nakreslíme nový tvar o velikosti 480x96px, umístíme ho přesně pod Action bar a uděláme mu přechod z #e5e5e5 do #f4f4f4.

Přemýšlel jsem jakou použít ikonku do seznamu, protože person/man se mi moc nehodila, vyštrachal jsem jednu hezkou santa čapku, takže jí v našem návrhu použijeme, stáhněte si jí zde ve velikosti 48x48px a zmenšete na 36x36px. Ikonku přesně umístěte tak, aby byla zarovnaná s textem Vánočníček, překryjte jí barvou #b11e1e a přidejte vržený stín 90°, 1px, #FFFFFF, 75%. Přidejte texty "Manželka" a počty dárků. Font již použijte systémový (Droid Sans Bold), 22px, barvy: červená: #b11e1e a žlutá #b68f03. A nakonec položku 4x rozkopírujeme a upravte texty. Výsledek našeho snažení si můžete prohlédnout na následujícím obrázku.

Abychom byli úplně spokojení, je potřeba zase definovat, jak bude vypadat pressed a focused stav u položky v seznamu. Protože se jedná o graficky nenáročnou appku, tak jsem zvolil pressed a focused stav udělat ve stejném a to překrytí barvou #ffd027. Tímto máme hotový další screen a jsme v půlce našeho tutoriálu.

Článek se pěkně natáhl, proto ho rozdělíme na dva díly. Pokud nebude něco jasného, reagujete do komentářů a já se pokusím na vše odpovědět.

Are you unhappy with the design of your mobile application? You are about to develop a new application and you lack the designer? Do you have an application, but you want prepare graphic resources for the next platform? With all this I'll help you.

1) Sketchs and wireframes
- accord to specification or customer research
- design user interfaces (UI)
- resolve application functionality for different mobile platforms

2) Design screens
- create a graphic design for each platform based on the input or WF
- do output from graphic program for client presentation

3) Platform resources
- cut the graphic resources for each platform
- create standard structure of resources for programmer

4) Documentations
- preserve the original graphic resources for future use
- graphic resources are re-editable

Are you interested in my services? Send me an email at feltl.michal@gmail.com. I will prepare (tentative) quote for your decision..

Looking for graphics for Android or iOS? Smartphone or tablet? You are from Czech Republic or from Los Angeles? You are company or individual developer? It does not matter. Contact me!

I look forward to future cooperation!

Dnes si probereme základní pilíř vývoje mobilní aplikace, bez kterého průměrná, a větší aplikace nemůže dobře fungovat. Důvodem této skutečnosti je to, že před samotným vývojem, ba i před samotným návrhem grafického designu je potřeba probrat několik aspektů, které ovlivní celý zrod aplikace. V tomto díle se podíváme, jak se skicuje, navrhuje drátěný model a jak se prototypuje mobilní aplikace.

Největší motivací se pustit do takových sérií článků je určitě ohlas případných zájemců o tyto informace. Tak se mi můžete ozvat buď přes komentáře nebo na email: feltl.michal@gmail.com.

A na závěr video na téma: papírového prototypování mobilní aplikace.

Vypadá to, že gug.tv potichu redesignoval :-) nebo se pletu? Současný design je mnohem příjemnější a hlavně přehlednější než předchozí verze (screen se mi nepovedlo sehnat).

Občas si si říkám, k sakru dlouho jsem nenapsal nic zajímavého na blog! Ale o čem psát? Co zajímá ty lidi, co tenhle blog čtou? Většina z nich jsou buď mí přátelé nebo lidé, kteří se zabývají podobnou činností jako já (grafici / designeři). Nejlepší je psát o aktuálním dění, co zrovna dělám a tak. Hmm to zrovna nemůžu, protože na většinu věcí mám podepsané NDAčko. Takže to si budete muset počkat, až se něco dokončí a vyrazí do světa (třeba se narodí nová appka a tak :)).

 

Nejednou se mi stalo, že za mnou přišel klient a ukázal mi práci jiného grafika. Zajímalo ho, jestli ta práce je dobrá. Ve většině případů dobrá nebyla. Kdyby ano, neptal by se. Co v té situaci dělat a jak se správně zachovat? Nikdy své kolegy nepomlouvejte. Je jedno jestli jde o grafiku, text a nebo kód. Nepomlouvejte, naučte se používat konstruktivní kritiku. 

 

Krok 1 - Studujte předloženou práci

Dílo svého kolegy zhodnoťte sám pro sebe. Odhadněte, kde jsou jeho slabiny a kde je naopak dobrý. Zkušený kodér pozná správnou sémantiku kódu. Zkušenější grafik odhalí laciné efekty. Buďte pozorní a práci prostudujte důkladně. Jedná-li se o rozsáhlejší projekt, udělejte si na papír (nebo do elektronického bloku) několik poznámek. Dílo studujte jako celek, snažte se pochopit myšlení tvůrce, vžijte se do jeho práce. Práci prostudujte i po částech. Brzo odhalíte, zda to byl člověk, který zkopíroval nějaký kód nebo postupoval pečlivě. Jestli použil defaultní nastavení kreslícího programu nebo si se stínem pohrál. Zkušené oko tohle pozná. 

 

Krok 2 - Hledejte zdroje

Nyní máte dostatečné množství podkladů. Je na čase zjistit, odkud se člověk inspiroval. Zkušený grafik zná větší množství tutoriálů, většinou pozná, odkud bral kolega inspiraci. Velmi jednoduché bude odhalit i zdroj použitých obrázků a ikonek. Kodér nebo copywriter to má složitější, musejí jít víc do hloubky anebo více využít Google . Zdroje si někam uložte, budou se Vám hodit ke kritice, na kterou Váš (možná Váš :) ) klient čeká.

 

Krok 3 - Získejte informace od klienta

Zeptejte se klienta kolik za přeloženou práci zaplatil. Jestliže Vám to neřekne, nevynucujte si odpověď. Zeptejte se ho na jméno tvůrce nebo studia. Není to důležité, ale s touto informací můžete lehce zjistit, kdo je autorem a porovnat jeho další práce. Uděláte si rychlý přehled o tom, koho vlastně hodnotíte. Určitě je dobré zjistit kolik měl Váš kolega na danou práci času. Je rozdíl, jestli člověk pracuje pod tlakem nebo nemusí nikam spěchat.. Připravte se na to, že Vám klient tyto informace nemusí prozrazovat, je to pouze na jeho uvážení. 

 

Krok 4 - Konstruktivně kritizujte 

A je to tady. Klient čeká na Vaší kritiku. Opírejte se o fakta. Jestliže máte zdroje, předložte je klientovi a informujte ho o tom, jakou techniku  Váš kolega použil. Pokud chcete hodnotit více emočně, vždy řekněte klientovi, že se jedná pouze o Vás názor a že nemusí být správný. Vysvětlete klientovi, že vycházíte ze své praxe a ze svých zkušeností.  Za svými názory si stůjte. Nesnažte se diskutovat. Kolegu nepomlouvejte a neshazujte. Vyvarujte se kritiku typu: "Je to naprostej amatér, nějakej středoškolák" apod. Vyjadřujte se věčně a k práci. Jednejte jako profík, s úctou a slušně.

 

Krok 5 - Nabídněte své služby

Je na čase vytáhnout Vaše trumfy. Pokud si myslíte, že dokážete klientovi předat lepší práci než kolega, nabídněte mu svoje služby. V tomto kroku je důležité klientovi vysvětlit, jakým stylem pracujete Vy (rozdílně než kolega). Přesvědčte ho o tom, že dokážete odvést lepší práci. Ukažte své portfolio (podobné práce s lepším výsledkem). Prozraďte mu svoje nápady. Jen mu je odhalte a nechte ho rozhodnout pro Vás. Pokud si myslíte, že na to nemáte, tak nic nenabízejte.  Mohlo by se Vám to vymstít a Vaší práci by pak kritizoval někdo jiný. Ocitli byste se na druhém břehu. A to nechcete. 

 

Máte vlastní zkušenosti? Těším se na ně v komentářích.