Design is like sex.Everybody loves to look at it,but only a few are good at it.

1. Trendy v dizajne mobilných
aplikácií a webov
MARTIN JANEK / Art director
SCR®, Skuteckého 1, 974 01 Banská Bystrica, SLOVAKIA
scr@scr.sk, +421 48 415 31 70

2. Created with passion for digital
- Fullservisová digitálna agentúra
- Zakladajúci člen ADMA
- Banská Bystrica / Bratislava / Barcelona
- 40 ľudí
O2, Heineken, Microsoft, Oracle, Ringier, Radio
Expres, Sony, SSE, O'Neill, Markíza, ...
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

3. SCR
Interactive
Fullservisová digitálna
agentúra SCR Interactive
je zameraná na
poskytovanie špičkových
online riešení v oblasti
digitálneho marketingu
integráciou stratégií,
kreativity, technológií
a médií.
SCR
Technologies
IT spoločnosť SCR
technologies je zameraná
na vývoj informačných
systémov, mobilných
technológií, tvorbu
internetových /
intranetových portálov
a poskytovanie
webhostingu.
SCR
Graphics
Profesionálne kreatívne
grafické štúdio SCR
graphics je zamerané na
poskytovanie špičkových
dizajnových riešení
v oblasti Graphic design,
3D & Motion graphics a
Audio design
SCR
Play
Spoločnosť SCR play je
zameraná na vývoj
mobilných aplikácií pre
rôzne mobilné platformy
ako iOS, Android, Windows
Phone a iné.

4. .:)
Design is like sex.
Everybody loves to look at it,
but only a few are good at it.
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

5. .01
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

6. Created with passion for digital
Back to the roots
Flat design (Almost)
Simplifying interfaces.
Inšpirované print designom.
Opreté o základné piliere grafického designu:
- Kompozícia
- Farby
- Typografia
- Grid
- Fotografia
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

7. Ukážky flat designov / prvkov

8. Porovnanie prístupu
Apple / Google / Microsoft

9. Google is the best
Google je značka ktorá uplatňuje Almost flat design zrejme
najsofitikovanejšie.
http://www.google.com/intl/en/chrome/devices/chromebook-pixel/
https://www.google.com/intl/en/chrome/devices/chromebox.html
https://www.google.com/intl/en/chrome/webstore/features.html
https://chrome.google.com/webstore/category/home
http://www.google.com/think/articles/8-pillars-of-innovation.html
http://www.google.com/think/perspectives/
Ale predovšetkým:
http://www.haraldurthorleifsson.com/

10. http://www.fitbit.com/uk/home

11. Created with passion for digital
Už nieééééé!
Koniec Skeuomorphic interfaces
Emulácia fyzického sveta.
Zrejme to bude problém pri niektorých klientoch :)
Pre správne použitie potrebuje správny obsah a cit.
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

13. .02
SCR Creative Lab vol.3 | Created by SCR | 03/2013

14. Created with passion for digital
Design simplicity.
Nová paradigma
Minimalizmus. Menej je viac (visual simplicity)
Viac priestoru okolo prvkov
Menej dekorácií
Platí aj v interakcii užívateľa s interface
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

16. Workshop MobileRulezz 2013 | Created by SCR | 04/2013
Created with passion for digital
„Dokonalosť je dosiahnutá nie vtedy, keď už niet čo pridávať,
ale keď už nie je čo uberať.“
Antoine de Saint-Exupéry / spisovateľ, filozof

17. .03
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

18. Workshop MobileRulezz 2013 | Created by SCR | 04/2013
Created with passion for digital
Responzivita
ako základná vlastnosť moderného webu
HTML5 + CSS3
Optimalizovaný web pre rôzne zariadenia a rozlíšenia
Mobile first
Adaptívny content
// dočasné potlačenie kreativity?

19. Ukážka princípu responzivity
Podľa zariadenia na ktorom je stránka prehliadaná sa layout mení – od mobilu až po desktop

20. Responzivita je systém preusporiadania prvkov vzhľadom na rozlíšenie

22. Workshop MobileRulezz 2013 | Created by SCR | 04/2013
Created with passion for digital
Future vision
„When the web is in your car and on your eyeglasses,
we’re no longer talking about resizing windows for
iPhone or Android devices.“
Davin Wilfrid / Future Insights’ Product Director

23. .04
SCR Creative Lab vol.3 | Created by SCR | 03/2013

24. Created with passion for digital
Farby
Pastelové farby
Veľké farebné plochy
Farebné schémy
Kontrast
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

25. Pastelová zelená
Farba roku 2013

26. Využívanie farebného spektra
Vhodne zvolené farby vytvárajú podstatu look&feel

27. http://www.beatsbydre.com
Úprava farebnej schémy
homepage vzhľadom na obsah.
V dnešnej dobe už klasický
layout.
Fantasticky pracuje s obsahom
a brandom.

28. .05
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

