Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web Design in 2014
2013•
•
•
•
•

Flash
Fixed width (& desktop only)
Everything on 1 page
Safe Web Fonts
4 dominant browers / OSs / Resolutio...
Flash

http://www.ogilvy.com
Fixed Web Layouts

http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-...
1 Page Design
(except Parallax, Portfolio & Personal websites)

http://somersbycider.com/
Safe Web Fonts
• Serif – Georgia, Palatino, Book Antiqua, Times
New Roman, times
• Sans-Serif – Arial, Helvetica, Comic Sa...
4 browsers
• Its not just about IE, Chrome, Firefox and
Safari on desktop anymore
2014+ Concepts
•
•
•
•
•
•

Responsive Design – Tablet First
Full-width designs
Infinite Scrolling
Content, content, conte...
2014+ Tech
• HTML5 / CSS 3
– Text Shadows
– Transitions
– Animations
– Canvas
– Forms
2014+ Visual
•
•
•
•
•

Flat Design & Blocks
Vertical Navigation
Minimalism, Simplicity & White Space
Pastels
Big Images
Tablet first

http://www.forbes.com/sites/fredcavazza/2012/11/13/forget-mobile-first-think-tablet-first/
Full Width Design

http://smashingmagazine.com/
Full Width Design

http://smashingmagazine.com/
Infinite Scrolling
• Pinterest
• Facebook
• LinkedIn
• Load More or “Load More” button
Content, Content, Content

http://ia.net/
Content
Core Features Clear

Attention on 1 story
Enough breathing space for readability
Highlight hierarchy clear

http:/...
Typography

http://17grad.com/
Typography
Typography
• CSS3 – Web Fonts
• http://www.google.com/fonts
• https://typekit.com/

http://wootten.ca/
Transaction > Visual

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

http://www.amazon.com/Black-Friday/b/
HTML5 / CSS3
• http://html5readiness.com/
• http://beta.theexpressiveweb.com/
• Some tools:
– http://html.adobe.com/edge/a...
HTML, CSS & Javascript Ready
• Various libraries available
– http://jqueryui.com/
– http://html5boilerplate.com/
– http://...
Flat Design & Blocks

iOs & Windows Mobile
Flat Design & Blocks

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

Wistia.com
Vertical Nav is back

http://www.smashingmagazine.com/
Vertical Nav – FB/Mobile

FB Mobile & Jpanel Menu
Minimalism

http://www.coopbrandpartners.com/
Simplicity

http://www.convoyinteractive.com/
White Space

http://www.apple.com/au/
Pastels

http://everylastdrop.co.uk/
Pastels

http://undertheweather.eu/
Big Images

http://oliviarestauranter.no/
Video Background

http://jasonmagbanua.com/
Other trends
•
•
•
•
•
•

Conversions
Video Integrations
Social Media where it makes sense
SEO & Digital Marketing conside...
World of Themes
• http://themeforest.net/
• http://www.templatemonster.com/
• http://www.woothemes.com/
Websites to Watch
•
•
•
•
•
•

http://www.awwwards.com/
http://www.chromeexperiments.com/
http://www.smashingmagazine.com/...
Upcoming SlideShare
Loading in …5
×

Web design trends in 2014

5,042 views

Published on

Internal presentation at Langoor to discuss web design trends for 2014

Published in: Technology, Design
  • Be the first to comment

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

×