Web design trends in 2014

4,647 views
4,403 views

Published on

Internal presentation at Langoor to discuss web design trends for 2014

Published in: Technology, Design
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,647
On SlideShare
0
From Embeds
0
Number of Embeds
1,470
Actions
Shares
0
Downloads
95
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Web design trends in 2014

  1. 1. Web Design in 2014
  2. 2. 2013• • • • • Flash Fixed width (& desktop only) Everything on 1 page Safe Web Fonts 4 dominant browers / OSs / Resolutions
  3. 3. Flash http://www.ogilvy.com
  4. 4. Fixed Web Layouts http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
  5. 5. 1 Page Design (except Parallax, Portfolio & Personal websites) http://somersbycider.com/
  6. 6. Safe Web Fonts • Serif – Georgia, Palatino, Book Antiqua, Times New Roman, times • Sans-Serif – Arial, Helvetica, Comic Sans, Impact, Lucida Sans, Tahoma, Trebuchet MS, Verdana • Monspace – Courier New, Lucida Console
  7. 7. 4 browsers • Its not just about IE, Chrome, Firefox and Safari on desktop anymore
  8. 8. 2014+ Concepts • • • • • • Responsive Design – Tablet First Full-width designs Infinite Scrolling Content, content, content Typography Transaction > Visual
  9. 9. 2014+ Tech • HTML5 / CSS 3 – Text Shadows – Transitions – Animations – Canvas – Forms
  10. 10. 2014+ Visual • • • • • Flat Design & Blocks Vertical Navigation Minimalism, Simplicity & White Space Pastels Big Images
  11. 11. Tablet first http://www.forbes.com/sites/fredcavazza/2012/11/13/forget-mobile-first-think-tablet-first/
  12. 12. Full Width Design http://smashingmagazine.com/
  13. 13. Full Width Design http://smashingmagazine.com/
  14. 14. Infinite Scrolling • Pinterest • Facebook • LinkedIn • Load More or “Load More” button
  15. 15. Content, Content, Content http://ia.net/
  16. 16. Content Core Features Clear Attention on 1 story Enough breathing space for readability Highlight hierarchy clear http://www.firstpost.com
  17. 17. Typography http://17grad.com/
  18. 18. Typography
  19. 19. Typography • CSS3 – Web Fonts • http://www.google.com/fonts • https://typekit.com/ http://wootten.ca/
  20. 20. Transaction > Visual http://www.amazon.com/gp/product/B00B7D4CS0/
  21. 21. Transaction > Visual http://www.amazon.com/Black-Friday/b/
  22. 22. HTML5 / CSS3 • http://html5readiness.com/ • http://beta.theexpressiveweb.com/ • Some tools: – http://html.adobe.com/edge/animate/ – https://www.google.com/webdesigner/
  23. 23. HTML, CSS & Javascript Ready • Various libraries available – http://jqueryui.com/ – http://html5boilerplate.com/ – http://getbootstrap.com/2.3.2/ – http://wijmo.com/
  24. 24. Flat Design & Blocks iOs & Windows Mobile
  25. 25. Flat Design & Blocks http://www.lonelyplanet.com/
  26. 26. Flat Design & Blocks Wistia.com
  27. 27. Vertical Nav is back http://www.smashingmagazine.com/
  28. 28. Vertical Nav – FB/Mobile FB Mobile & Jpanel Menu
  29. 29. Minimalism http://www.coopbrandpartners.com/
  30. 30. Simplicity http://www.convoyinteractive.com/
  31. 31. White Space http://www.apple.com/au/
  32. 32. Pastels http://everylastdrop.co.uk/
  33. 33. Pastels http://undertheweather.eu/
  34. 34. Big Images http://oliviarestauranter.no/
  35. 35. Video Background http://jasonmagbanua.com/
  36. 36. Other trends • • • • • • Conversions Video Integrations Social Media where it makes sense SEO & Digital Marketing considerations Internet of Things Canva, Weebly
  37. 37. World of Themes • http://themeforest.net/ • http://www.templatemonster.com/ • http://www.woothemes.com/
  38. 38. Websites to Watch • • • • • • http://www.awwwards.com/ http://www.chromeexperiments.com/ http://www.smashingmagazine.com/ http://alistapart.com/ News.ycombinator.com Launch.co

×