User Experience & User Interface Design Trends

  • Published on
    06-Aug-2015

  • View
    531

  • Download
    4

Embed Size (px)

Transcript

  1. 1. Immagine: Ultrabookitalia.net
  2. 2. Immagine: Gizmodo, Kelsey Campbell-Dollaghan
  3. 3. Immagine: Gizmodo, Kelsey Campbell-Dollaghan
  4. 4. Immagine: http://www.content-loop.com/history-flat-design-efficiency-minimalism-turned-digital-world-flat/
  5. 5. Immagine: http://www.content-loop.com/history-flat-design-efficiency-minimalism-turned-digital-world-flat/
  6. 6. Immagine: Riki Tanone, http://bashooka.com/inspiration/flat-web-ui-design/
  7. 7. Prima (rich) Dopo (flat) Icone: Sensational Fix, http://designinstruct.com/roundups/free-flat-icons/Icone: it.freepik.com
  8. 8. Immagine: http://blogs.adobe.com/dreamweaver/2015/05/flat-design-vs-material-design-what-makes-them-different.html
  9. 9. Immagine: http://uxmag.com/articles/the-top-ux-predictions-for-2015
  10. 10. FLAT MATERIAL http://blogs.adobe.com/dreamweaver/files/2015/02/figure2_material.png
  11. 11. Flat design Focus sui colori Esalta le scelte tipografiche Tempi di realizzazione inferiori Focus sui contenuti Multidimensionalit e fisicit Interazione Intuitivit + = MATERIAL DESIGN
  12. 12. Immagine: Nick Meloy Dribbble, https://dribbble.com/shots/852180-Hamburger-Buttons
  13. 13. Immagine: Alesha U, Dribbble https://dribbble.com/aleshalesha/buckets/222133-Hamburger-Menu
  14. 14. Immagine: http://ux.stackexchange.com http://i.stack.imgur.com/MXtXH.jpg
  15. 15. Norm Cox Xerox Star (1981) http://www.appuntidigitali.it/site/wp-content/uploads/xerox-star-3.jpghttp://coxhall.com/uploads/3/3/8/1/3381591/9513636.jpg?1386534324
  16. 16. https://upload.wikimedia.org/wikipedia/en/7/78/Rank_Xerox_8010%2B40_brochure_front.jpg http://www.mac-history.de/wp- content/uploads/2008/09/apple_lisa_werbung.jpg
  17. 17. http://dreamandreach.bose.com/it_IT/home
  18. 18. http://dreamandreach.bose.com/it_IT/home
  19. 19. http://awesomeshop.target.com
  20. 20. http://awesomeshop.target.com
  21. 21. http://time.com
  22. 22. http://time.com
  23. 23. http://www.google.com/inbox/
  24. 24. http://www.google.com/inbox/
  25. 25. Hamburger button http://exisweb.net/menu-eats-hamburger
  26. 26. http://www.newbalance.it
  27. 27. http://www.newbalance.it
  28. 28. http://chef-s.es
  29. 29. http://chef-s.es
  30. 30. http://www.theguardian.com/uk
  31. 31. http://www.theguardian.com/uk
  32. 32. http://mashable.com
  33. 33. http://thenextweb.com
  34. 34. http://www.usatoday.com
  35. 35. https://www.pinterest.com
  36. 36. http://dribbble.com
  37. 37. http://www.firebox.com
  38. 38. http://www.firebox.com
  39. 39. http://www.ahh.com
  40. 40. http://adparlor.com/blog/wp-content/uploads/2014/08/twitter-cards-cover2.png
  41. 41. Paul Adams - https://blog.intercom.io/why-cards-are-the-future-of-the-web/
  42. 42. https://www.google.com/landing/now/
  43. 43. http://webdesignledger.com/trends-2/cardbaseddesign
  44. 44. http://www.ghanalive.tv/wp-content/uploads/2015/01/Google-Now-Cards-Restaurant-Weather-Appointment-Traffic-Flight-Hotels.png
  45. 45. Glance-ability Uninterfaccia che offre un servizio o risolve un problema rimanendo volontariamente in secondo piano e con discrezione. (Jake Zukowski Frog)
  46. 46. http://i.ytimg.com/vi/1tIU3JqkIFY/maxresdefault.jpg
  47. 47. Jake Zukowski Frog
  48. 48. http://s1.cdn.autoevolution.com/images/news/new-concept-interface-for-tesla-model-s-is-simply-amazing-video-photo-gallery-93452_1.jpg
  49. 49. http://telematicsnews.info/wp-content/uploads/general/pioneer%20hud.jpg
  50. 50. http://gaspix.net/wp-content/uploads/2015/04/Apple-Watch-GUI-Kit-for-Sketch.png
  51. 51. Attitude Key Contest Goal Success metrics Sticky Desiderable Desktop, laptop, mobile Building communit ypromote content Long sessions Slippy Glance ability Automotive smart watch, wearable Safety, multi tasking, customizat ion Short sessions
  52. 52. https://leantesting.com/resources/wp-content/uploads/2015/04/app-store-notification.jpg
  53. 53. http://microinteractions.com/wp-content/uploads/2012/08/structure_diagram_big.png
  54. 54. 1. Less is more 2. Impara subito dallutente 3. Porta dati e funzioni in evidenza solo quando servono 4. Usa gli elementi che ci sono gi per veicolare le informazioni 5. Previeni lerrore umano 6. Dai il tocco umano
  55. 55. Charles Eames http://www.tedalegno.it/Public/Img/2236_eameschair3.jpg
  56. 56. http://themeforest.net
  57. 57. http://themeforest.net/item/saturn-responsive-admin-dashboard-template/6259902
  58. 58. https://themes.shopify.com
  59. 59. http://www.squarespace.com
  60. 60. http://com.teehanlax.assets.s3-website-us-east-1.amazonaws.com/resources/img/story/medium/responsiveness.jpg
  61. 61. https://www.instapage.com
  62. 62. http://vc.wpbakery.com
  63. 63. MILIONI UTENTI ATTIVI MILIONI COMPRANO PUBBLICITA http://techcrunch.com/2015/04/29/facebook-40-million/
  64. 64. Webmaster + hosting Fine anni 90 Worpress vs Blogger Dal 2005 Pagina FB Oggi
  65. 65. http://cdn8.openculture.com/wp-content/uploads/2013/09/wizard-of-oz-original1.jpg
  66. 66. Uh-oh. Were all out of a job. The Wizard of Oz has arrived. @matr77 thegrid.io
  67. 67. https://thegrid.io
  68. 68. https://thegrid.io
  69. 69. Skeumorphism Flat Design Material Design 2013 2014 2015 Responsive design ?Regole di usabilit per gli elementi core: checkout form, registrazione e login
  70. 70. http://www.zerouno.org
  71. 71. Il cliente non ne sa pi del designer Capitalizzare lesperienza collettiva pregressa e applicare le regole del web non solo conveniente ma anche moralmente e professionalmente giusto.
  72. 72. Il committente non ne sa pi del designer Capitalizzare lesperienza collettiva pregressa e applicare le regole del web non solo conveniente ma anche moralmente e professionalmente giusto. RESPONSABILITA DEL DESIGNER
  73. 73. http://blog.hubspot.com/blog/tabid/6307/bid/14953/What-Do-76-of-Consumers-Want-From-Your-Website-New-Data.aspx
  74. 74. Charles Darwin

Recommended

View more >