View
3.935
Download
2
Category
Tags:
Preview:
DESCRIPTION
Internal presentation at Langoor to discuss web design trends for 2014
Citation preview
Web Design in 2014
2013-
• Flash• Fixed width (& desktop only)• Everything on 1 page• Safe Web Fonts• 4 dominant browers / OSs / Resolutions
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-you/
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 Sans, Impact, Lucida Sans, Tahoma, Trebuchet MS, Verdana
• Monspace – Courier New, Lucida Console
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, content• Typography• Transaction > Visual
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/
ContentCore Features Clear
Attention on 1 story
Enough breathing space for readability
Highlight hierarchy clear
http://www.firstpost.com
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/animate/– https://www.google.com/webdesigner/
HTML, CSS & Javascript Ready
• Various libraries available– http://jqueryui.com/– http://html5boilerplate.com/– http://getbootstrap.com/2.3.2/– http://wijmo.com/
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 considerations• Internet of Things• Canva, Weebly
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/• http://alistapart.com/• News.ycombinator.com• Launch.co
Recommended