30+ Recent Design Elements in Web Apps
•Télécharger en tant que PPTX, PDF•
39 j'aime•2,820 vues
The document discusses 30 recent design elements that have emerged in modern web applications. These elements include sticky headers and sidebars, Pinterest-style layouts, infinite scrolling, responsive designs, inline form labels, conversational interfaces, auto-saving, drag and drop features, flat and minimalist designs, and gamification elements like points and badges. The elements reflect trends toward cleaner, more image-driven, and more interactive user experiences online.
Recommandé
Recommandé
Contenu connexe
Similaire à 30+ Recent Design Elements in Web Apps
Similaire à 30+ Recent Design Elements in Web Apps (20)
Dernier
Dernier (20)
30+ Recent Design Elements in Web Apps
- 1. 30+ Recent Design Elements in Web Apps Ami Rotter © 2012 MediaMind | A Division of DG | All rights reserved
- 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. Sticky headers/sidebar content - critical elements stay fixed as you scroll down Google Plus © 2012 MediaMind | A division of DG | All rights reserved
- 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. Pinterest Style Layouts http://pinterest.com/ © 2012 MediaMind | A division of DG | All rights reserved
- 6. Infinite scroll Google Image Search © 2012 MediaMind | A division of DG | All rights reserved
- 7. Circles © 2012 MediaMind | A division of DG | All rights reserved
- 8. Circles © 2012 MediaMind | A division of DG | All rights reserved
- 9. Responsive layouts http://mashable.com/ © 2012 MediaMind | A division of DG | All rights reserved
- 10. Responsive layouts © 2012 MediaMind | A division of DG | All rights reserved
- 11. Responsive layouts © 2012 MediaMind | A division of DG | All rights reserved
- 12. In-field labels © 2012 MediaMind | A division of DG | All rights reserved
- 13. In-field labels © 2012 MediaMind | A division of DG | All rights reserved
- 14. In-field labels © 2012 MediaMind | A division of DG | All rights reserved
- 15. Validation as you go © 2012 MediaMind | A division of DG | All rights reserved
- 16. Form elements that don't look like form elements, Conversational UIs © 2012 MediaMind | A division of DG | All rights reserved
- 17. More friendly, conversational language around form elements © 2012 MediaMind | A division of DG | All rights reserved
- 18. Conversational UIs http://sortfolio.com/ © 2012 MediaMind | A division of DG | All rights reserved
- 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. Conversational UIs, Bigger type sizes, hit areas, buttons and white space https://ifttt.com/ © 2012 MediaMind | A division of DG | All rights reserved
- 21. Bigger type sizes, hit areas, buttons and white space https://new.myspace.com/ © 2012 MediaMind | A division of DG | All rights reserved
- 22. Bigger type sizes, hit areas, buttons and white space www.pluralis.com © 2012 MediaMind | A division of DG | All rights reserved
- 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. "Kiosk style" buttons - rather than present radio buttons options medium.com © 2012 MediaMind | A division of DG | All rights reserved
- 25. "Kiosk style" buttons - rather than present radio buttons options © 2012 MediaMind | A division of DG | All rights reserved
- 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. Auto save functionality Gmail.com © 2012 MediaMind | A division of DG | All rights reserved
- 28. Auto save functionality © 2012 MediaMind | A division of DG | All rights reserved
- 29. Auto save functionality http://www.quora.com/ © 2012 MediaMind | A division of DG | All rights reserved
- 30. Drag and Drop to Attach Files https://basecamp.com/ © 2012 MediaMind | A division of DG | All rights reserved
- 31. Drag and Drop to Attach Files, New features introduction layers © 2012 MediaMind | A division of DG | All rights reserved
- 32. New features introduction layers © 2012 MediaMind | A division of DG | All rights reserved
- 33. Skeuomorphic design elements © 2012 MediaMind | A division of DG | All rights reserved
- 34. Skeuomorphic design elements (+ Auto Save) © 2012 MediaMind | A division of DG | All rights reserved
- 35. Skeuomorphic design elements http://www.linkedin.com/ © 2012 MediaMind | A division of DG | All rights reserved
- 36. Skeuomorphic design elements © 2012 MediaMind | A division of DG | All rights reserved
- 37. Bauhaus, minimalist design © 2012 MediaMind | A division of DG | All rights reserved
- 38. Bauhaus, minimalist design © 2012 MediaMind | A division of DG | All rights reserved
- 39. Bauhaus, minimalist design © 2012 MediaMind | A division of DG | All rights reserved
- 40. Minimalist design + In-field labels + drag and drop files © 2012 MediaMind | A division of DG | All rights reserved
- 41. A move away from noticeable gradients and drop shadows Instead of… © 2012 MediaMind | A division of DG | All rights reserved
- 42. A move away from noticeable gradients and drop shadows http://dribbble.com/ididi © 2012 MediaMind | A division of DG | All rights reserved
- 43. Flat, monochromatic, small icons for common actions © 2012 MediaMind | A division of DG | All rights reserved
- 44. Flat, monochromatic, small icons for common actions http://dribbble.com/ididi © 2012 MediaMind | A division of DG | All rights reserved
- 45. Death of rounded corners? © 2012 MediaMind | A division of DG | All rights reserved
- 46. Combining data visualization www.decide.com © 2012 MediaMind | A division of DG | All rights reserved
- 47. Combining data visualization https://new.myspace.com © 2012 MediaMind | A division of DG | All rights reserved
- 48. Drawers and slide outs © 2012 MediaMind | A division of DG | All rights reserved
- 49. iPhone like notification © 2012 MediaMind | A division of DG | All rights reserved
- 50. More details on mouse over, "As you need it" functionality © 2012 MediaMind | A division of DG | All rights reserved
- 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. More details on mouse over + 3D effects http://selection.datavisualization.ch/ © 2012 MediaMind | A division of DG | All rights reserved
- 53. Single page apps © 2012 MediaMind | A division of DG | All rights reserved
- 54. Fun or delightful elements © 2012 MediaMind | A division of DG | All rights reserved
- 55. Fun or delightful elements © 2012 MediaMind | A division of DG | All rights reserved
- 56. Fun or delightful elements http://photojojo.com © 2012 MediaMind | A division of DG | All rights reserved
- 57. Fun or delightful elements http://photojojo.com © 2012 MediaMind | A division of DG | All rights reserved
- 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. Search boxes / Text Fields that "expand" on click http://www.businessinsider.com/ © 2012 MediaMind | A division of DG | All rights reserved
- 60. Search boxes / Text Fields that "expand" on click http://branch.com © 2012 MediaMind | A division of DG | All rights reserved
- 61. Large resizable Images © 2012 MediaMind | A division of DG | All rights reserved
- 62. Large resizable Images © 2012 MediaMind | A division of DG | All rights reserved
- 63. Immediate immersion vs. laborious registration processes (+ large images) https://medium.com/ © 2012 MediaMind | A division of DG | All rights reserved
- 64. Immediate immersion vs. laborious registration processes https://www.minutes.io/ © 2012 MediaMind | A division of DG | All rights reserved
- 65. Direct manipulation of objects https://www.minutes.io/ © 2012 MediaMind | A division of DG | All rights reserved
- 66. Web Fonts © 2012 MediaMind | A division of DG | All rights reserved
- 67. Increased focus on nice, readable typography © 2012 MediaMind | A division of DG | All rights reserved
- 68. Social- what my friends are doing http://www.teehanlax.com/work/ © 2012 MediaMind | A division of DG | All rights reserved
- 69. Urgency http://www.booking.com © 2012 MediaMind | A division of DG | All rights reserved
- 70. Autocomplete + Multi Select Controls 1. 2. 3. 4. © 2012 MediaMind | A division of DG | All rights reserved
- 71. Autocomplete © 2012 MediaMind | A division of DG | All rights reserved
- 72. The '+' that changes to an ' ' http://www.teehanlax.com/work/ © 2012 MediaMind | A division of DG | All rights reserved
- 73. Gamification- scoreboards http://gooodjob.com/ © 2012 MediaMind | A division of DG | All rights reserved
- 74. Gamification- Points, Credits, Badges, Etc http://www.quora.com © 2012 MediaMind | A division of DG | All rights reserved
- 75. Progress animations on buttons http://branch.com © 2012 MediaMind | A division of DG | All rights reserved
- 76. Thank You! © 2012 MediaMind | A division of DG | All rights reserved