30+ Recent Design Elementsin Web AppsAmi Rotter             © 2012 MediaMind | A Division of DG | All rights reserved
http://www.quora.com/User-Interface-Design/What-are-the-best-UI-elements-controls-patterns-etc-that-have-cropped-up-in-mod...
Sticky headers/sidebar content - critical elements stay fixed as you scroll down   Google Plus                            ...
Sticky headers/sidebar content - critical elements stay fixed as you scroll down  http://pitch.csspiffle.com/             ...
Pinterest Style Layouts  http://pinterest.com/                          © 2012 MediaMind | A division of DG | All rights r...
Infinite scroll  Google Image Search                        © 2012 MediaMind | A division of DG | All rights reserved
Circles          © 2012 MediaMind | A division of DG | All rights reserved
Circles          © 2012 MediaMind | A division of DG | All rights reserved
Responsive layouts http://mashable.com/                        © 2012 MediaMind | A division of DG | All rights reserved
Responsive layouts                     © 2012 MediaMind | A division of DG | All rights reserved
Responsive layouts                     © 2012 MediaMind | A division of DG | All rights reserved
In-field labels                  © 2012 MediaMind | A division of DG | All rights reserved
In-field labels                  © 2012 MediaMind | A division of DG | All rights reserved
In-field labels                  © 2012 MediaMind | A division of DG | All rights reserved
Validation as you go                       © 2012 MediaMind | A division of DG | All rights reserved
Form elements that dont look like form elements, Conversational UIs                                                       ...
More friendly, conversational language around form elements                                                      © 2012 Me...
Conversational UIs http://sortfolio.com/                         © 2012 MediaMind | A division of DG | All rights reserved
Conversational UIs, Bigger type sizes, hit areas, buttons and white space     http://uxarchive.com/                       ...
Conversational UIs, Bigger type sizes, hit areas, buttons and white space  https://ifttt.com/                             ...
Bigger type sizes, hit areas, buttons and white space  https://new.myspace.com/                                           ...
Bigger type sizes, hit areas, buttons and white space    www.pluralis.com                                                 ...
"Kiosk style" Bigger type sizes, hit areas, buttons and white spacehttps://ifttt.com/                                     ...
"Kiosk style" buttons - rather than present radio buttons options  medium.com                                             ...
"Kiosk style" buttons - rather than present radio buttons options                                                         ...
"Kiosk style" buttons- rather than presenting a list of checkbox options + largetypography  https://new.myspace.com/      ...
Auto save functionality  Gmail.com                          © 2012 MediaMind | A division of DG | All rights reserved
Auto save functionality                          © 2012 MediaMind | A division of DG | All rights reserved
Auto save functionality  http://www.quora.com/                          © 2012 MediaMind | A division of DG | All rights r...
Drag and Drop to Attach Files  https://basecamp.com/                                © 2012 MediaMind | A division of DG | ...
Drag and Drop to Attach Files, New features introduction layers                                                        © 2...
New features introduction layers                                   © 2012 MediaMind | A division of DG | All rights reserved
Skeuomorphic design elements                               © 2012 MediaMind | A division of DG | All rights reserved
Skeuomorphic design elements (+ Auto Save)                                             © 2012 MediaMind | A division of DG...
Skeuomorphic design elements  http://www.linkedin.com/                               © 2012 MediaMind | A division of DG |...
Skeuomorphic design elements                               © 2012 MediaMind | A division of DG | All rights reserved
Bauhaus, minimalist design                             © 2012 MediaMind | A division of DG | All rights reserved
Bauhaus, minimalist design                             © 2012 MediaMind | A division of DG | All rights reserved
Bauhaus, minimalist design                             © 2012 MediaMind | A division of DG | All rights reserved
Minimalist design + In-field labels + drag and drop files                                                            © 201...
A move away from noticeable gradients and drop shadows Instead of…                                                    © 20...
A move away from noticeable gradients and drop shadows http://dribbble.com/ididi                                          ...
Flat, monochromatic, small icons for common actions                                                      © 2012 MediaMind ...
Flat, monochromatic, small icons for common actions http://dribbble.com/ididi                                             ...
Death of rounded corners?                            © 2012 MediaMind | A division of DG | All rights reserved
Combining data visualization                                 www.decide.com                               © 2012 MediaMind...
Combining data visualization  https://new.myspace.com                               © 2012 MediaMind | A division of DG | ...
Drawers and slide outs                         © 2012 MediaMind | A division of DG | All rights reserved
iPhone like notification                           © 2012 MediaMind | A division of DG | All rights reserved
More details on mouse over, "As you need it" functionality                                                        © 2012 M...
More details on mouse over + 3D effects http://tympanus.net/Tutorials/3DHoverEffects/index3.html   © 2012 MediaMind | A di...
More details on mouse over + 3D effects  http://selection.datavisualization.ch/                                           ...
Single page apps                   © 2012 MediaMind | A division of DG | All rights reserved
Fun or delightful elements                             © 2012 MediaMind | A division of DG | All rights reserved
Fun or delightful elements                             © 2012 MediaMind | A division of DG | All rights reserved
Fun or delightful elements  http://photojojo.com                             © 2012 MediaMind | A division of DG | All rig...
Fun or delightful elements                                                    http://photojojo.com                        ...
Fun or delightful elements- Tiny dancing Psy icon was added to the video page forGangnam Style http://www.youtube.com/ via...
Search boxes / Text Fields that "expand" on click  http://www.businessinsider.com/                                        ...
Search boxes / Text Fields that "expand" on click  http://branch.com                                                    © ...
Large resizable Images                         © 2012 MediaMind | A division of DG | All rights reserved
Large resizable Images                         © 2012 MediaMind | A division of DG | All rights reserved
Immediate immersion vs. laborious registration processes (+ large images)  https://medium.com/                            ...
Immediate immersion vs. laborious registration processes  https://www.minutes.io/                                         ...
Direct manipulation of objects  https://www.minutes.io/                                 © 2012 MediaMind | A division of D...
Web Fonts            © 2012 MediaMind | A division of DG | All rights reserved
Increased focus on nice, readable typography                                               © 2012 MediaMind | A division o...
Social- what my friends are doing  http://www.teehanlax.com/work/                                    © 2012 MediaMind | A ...
Urgency http://www.booking.com                          © 2012 MediaMind | A division of DG | All rights reserved
Autocomplete + Multi Select Controls1.2.3.4.                                       © 2012 MediaMind | A division of DG | A...
Autocomplete               © 2012 MediaMind | A division of DG | All rights reserved
The + that changes to an    http://www.teehanlax.com/work/                                   © 2012 MediaMind | A division...
Gamification- scoreboards http://gooodjob.com/                            © 2012 MediaMind | A division of DG | All rights...
Gamification- Points, Credits, Badges, Etc http://www.quora.com                                             © 2012 MediaMi...
Progress animations on buttons  http://branch.com                                 © 2012 MediaMind | A division of DG | Al...
Thank You!             © 2012 MediaMind | A division of DG | All rights reserved
Upcoming SlideShare
Loading in …5
×

30+ Recent Design Elements in Web Apps

4,510 views
4,405 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
0 Comments
40 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,510
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
90
Comments
0
Likes
40
Embeds 0
No embeds

No notes for slide

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

×