Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

30+ Recent Design Elements in Web Apps

4,948 views

Published on

A summary for this great question that appeared on Quora: http://www.quora.com/User-Interface-Design/What-are-the-best-UI-elements-controls-patterns-etc-that-have-cropped-up-in-modern-web-sites-and-web-apps-recently

Published in: Design

30+ Recent Design Elements in Web Apps

  1. 1. 30+ Recent Design Elementsin Web AppsAmi Rotter © 2012 MediaMind | A Division of DG | All rights reserved
  2. 2. http://www.quora.com/User-Interface-Design/What-are-the-best-UI-elements-controls-patterns-etc-that-have-cropped-up-in-modern-web-sites-and-web-apps-recently © 2012 MediaMind | A division of DG | All rights reserved
  3. 3. Sticky headers/sidebar content - critical elements stay fixed as you scroll down Google Plus © 2012 MediaMind | A division of DG | All rights reserved
  4. 4. Sticky headers/sidebar content - critical elements stay fixed as you scroll down http://pitch.csspiffle.com/ © 2012 MediaMind | A division of DG | All rights reserved
  5. 5. Pinterest Style Layouts http://pinterest.com/ © 2012 MediaMind | A division of DG | All rights reserved
  6. 6. Infinite scroll Google Image Search © 2012 MediaMind | A division of DG | All rights reserved
  7. 7. Circles © 2012 MediaMind | A division of DG | All rights reserved
  8. 8. Circles © 2012 MediaMind | A division of DG | All rights reserved
  9. 9. Responsive layouts http://mashable.com/ © 2012 MediaMind | A division of DG | All rights reserved
  10. 10. Responsive layouts © 2012 MediaMind | A division of DG | All rights reserved
  11. 11. Responsive layouts © 2012 MediaMind | A division of DG | All rights reserved
  12. 12. In-field labels © 2012 MediaMind | A division of DG | All rights reserved
  13. 13. In-field labels © 2012 MediaMind | A division of DG | All rights reserved
  14. 14. In-field labels © 2012 MediaMind | A division of DG | All rights reserved
  15. 15. Validation as you go © 2012 MediaMind | A division of DG | All rights reserved
  16. 16. Form elements that dont look like form elements, Conversational UIs © 2012 MediaMind | A division of DG | All rights reserved
  17. 17. More friendly, conversational language around form elements © 2012 MediaMind | A division of DG | All rights reserved
  18. 18. Conversational UIs http://sortfolio.com/ © 2012 MediaMind | A division of DG | All rights reserved
  19. 19. Conversational UIs, Bigger type sizes, hit areas, buttons and white space http://uxarchive.com/ © 2012 MediaMind | A division of DG | All rights reserved
  20. 20. Conversational UIs, Bigger type sizes, hit areas, buttons and white space https://ifttt.com/ © 2012 MediaMind | A division of DG | All rights reserved
  21. 21. Bigger type sizes, hit areas, buttons and white space https://new.myspace.com/ © 2012 MediaMind | A division of DG | All rights reserved
  22. 22. Bigger type sizes, hit areas, buttons and white space www.pluralis.com © 2012 MediaMind | A division of DG | All rights reserved
  23. 23. "Kiosk style" Bigger type sizes, hit areas, buttons and white spacehttps://ifttt.com/ © 2012 MediaMind | A division of DG | All rights reserved
  24. 24. "Kiosk style" buttons - rather than present radio buttons options medium.com © 2012 MediaMind | A division of DG | All rights reserved
  25. 25. "Kiosk style" buttons - rather than present radio buttons options © 2012 MediaMind | A division of DG | All rights reserved
  26. 26. "Kiosk style" buttons- rather than presenting a list of checkbox options + largetypography https://new.myspace.com/ © 2012 MediaMind | A division of DG | All rights reserved
  27. 27. Auto save functionality Gmail.com © 2012 MediaMind | A division of DG | All rights reserved
  28. 28. Auto save functionality © 2012 MediaMind | A division of DG | All rights reserved
  29. 29. Auto save functionality http://www.quora.com/ © 2012 MediaMind | A division of DG | All rights reserved
  30. 30. Drag and Drop to Attach Files https://basecamp.com/ © 2012 MediaMind | A division of DG | All rights reserved
  31. 31. Drag and Drop to Attach Files, New features introduction layers © 2012 MediaMind | A division of DG | All rights reserved
  32. 32. New features introduction layers © 2012 MediaMind | A division of DG | All rights reserved
  33. 33. Skeuomorphic design elements © 2012 MediaMind | A division of DG | All rights reserved
  34. 34. Skeuomorphic design elements (+ Auto Save) © 2012 MediaMind | A division of DG | All rights reserved
  35. 35. Skeuomorphic design elements http://www.linkedin.com/ © 2012 MediaMind | A division of DG | All rights reserved
  36. 36. Skeuomorphic design elements © 2012 MediaMind | A division of DG | All rights reserved
  37. 37. Bauhaus, minimalist design © 2012 MediaMind | A division of DG | All rights reserved
  38. 38. Bauhaus, minimalist design © 2012 MediaMind | A division of DG | All rights reserved
  39. 39. Bauhaus, minimalist design © 2012 MediaMind | A division of DG | All rights reserved
  40. 40. Minimalist design + In-field labels + drag and drop files © 2012 MediaMind | A division of DG | All rights reserved
  41. 41. A move away from noticeable gradients and drop shadows Instead of… © 2012 MediaMind | A division of DG | All rights reserved
  42. 42. A move away from noticeable gradients and drop shadows http://dribbble.com/ididi © 2012 MediaMind | A division of DG | All rights reserved
  43. 43. Flat, monochromatic, small icons for common actions © 2012 MediaMind | A division of DG | All rights reserved
  44. 44. Flat, monochromatic, small icons for common actions http://dribbble.com/ididi © 2012 MediaMind | A division of DG | All rights reserved
  45. 45. Death of rounded corners? © 2012 MediaMind | A division of DG | All rights reserved
  46. 46. Combining data visualization www.decide.com © 2012 MediaMind | A division of DG | All rights reserved
  47. 47. Combining data visualization https://new.myspace.com © 2012 MediaMind | A division of DG | All rights reserved
  48. 48. Drawers and slide outs © 2012 MediaMind | A division of DG | All rights reserved
  49. 49. iPhone like notification © 2012 MediaMind | A division of DG | All rights reserved
  50. 50. More details on mouse over, "As you need it" functionality © 2012 MediaMind | A division of DG | All rights reserved
  51. 51. More details on mouse over + 3D effects http://tympanus.net/Tutorials/3DHoverEffects/index3.html © 2012 MediaMind | A division of DG | All rights reserved
  52. 52. More details on mouse over + 3D effects http://selection.datavisualization.ch/ © 2012 MediaMind | A division of DG | All rights reserved
  53. 53. Single page apps © 2012 MediaMind | A division of DG | All rights reserved
  54. 54. Fun or delightful elements © 2012 MediaMind | A division of DG | All rights reserved
  55. 55. Fun or delightful elements © 2012 MediaMind | A division of DG | All rights reserved
  56. 56. Fun or delightful elements http://photojojo.com © 2012 MediaMind | A division of DG | All rights reserved
  57. 57. Fun or delightful elements http://photojojo.com © 2012 MediaMind | A division of DG | All rights reserved
  58. 58. Fun or delightful elements- Tiny dancing Psy icon was added to the video page forGangnam Style http://www.youtube.com/ via Little Big Details http://photojojo.com © 2012 MediaMind | A division of DG | All rights reserved
  59. 59. Search boxes / Text Fields that "expand" on click http://www.businessinsider.com/ © 2012 MediaMind | A division of DG | All rights reserved
  60. 60. Search boxes / Text Fields that "expand" on click http://branch.com © 2012 MediaMind | A division of DG | All rights reserved
  61. 61. Large resizable Images © 2012 MediaMind | A division of DG | All rights reserved
  62. 62. Large resizable Images © 2012 MediaMind | A division of DG | All rights reserved
  63. 63. Immediate immersion vs. laborious registration processes (+ large images) https://medium.com/ © 2012 MediaMind | A division of DG | All rights reserved
  64. 64. Immediate immersion vs. laborious registration processes https://www.minutes.io/ © 2012 MediaMind | A division of DG | All rights reserved
  65. 65. Direct manipulation of objects https://www.minutes.io/ © 2012 MediaMind | A division of DG | All rights reserved
  66. 66. Web Fonts © 2012 MediaMind | A division of DG | All rights reserved
  67. 67. Increased focus on nice, readable typography © 2012 MediaMind | A division of DG | All rights reserved
  68. 68. Social- what my friends are doing http://www.teehanlax.com/work/ © 2012 MediaMind | A division of DG | All rights reserved
  69. 69. Urgency http://www.booking.com © 2012 MediaMind | A division of DG | All rights reserved
  70. 70. Autocomplete + Multi Select Controls1.2.3.4. © 2012 MediaMind | A division of DG | All rights reserved
  71. 71. Autocomplete © 2012 MediaMind | A division of DG | All rights reserved
  72. 72. The + that changes to an http://www.teehanlax.com/work/ © 2012 MediaMind | A division of DG | All rights reserved
  73. 73. Gamification- scoreboards http://gooodjob.com/ © 2012 MediaMind | A division of DG | All rights reserved
  74. 74. Gamification- Points, Credits, Badges, Etc http://www.quora.com © 2012 MediaMind | A division of DG | All rights reserved
  75. 75. Progress animations on buttons http://branch.com © 2012 MediaMind | A division of DG | All rights reserved
  76. 76. Thank You! © 2012 MediaMind | A division of DG | All rights reserved

×