15 Top Web Design Trends for 2014

2,541 views

Published on

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

Published in: Internet, Technology, Business
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,541
On SlideShare
0
From Embeds
0
Number of Embeds
52
Actions
Shares
0
Downloads
122
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide
  • This was the trend in 2012
  • 2009
  • 2010
  • 2011
  • 2012
  • 2013/2014
  • http://youtu.be/HBOKWCpwGfM
  • 15 Top Web Design Trends for 2014

    1. 1. TOP 15 TRENDS FOR 2014 BEATRIZ OLIVEIRA
    2. 2. TRENDS...
    3. 3. WEB DESIGN TRENDS TOP 15
    4. 4. ` #1 NON-BORING FONTS
    5. 5. 10 YEARS AGO
    6. 6. sIFR 2005
    7. 7. Cufon 2008
    8. 8. CSS3 Web Fonts NOW
    9. 9. PERSONALITY
    10. 10. BE INSPIRED...
    11. 11. 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
    12. 12. ` #2 FLAT DESIGN
    13. 13. SKEUOMORPHISM 2012
    14. 14. FLAT 2014
    15. 15. EASY TO USE PERCEIVED AS HONEST TRENDY EFFICIENT RESPONSIVE DESIGN FASTER LOADING TIMES BENEFITS OF FLAT DESIGN
    16. 16. BE INSPIRED...
    17. 17. 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!
    18. 18. #3 LARGE#3 HUGE HERO AREAS
    19. 19. 10 YEARS OF HOMEPAGES THE MAILCHIMP WEBSITE
    20. 20. 2004
    21. 21. 2005
    22. 22. 2008
    23. 23. 2009
    24. 24. 2010
    25. 25. 2011
    26. 26. 2012
    27. 27. 2014
    28. 28. BE INSPIRED...
    29. 29. 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
    30. 30. ` #4 VIDEOS ... NOT TEXT
    31. 31. ` 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”.
    32. 32. BE INSPIRED...
    33. 33. 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
    34. 34. PASSIVE ENGAGEMENT INCREASE CONVERSION BY 80% MORE TIME ON THE WEB SITE INCREASE TRUST FACTOR USERS PREFER TO WATCH WHY?
    35. 35. AUTOPLAY VS. PRESS PLAY ADD A CALL-TO-ACTION SHORT VS. LONG OVERLAY AUDIO LATER ADD TO YOUTUBE MAKING VIDEOS MORE EFFECTIVE
    36. 36. ` #5 SINGLE PAGE/LONG SCROLL
    37. 37. BE INSPIRED...
    38. 38. 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
    39. 39. TELL A STORY REDUCED CONTENT CALL-TO-ACTION MOBILE APPS WHEN?
    40. 40. ` #6 PARALLAX SCROLLING
    41. 41. 1ST PARALLAX “MOON PATROL” - 1982
    42. 42. BE INSPIRED...
    43. 43. 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
    44. 44. ` #7 TRANSPARENT NAV
    45. 45. HTTP://SETSEED.COM HTTP://WHITEBOARD.IS HTTP://MIRABILIS.CO.AO HTTP://WWW.MONTERE.IT HTTPS://BENCH.CO
    46. 46. ` #8 GHOST BUTTONS
    47. 47. ` Let’s do this!
    48. 48. BE INSPIRED...
    49. 49. 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
    50. 50. ` #9 STICKY HEADERS
    51. 51. SIMPLE, EASY-TO-ACCESS NAVIGATION SAVES TIME BRAND BUILDING IMPROVED USER EXPERIENCE ...CHECK IN MOBILE! BENEFITS OF STICKY HEADERS
    52. 52. BE INSPIRED...
    53. 53. 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
    54. 54. ` #10 MOBILE-FIRST
    55. 55. TABLET vs. PHONE
    56. 56. ` 74% OF TEENAGERS USE THE INTERNET FROM THEIR MOBILE PHONES
    57. 57. ` 2014 MOBILE INTERNET ACCESS OVERTOOK FIXED INTERNET ACCESS!
    58. 58. ` 71% OF MOBILE USERS EXPECT MOBILE WEBSITES TO LOAD AS FAST, OR FASTER, THAN DESKTOP WEBSITES
    59. 59. BE INSPIRED...
    60. 60. HTTP://WWW.SQUARESPACE.COM HTTP://WWW.MEDL.IO HTTP://THISISTHEPLACE.TV
    61. 61. ` #11 SIMPLE COLOR SCHEMES
    62. 62. HTTP://FOUNDATION.ZURB.COM HTTPS://BITPAY.COM HTTP://IMAGEMECHANICS.COM.AU HTTP://WWW.PENTAGON.FR
    63. 63. ` #12 SIMPLIFIED CONTENT
    64. 64. ` THE WEB POOPS
    65. 65. ` SIMPLER CONTENT
    66. 66. ` #13 BYE BYE SIDEBAR
    67. 67. ` #14 MANIPULATED IMAGERY
    68. 68. HTTP://WWW.SEATTLECIDERCOMPANY.COM HTTP://LONDON2PARIS24.MICHAELTEMPEST.COM HTTP://MELANIE-F.COM HTTP://WWW.GETCELLARAPP.COM
    69. 69. ` #15 RESPONSIVE ICONS
    70. 70. HTTP://RESPONSIVEICONS.CO.UK
    71. 71. WEB HTTP://BINDTUNING.COM FACEBOOK HTTP://FACEBOOK.COM/BINDSKINS TWITTER @BINDSKINS EMAIL BEATRIZ@BINDTUNING.COM
    72. 72.  THANK YOU
    73. 73. GO TO BINDTUNING.COM

    ×