Martin Janek (Art Director SCR) - Design Mobilných aplikácií

About SCR gRoupSCR is a progressive and rapidly growing group of companies that started its operation in 2006. Provides comprehensive and integrated solutions in design, online marketing and the most advanced technology symbiosis specializations of IT and market-ing segment. In a short time we have successfully fulfilled the requirements of clients not only in Slovak, Czech and Central European field but also in USA, UK, Ireland and Saudi Arabia. Today company employs 40 people (plus 10 freelancers) that guarantees our cli-ents with reliable and stable partner.

SCR gRAphiCS S.R.o.

Creative graphic design studio focused on providing high-end design solutions in the field of graphic design, 3D design, motion design and audio design.

www.scr-graphics.sk

SCR inteRACtive S.R.o.

Full-service digital agency focused on providing high-end online solutions for integrating digital marketing strategies, creativity, technology and media.

www.scr-interactive.sk

SCR teChnologieS S.R.o.

IT company focused on developing infor-mation systems, mobile technologies, web / intranet portals, providing Web hosting and system services under the SLA.

www.scr-technologies.sk

SCR GRoup iS a CeRtified quality manaGement SyStem iSo 9001

ClientS

Mobilný web Zlatý Bažant

iPhone aplikácia Bažant Kinematograf

iPad aplikácia Zlatý Bažant

iPhone aplikácia TA3

iPhone aplikácia SKGA

iPhone aplikácia Corgoň

iPad aplikácia Corgoň

iPad CRM aplikácia Red Bull

Mobilný web pelikan.sk

iPhone aplikácia “Moje O2“

iPhone aplikácia Rádia Expres

Poslanie grafického dizajnuNaplnenie hodnôt remesla napomáha naplneniu kvalít diela

Dizajn je obal funkcie.Obal nesmie funkciu potláčať, ale ju podporovať.

Grafický dizajn obaľuje informáciu.Informáciu nesmie potláčať, ale ju podporovať.

charakter zariadeníDotykové mobilné zariadenia majú svoje špecifiká používania:

• Tablet je niečo medzi smartfónom a laptopom• Po screene sa prvky častejšie posúvajú, menej sa kliká na odkazy• Primárne sú to zariadenia na prezeranie obsahu• Keď vytvárať obsah, tak multimédiá - foto / video / krátke texty.

Toto je zároveň užívateľsky preferovaný content• Sú prepojené s webovým obsahom• Fungujú ako súčasť cloudu

WireframeNakreslite si svoju aplikáciu najprv do schémy

Tiež používaný pojem “skica”.

Ide o návrh definujúci funkciu a obsah aplikácie pre lepšie pochopenie a efektívnejší návrh.

Typy wireframov:• Textový (textový popis)• Stručný či blokový • Podrobný (img + real text)

Následná grafika zachováva prvky v aplikácii, ale od WF sa môže líšiť veľkosťou a poňatím jednotlivých prvkov.

GUI kitPre nákres wireframu.

guiGuide user interface - prvky skladačky

Ak je konštrukcia webov Lego, tak návrhy mobilných aplikácií sú Duplo.

Layout aplikácie je definovaný niekoľkými systémovo-funkčnými prvkami, ktoré sa na seba skladajú.

Tieto prvky môžu byť systémové alebo brandované.

// Aktuálne GUI pre jednotlivé OS sú free stiahnuteľné z webu. http://www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design

brandovaná skladačkaObrandované GUI - základný princíp

Tento princíp využíva prvky GUI, ktoré sú obsiahnuté aj vo vývojových prostrediach. Tu sa dajú tieto prvky jednoduchým spôsobom štýlovať.

Nakoľko je rozmer screenu malý, vzniklo niekoľko základných usporiadaní, ktoré sú odladené a užívateľsky akceptované (napríklad systém článkov a detail článku).

martin, Pusti video!

os human interface guidelinesPredpísané alebo doporučené rozmery

Výrobcovia doporučujú pre jednotlivé prvky user interface rozmery, ktoré sú pre ich zariadenia “optimálne“.

URL linky:

• developer.apple.com/library/ios/#documentation/UserExperience/ Conceptual/MobileHIG

• developer.android.com/design

simPlify.simPlify.simPlify.Menej je niekedy viac

Aktuálny a správny trend online grafického dizajnu!

Pre tento prístup je charakteristické:

• Jednoduchá skladba layoutov• Silná kompozícia, grid• Vynechávanie “grafických barličiek“• “White space“ okolo prvkov• Dôraz na content

Fantasy Interactive (www.f-i.com)Ich prístup je ikonický

Pixel PerfectZameranie na perfektné spracovanie detailu

Toto platí pre technickú ako aj kreatívnu časť práce designéra.

• Snažte sa mať všetky prvky kreslené ako vektorové• Všetky hrany prvkov sú zarovnávané na pixle (využívanie funkcie shape layer)• Prevod normal/retina display bude korektný vtedy, keď budú mať všetky prvky

zarovnanie na párny pixel

