modern web design trends 2016
TRANSCRIPT
Marianne Kay, Analyst at Digital Clarity GroupJBoye Conference 2015, Aarhus, Denmark.
Modern Web Design Trends 2016
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.
@marianne_ua | @just_clarity | #JBoye15
Sneak previewGuide to Service Providersfor WCM and CEM
http://www.digitalclaritygroup.com/guide-to-service-providers-europe/
Credits and thanks
@marianne_ua | @just_clarity | #JBoye15
Why Modern Web Design?
@marianne_ua | @just_clarity | #JBoye15
First Impression confident experienced polite friendly professional
in <10 seconds...
@marianne_ua | @just_clarity | #JBoye15
You don’t get a second chanceto make a great first impression.
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
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
Neat or de-cluttered homepage
@marianne_ua | @just_clarity | #JBoye15
Inside the home of one of Britain's biggest hoarders http://www.mirror.co.uk/news/uk-news/pictured-inside-home-one-britains-4977503
Relate – the relationship people. Designed and built by Leeds-based Curve Agency.http://www.curveagency.com/drupal-case-studies/responsive-drupal-website-relate-uk
Neat or de-cluttered homepage
http://getalifephd.blogspot.co.uk/2012/10/how-professional-editor-can-help-your.html
@marianne_ua | @just_clarity | #JBoye15
Clarity
Office hours: https://officehours.io/
Irresistible images
@marianne_ua | @just_clarity | #JBoye15
NOT overused stock images!
Unfinished Business http://www.foxmovies.com/movies/unfinished-business
NOT overused stock images
NOT overused stock images!
Unfinished Business http://www.foxmovies.com/movies/unfinished-business
NOT overused stock images!
Unfinished Business http://www.foxmovies.com/movies/unfinished-business
a kitten freaks outEvery time you use a filler stock image,
@marianne_ua | @just_clarity | #JBoye15
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
Letterbox format
@marianne_ua | @just_clarity | #JBoye15
Letterbox format
http://www.chadfullerton.com/twitter-header-dimensions-2014/
Twitter Header Image template:
Irresistible images Authentic, original photos Full-screen, scalable images Letterbox format Monochrome, muted, tinted Images that tell a story
@marianne_ua | @just_clarity | #JBoye15
Text over images
@marianne_ua | @just_clarity | #JBoye15
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
Video backgrounds
@marianne_ua | @just_clarity | #JBoye15
New perspectives
@marianne_ua | @just_clarity | #JBoye15
Subtle animations
@marianne_ua | @just_clarity | #JBoye15
Ghost buttons
@marianne_ua | @just_clarity | #JBoye15
High performance
@marianne_ua | @just_clarity | #JBoye15
High Performance Responsive is complex – performance
requires attention Avoid downloading heavy images Conditional loading Flat design
@marianne_ua | @just_clarity | #JBoye15
Flat vs rich
Sticky navigation
@marianne_ua | @just_clarity | #JBoye15
Sticky navigation
Cards
@marianne_ua | @just_clarity | #JBoye15
Mobile-first influence
@marianne_ua | @just_clarity | #JBoye15
Fairness, ethical values
@marianne_ua | @just_clarity | #JBoye15
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
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
Analyst at Digital Clarity Group
[email protected] @marianne_ua uk.linkedin.com/in/mariannekay www.facebook.com/marianne.kay.uk
Marianne Kay
Look your best!Who said love is blind?
- Mae West
@marianne_ua | @just_clarity | #JBoye15