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

Más contenido relacionado

Destacado

Macul2011 text
Macul2011 textMacul2011 text
Macul2011 text
elizkeren
 
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
IAB México
 
Tabela inss 2011
Tabela inss 2011Tabela inss 2011
Tabela inss 2011
Joaoce2011
 
빛스캔 소개자료
빛스캔 소개자료빛스캔 소개자료
빛스캔 소개자료
bitscan_info
 

Destacado (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
 
빛스캔 소개자료
빛스캔 소개자료빛스캔 소개자료
빛스캔 소개자료
 

Similar a 15 Top Web Design Trends for 2014

Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2
elliotjaystocks
 
Cufon - Javascript Font Replacement
Cufon - Javascript Font ReplacementCufon - Javascript Font Replacement
Cufon - Javascript Font Replacement
Dave Ross
 

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

Último

VIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 Booking
dharasingh5698
 
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
@Chandigarh #call #Girls 9053900678 @Call #Girls in @Punjab 9053900678
 
➥🔝 7737669865 🔝▻ mehsana Call-girls in Women Seeking Men 🔝mehsana🔝 Escorts...
➥🔝 7737669865 🔝▻ mehsana Call-girls in Women Seeking Men  🔝mehsana🔝   Escorts...➥🔝 7737669865 🔝▻ mehsana Call-girls in Women Seeking Men  🔝mehsana🔝   Escorts...
➥🔝 7737669865 🔝▻ mehsana Call-girls in Women Seeking Men 🔝mehsana🔝 Escorts...
nirzagarg
 
在线制作约克大学毕业证(yu毕业证)在读证明认证可查
在线制作约克大学毕业证(yu毕业证)在读证明认证可查在线制作约克大学毕业证(yu毕业证)在读证明认证可查
在线制作约克大学毕业证(yu毕业证)在读证明认证可查
ydyuyu
 

Último (20)

Hire↠Young Call Girls in Tilak nagar (Delhi) ☎️ 9205541914 ☎️ Independent Esc...
Hire↠Young Call Girls in Tilak nagar (Delhi) ☎️ 9205541914 ☎️ Independent Esc...Hire↠Young Call Girls in Tilak nagar (Delhi) ☎️ 9205541914 ☎️ Independent Esc...
Hire↠Young Call Girls in Tilak nagar (Delhi) ☎️ 9205541914 ☎️ Independent Esc...
 
Yerawada ] Independent Escorts in Pune - Book 8005736733 Call Girls Available...
Yerawada ] Independent Escorts in Pune - Book 8005736733 Call Girls Available...Yerawada ] Independent Escorts in Pune - Book 8005736733 Call Girls Available...
Yerawada ] Independent Escorts in Pune - Book 8005736733 Call Girls Available...
 
VIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 Booking
 
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
 
(INDIRA) Call Girl Pune Call Now 8250077686 Pune Escorts 24x7
(INDIRA) Call Girl Pune Call Now 8250077686 Pune Escorts 24x7(INDIRA) Call Girl Pune Call Now 8250077686 Pune Escorts 24x7
(INDIRA) Call Girl Pune Call Now 8250077686 Pune Escorts 24x7
 
Call Now ☎ 8264348440 !! Call Girls in Green Park Escort Service Delhi N.C.R.
Call Now ☎ 8264348440 !! Call Girls in Green Park Escort Service Delhi N.C.R.Call Now ☎ 8264348440 !! Call Girls in Green Park Escort Service Delhi N.C.R.
Call Now ☎ 8264348440 !! Call Girls in Green Park Escort Service Delhi N.C.R.
 
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service AvailableCall Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
 
Sarola * Female Escorts Service in Pune | 8005736733 Independent Escorts & Da...
Sarola * Female Escorts Service in Pune | 8005736733 Independent Escorts & Da...Sarola * Female Escorts Service in Pune | 8005736733 Independent Escorts & Da...
Sarola * Female Escorts Service in Pune | 8005736733 Independent Escorts & Da...
 
Real Men Wear Diapers T Shirts sweatshirt
Real Men Wear Diapers T Shirts sweatshirtReal Men Wear Diapers T Shirts sweatshirt
Real Men Wear Diapers T Shirts sweatshirt
 
Busty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort Service
Busty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort ServiceBusty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort Service
Busty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort Service
 
➥🔝 7737669865 🔝▻ mehsana Call-girls in Women Seeking Men 🔝mehsana🔝 Escorts...
➥🔝 7737669865 🔝▻ mehsana Call-girls in Women Seeking Men  🔝mehsana🔝   Escorts...➥🔝 7737669865 🔝▻ mehsana Call-girls in Women Seeking Men  🔝mehsana🔝   Escorts...
➥🔝 7737669865 🔝▻ mehsana Call-girls in Women Seeking Men 🔝mehsana🔝 Escorts...
 
20240508 QFM014 Elixir Reading List April 2024.pdf
20240508 QFM014 Elixir Reading List April 2024.pdf20240508 QFM014 Elixir Reading List April 2024.pdf
20240508 QFM014 Elixir Reading List April 2024.pdf
 
"Boost Your Digital Presence: Partner with a Leading SEO Agency"
"Boost Your Digital Presence: Partner with a Leading SEO Agency""Boost Your Digital Presence: Partner with a Leading SEO Agency"
"Boost Your Digital Presence: Partner with a Leading SEO Agency"
 
Al Barsha Night Partner +0567686026 Call Girls Dubai
Al Barsha Night Partner +0567686026 Call Girls  DubaiAl Barsha Night Partner +0567686026 Call Girls  Dubai
Al Barsha Night Partner +0567686026 Call Girls Dubai
 
20240509 QFM015 Engineering Leadership Reading List April 2024.pdf
20240509 QFM015 Engineering Leadership Reading List April 2024.pdf20240509 QFM015 Engineering Leadership Reading List April 2024.pdf
20240509 QFM015 Engineering Leadership Reading List April 2024.pdf
 
Microsoft Azure Arc Customer Deck Microsoft
Microsoft Azure Arc Customer Deck MicrosoftMicrosoft Azure Arc Customer Deck Microsoft
Microsoft Azure Arc Customer Deck Microsoft
 
Trump Diapers Over Dems t shirts Sweatshirt
Trump Diapers Over Dems t shirts SweatshirtTrump Diapers Over Dems t shirts Sweatshirt
Trump Diapers Over Dems t shirts Sweatshirt
 
20240510 QFM016 Irresponsible AI Reading List April 2024.pdf
20240510 QFM016 Irresponsible AI Reading List April 2024.pdf20240510 QFM016 Irresponsible AI Reading List April 2024.pdf
20240510 QFM016 Irresponsible AI Reading List April 2024.pdf
 
WhatsApp 📞 8448380779 ✅Call Girls In Mamura Sector 66 ( Noida)
WhatsApp 📞 8448380779 ✅Call Girls In Mamura Sector 66 ( Noida)WhatsApp 📞 8448380779 ✅Call Girls In Mamura Sector 66 ( Noida)
WhatsApp 📞 8448380779 ✅Call Girls In Mamura Sector 66 ( Noida)
 
在线制作约克大学毕业证(yu毕业证)在读证明认证可查
在线制作约克大学毕业证(yu毕业证)在读证明认证可查在线制作约克大学毕业证(yu毕业证)在读证明认证可查
在线制作约克大学毕业证(yu毕业证)在读证明认证可查
 

15 Top Web Design Trends for 2014

Notas del editor

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