Download - Modern Web Design Trends 2016
![Page 1: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/1.jpg)
Marianne Kay, Analyst at Digital Clarity GroupJBoye Conference 2015, Aarhus, Denmark.
Modern Web Design Trends 2016
![Page 2: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/2.jpg)
About Digital Clarity Group
We work with: Digital leaders
(enterprise technology adopters)
Technology vendors(software companies)
Service providers (digital agencies and system integrators)
We offer: Consultancy
(strategic advice, technology & agency selections)
Research(interviews, surveys, direct observations)
Thought Leadership(industry events, conferences, webinars, workshops)
Digital Clarity Group helps business leaders navigate the digital transformation and turn digital disruption into competitive advantage.
![Page 3: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/3.jpg)
@marianne_ua | @just_clarity | #JBoye15
Sneak previewGuide to Service Providersfor WCM and CEM
http://www.digitalclaritygroup.com/guide-to-service-providers-europe/
![Page 4: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/4.jpg)
Credits and thanks
@marianne_ua | @just_clarity | #JBoye15
![Page 5: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/5.jpg)
Why Modern Web Design?
@marianne_ua | @just_clarity | #JBoye15
![Page 6: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/6.jpg)
First Impression confident experienced polite friendly professional
in <10 seconds...
@marianne_ua | @just_clarity | #JBoye15
![Page 7: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/7.jpg)
You don’t get a second chanceto make a great first impression.
![Page 8: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/8.jpg)
First Impressions Online Research confirms that users make aesthetic decisions about the overall visual impression of web pages in as little as 50 milliseconds. These first impressions can colour subsequent judgements of perceived credibility, usability, and influence purchasing decisions
“Attention web designers: You have 50 milliseconds to make a good first impression.” Lindgaard, G., G. Fernandes, and C. Dudek. Behavior & Information Technology, Carleton University, Ottawa, Canadahttp://www.ext.colostate.edu/conferences/ace-netc/lindgaard.pdf
@marianne_ua | @just_clarity | #JBoye15
![Page 9: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/9.jpg)
![Page 10: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/10.jpg)
![Page 11: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/11.jpg)
Modern Web Design Trends Neat, de-cluttered homepage. Irresistible images. The new perspective: drones and action cameras. Text over images in responsive designs. Video backgrounds. Subtle animations. Ghost buttons. Sticky navigation. Cards. Increasing influence of mobile first approach. Fairness, ethical values, community, environment.
@marianne_ua | @just_clarity | #JBoye15
![Page 12: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/12.jpg)
Neat or de-cluttered homepage
@marianne_ua | @just_clarity | #JBoye15
![Page 13: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/13.jpg)
Inside the home of one of Britain's biggest hoarders http://www.mirror.co.uk/news/uk-news/pictured-inside-home-one-britains-4977503
![Page 14: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/14.jpg)
Relate – the relationship people. Designed and built by Leeds-based Curve Agency.http://www.curveagency.com/drupal-case-studies/responsive-drupal-website-relate-uk
![Page 15: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/15.jpg)
Neat or de-cluttered homepage
http://getalifephd.blogspot.co.uk/2012/10/how-professional-editor-can-help-your.html
@marianne_ua | @just_clarity | #JBoye15
![Page 16: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/16.jpg)
Clarity
Office hours: https://officehours.io/
![Page 17: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/17.jpg)
![Page 18: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/18.jpg)
Irresistible images
@marianne_ua | @just_clarity | #JBoye15
![Page 19: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/19.jpg)
NOT overused stock images!
Unfinished Business http://www.foxmovies.com/movies/unfinished-business
![Page 20: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/20.jpg)
NOT overused stock images
NOT overused stock images!
Unfinished Business http://www.foxmovies.com/movies/unfinished-business
![Page 21: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/21.jpg)
NOT overused stock images!
Unfinished Business http://www.foxmovies.com/movies/unfinished-business
![Page 22: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/22.jpg)
a kitten freaks outEvery time you use a filler stock image,
@marianne_ua | @just_clarity | #JBoye15
![Page 23: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/23.jpg)
Death to Stockhttp://www.deathtothestockphoto.com
iStockhttp://www.istockphoto.com/
Adobe Stockhttps://stock.adobe.com/uk/
Shutterstockhttp://www.shutterstock.com
17 Amazing Sites With Breathtaking Free Stock Photoshttps://bootstrapbay.com/blog/free-stock-photos/
14 Amazingly Free Stock Photo Websites http://www.entrepreneur.com/article/238646
Where to find good images?
@marianne_ua | @just_clarity | #JBoye15
![Page 24: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/24.jpg)
![Page 25: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/25.jpg)
![Page 26: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/26.jpg)
Letterbox format
@marianne_ua | @just_clarity | #JBoye15
![Page 27: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/27.jpg)
Letterbox format
http://www.chadfullerton.com/twitter-header-dimensions-2014/
Twitter Header Image template:
![Page 28: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/28.jpg)
![Page 29: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/29.jpg)
![Page 30: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/30.jpg)
![Page 32: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/32.jpg)
Irresistible images Authentic, original photos Full-screen, scalable images Letterbox format Monochrome, muted, tinted Images that tell a story
@marianne_ua | @just_clarity | #JBoye15
![Page 33: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/33.jpg)
Text over images
@marianne_ua | @just_clarity | #JBoye15
![Page 34: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/34.jpg)
![Page 35: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/35.jpg)
![Page 36: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/36.jpg)
![Page 37: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/37.jpg)
![Page 38: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/38.jpg)
Text over images White text over image Text over tinted or muted image Floor Fade Text in boxes
https://css-tricks.com/design-considerations-text-images/ @marianne_ua | @just_clarity | #JBoye15
![Page 39: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/39.jpg)
Video backgrounds
@marianne_ua | @just_clarity | #JBoye15
![Page 41: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/41.jpg)
New perspectives
@marianne_ua | @just_clarity | #JBoye15
![Page 42: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/42.jpg)
![Page 44: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/44.jpg)
Subtle animations
@marianne_ua | @just_clarity | #JBoye15
![Page 48: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/48.jpg)
Ghost buttons
@marianne_ua | @just_clarity | #JBoye15
![Page 49: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/49.jpg)
![Page 50: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/50.jpg)
High performance
@marianne_ua | @just_clarity | #JBoye15
![Page 51: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/51.jpg)
High Performance Responsive is complex – performance
requires attention Avoid downloading heavy images Conditional loading Flat design
@marianne_ua | @just_clarity | #JBoye15
![Page 52: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/52.jpg)
Flat vs rich
![Page 53: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/53.jpg)
Sticky navigation
@marianne_ua | @just_clarity | #JBoye15
![Page 54: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/54.jpg)
Sticky navigation
![Page 55: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/55.jpg)
Cards
@marianne_ua | @just_clarity | #JBoye15
![Page 56: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/56.jpg)
![Page 57: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/57.jpg)
Mobile-first influence
@marianne_ua | @just_clarity | #JBoye15
![Page 58: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/58.jpg)
![Page 59: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/59.jpg)
Fairness, ethical values
@marianne_ua | @just_clarity | #JBoye15
![Page 60: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/60.jpg)
![Page 61: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/61.jpg)
![Page 62: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/62.jpg)
![Page 63: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/63.jpg)
Modern Web Design Trends Neat, de-cluttered homepage. Irresistible images. The new perspective: drones and action cameras. Text over images in responsive designs. Video backgrounds. Subtle animations. Ghost buttons. Sticky navigation. Cards. Increasing influence of mobile first approach. Fairness, ethical values, community, environment.
@marianne_ua | @just_clarity | #JBoye15
![Page 64: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/64.jpg)
Summary Clear and simple
uncluttered, flat design
Responsive, scalable, interactivefull-screen images, mobile icons
Real, authenticoriginal images, telling a story
@marianne_ua | @just_clarity | #JBoye15
![Page 65: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/65.jpg)
Analyst at Digital Clarity Group
[email protected] @marianne_ua uk.linkedin.com/in/mariannekay www.facebook.com/marianne.kay.uk
Marianne Kay
![Page 66: Modern Web Design Trends 2016](https://reader035.vdocument.in/reader035/viewer/2022070602/5873cef61a28ab9d168b5d75/html5/thumbnails/66.jpg)
Look your best!Who said love is blind?
- Mae West
@marianne_ua | @just_clarity | #JBoye15