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