Design mobilnych aplikacii

548
-1

Published on

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.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
548
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Design mobilnych aplikacii

  1. 1. About SCR groupSCR is a progressive and rapidly growing group of companies that started its operation in 2006. Provides comprehensive andintegrated 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 fieldbut 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 Webmotion 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
  2. 2. CLIENTS
  3. 3. Mobilný web Zlatý Bažant
  4. 4. iPhone aplikácia Bažant Kinematograf
  5. 5. iPad aplikácia Zlatý Bažant
  6. 6. iPhone aplikácia TA3
  7. 7. iPhone aplikácia SKGA
  8. 8. iPhone aplikácia Corgoň
  9. 9. iPad aplikácia Corgoň
  10. 10. iPad CRM aplikácia Red Bull
  11. 11. Mobilný web pelikan.sk
  12. 12. iPhone aplikácia “Moje O2“
  13. 13. iPhone aplikácia Rádia Expres
  14. 14. Poslanie grafickéhodizajnuNaplnenie hodnôt remesla napomáha naplneniukvalít dielaDizajn 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ť.
  15. 15. 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
  16. 16. WireframeNakreslite si svoju aplikáciu najprv do schémyTiež používaný pojem “skica”.Ide o návrh definujúci funkciu a obsah aplikácie pre lepšie pochopeniea 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ťoua poňatím jednotlivých prvkov.
  17. 17. GUI kitPre nákres wireframu.
  18. 18. GUIGuide user interface - prvky skladačkyAk 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
  19. 19. brandovaná skladačkaObrandované GUI - základný princípTento princíp využíva prvky GUI, ktoré sú obsiahnuté aj vo vývojovýchprostrediach.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).
  20. 20. martin, pusti video!
  21. 21. OS Human InterfaceGuidelinesPredpísané alebo doporučené rozmeryVýrobcovia doporučujú pre jednotlivé prvky user interface rozmery, ktoré sú preich zariadenia “optimálne“.URL linky:• developer.apple.com/library/ios/#documentation/UserExperience/ Conceptual/MobileHIG• developer.android.com/design
  22. 22. simplify.simplify.simplify.Menej je niekedy viacAktuá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
  23. 23. Fantasy Interactive (www.f-i.com)Ich prístup je ikonický
  24. 24. Pixel PerfectZameranie na perfektné spracovanie detailuToto 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
  25. 25. brandZnačka je to, čo vám zostane, keď vám zhorítováreň. // David OgilvyBrand 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.
  26. 26. Red BullZnačka ktorá tvorí obrovskémnožstvo contentu
  27. 27. štylizáciaVyužívanie podkladových plôch pre formulovanievizuálneho prejavuV 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ť.
  28. 28. Rozdelenie contentuContent na bielom,galéria a menu na tmavom
  29. 29. FarbyJeden zo základných nástrojov grafického dizajnuVš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
  30. 30. typografiaDajte svojej aplikácii charakteristický vzhľadKvalitnou typografiou je možné dosiahnuť unikátny vzhľad aplikácie a pritomnepotlačiť jej funkčné vlastnosti, naopak ich podporiť.Je možné používať prakticky ľubovoľný font (tento je vložený do samotnejaplikácie).Všetka typografia by mala byť v správnej veľkosti, riadkovaní a farbe.
  31. 31. 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álnycontent, ktorý bude naťahovaný!
  32. 32. Split view (vľavo).Dva panely vedľa seba alebo v okne.
  33. 33. Redukovaná informácia.A možnosti na doplnenie.
  34. 34. Dynamický contentUsporiadanie v gride
  35. 35. 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 jednostranneorientovaný layout aplikácie.Tip:Je možné použiť princíp, kedy je text orientovaný na výšku a multimédia k textuna šírku.
  36. 36. Rovnaký contentInak zobrazený horizontálne / vertikálne
  37. 37. Iná funkcionalitaPri hor. otočení sa zobrazuje iba content
  38. 38. Iná funkcionalitaVideo ako aj celá aplikácia sarozbehne až naležato
  39. 39. 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 tietoprvky samoúčelne.Pre “sranda“ aplikácie a jednoúčelové aplikácie je to aplikovateľný princíp.Dajte pozor na použiteľnosť.
  40. 40. Freebies v praxiInterface vystavaný na základe prvkov,ktoré sú na webe dostupné na stiahnutie
  41. 41. Kreatívne spracovanieVizuálna stránka je taktiež originálna.
  42. 42. micrositeKomunikácia aplikácie aj mimo storuDajte 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.
  43. 43. Výstup grafikaOdovzdanie výstupu pre kóderaVý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, ...
  44. 44. Rozkreslená aplikáciaAj časti layoutu ktoré sú nízko.Aj a(ikonu je potrebné nakresliť voveľkosti 512*512 px)
  45. 45. inšpiráciaPicasso vravel, že dobrí umelci kopírujú, tí najlepšíkradnúNekradnú však od ostatných z oboru, ale mezioborovo a zo zdanlivonesú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
  46. 46. úlohaNájdi v návrhu chybu!
  47. 47. Ďakujem za Vašu pozornosťmartin janek Art director / SCR
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×