Posterous theme by Cory Watilo

Filed under: mobile design

You are looking for a mobile apps designer? Here I am!

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!

Články o tvorbě mobilního designu? Ano/ne?

V současné době v češtině neexistuje žádná příručka nebo nějaké návody / tutoriály, jak na tvorbu grafického designu pro mobilní aplikace (nebo i pro mobilní weby). Za posledního půl roku jsem nabyl nějaké nové zkušenosti při tvorbě mobilního designu a tak jsem přemýšlel, že bych se s nimi podělil v rámci několika článků na tomto blogu. A rozšířil tak třeba podvědomí tohoto nového směru. Nejvíce zkušeností jsem  získal asi se systémem Android, takže tím bych začal a po něm třeba další iOS nebo mobilní web.

Druhý důvod je, že bych chtěl vyvrátit některé komentáře typu: "designéři mobilních aplikací nejsou potřeba - je to práce programátora (vývojáře).

Sestavil jsem takovou kostru první serie:

Tvoříme design pro mobilní aplikace na Android

1.) Úvod do designu Android aplikací
2.) Android GUI a jeho historie (1.0 - 3.1)
3.) Různé density a rozlišení
4.) UI Guidelines, seznam prvků
5.) Tvorba skic a prototypování mobilní aplikace
6.) Tvorba layoutu v grafickém programu
7.) Řezání grafiky a struktura resources
8.) Draw 9-patch tool
9.) Rady na závěr

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.

You must try!

Techsquere láká vývojáře mobilních her a aplikací

Zachytil jsem post na Webtrhu o vzniku nového co-workingového prostoru Techsquere, což mi nedalo a šel jsem nasát více informací na oficiální web projektu.

Techsquere sídlí v Praze, kousek od zastávky metra - Pražské povstání. Webové stránky na první pohled vypadají jako profesionální práce. Nicméně v Chrome mi nechodilo vyhlazování písma a hlavní menu je taková hříčka "chyť si odkaz". Jinak na samotném webu se dají najít všechny potřebné informace kolem samotného pracoviště. Což je určitě plus.

Co je Techsquere?
TechSquare je v Česku ojedinělý projekt tzv. business akcelerátoru pro mladé IT a technologické firmy, ale nejen pro ně. TechSquare unikátně spojuje originální, moderní kancelářský prostor s poskytováním dalších profesionálních služeb. Akcelerátor TechSquare má kapacitu 90 - 120 pracovních míst na 1036 m2. zdroj: http://www.techsquare.cz/cs/o-techsquare/o-projektu

Techsquere

To, co mě (mile) překvapilo, jsou první klienti centra. Jedná se o tři české firmy, které svým způsobem pronikají do vývoje mobilních aplikací. Pojďme se na ně podívat:

Credo Ventures je venture kapitálová společnost. Největším projektem společnosti je vytvoření venture kapitálového fondu Credo Ventures Stage 1, který investuje od roku 2010 do mladých začínajících firem převážně z oblastí IT a mobilních technologií.

eMan je vývojářská firma v oblasti mobilní komunikace a web 2.0. Jejich zatím největším (zatím :) ) úspěchem je aplikace POJIŠŤOVNA, pro reálnou pomoc při nehodě, pro její nahlášení a snadnou likvidaci, vyvinutá pro Českou pojišťovnu a.s.

Lonely Sock je ambiciozní herní studio zaměřené na vývoj mobilních sociálních her. Cílí na mezinárodní trhy, ale nezapomínají, odkud pochází, proto i její první produkt obsahuje českou lokalizaci. Lonely Sock all-star team sa skladá z veteránů herního byznysu ze zkušenostmi z Disney Mobile, Electronic Arts a dalších globálních značek.

Zajímavé že? Každá firma se zabývá tak trochu něčím jiným, ale jsou ze stejného specifického oboru. Že by v Praze vyrostl nový inkubátor na raketový vývoj mobilních her a aplikací...?

Plánujete mobilní aplikaci? A nevíte, jak začít?

Dneska jsem narazil na hezký článek od Emily Smith, která pracuje jako informační architekt a UI konzultant pro Apple. Článek pojednává o zamyšlení nad tvorbou mobilní aplikace. Proč a jak bychom měli postupovat při první myšlence nad samotnou tvorbou. Z článku jsem se pokusil vytahat ty největší moudra a přidal i něco ze svých zkušeností. Jedná se spíš o takový souhrn otázek k zamyšlení. Snad to bude přínosem. Samozřejmě ponechávám Emily Smith jako zdroj.

Položte si strategické otázky:
1.) Existují již nějaké aplikace, které jsou podobné tomu Vašemu nápadu?
2.) Proč by lidé měli používat právě tu Vaší aplikaci?
3.) Vývoj aplikace je dost náročný? Stojí Vám to za to? Máte na to čas?
4.) jste připraven obětovat čas a peníze na uvedení aplikace na trh?
5.) Jakým způsobem budete aplikaci uvádět na trh prodávat?

Položte si specifické otázky:
1.) Jaké potřeby nebo úkoly uživatelů splní Vaše aplikace?
2.) Zkuste se zamyslet nad hierarchii uvažované aplikace.. dává smysl?
3.) Sepište si seznam funkcí aplikace. Je už konečný? Nebojte se vypsat vše!
4.) Jakým stylem budete aplikaci testovat? Budete potřebovat testery?

Nechte se inspirovat
1.) Inspirujte se od úspěšných. Inovace je evoluční proces.
2.) Stáhněte si a nainstalujte konkureční aplikace. Hledejte v nich slabiny.
3.) Prohlížejte si screenshoty. např: http://pttrns.com/, http://mobile-patterns.com

