SlideShare ist ein Scribd-Unternehmen logo
1 von 85
TOP 15
TRENDS FOR 2014
BEATRIZ OLIVEIRA
TRENDS...
WEB DESIGN TRENDS
TOP 15
`
#1 NON-BORING FONTS
10 YEARS AGO
sIFR
2005
Cufon
2008
CSS3 Web Fonts
NOW
PERSONALITY
BE INSPIRED...
HTTP://STUFFANDNONSENSE.CO.UK
HTTP://WWW.DADAABSTORIES.ORG
HTTP://PULPFINGERS.COM
HTTP://WWW.KCCREEPFEST.COM
HTTPS://WWW.KAZERNEDOSSIN.EU/EN
HTTP://WWW.ELEARNINGFORCE.COM
HTTP://WWW.GOOGLE.COM/FONTS
HTTP://WWW.FONTSQUIRREL.COM
HTTP://FORTAWESOME.GITHUB.IO/FONT-AWESOME
HTTP://FONTELLO.COM
`
#2 FLAT DESIGN
SKEUOMORPHISM
2012
FLAT
2014
EASY TO USE
PERCEIVED AS HONEST
TRENDY
EFFICIENT RESPONSIVE DESIGN
FASTER LOADING TIMES
BENEFITS OF FLAT DESIGN
BE INSPIRED...
HTTP://WWW.MICROSOFT.COM
HTTP://WWW.FOSTR.COM
HTTP://LANDERAPP.COM
HTTP://WWW.CONJURE.IO
HTTP://DAVIDHELLMANN.COM
HTTP://JEET.GS
HTTPS://WWW.HIOSCAR.COM
HTTP://WWW.HOUSEKITCHEN.FR
HTTP://WWW.FLATVSREALISM.COM CHECK THIS ONE!
#3 LARGE#3 HUGE HERO AREAS
10 YEARS OF HOMEPAGES
THE MAILCHIMP WEBSITE
2004
2005
2008
2009
2010
2011
2012
2014
BE INSPIRED...
HTTP://MAILCHIMP.COM
HTTP://REALTII.COM
HTTP://WWW.SHOPIFY.COM
HTTP://PREZI.COM
HTTPS://WWW.LIFE360.COM
HTTP://WWW.MYSMS.COM
HTTP://RAMOTION.COM
HTTP://WWW.BOUNCEBLOCK.COM
HTTP://TAP.UNICEFUSA.ORG
`
#4 VIDEOS ... NOT TEXT
`
People have been glued to TV screens since
the middle of the 20th century. Video on
the web has had a similarly dramatic impact
on the way content is consumed, resulting
in YouTube becoming the web’s “second
search engine”.
BE INSPIRED...
HTTP://WWW.ZENDESK.COM
HTTP://ENLIVENHQ.COM
HTTP://SETSEED.COM
HTTP://WWW.FIFTYTHREE.COM
HTTP://WHITEBOARD.IS
HTTP://DREAMTRIP.ADPROAGENCY.COM/START
HTTP://WWW.OLYMPICSTORY.COM
HTTP://DESIGNMODO.COM/STARTUP
PASSIVE ENGAGEMENT
INCREASE CONVERSION BY 80%
MORE TIME ON THE WEB SITE
INCREASE TRUST FACTOR
USERS PREFER TO WATCH
WHY?
AUTOPLAY VS. PRESS PLAY
ADD A CALL-TO-ACTION
SHORT VS. LONG
OVERLAY AUDIO LATER
ADD TO YOUTUBE
MAKING VIDEOS MORE EFFECTIVE
`
#5 SINGLE PAGE/LONG SCROLL
BE INSPIRED...
HTTP://TRIPPEO.COM
HTTPS://ONLYCOIN.COM
HTTP://WWW.WITCREATIVE.INFO
HTTP://WIPMESSENGER.COM
HTTPS://WWW.CHOWNOW.COM
HTTP://THEWEATHERTRON.COM
HTTPS://VENMO.COM
HTTP://HUMAN.CO
HTTP://TURNPLAY.RAMOTION.COM/EN
HTTP://WWW.EVEREST.COM
HTTP://STARMATIC.COM
HTTP://RETRICA.CO
HTTP://ELECTRONICBRAIN.DE
HTTP://WWW.EASYMOP.COM.BR
TELL A STORY
REDUCED CONTENT
CALL-TO-ACTION
MOBILE APPS
WHEN?
`
#6 PARALLAX SCROLLING
1ST PARALLAX “MOON PATROL” - 1982
BE INSPIRED...
HTTP://WWW.SPENDEEAPP.COM
HTTP://CRV.HONDA.COM.AU
HTTP://WWW.DRUGTREATMENT.COM
HTTP://MAILCHIMP.COM/2013/#NEW-DATACENTERS
HTTP://UNFOLD.NO
HTTP://TOOYOUNGTOWED.ORG
HTTP://WWW.BARNYARD.BE
HTTP://WWW.WIPRO.COM/FUTURE-THOUGHT-OF-BUSINESS
HTTP://IHATETOMATOES.NET/MERRY-CHRISTMALLAX
HTTP://WWW.FIRSTAIDDORSET.CO.UK
`
#7 TRANSPARENT NAV
HTTP://SETSEED.COM
HTTP://WHITEBOARD.IS
HTTP://MIRABILIS.CO.AO
HTTP://WWW.MONTERE.IT
HTTPS://BENCH.CO
`
#8 GHOST BUTTONS
`
Let’s do this!
BE INSPIRED...
HTTP://WWW.VISAGE.CO
HTTPS://WWW.20JEANS.COM
HTTP://GETBOOTSTRAP.COM
HTTP://WWW.QUECHUA.COM/LOOKBOOK-SPRING-SUMMER-14/ES
HTTP://WWW.BARACKOBAMA.COM/MINIMUM-WAGE-SPLASH
HTTP://WWW.STOCKHOLMMEDIAWEEK.COM
HTTP://WWW.THEMESKINGDOM.COM
`
#9 STICKY HEADERS
SIMPLE, EASY-TO-ACCESS NAVIGATION
SAVES TIME
BRAND BUILDING
IMPROVED USER EXPERIENCE
...CHECK IN MOBILE!
BENEFITS OF STICKY HEADERS
BE INSPIRED...
HTTPS://YOURKARMA.COM
HTTP://SEEDSPOT.ORG
HTTP://ALWAYSCREATIVE.NET
HTTP://ENGAGEINTERACTIVE.CO.UK
HTTP://WWW.ZENDESK.COM
HTTP://MASHABLE.COM
HTTP://WWW.CORVEL.COM
HTTP://GETBOOTSTRAP.COM
HTTP://WWW.ANNEXCORE.COM
HTTP://FOLKSVERONA.COM
`
#10 MOBILE-FIRST
TABLET vs. PHONE
`
74%
OF TEENAGERS USE THE INTERNET FROM THEIR
MOBILE PHONES
`
2014
MOBILE INTERNET ACCESS OVERTOOK
FIXED INTERNET ACCESS!
`
71%
OF MOBILE USERS EXPECT MOBILE WEBSITES TO
LOAD AS FAST, OR FASTER, THAN DESKTOP WEBSITES
BE INSPIRED...
HTTP://WWW.SQUARESPACE.COM
HTTP://WWW.MEDL.IO
HTTP://THISISTHEPLACE.TV
`
#11 SIMPLE COLOR SCHEMES
HTTP://FOUNDATION.ZURB.COM
HTTPS://BITPAY.COM
HTTP://IMAGEMECHANICS.COM.AU
HTTP://WWW.PENTAGON.FR
`
#12 SIMPLIFIED CONTENT
`
THE WEB
POOPS
`
SIMPLER
CONTENT
`
#13 BYE BYE SIDEBAR
`
#14 MANIPULATED IMAGERY
HTTP://WWW.SEATTLECIDERCOMPANY.COM
HTTP://LONDON2PARIS24.MICHAELTEMPEST.COM
HTTP://MELANIE-F.COM
HTTP://WWW.GETCELLARAPP.COM
`
#15 RESPONSIVE ICONS
HTTP://RESPONSIVEICONS.CO.UK
WEB HTTP://BINDTUNING.COM
FACEBOOK HTTP://FACEBOOK.COM/BINDSKINS
TWITTER @BINDSKINS
EMAIL BEATRIZ@BINDTUNING.COM

THANK YOU
GO TO BINDTUNING.COM

Weitere ähnliche Inhalte

Andere mochten auch

Macul2011 text
Macul2011 textMacul2011 text
Macul2011 textelizkeren
 
Portal Educativo Xunta
Portal Educativo XuntaPortal Educativo Xunta
Portal Educativo Xuntapcuestacefore
 
Saddleback Publications - 2013
Saddleback Publications - 2013Saddleback Publications - 2013
Saddleback Publications - 2013K.C. Boyd
 
Marcas más Populares México Febrero2012
Marcas más Populares México   Febrero2012Marcas más Populares México   Febrero2012
Marcas más Populares México Febrero2012IAB México
 
Перспективы продления жизни - Последние научные достижения (И. Артюхов)
Перспективы продления жизни - Последние научные достижения (И. Артюхов)Перспективы продления жизни - Последние научные достижения (И. Артюхов)
Перспективы продления жизни - Последние научные достижения (И. Артюхов)Matvey Ezhov
 
Tabela inss 2011
Tabela inss 2011Tabela inss 2011
Tabela inss 2011Joaoce2011
 
빛스캔 소개자료
빛스캔 소개자료빛스캔 소개자료
빛스캔 소개자료bitscan_info
 

Andere mochten auch (15)

Macul2011 text
Macul2011 textMacul2011 text
Macul2011 text
 
Portal Educativo Xunta
Portal Educativo XuntaPortal Educativo Xunta
Portal Educativo Xunta
 
KLEENEZE Uk Text Ewb 24
KLEENEZE Uk Text Ewb 24KLEENEZE Uk Text Ewb 24
KLEENEZE Uk Text Ewb 24
 
Kinas moderna historia
Kinas moderna historiaKinas moderna historia
Kinas moderna historia
 
Details of website
Details of websiteDetails of website
Details of website
 
Pt 175 rc-web
Pt 175 rc-webPt 175 rc-web
Pt 175 rc-web
 
Ch07 5
Ch07 5Ch07 5
Ch07 5
 
Saddleback Publications - 2013
Saddleback Publications - 2013Saddleback Publications - 2013
Saddleback Publications - 2013
 
Marcas más Populares México Febrero2012
Marcas más Populares México   Febrero2012Marcas más Populares México   Febrero2012
Marcas más Populares México Febrero2012
 
Перспективы продления жизни - Последние научные достижения (И. Артюхов)
Перспективы продления жизни - Последние научные достижения (И. Артюхов)Перспективы продления жизни - Последние научные достижения (И. Артюхов)
Перспективы продления жизни - Последние научные достижения (И. Артюхов)
 
EGYPT-I-OGJ
EGYPT-I-OGJEGYPT-I-OGJ
EGYPT-I-OGJ
 
Tabela inss 2011
Tabela inss 2011Tabela inss 2011
Tabela inss 2011
 
Puddles
PuddlesPuddles
Puddles
 
Portal educativo
Portal educativo Portal educativo
Portal educativo
 
빛스캔 소개자료
빛스캔 소개자료빛스캔 소개자료
빛스캔 소개자료
 

Ähnlich wie 15 Top Web Design Trends for 2014

How To Embed Khmer Fonts On FireFox3.5 , Safari, Opera, Google Chrome
How To Embed Khmer Fonts On FireFox3.5 , Safari, Opera, Google ChromeHow To Embed Khmer Fonts On FireFox3.5 , Safari, Opera, Google Chrome
How To Embed Khmer Fonts On FireFox3.5 , Safari, Opera, Google ChromeChanHan Hy
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJenRobbins
 
Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2elliotjaystocks
 
Evolution of web design
Evolution of web designEvolution of web design
Evolution of web designorientation b
 
Web Design Book of Trend 2013 - 2014
Web Design Book of Trend 2013 - 2014Web Design Book of Trend 2013 - 2014
Web Design Book of Trend 2013 - 2014Jessie Doan
 
Overboard.js - where are we going with with jsconfasia / devfestasia
Overboard.js - where are we going with with jsconfasia / devfestasiaOverboard.js - where are we going with with jsconfasia / devfestasia
Overboard.js - where are we going with with jsconfasia / devfestasiaChristian Heilmann
 
Why Can't We All Just Get Along?
Why Can't We All Just Get Along?Why Can't We All Just Get Along?
Why Can't We All Just Get Along?judybpresenting
 
Contemporary Trends In Web Design
Contemporary Trends In Web DesignContemporary Trends In Web Design
Contemporary Trends In Web DesignKenny Rosenberg
 
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS FrameworksDon’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS FrameworksWebVisions
 
Specialise or cross-skill
Specialise or cross-skillSpecialise or cross-skill
Specialise or cross-skillRuss Weakley
 
New Web Typography
New Web TypographyNew Web Typography
New Web TypographyMonotype
 
"Wordpress And Your Brand" 2010 - By Sara Cannon
"Wordpress And Your Brand" 2010 - By Sara Cannon"Wordpress And Your Brand" 2010 - By Sara Cannon
"Wordpress And Your Brand" 2010 - By Sara CannonSara Cannon
 
Controlling Web Typography
Controlling Web TypographyControlling Web Typography
Controlling Web TypographyTrent Walton
 
Cufon - Javascript Font Replacement
Cufon - Javascript Font ReplacementCufon - Javascript Font Replacement
Cufon - Javascript Font ReplacementDave Ross
 
Contemporary webdesign day 2
Contemporary webdesign day 2Contemporary webdesign day 2
Contemporary webdesign day 2Lukas Oppermann
 
Principles Of Web Design Workshop
Principles Of Web Design WorkshopPrinciples Of Web Design Workshop
Principles Of Web Design WorkshopGavin Elliott
 

Ähnlich wie 15 Top Web Design Trends for 2014 (20)

Trends in web designing. Not only about how to create but also how to sell be...
Trends in web designing. Not only about how to create but also how to sell be...Trends in web designing. Not only about how to create but also how to sell be...
Trends in web designing. Not only about how to create but also how to sell be...
 
How To Embed Khmer Fonts On FireFox3.5 , Safari, Opera, Google Chrome
How To Embed Khmer Fonts On FireFox3.5 , Safari, Opera, Google ChromeHow To Embed Khmer Fonts On FireFox3.5 , Safari, Opera, Google Chrome
How To Embed Khmer Fonts On FireFox3.5 , Safari, Opera, Google Chrome
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
 
Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2
 
Evolution of web design
Evolution of web designEvolution of web design
Evolution of web design
 
Web Design Book of Trend 2013 - 2014
Web Design Book of Trend 2013 - 2014Web Design Book of Trend 2013 - 2014
Web Design Book of Trend 2013 - 2014
 
Web Interface
Web InterfaceWeb Interface
Web Interface
 
Overboard.js - where are we going with with jsconfasia / devfestasia
Overboard.js - where are we going with with jsconfasia / devfestasiaOverboard.js - where are we going with with jsconfasia / devfestasia
Overboard.js - where are we going with with jsconfasia / devfestasia
 
Why Can't We All Just Get Along?
Why Can't We All Just Get Along?Why Can't We All Just Get Along?
Why Can't We All Just Get Along?
 
Contemporary Trends In Web Design
Contemporary Trends In Web DesignContemporary Trends In Web Design
Contemporary Trends In Web Design
 
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS FrameworksDon’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
 
Specialise or cross-skill
Specialise or cross-skillSpecialise or cross-skill
Specialise or cross-skill
 
All You Need to Know About Front End.pdf
All You Need to Know About Front End.pdfAll You Need to Know About Front End.pdf
All You Need to Know About Front End.pdf
 
New Web Typography
New Web TypographyNew Web Typography
New Web Typography
 
"Wordpress And Your Brand" 2010 - By Sara Cannon
"Wordpress And Your Brand" 2010 - By Sara Cannon"Wordpress And Your Brand" 2010 - By Sara Cannon
"Wordpress And Your Brand" 2010 - By Sara Cannon
 
Controlling Web Typography
Controlling Web TypographyControlling Web Typography
Controlling Web Typography
 
Cufon - Javascript Font Replacement
Cufon - Javascript Font ReplacementCufon - Javascript Font Replacement
Cufon - Javascript Font Replacement
 
Contemporary webdesign day 2
Contemporary webdesign day 2Contemporary webdesign day 2
Contemporary webdesign day 2
 
Principles Of Web Design Workshop
Principles Of Web Design WorkshopPrinciples Of Web Design Workshop
Principles Of Web Design Workshop
 
The Trouble With Type
The Trouble With TypeThe Trouble With Type
The Trouble With Type
 

Kürzlich hochgeladen

IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119APNIC
 
Cybersecurity Threats and Cybersecurity Best Practices
Cybersecurity Threats and Cybersecurity Best PracticesCybersecurity Threats and Cybersecurity Best Practices
Cybersecurity Threats and Cybersecurity Best PracticesLumiverse Solutions Pvt Ltd
 
TRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxTRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxAndrieCagasanAkio
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predieusebiomeyer
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxmibuzondetrabajo
 
ETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxNIMMANAGANTI RAMAKRISHNA
 
Company Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxCompany Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxMario
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书rnrncn29
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书rnrncn29
 

Kürzlich hochgeladen (9)

IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119
 
Cybersecurity Threats and Cybersecurity Best Practices
Cybersecurity Threats and Cybersecurity Best PracticesCybersecurity Threats and Cybersecurity Best Practices
Cybersecurity Threats and Cybersecurity Best Practices
 
TRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxTRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptx
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predi
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptx
 
ETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptx
 
Company Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxCompany Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptx
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
 

15 Top Web Design Trends for 2014

Hinweis der Redaktion

  1. This was the trend in 2012
  2. 2009
  3. 2010
  4. 2011
  5. 2012
  6. 2013/2014
  7. http://youtu.be/HBOKWCpwGfM