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