15 top web design trends for 2014
DESCRIPTION
Discover the top Web Design trends for 2014, and create the most awesome websites. From trendy toTRANSCRIPT
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
`#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!
#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
`#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 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
TELL A STORYREDUCED CONTENTCALL-TO-ACTIONMOBILE APPS
WHEN?
`#6 PARALLAX SCROLLING
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
`#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 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
`#10 MOBILE-FIRST
TABLET vs. PHONE
`74%OF TEENAGERS USE THE INTERNET
FROM THEIR MOBILE PHONES
`2014MOBILE INTERNET ACCESS
OVERTOOKFIXED 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 WEBPOOPS
`
SIMPLERCONTENT
`#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
WEB HTTP://BINDTUNING.COM
FACEBOOK HTTP://FACEBOOK.COM/BINDSKINS
TWITTER @BINDSKINS
EMAIL [email protected]
THANK YOU