Súhrn tipov a myšlienok pre lepší návrh používateľských rozhraní mobilných telefónov a tabletov. Informácie sú užitočné a určené nielen UI dizajnerom ale aj všetkým záujemcom o mobilné aplikácie a mobilný marketing - teda nielen tvorcom, ale aj zadávateľom.

2. About SCR group
SCR 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. SCR interactive s.r.o. SCR technologies s.r.o.
Creative graphic design studio focused Full-service digital agency focused on IT company focused on developing infor-
on providing high-end design solutions providing high-end online solutions for mation systems, mobile technologies,
in the field of graphic design, 3D design, integrating digital marketing strategies, web / intranet portals, providing Web
motion design and audio design. creativity, technology and media. hosting and system services under the
SLA.
www.scr-graphics.sk www.scr-interactive.sk
www.scr-technologies.sk
SCR Group is a certified quality management system ISO 9001

3. CLIENTS

4. Mobilný web Zlatý Bažant

5. iPhone aplikácia Bažant Kinematograf

6. iPad aplikácia Zlatý Bažant

7. iPhone aplikácia TA3

8. iPhone aplikácia SKGA

9. iPhone aplikácia Corgoň

10. iPad aplikácia Corgoň

11. iPad CRM aplikácia Red Bull

12. Mobilný web pelikan.sk

13. iPhone aplikácia “Moje O2“

14. iPhone aplikácia Rádia Expres

15. Poslanie grafického
dizajnu
Naplnenie 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ť.

16. 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

18. Wireframe
Nakreslite 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.

20. GUI kit
Pre nákres wireframu.

23. GUI
Guide 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

27. brandovaná skladačka
Obrandované 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).

29. martin, pusti video!

30. OS Human Interface
Guidelines
Predpí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

33. 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

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

35. Pixel Perfect
Zameranie 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

38. brand
Znač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.

39. Red Bull
Značka ktorá tvorí obrovské
množstvo contentu

40. štylizácia
Využí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ť.

41. Rozdelenie contentu
Content na bielom,
galéria a menu na tmavom

42. Farby
Jeden 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

44. typografia
Dajte 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.

46. zobrazenie informácie
Kontextuá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ý!

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

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

49. Dynamický content
Usporiadanie v gride

50. orientácia
Dvojitá 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.

51. Rovnaký content
Inak zobrazený horizontálne / vertikálne

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

53. Iná funkcionalita
Video ako aj celá aplikácia sa
rozbehne až naležato

54. user
interface metafory
Kož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ť.

55. Freebies v praxi
Interface vystavaný na základe prvkov,
ktoré sú na webe dostupné na stiahnutie

56. Kreatívne spracovanie
Vizuálna stránka je taktiež originálna.

57. microsite
Komuniká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.

60. Výstup grafika
Odovzdanie 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, ...

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

62. inšpirácia
Picasso 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

63. úloha
Nájdi v návrhu chybu!

64. Ďakujem za Vašu
pozornosť
martin janek
Art director / SCR