Internal presentation at Langoor to discuss web design trends for 2014

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. Flash
http://www.ogilvy.com

4. Fixed Web Layouts
http://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 first
http://www.forbes.com/sites/fredcavazza/2012/11/13/forget-mobile-first-think-tablet-first/

12. Full Width Design
http://smashingmagazine.com/

13. Full Width Design
http://smashingmagazine.com/

14. Infinite Scrolling
• Pinterest
• Facebook
• LinkedIn
• Load More or “Load More” button

15. Content, Content, Content
http://ia.net/

16. Content
Core Features Clear
Attention on 1 story
Enough breathing space for readability
Highlight hierarchy clear
http://www.firstpost.com

17. Typography
http://17grad.com/

18. Typography

19. Typography
• CSS3 – Web Fonts
• http://www.google.com/fonts
• https://typekit.com/
http://wootten.ca/

20. Transaction > Visual
http://www.amazon.com/gp/product/B00B7D4CS0/

21. Transaction > Visual
http://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 & Blocks
iOs & Windows Mobile

25. Flat Design & Blocks
http://www.lonelyplanet.com/

26. Flat Design & Blocks
Wistia.com

27. Vertical Nav is back
http://www.smashingmagazine.com/

28. Vertical Nav – FB/Mobile
FB Mobile & Jpanel Menu

29. Minimalism
http://www.coopbrandpartners.com/

30. Simplicity
http://www.convoyinteractive.com/

31. White Space
http://www.apple.com/au/

32. Pastels
http://everylastdrop.co.uk/

33. Pastels
http://undertheweather.eu/

34. Big Images
http://oliviarestauranter.no/

35. Video Background
http://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