SlideShare ist ein Scribd-Unternehmen logo
1 von 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

Weitere ähnliche Inhalte

Ähnlich wie 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
 

Ähnlich wie 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
 

Kürzlich hochgeladen

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
 
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
eeanqy
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 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
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
awasv46j
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
balqisyamutia
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
nirzagarg
 

Kürzlich hochgeladen (20)

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...
 
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
 
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
 
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
 
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
 
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
 
How to Turn a Picture Into a Line Drawing in Photoshop
How to Turn a Picture Into a Line Drawing in PhotoshopHow to Turn a Picture Into a Line Drawing in Photoshop
How to Turn a Picture Into a Line Drawing in Photoshop
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentation
 
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...
 
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for FriendshipRaebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
 
Essential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive GuideEssential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive Guide
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
 
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKLANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
 
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
 

30+ Recent Design Elements in Web Apps