SlideShare une entreprise Scribd logo
1  sur  76
30+ Recent Design Elements
in Web Apps
Ami 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-modern-
web-sites-and-web-apps-recently
                                                                                       © 2012 MediaMind | A division of DG | All rights reserved
Sticky headers/sidebar content - critical elements stay fixed as you scroll down




   Google Plus
                                                         © 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/
                                                         © 2012 MediaMind | A division of DG | All rights reserved
Pinterest Style Layouts




  http://pinterest.com/
                          © 2012 MediaMind | A division of DG | All rights reserved
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 don't look like form elements, Conversational UIs




                                                       © 2012 MediaMind | A division of DG | All rights reserved
More friendly, conversational language around form elements




                                                      © 2012 MediaMind | A division of DG | All rights reserved
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/
                                                        © 2012 MediaMind | A division of DG | All rights reserved
Conversational UIs, Bigger type sizes, hit areas, buttons and white space




  https://ifttt.com/
                                                        © 2012 MediaMind | A division of DG | All rights reserved
Bigger type sizes, hit areas, buttons and white space




  https://new.myspace.com/

                                                        © 2012 MediaMind | A division of DG | All rights reserved
Bigger type sizes, hit areas, buttons and white space




    www.pluralis.com

                                                        © 2012 MediaMind | A division of DG | All rights reserved
"Kiosk style" Bigger type sizes, hit areas, buttons and white space




https://ifttt.com/
                                                         © 2012 MediaMind | A division of DG | All rights reserved
"Kiosk style" buttons - rather than present radio buttons options




  medium.com
                                                         © 2012 MediaMind | A division of DG | All rights reserved
"Kiosk style" buttons - rather than present radio buttons options




                                                         © 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/

                                                         © 2012 MediaMind | A division of DG | All rights reserved
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 reserved
Drag and Drop to Attach Files




  https://basecamp.com/
                                © 2012 MediaMind | A division of DG | All rights reserved
Drag and Drop to Attach Files, New features introduction layers




                                                        © 2012 MediaMind | A division of DG | All rights reserved
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 | All rights reserved
Skeuomorphic design elements




  http://www.linkedin.com/

                               © 2012 MediaMind | A division of DG | All rights reserved
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




                                                            © 2012 MediaMind | A division of DG | All rights reserved
A move away from noticeable gradients and drop shadows




 Instead of…




                                                    © 2012 MediaMind | A division of DG | All rights reserved
A move away from noticeable gradients and drop shadows




 http://dribbble.com/ididi
                                                    © 2012 MediaMind | A division of DG | All rights reserved
Flat, monochromatic, small icons for common actions




                                                      © 2012 MediaMind | A division of DG | All rights reserved
Flat, monochromatic, small icons for common actions




 http://dribbble.com/ididi
                                                      © 2012 MediaMind | A division of DG | All rights reserved
Death of rounded corners?




                            © 2012 MediaMind | A division of DG | All rights reserved
Combining data visualization                                 www.decide.com




                               © 2012 MediaMind | A division of DG | All rights reserved
Combining data visualization




  https://new.myspace.com
                               © 2012 MediaMind | A division of DG | All rights reserved
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 MediaMind | A division of DG | All rights reserved
More details on mouse over + 3D effects




 http://tympanus.net/Tutorials/3DHoverEffects/index3.html   © 2012 MediaMind | A division of DG | All rights reserved
More details on mouse over + 3D effects




  http://selection.datavisualization.ch/
                                           © 2012 MediaMind | A division of DG | All rights reserved
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 rights reserved
Fun or delightful elements




                                                    http://photojojo.com
                             © 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://www.youtube.com/ via Little Big Details
                                                                                 http://photojojo.com
                                                          © 2012 MediaMind | A division of DG | All rights reserved
Search boxes / Text Fields that "expand" on click




  http://www.businessinsider.com/
                                                    © 2012 MediaMind | A division of DG | All rights reserved