brandZnačka je to, čo vám zostane, keď vám zhorí továreň. // david ogilvy

Brand je niečo viac ako len kvalitné logo.Najlepšie značky útočia na všetky zmysly.Čím väčšia emočná väzba, tým väčšia zapamätateľnosť.

Nebojte sa využitia krátkeho videa pri spúšťaní aplikácie, charakteristickej fareb-nej schémy, typografie, ...

Nikdy to však nerobte na úkor použiteľnosti app.

Red BullZnačka ktorá tvorí obrovské množstvo contentu

štylizáciaVyužívanie podkladových plôch pre formulovanie vizuálneho prejavu

V zásade platí, že tmavé layouty sú vhodné na štýlovejšie prezentácie, svetlý podklad na informačné riešenia.

Svetlé layouty majú vyššiu čitateľnosť aj čítanosť.

Je však možné tento princíp v jednej aplikácii vhodne striedať.

Rozdelenie contentuContent na bielom, galéria a menu na tmavom

farbyJeden zo základných nástrojov grafického dizajnu

Všeobecné pravidlá:

• Zabezpečiť kontrast farieb• Primerané množstvo a tonalita farieb pre dosiahnutie optimálneho

Look & Feel• Typ farieb - preferované sú pastelové, príjemné farby• Využívanie funkčných vlastností farieb - napr. buttony

tyPografiaDajte svojej aplikácii charakteristický vzhľad

Kvalitnou typografiou je možné dosiahnuť unikátny vzhľad aplikácie a pritom nepotlačiť jej funkčné vlastnosti, naopak ich podporiť.

Je možné používať prakticky ľubovoľný font (tento je vložený do samotnej aplikácie).

Všetka typografia by mala byť v správnej veľkosti, riadkovaní a farbe.

zobrazenie informácieKontextuálne menu, modálne pohľady(ale s rozumom)

Redukujte a rozdeľujte obsah na rôzne pohľady tak, aby bol pre užívateľa podaný ideálne.

V prípade dynamického contentu dajte pozor na dostatok priestoru pre reálny content, ktorý bude naťahovaný!

Split view (vľavo).Dva panely vedľa seba alebo v okne.

Redukovaná informácia.A možnosti na doplnenie.

Dynamický contentUsporiadanie v gride

orientáciaDvojitá orientácia iPadu je naozaj pecka - pokiaľ ju viete využiť!

Dodržte konzistentnosť zobrazenia obsahu na oboch rotáciách.Trik je v udržaní užívateľskej prívetivosti v každom pohľade.

Prepínanie orientácie je možné v aplikácii zakázať a vytvárať tak jednostranne orientovaný layout aplikácie.

Tip: Je možné použiť princíp, kedy je text orientovaný na výšku a multimédia k textu na šírku.

Rovnaký contentInak zobrazený horizontálne / vertikálne

Iná funkcionalita Pri hor. otočení sa zobrazuje iba content

Iná funkcionalitaVideo ako aj celá aplikácia sa rozbehne až naležato

userinterface metaforyKožené tlačítka, stehy, zvyšky papiera, prepínač

Dajte pozor na to, aby ste sa neprepracovali ku gýču. Je to síce trendy, ale pokiaľ chcete hodnotný a trvácny design, nepoužívajte tieto prvky samoúčelne.

Pre “sranda“ aplikácie a jednoúčelové aplikácie je to aplikovateľný princíp.

Dajte pozor na použiteľnosť.

Freebies v praxiInterface vystavaný na základe prvkov, ktoré sú na webe dostupné na stiahnutie

Kreatívne spracovanieVizuálna stránka je taktiež originálna.

micrositeKomunikácia aplikácie aj mimo storu

Dajte si k aplikácii vypracovať aj jednoduchú stránku promujúcu Vašu aplikáciu.Pomôže Vám to pri komunikácii aplikácie.

výstuP grafikaOdovzdanie výstupu pre kódera

Výstup by mal obsahovať:

• Návrh všetkých typov layoutov použitých v aplikácii• Ikonu aplikácie pre systém ale aj App Store / Android Market • Vrstvy psd a ich názvy sú logicky zoradené a pomenované• Jednotlivé layouty sú kompletné - pokiaľ sú nadefinované všetky stavy

tlačítok, linky v textoch, flagy, ...

Rozkreslená aplikáciaAj časti layoutu ktoré sú nízko.Aj a(ikonu je potrebné nakresliť vo veľkosti 512*512 px)

inšPiráciaPicasso vravel, že dobrí umelci kopírujú, tí najlepší kradnú

Nekradnú však od ostatných z oboru, ale mezioborovo a zo zdanlivo nesúvisiacich zdrojov. Design verzus príroda, film, hudba a pod. Jednotiacich prvkov pre vizuálne štýly je nespočetne.

Inšpiratívne galérie:

• thefwa.com/mobile• behance.net• dribbble.com• designspiration.net

úlohaNájdi v návrhu chybu!

Ďakujem za Vašu pozornosť

martin janekArt director / SCR