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.
Upcoming SlideShare
UXI Live 2011 Ami Rotter
UXI Live 2011 Ami Rotter
Loading in …3
×
1 of 76

30+ Recent Design Elements in Web Apps

39

Share

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

30+ Recent Design Elements in Web Apps

  1. 1. 30+ Recent Design Elements in Web Apps Ami 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 don't 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 space https://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 + large typography 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 for Gangnam 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 Controls 1. 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

×