15 Top Web Design Trends for 2014
-
Upload
mbeatrizoliveira -
Category
Internet
-
view
888 -
download
1
description
Transcript of 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
`#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