15 Top Web Design Trends for 2014

Download 15 Top Web Design Trends for 2014

Post on 23-Aug-2014

883 views

Category:

Internet

1 download

DESCRIPTION

Discover the top Web Design trends for 2014, and create the most awesome websites. From trendy to

TRANSCRIPT

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 webs 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 ` Lets 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