Search boxes / Text Fields that "expand" on click




  http://branch.com

                                                    © 2012 MediaMind | A division of DG | All rights reserved
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/                                  © 2012 MediaMind | A division of DG | All rights reserved
Immediate immersion vs. laborious registration processes




  https://www.minutes.io/
                                                      © 2012 MediaMind | A division of DG | All rights reserved
Direct manipulation of objects




  https://www.minutes.io/
                                 © 2012 MediaMind | A division of DG | All rights reserved
Web Fonts




            © 2012 MediaMind | A division of DG | All rights reserved
Increased focus on nice, readable typography




                                               © 2012 MediaMind | A division of DG | All rights reserved
Social- what my friends are doing




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

                                    © 2012 MediaMind | A division of DG | All rights reserved
Urgency




 http://www.booking.com

                          © 2012 MediaMind | A division of DG | All rights reserved
Autocomplete + Multi Select Controls


1.



2.




3.



4.




                                       © 2012 MediaMind | A division of DG | All rights reserved
Autocomplete




               © 2012 MediaMind | A division of DG | All rights reserved
The '+' that changes to an ' '




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

                                   © 2012 MediaMind | A division of DG | All rights reserved
Gamification- scoreboards




 http://gooodjob.com/
                            © 2012 MediaMind | A division of DG | All rights reserved
Gamification- Points, Credits, Badges, Etc




 http://www.quora.com
                                             © 2012 MediaMind | A division of DG | All rights reserved
Progress animations on buttons




  http://branch.com

                                 © 2012 MediaMind | A division of DG | All rights reserved
Thank You!




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

Contenu connexe

Similaire à 30+ Recent Design Elements in Web Apps

Share point 2013 webinar november 2012
Share point 2013 webinar november 2012Share point 2013 webinar november 2012
Share point 2013 webinar november 2012
Sentri
 
Harnessing digital 2012 telco
Harnessing digital 2012 telcoHarnessing digital 2012 telco
Harnessing digital 2012 telco
joeychee
 
The Double-edge sword of Mobile Broadband and how to use it.
The Double-edge sword of Mobile Broadband and how to use it. The Double-edge sword of Mobile Broadband and how to use it.
The Double-edge sword of Mobile Broadband and how to use it.
BSP Media Group
 
Go daddy.com Cloud Storage Solution (Adam Knapp)
Go daddy.com Cloud Storage Solution (Adam Knapp)Go daddy.com Cloud Storage Solution (Adam Knapp)
Go daddy.com Cloud Storage Solution (Adam Knapp)
Ontico
 
Mis tue sponsored lunch adobe
Mis tue sponsored lunch   adobeMis tue sponsored lunch   adobe
Mis tue sponsored lunch adobe
MediaPost
 
Rt responsive design_final
Rt responsive design_finalRt responsive design_final
Rt responsive design_final
Jellyfish Agency
 
DM Event Facebook Ecosystem 2
DM Event Facebook Ecosystem 2DM Event Facebook Ecosystem 2
DM Event Facebook Ecosystem 2
loukerner4
 

Similaire à 30+ Recent Design Elements in Web Apps (20)

