SlideShare una empresa de Scribd logo
1 de 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

Más contenido relacionado

Similar a 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
 

Similar a 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
 

Último

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
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
gajnagarg
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
Isadora Agency
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
saipriyacoool
 
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
 
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
wpkuukw
 
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
 
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
drmarathore
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
balqisyamutia
 
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
 
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
 

Último (20)

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 ...
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
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
 
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
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
 
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
 
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
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
 
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
 
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...
 
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
 
Hackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdfHackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdf
 
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
 
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...
 
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
 
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...
 
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
 
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...
 

30+ Recent Design Elements in Web Apps