30+ Recent Design Elements in Web Apps

© 2012 MediaMind | A Division of DG | All rights reserved

Ami Rotter

30+ Recent Design Elements in Web Apps

© 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

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


Sticky headers/sidebar content - critical elements stay fixed as you scroll down

Google Plus

https://plus.google.com/


Sticky headers/sidebar content - critical elements stay fixed as you scroll down

http://pitch.csspiffle.com/

http://pitch.csspiffle.com/


Pinterest Style Layouts

http://pinterest.com/

http://pinterest.com/


Infinite scroll

Google Image Search

http://www.google.com/


Circles


Circles


Responsive layouts

http://mashable.com/




Responsive layouts


Responsive layouts


In-field labels


In-field labels


In-field labels


Validation as you go


Form elements that don't look like form elements, Conversational UIs


More friendly, conversational language around form elements


Conversational UIs

http://sortfolio.com/

http://sortfolio.com/


Conversational UIs, Bigger type sizes, hit areas, buttons and white space

http://uxarchive.com/


https://ifttt.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


https://ifttt.com/

"Kiosk style" Bigger type sizes, hit areas, buttons and white space

https://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 + large typography




Auto save functionality

Gmail.com





http://www.quora.com/


Drag and Drop to Attach Files

https://basecamp.com/

https://basecamp.com/


Drag and Drop to Attach Files, New features introduction layers


New features introduction layers


Skeuomorphic design elements


Skeuomorphic design elements (+ Auto Save)



http://www.linkedin.com/

http://www.linkedin.com/advertising




Bauhaus, minimalist design






Minimalist design + In-field labels + drag and drop files


A move away from noticeable gradients and drop shadows

Instead of…


A move away from noticeable gradients and drop shadows

http://dribbble.com/ididi



Flat, monochromatic, small icons for common actions


Flat, monochromatic, small icons for common actions




Death of rounded corners?


Combining data visualization www.decide.com

http://www.decide.com/


Combining data visualization

https://new.myspace.com



Drawers and slide outs


iPhone like notification


More details on mouse over, "As you need it" functionality


More details on mouse over + 3D effects

http://tympanus.net/Tutorials/3DHoverEffects/index3.html

http://tympanus.net/Tutorials/3DHoverEffects/index3.html


http://selection.datavisualization.ch/

More details on mouse over + 3D effects




Single page apps


Fun or delightful elements





http://photojojo.com

http://photojojo.com/store/awesomeness/iphone-viewfinder/

http://photojojo.com/



http://photojojo.com

http://photojojo.com/store/awesomeness/dslr-wheel-of-filters/


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

http://www.youtube.com/


http://littlebigdetails.com/post/41196163674/youtube-to-celebrate-1-billion-views-a-tiny

http://photojojo.com/store/awesomeness/dslr-wheel-of-filters/



Search boxes / Text Fields that "expand" on click

http://www.businessinsider.com/

http://www.businessinsider.com/


Search boxes / Text Fields that "expand" on click

http://branch.com

http://screencast.com/t/DuOUlNDYVCb

http://branch.com/


Large resizable Images

http://www.wanderfly.com/


Large resizable Images


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





Web Fonts


Increased focus on nice, readable typography


Social- what my friends are doing

http://www.teehanlax.com/work/


Urgency

http://www.booking.com

http://www.booking.com/


Autocomplete + Multi Select Controls

1.

2.

3.

4.


Autocomplete


The '+' that changes to an '×'




Gamification- scoreboards

http://gooodjob.com/

http://gooodjob.com/

http://hiring.gooodjob.com/


Gamification- Points, Credits, Badges, Etc

http://www.quora.com

http://www.quora.com/


Progress animations on buttons

http://branch.com

http://branch.com/


Thank You!