Casos de Estudio Barclays y Sony (Personalización y Social Media con las solu...
Casos de Estudio Barclays y Sony (Personalización y Social Media con las solu...Casos de Estudio Barclays y Sony (Personalización y Social Media con las solu...
Casos de Estudio Barclays y Sony (Personalización y Social Media con las solu...
 
Hack work v1.0
Hack work v1.0Hack work v1.0
Hack work v1.0
 
Share point 2013 webinar november 2012
Share point 2013 webinar november 2012Share point 2013 webinar november 2012
Share point 2013 webinar november 2012
 
SharePoint 2013 Unveiled webinar 1.24.13
SharePoint 2013 Unveiled webinar 1.24.13SharePoint 2013 Unveiled webinar 1.24.13
SharePoint 2013 Unveiled webinar 1.24.13
 
NASSCOM Design4India Design Summit & Awards 2019 - How Technology Enhances Cr...
NASSCOM Design4India Design Summit & Awards 2019 - How Technology Enhances Cr...NASSCOM Design4India Design Summit & Awards 2019 - How Technology Enhances Cr...
NASSCOM Design4India Design Summit & Awards 2019 - How Technology Enhances Cr...
 
Harnessing digital 2012 telco
Harnessing digital 2012 telcoHarnessing digital 2012 telco
Harnessing digital 2012 telco
 
The Social Marketing Detectives: Adobe CS6 Launch Case Study
The Social Marketing Detectives: Adobe CS6 Launch Case StudyThe Social Marketing Detectives: Adobe CS6 Launch Case Study
The Social Marketing Detectives: Adobe CS6 Launch Case Study
 
The Double-edge sword of Mobile Broadband and how to use it.
The Double-edge sword of Mobile Broadband and how to use it. The Double-edge sword of Mobile Broadband and how to use it.
The Double-edge sword of Mobile Broadband and how to use it.
 
Getting an edge with social - Twitter - Adobe Summit 2012
Getting an edge with social - Twitter - Adobe Summit 2012Getting an edge with social - Twitter - Adobe Summit 2012
Getting an edge with social - Twitter - Adobe Summit 2012
 
Go daddy.com Cloud Storage Solution (Adam Knapp)
Go daddy.com Cloud Storage Solution (Adam Knapp)Go daddy.com Cloud Storage Solution (Adam Knapp)
Go daddy.com Cloud Storage Solution (Adam Knapp)
 
Amplexor Customer Experience Management seminar Adobe
Amplexor Customer Experience Management seminar Adobe Amplexor Customer Experience Management seminar Adobe
Amplexor Customer Experience Management seminar Adobe
 
A Guide to Facebook Mobile Ads
A Guide to Facebook Mobile AdsA Guide to Facebook Mobile Ads
A Guide to Facebook Mobile Ads
 
Ibm software network2012 claudio cinquepalmi #ibmsocialbiz
Ibm software network2012 claudio cinquepalmi  #ibmsocialbiz Ibm software network2012 claudio cinquepalmi  #ibmsocialbiz
Ibm software network2012 claudio cinquepalmi #ibmsocialbiz
 
Mis tue sponsored lunch adobe
Mis tue sponsored lunch   adobeMis tue sponsored lunch   adobe
Mis tue sponsored lunch adobe
 
Adobe
AdobeAdobe
Adobe
 
Unleash your potential final
Unleash your potential finalUnleash your potential final
Unleash your potential final
 
Adobe
AdobeAdobe
Adobe
 
Rt responsive design_final
Rt responsive design_finalRt responsive design_final
Rt responsive design_final
 
http://inforln.com: Infor Ming.le Social Collaboration Software Demo
http://inforln.com: Infor Ming.le Social Collaboration Software Demohttp://inforln.com: Infor Ming.le Social Collaboration Software Demo
http://inforln.com: Infor Ming.le Social Collaboration Software Demo
 
DM Event Facebook Ecosystem 2
DM Event Facebook Ecosystem 2DM Event Facebook Ecosystem 2
DM Event Facebook Ecosystem 2
 

Dernier

Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
 
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Nitya salvi
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
ehyxf
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
gajnagarg
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
balqisyamutia
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
mark11275
 
Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement
210303105569
 
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
ZurliaSoop
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
yhavx
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
eeanqy
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
HyderabadDolls
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
Isadora Agency
 

Dernier (20)

Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
 
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
 
Eye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docxEye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docx
 
The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
 
Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement
 
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
 
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service AvailableCall Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
 
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKLANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
 
Hackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdfHackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdf
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
 
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime PondicherryPondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
 

30+ Recent Design Elements in Web Apps