...

UX Design: Trendy 2013-2014. Animacja i interakcja

by marek-kasperski

on

Report

Category:

Design

Download: 1

Comment: 0

7,738

views

Comments

Description

Download UX Design: Trendy 2013-2014. Animacja i interakcja

Transcript

  • 1. TRENDY 2013-2014 Animacja / Interakcja Marek Kasperski, ThinkLab
  • 2. PRZYGOTOWANIA TRENDY 2013-2014. Animacja / Interakcja
  • 3. html5-showcase.com 840 designmodo.com 500+ cssawards.net 420 awwwards.com 150+ csswinner.com 100+ thefwa.com 100+ cssdesignawards.com 100+ 2 210+
  • 4. 100+
  • 5. PODSTAWY TEORETYCZNE TRENDY 2013-2014. Animacja / Interakcja
  • 6. Czas odpowiedzi… • poniżej 2 sekund – pożądany, sytuacja naturalna • 2-4 s, utrudniający pracę w przypadku czynności wymagających skupienia • 4+ sekundy – sprzyjający powstawaniu frustracji • 15+ sekund – uniemożliwiający płynną pracę Generalnie: czasy ładowania stron WWW do 7 sekund dopuszczalne; w okolicach 10 sekund pojawia się rozproszenie i zdenerwowanie użytkownika. • Rozwiązania: • Progress bar (pasek postępu) • Asynchronous progress indicator to wskaźnik postępu pracujący w tle, najczęściej przypominający kształtem jakiś kręciołek Po pierwsze: Funkcjonalność
  • 7. Po drugie: Interakcja ma być przyjemna/zabawna* http://www.alessioatzeni.com/blog/mac-os-x-lion-with-css3/
  • 8. * Ale nie kosztem Funkcjonalności ARTYKUŁ: http://azumbrunnen.me/blog/gangnam-design-vs-lasting-design/
  • 9. http://dangelicoguitars.com
  • 10. http://wildbluetech.com
  • 11. http://daftpunk.themaninblue.com
  • 12. ŁADOWNIE STRON TRENDY 2013-2014. Animacja / Interakcja
  • 13. http://www.pipoldesenzano.com/en/
  • 14. http://www.talentgarden.it/en/#!/home
  • 15. http://portraits.aol.com
  • 16. http://www.10ways.eu
  • 17. http://1minus1.com/develop
  • 18. http://yosoygil.com
  • 19. http://www.swis.nl
  • 20. http://www.google.com/insidesearch/howsearchworks/thestory/
  • 21. http://sanchezromerocarvajal.com
  • 22. http://marcorosella.com
  • 23. http://tour.kathart.dk
  • 24. http://adayinbigdata.com
  • 25. http://www.boffard.com/#/home
  • 26. http://lifestylefederation.com
  • 27. http://www.athenos.com
  • 28. http://www.kiubi.com
  • 29. -
  • 30. http://futureofcarsharing.com
  • 31. http://www.freeger.com/projects/contextad/
  • 32. http://hotdot.pro/en/
  • 33. http://boy-coy.com/#home
  • 34. http://enjoy-aiia.com
  • 35. http://smartphood.it/index-en.html
  • 36. http://www.agi-architects.com/#home
  • 37. http://www.toyota.com/camryeffect/
  • 38. MENU I LOGO Animacja i interakcja
  • 39. http://jacobjoins.com
  • 40. http://www.unheap.com/section/user-interface/
  • 41. http://www.awakenings.nl
  • 42. http://engageinteractive.co.uk/blog/the-big-move...-leeds-here-we-come
  • 43. http://www.wise-digital.com
  • 44. http://www.mustasj.no
  • 45. http://thecreativeinstitute.ie/public-speaking-team-development-about-us
  • 46. SLIDER TRENDY 2013-2014. Animacja / Interakcja
  • 47. http://www.sequence.co.uk/case-studies/the-muppets
  • 48. http://sosweetcreative.com
  • 49. http://www.3magine.com
  • 50. http://www.phive.org/#idmodalidade=5
  • 51. http://uk.rimmellondon.com
  • 52. http://www.comicsetc.com.au
  • 53. http://www.parc-amazonien-guyane.fr/territoires-a-decouvrir/les-sentiers-de-saul/
  • 54. WYSZUKIWARKA TRENDY 2013-2014. Animacja / Interakcja
  • 55. http://wob.io/#/
  • 56. http://qpoit.com/marcofolio_demo/apple_search/
  • 57. DYMKI (TOOLTIPS) TRENDY 2013-2014. Animacja / Interakcja
  • 58. http://projects.nickstakenburg.com/tipped
  • 59. FILTROWANIE TRENDY 2013-2014. Animacja / Interakcja
  • 60. http://standingby.co
  • 61. http://teefouad.com/themes/truestory/portfolio-classic-4-w-filter.html
  • 62. http://www.castirondesign.com/work/
  • 63. http://www.bigr.it
  • 64. http://felixplus.com/demo/mediastar/html/skins/light/blog-v1.html
  • 65. ZDJĘCIA TRENDY 2013-2014. Animacja / Interakcja
  • 66. http://www.brooklyngin.com/cocktails/
  • 67. http://steeleimage.com
  • 68. http://www.byhook.com/work
  • 69. http://www.usatoday.com
  • 70. http://lainvencionconcreta.org/en/tour/222/
  • 71. http://www.vancleefarpels.com/ww/en/
  • 72. http://escapeflight.com
  • 73. http://coffeesurfing.illy.com/wps/wcm/connect/cs_en/home#/home/
  • 74. http://jackietrananh.com
  • 75. http://aarkcollective.com/products
  • 76. http://tympanus.net/Tutorials/CaptionHoverEffects/
  • 77. http://www.liftinteractive.com
  • 78. http://www.amazon.com/dp/0756655307/
  • 79. http://www.uzik.com/LouvreIslamicArts/
  • 80. -
  • 81. http://weareeli.dk
  • 82. http://www.usatoday.com/big-page/
  • 83. INFORGRAFIKI TRENDY 2013-2014. Animacja / Interakcja
  • 84. http://www.snowbird.com/mountain-report/
  • 85. http://sergiopedercini.com
  • 86. http://www.anniwang.com
  • 87. http://www.rateus.com.au
  • 88. http://vasonanetworks.com/#/home
  • 89. -
  • 90. http://www.evoenergy.co.uk/uk-energy-guide/
  • 91. http://www.jana-water.com/en/about-jana
  • 92. http://creative9.com
  • 93. http://graphicnovel-hybrid4.peugeot.com/start.html
  • 94. WIZUALIZACJA DANYCH TRENDY 2013-2014. Animacja / Interakcja
  • 95. http://www.wired.co.uk/mind/#/
  • 96. -
  • 97. http://cinema-series.orange.fr/evenement/universeries/en/
  • 98. http://www.officialwaynerooney.com/profile
  • 99. http://sonicomit.com
  • 100. http://www.loisjeans.com/web2012/es
  • 101. http://sidigital.co/team
  • 102. http://digitalbakery.org/#points
  • 103. http://thespace.org/items/s00007p8
  • 104. http://vlog.it
  • 105. http://tweetping.net
  • 106. http://aworldoftweets.frogdesign.com/
  • 107. http://austinmusicmap.com
  • 108. http://libd.org
  • 109. http://www.music-map.com
  • 110. http://9elements.com/io/projects/html5/canvas/
  • 111. http://evolutionofweb.appspot.com
  • 112. http://fff.cmiscm.com/#!/main
  • 113. STRONY TRENDY 2013-2014. Animacja / Interakcja
  • 114. http://intothearctic.gp/en/
  • 115. http://www.snowbird.com
  • 116. http://www.chateauminuty.com
  • 117. http://rallyinteractive.com
  • 118. http://www.beoplay.com/Products/BeoplayV1
  • 119. http://panasonic.jp/shaver/lamdash/dna/
  • 120. http://www.aclamguitars.cat/en/floating-guitar#top
  • 121. http://www.vacheron-constantin.com/en/metiers-d-art-florilege
  • 122. http://indicius.com
  • 123. http://www.voxelair.com
  • 124. http://www.trinitywebtech.com/#portfolio
  • 125. http://www.czk.fr
  • 126. http://www.funkhaus.us
  • 127.  Marek Kasperski ThinkLab.pl
  • Fly UP