15 Top Web Design Trends for 2014

TOP 15TRENDS 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

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 USEPERCEIVED AS HONESTTRENDYEFFICIENT 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!

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/

#3 LARGE#3 HUGEHERO AREAS

10 YEARS OF HOMEPAGESTHE 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.COMHTTP://TAP.UNICEFUSA.ORG

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

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 ENGAGEMENTINCREASE CONVERSION BY 80%MORE TIME ON THE WEB SITEINCREASE TRUST FACTORUSERS PREFER TO WATCH

WHY?

AUTOPLAY VS. PRESS PLAYADD A CALL-TO-ACTIONSHORT VS. LONGOVERLAY AUDIO LATERADD 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

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 STORYREDUCED CONTENTCALL-TO-ACTIONMOBILE APPS

WHEN?

`#6 PARALLAX SCROLLING

1ST PARALLAX “MOON PATROL” - 1982

http://youtu.be/HBOKWCpwGfM

BE INSPIRED...

HTTP://WWW.SPENDEEAPP.COMHTTP://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

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

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

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 NAVIGATIONSAVES TIMEBRAND BUILDINGIMPROVED 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

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