29. Created with passion for digital
Jeden zo základných stavebných kameňov
Typografia
Využívanie kvalitnej typografie
Využívanie webfontov (Google Fonts, Typekit, Fonts.com, …)
Správne využívanie typografie
Priestor okolo typografie
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

30. Authentic Weather
App by Tobias van Schneider

31. http://builtbybuffalo.com

32. Autor: Jakub Antalík

33. .06
SCR Creative Lab vol.3 | Created by SCR | 03/2013

34. Created with passion for digital
Znovuzrodená (?!) disciplína
Ikony a ilustrácie
Vo formáte *.svg (škálovateľné)
Nadväznosť na Flat design a retro color scheme.
Brand look. (Google)
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

35. Shape ikony a ilustrácie

36. Google

37. .07
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

38. Created with passion for digital
Bezflashová doba
CSS3 animácie a interaktivita
HTML5 and CSS3 prináša mnoho možností.
Na pol ceste k flashu. (1/10)
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

40. http://www.cedricmarteau.com/

41. .08
SCR Creative Lab vol.3 | Created by SCR | 03/2013

42. Created with passion for digital
Rýchlosť
Performance
Neakceptácia pomalosti.
(načítavanie, spracovávanie animácií, ...)
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

43. .09
SCR Creative Lab vol.3 | Created by SCR | 03/2013

44. Created with passion for digital
Infografika
Ako súčasť user interface
Nemyslí sa tým obrázok s potenciálom sharovania
Grafické vysvetlenie princípov (fungovania, hodnôt, postupu, ...)
Veľké číslovky
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

46. Veľké číslovky, popisky
ako súčasť user interface

47. .10
SCR Creative Lab vol.3 | Created by SCR | 03/2013

48. Created with passion for digital
Posun design prístupu
UX design centered prístup
UX vytvára kompozíciu.
Kompozícia je základ obrazu.
Dnes je design z veľkej časti o UX.
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

50. Príklad moderného UX portálu.
- Responzívny layout
- Optimalizovaný na 1280x800
// princíp skladačky

51. App
wireframe
- funkcia
- kompozícia
- obsah

52. Created with passion for digital
Back to the roots
Výsledné hodnoty
- Použiteľnosť
- Jasnosť
- Jednoduchosť
Zjednodušená forma dáva vyniknúť obsahu
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

53. .11
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

54. Created with passion for digital
Developing prístup
UI patterns (design Lego)
Skladačka.
Prístup plynie z mobilných GUI
+ čas realizácie
+ kvalita návrhu
+ modularita
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

55. Ukážka layoutovej skladačky
Obsiahnuté všetky prvky z ktorých je možné
vyskladať web.
Obmedzenie na brand a účel.

57. .12
SCR Creative Lab vol.3 | Created by SCR | 03/2013

58. Created with passion for digital
Content first
Všetko je o obsahu
Tomu sa podriaďuje aj forma. (Mobile first)
Storytelling
Single page websites
Content flow
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

59. Štýlové podstránky (storytelling)
Veľmi zaujímavým spôsobom odpromované vlastnosti automobilu.

60. .13
SCR Creative Lab vol.3 | Created by SCR | 03/2013

61. Created with passion for digital
Weby a online aplikácie
App style User interface
Aplikácie a weby sa začínajú podobať
Touch based UI
Využitie plnej plochy obrazovky
Masonry layout
Stĺpcový layout
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

62. www.flooly.com
Ukazka struktury shopu.
(homepage + category)
2012

63. www.flooly.com
Ukazka struktury shopu.
(homepage + category)
2013

65. .14
SCR Creative Lab vol.3 | Created by SCR | 03/2013

66. Created with passion for digital
Spôsob prezentácie
Nemenej dôležitá časť projektu
Vizuálna forma hrá dôležitú úlohu
Obrázky / krátke texty
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

67. Designer
Mockup formy prezentácie
projektu/diela

68. Prezentácia projektu
Jednoduchým spôsobom vysvetlené základné princípy a benefity aplikácie/produktu

69. HP redesign
http://www.movingbrands.com/wor
k/transforming-the-worlds-largest-
technology-company-into-the-
worlds-most-powerful-brand

70. .15
SCR Creative Lab vol.3 | Created by SCR | 03/2013

71. .!
Nie je dôležité nasledovať trendy,
ale využívať správny vizuálny
jazyk pre doručenie obsahu alebo
správy.
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

72. Filozofické okienko
Otázky do publika
Čo si myslíte o interface Microsoft Metro?
Čo si myslíte o iOS interface?
Kde sa bude interface design uberať?
Čo je to design?
Čo si myslíte o slovenských designéroch?
Porovnanie so svetom.
Workshop MobileRulezz 2013 | Created by SCR | 04/2013
Created with passion for digital

73. 2012
Prezentácia Rulezz + projekt iGuide
iguide.scr.sk
Workshop MobileRulezz 2013 | Created by SCR | 04/2013

74. Ďakujem za pozornosť
Martin Janek / Art director