Web design trends in 2014

Download Web design trends in 2014

Post on 27-Jan-2015

3.928 views

Category:

Technology

2 download

DESCRIPTION

Internal presentation at Langoor to discuss web design trends for 2014

TRANSCRIPT

  • 1. Web Design in 2014

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