SlideShare a Scribd company logo

Trendy v dizajne mobilných aplikácií a webov

SCR®
SCR®
SCR®Prezident a predseda správnej rady at SCR®

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

Trendy v dizajne mobilných aplikácií a webov

1 of 74
Download to read offline
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
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
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é.
.:)
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
.01
Workshop MobileRulezz 2013 | Created by SCR | 04/2013
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
Ad

Recommended

Digitálna stratégia
Digitálna stratégiaDigitálna stratégia
Digitálna stratégiaSCR®
 
UI/UX trendy webov a mobilných aplikácií
UI/UX trendy webov a mobilných aplikáciíUI/UX trendy webov a mobilných aplikácií
UI/UX trendy webov a mobilných aplikáciíSCR®
 
b.link media promotions
b.link media promotionsb.link media promotions
b.link media promotionsjoamav23
 
Marketing v dobe mobilovej
Marketing v dobe mobilovejMarketing v dobe mobilovej
Marketing v dobe mobilovejSCR®
 
Afstudeerpresentatie HvA Interactieve Media
Afstudeerpresentatie HvA Interactieve MediaAfstudeerpresentatie HvA Interactieve Media
Afstudeerpresentatie HvA Interactieve MediaArne Coomans
 
Keď sa Inbound marketing stane horkým - Corgon digital strategy - Case Study
Keď sa Inbound marketing stane horkým - Corgon digital strategy - Case StudyKeď sa Inbound marketing stane horkým - Corgon digital strategy - Case Study
Keď sa Inbound marketing stane horkým - Corgon digital strategy - Case StudySCR®
 

More Related Content

Similar to Trendy v dizajne mobilných aplikácií a webov

Marketing v Dobe Mobilovej
Marketing v Dobe MobilovejMarketing v Dobe Mobilovej
Marketing v Dobe MobilovejPavol Kuban
 
Moja mama nevedela čo je komfort, tvoja zase neví co je náš workflow
Moja mama nevedela čo je komfort, tvoja zase neví co je náš workflowMoja mama nevedela čo je komfort, tvoja zase neví co je náš workflow
Moja mama nevedela čo je komfort, tvoja zase neví co je náš workflowTomáš Stankovič
 
Design mobilnych aplikacii
Design mobilnych aplikaciiDesign mobilnych aplikacii
Design mobilnych aplikaciiSCR®
 
ui42 Martin Krupa The Spot Guru Na čo myslieť pri vytváraní webu 2013-09-18
ui42 Martin Krupa The Spot Guru Na čo myslieť pri vytváraní webu 2013-09-18ui42 Martin Krupa The Spot Guru Na čo myslieť pri vytváraní webu 2013-09-18
ui42 Martin Krupa The Spot Guru Na čo myslieť pri vytváraní webu 2013-09-18ui42
 
Na čo myslieť pri vytváraní WEBu | ui42 - ONLINE KLUB 2014
Na čo myslieť pri vytváraní WEBu | ui42 - ONLINE KLUB 2014Na čo myslieť pri vytváraní WEBu | ui42 - ONLINE KLUB 2014
Na čo myslieť pri vytváraní WEBu | ui42 - ONLINE KLUB 2014ONLINE KLUB
 
Nastav si správny biznis model pre svoju firmu
Nastav si správny biznis model pre svoju firmuNastav si správny biznis model pre svoju firmu
Nastav si správny biznis model pre svoju firmuSCR®
 
Ako má vyzerať dobrý web
Ako má vyzerať dobrý webAko má vyzerať dobrý web
Ako má vyzerať dobrý webPeter Bolebruch
 
Daily Web 2015 Bratislava - vývoj online softvéroveho produktu, Ivan Potančok
Daily Web 2015 Bratislava - vývoj online softvéroveho produktu, Ivan PotančokDaily Web 2015 Bratislava - vývoj online softvéroveho produktu, Ivan Potančok
Daily Web 2015 Bratislava - vývoj online softvéroveho produktu, Ivan Potančokvibration.sk
 
Ako na eshop, ktorý si vaši zákazníci zamilujú?
Ako na eshop, ktorý si vaši zákazníci zamilujú?Ako na eshop, ktorý si vaši zákazníci zamilujú?
Ako na eshop, ktorý si vaši zákazníci zamilujú?bart-sk
 
slideshow_name
slideshow_nameslideshow_name
slideshow_nameshort13
 
Process inside In Media - We are Digital Company
Process inside In Media - We are Digital CompanyProcess inside In Media - We are Digital Company
Process inside In Media - We are Digital CompanyPeter Bolebruch
 
Drupal v mobile - Responsive webdizajn
Drupal v mobile - Responsive webdizajnDrupal v mobile - Responsive webdizajn
Drupal v mobile - Responsive webdizajnSven Creative, s.r.o.
 
Noc UX dizajnu- Oliver Meres, 2Fresh
Noc UX dizajnu- Oliver Meres, 2FreshNoc UX dizajnu- Oliver Meres, 2Fresh
Noc UX dizajnu- Oliver Meres, 2FreshŽofia Prokop
 
