SlideShare a Scribd company logo
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

More Related Content

Viewers also liked

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
 

Viewers also liked (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 to 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 to 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
 

Recently uploaded

一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
aagad
 
Article writing on excessive use of internet.pptx
Article writing on excessive use of internet.pptxArticle writing on excessive use of internet.pptx
Article writing on excessive use of internet.pptx
abhinandnam9997
 

Recently uploaded (12)

The AI Powered Organization-Intro to AI-LAN.pdf
The AI Powered Organization-Intro to AI-LAN.pdfThe AI Powered Organization-Intro to AI-LAN.pdf
The AI Powered Organization-Intro to AI-LAN.pdf
 
The Best AI Powered Software - Intellivid AI Studio
The Best AI Powered Software - Intellivid AI StudioThe Best AI Powered Software - Intellivid AI Studio
The Best AI Powered Software - Intellivid AI Studio
 
How to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptxHow to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptx
 
The+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptxThe+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptx
 
1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...
 
ER(Entity Relationship) Diagram for online shopping - TAE
ER(Entity Relationship) Diagram for online shopping - TAEER(Entity Relationship) Diagram for online shopping - TAE
ER(Entity Relationship) Diagram for online shopping - TAE
 
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shopHistory+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
 
The Use of AI in Indonesia Election 2024: A Case Study
The Use of AI in Indonesia Election 2024: A Case StudyThe Use of AI in Indonesia Election 2024: A Case Study
The Use of AI in Indonesia Election 2024: A Case Study
 
Stay Ahead with 2024's Top Web Design Trends
Stay Ahead with 2024's Top Web Design TrendsStay Ahead with 2024's Top Web Design Trends
Stay Ahead with 2024's Top Web Design Trends
 
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
 
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesMulti-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
 
Article writing on excessive use of internet.pptx
Article writing on excessive use of internet.pptxArticle writing on excessive use of internet.pptx
Article writing on excessive use of internet.pptx
 

15 Top Web Design Trends for 2014

Editor's Notes

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