Skicování / Wireframing
1.) Než se ponoříte do samotné tvorby, udělejte si skicy aplikace.
2.) Nástrojů na skicování je spousta:

3. Vytvořte si workflow aplikace (logický diagram sledu obrazovek)
4.) Ke skicám se vracejte i v průběhu vývoje a updatujte je

 

Pozor! Přichází Friend Stream 2!

Kéž by to byla pravda. :-)

Friend Stream je aplikace na OS Android. Pomocí zobrazovacího widgetu můžete sledovat příspěvky z Facebooku a Twitteru. Mám tuhle aplikaci rád, ale má několik nedostatků, proto jsem se rozhodl, že jí zkusím malinko redesignovat. 

Friendstream2

obrázek 1 - můj design, dvě pozadí

Social_widget

obrázek 2 - oficiální vzhled aplikace

Největší problém z hlediska uživatelského rozhraní dělá jasný pohled o tom, co se v aplikaci stalo. Kolik přibylo nových příspěvků od poslední chvíle, než jsem si aplikaci aktualizoval. Nastává problém ten, že musím scrollovat po widgetu a vyhledávat... Toto řeším jednoduchými počítadly na jednotlivé sociální sítě, které jsou umístěné ve footeru widgetu. Pokud jsou příspěvky zobrazeny zlatým písmem - tolik nových příspěvků přibylo od poslední aktualizace.

Druhý závažný problém, který stávající Friend Stream má, že pokud po aktualizaci přibyly nové příspěvky, tak já nevím, které to jsou. Tento problém řeším tím, že každý příspěvek je označen ikonkou sociální sítě, pokud je zobrazena zlatě, je to nový příspěvek od mé poslední aktualizace. V případě, že je bílý je to příspěvek, který jsem již četl. Prosté že? A co dál? Pak už jen kosmetické úpravy, jako zobrazování komentářů, libí se mi a ikonky pro nastavení aplikace.

Líbí se Vám?

Jak by mohla vypadat aplikace Autoškola na iPhone?

Přemýšlel jsem nad mobilními aplikacemi, které na českém trhu chybí a do spárů jsem si tentokrát vzal grafický návrh pro Autoškolu na iPhone.

Autoskola

Aplikace by disponovala základními teoretickými testy, které by se náhodně generovaly, dále pak všechny otázky z techniky a nakonec možná nějakou tabulku na zapisování úspěchů a neúspěchů. Praktická zkouška by nám po tréninku na mobilu asi moc nedala. Ale promsrkat si teorii na autobusové zastávce. No proč ne.

Nechce to někdo naprogramovat? Design dodám a jdeme na 50 na 50 :-).

Grafický návrh pro mobilní aplikaci Česká kuchařka

Dokončil jsem další mobilní design, který nesu na trh pro případné zájemce. Tentokrát se jedná o grafický design pro iPhone. Mým cílem bylo vytvořit návrh na mobilní kuchařku, která by uměla něco víc, než ostatní aplikace na současném trhu. Respektive nechtěl jsem jít cestou jako ostatní, kde si lidé vybírají suroviny, které mají doma a poté jim aplikace vyplivne recepty.

Ceska_kucharka

Česká kuchařka by byla jiná. Lidé by měli k dispozici databázi receptů, setříděných dle kategorií (vhodné pro současné servery, které již recepty sbírají), ve které by se snadno vyhledávalo. Navíc by umožňovala si recepty přidávat mezi své oblíbené, psát si do knihy nové a případně je i publikovat pro ostatní.

V případě, že by měl někdo zájem na odprodej, nechť se mi ozve na email: feltl.michal@gmail.com. Grafický design je v PSD a je možné se domluvit na úpravách či dodělaní dalších screenu.

 

Design pro Android aplikace (czechbank)

V tomto roce bych se chtěl více zaměřit na tvorbu grafického designu pro mobilní aplikace. Důvodem je rozšíření a získání dalších zkušeností v této tvorbě a hlavně útěk z webového stereotypu. Mezi další důvody se řadí poptávka po tomto designu. A i sám cítím, že na českém trhu je prostor pro uplatnění tohoto specifického grafického designu. Jsem vlastníkem smartphonu HTC Desire s OS Android, tudíž bych se chtěl zaměřit hlavně na tuto platformu. V budoucnu bych se rád spojil s vývojářem nebo se celým studiem, které tvoří mobilní aplikace a chybí jim mobilní designer. V případě, že takového člověka hledáte, zkuste mě kontaktovat na můj email (feltl.michal@gmail.com), rád si o případné spolupráci promluvím.

czechbank - android aplikace

00-all

Jedná se o grafický design pro mobilní aplikaci neexistující banky czechbank (mobilní bankovnictví). Prezentace obsahuje 8 obrazovek, ve skutečnosti by jich aplikace měla asi dvojnásobek (nesli by se v podobném duchu). Grafický design je vytvořen pro rozlišení 800x480px (je možné ho předělat i pro menší). Aplikace by měla sloužit pro přístup do konkrétní banky skrz mobilní telefon s operačním systémem Android. Zabezpečení by mohlo fungovat na bázi zabezpečovacího kódu, který by se zadával při spuštění aplikace. Po zadání kódu by byl přístup do mobilní banky volný (konfigurace účtu by byla realizovaná skrz nastavení aplikace). Mobilní aplikace by měla umožňovat stejné nebo velmi podobné funkce jako internetové bankovnictví (co nejširší možnost správy bankovních účtů, kreditních karet a úvěrů).

Pokud budete mít zájem o koupi tohoto grafického designu, tak mě kontaktujte na email: feltl.michal@gmail.com. Prezentované obrazovky jsou uložené v PSD v logicky řazených vrstvách. Samozřejmě je možné domluvit se na úpravách, případně kompletní překreslení na jiný produkt.

Těšte se na další.