World Usability Day 2014 Slovakia - Mária Bieliková, FIIT STU - UX Lab & Class
World Usability Day 2014 Slovakia - Mária Bieliková, FIIT STU -  UX Lab & ClassWorld Usability Day 2014 Slovakia - Mária Bieliková, FIIT STU -  UX Lab & Class
World Usability Day 2014 Slovakia - Mária Bieliková, FIIT STU - UX Lab & Classui42
 
Andrej Salner: Naozaj použiteľné weby bez veľkých rozpočtov, Biznis raňajky I...
Andrej Salner: Naozaj použiteľné weby bez veľkých rozpočtov, Biznis raňajky I...Andrej Salner: Naozaj použiteľné weby bez veľkých rozpočtov, Biznis raňajky I...
Andrej Salner: Naozaj použiteľné weby bez veľkých rozpočtov, Biznis raňajky I...Basta digital
 

Similar to Trendy v dizajne mobilných aplikácií a webov (17)

Marketing v Dobe Mobilovej
Marketing v Dobe MobilovejMarketing v Dobe Mobilovej
Marketing v Dobe Mobilovej
 
Moja mama nevedela čo je komfort, tvoja zase neví co je náš workflow
Moja mama nevedela čo je komfort, tvoja zase neví co je náš workflowMoja mama nevedela čo je komfort, tvoja zase neví co je náš workflow
Moja mama nevedela čo je komfort, tvoja zase neví co je náš workflow
 
Design mobilnych aplikacii
Design mobilnych aplikaciiDesign mobilnych aplikacii
Design mobilnych aplikacii
 
ui42 Martin Krupa The Spot Guru Na čo myslieť pri vytváraní webu 2013-09-18
ui42 Martin Krupa The Spot Guru Na čo myslieť pri vytváraní webu 2013-09-18ui42 Martin Krupa The Spot Guru Na čo myslieť pri vytváraní webu 2013-09-18
ui42 Martin Krupa The Spot Guru Na čo myslieť pri vytváraní webu 2013-09-18
 
Na čo myslieť pri vytváraní WEBu | ui42 - ONLINE KLUB 2014
Na čo myslieť pri vytváraní WEBu | ui42 - ONLINE KLUB 2014Na čo myslieť pri vytváraní WEBu | ui42 - ONLINE KLUB 2014
Na čo myslieť pri vytváraní WEBu | ui42 - ONLINE KLUB 2014
 
Nastav si správny biznis model pre svoju firmu
Nastav si správny biznis model pre svoju firmuNastav si správny biznis model pre svoju firmu
Nastav si správny biznis model pre svoju firmu
 
Ako má vyzerať dobrý web
Ako má vyzerať dobrý webAko má vyzerať dobrý web
Ako má vyzerať dobrý web
 
Daily Web 2015 Bratislava - vývoj online softvéroveho produktu, Ivan Potančok
Daily Web 2015 Bratislava - vývoj online softvéroveho produktu, Ivan PotančokDaily Web 2015 Bratislava - vývoj online softvéroveho produktu, Ivan Potančok
Daily Web 2015 Bratislava - vývoj online softvéroveho produktu, Ivan Potančok
 
Ako na eshop, ktorý si vaši zákazníci zamilujú?
Ako na eshop, ktorý si vaši zákazníci zamilujú?Ako na eshop, ktorý si vaši zákazníci zamilujú?
Ako na eshop, ktorý si vaši zákazníci zamilujú?
 
slideshow_name
slideshow_nameslideshow_name
slideshow_name
 
Web dizajn
Web dizajnWeb dizajn
Web dizajn
 
Process inside In Media - We are Digital Company
Process inside In Media - We are Digital CompanyProcess inside In Media - We are Digital Company
Process inside In Media - We are Digital Company
 
Drupal v mobile - Responsive webdizajn
Drupal v mobile - Responsive webdizajnDrupal v mobile - Responsive webdizajn
Drupal v mobile - Responsive webdizajn
 
Noc UX dizajnu- Oliver Meres, 2Fresh
Noc UX dizajnu- Oliver Meres, 2FreshNoc UX dizajnu- Oliver Meres, 2Fresh
Noc UX dizajnu- Oliver Meres, 2Fresh
 
World Usability Day 2014 Slovakia - Mária Bieliková, FIIT STU - UX Lab & Class
World Usability Day 2014 Slovakia - Mária Bieliková, FIIT STU -  UX Lab & ClassWorld Usability Day 2014 Slovakia - Mária Bieliková, FIIT STU -  UX Lab & Class
World Usability Day 2014 Slovakia - Mária Bieliková, FIIT STU - UX Lab & Class
 
Prototypy
PrototypyPrototypy
Prototypy
 
Andrej Salner: Naozaj použiteľné weby bez veľkých rozpočtov, Biznis raňajky I...
Andrej Salner: Naozaj použiteľné weby bez veľkých rozpočtov, Biznis raňajky I...Andrej Salner: Naozaj použiteľné weby bez veľkých rozpočtov, Biznis raňajky I...
Andrej Salner: Naozaj použiteľné weby bez veľkých rozpočtov, Biznis raňajky I...
 

Trendy v dizajne mobilných aplikácií a webov

  • 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
  • 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/
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 68. Prezentácia projektu Jednoduchým spôsobom vysvetlené základné princípy a benefity aplikácie/produktu
  • 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