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.

Modern Web Design Trends 2016

4,365 views

Published on

Looking your best is about making an effort, adding a personal touch, creating a subtle detail that is fresh, stylish and fits naturally with who you are. It reflects your state of mind, frames your self-esteem and shows people around you that you care. It creates powerful and lasting first impressions, before you even look the other person in the eye.

Making a great first impression online is just as important. Website visitors will decide whether they like what they see within the first 50 milliseconds. And one in five will leave a website after 5 seconds, not giving you a second chance.

In this session we will talk about web design trends that are set to dominate in 2016. We will see how these trends can be broken down into specific and discrete tasks, and how small evolutionary changes can make a big difference.

We will cover:
- 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.
- The increasing influence of mobile first approach.
- Fairness, ethical values, community, environment.

Look your best – it’s worth it!

Published in: Design

Modern Web Design Trends 2016

  1. 1. Marianne Kay, Analyst at Digital Clarity Group JBoye Conference 2015, Aarhus, Denmark. Modern Web Design Trends 2016
  2. 2. 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.
  3. 3. @marianne_ua | @just_clarity | #JBoye15 Sneak previewGuide to Service Providers for WCM and CEM http://www.digitalclaritygroup.com/guide-to-service-providers-europe/
  4. 4. Credits and thanks @marianne_ua | @just_clarity | #JBoye15
  5. 5. Why Modern Web Design? @marianne_ua | @just_clarity | #JBoye15
  6. 6. First Impression  confident  experienced  polite  friendly  professional in <10 seconds... @marianne_ua | @just_clarity | #JBoye15
  7. 7. You don’t get a second chance to make a great first impression.
  8. 8. 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, Canada http://www.ext.colostate.edu/conferences/ace-netc/lindgaard.pdf @marianne_ua | @just_clarity | #JBoye15
  9. 9. 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
  10. 10. Neat or de-cluttered homepage @marianne_ua | @just_clarity | #JBoye15
  11. 11. Inside the home of one of Britain's biggest hoarders http://www.mirror.co.uk/news/uk-news/pictured-inside-home-one-britains-4977503
  12. 12. Relate – the relationship people. Designed and built by Leeds-based Curve Agency. http://www.curveagency.com/drupal-case-studies/responsive-drupal-website-relate-uk
  13. 13. Neat or de-cluttered homepage http://getalifephd.blogspot.co.uk/2012/10/how-professional-editor-can-help-your.html @marianne_ua | @just_clarity | #JBoye15
  14. 14. Clarity Office hours: https://officehours.io/
  15. 15. Irresistible images @marianne_ua | @just_clarity | #JBoye15
  16. 16. NOT overused stock images! Unfinished Business http://www.foxmovies.com/movies/unfinished-business
  17. 17. NOT overused stock images NOT overused stock images! Unfinished Business http://www.foxmovies.com/movies/unfinished-business
  18. 18. NOT overused stock images! Unfinished Business http://www.foxmovies.com/movies/unfinished-business
  19. 19. a kitten freaks out Every time you use a filler stock image, @marianne_ua | @just_clarity | #JBoye15
  20. 20.  Death to Stock http://www.deathtothestockphoto.com  iStock http://www.istockphoto.com/  Adobe Stock https://stock.adobe.com/uk/  Shutterstock http://www.shutterstock.com  17 Amazing Sites With Breathtaking Free Stock Photos https://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
  21. 21. Letterbox format @marianne_ua | @just_clarity | #JBoye15
  22. 22. Letterbox format http://www.chadfullerton.com/twitter-header-dimensions-2014/ Twitter Header Image template:
  23. 23. NoPhone http://www.thenophone.com/
  24. 24. Irresistible images  Authentic, original photos  Full-screen, scalable images  Letterbox format  Monochrome, muted, tinted  Images that tell a story @marianne_ua | @just_clarity | #JBoye15
  25. 25. Text over images @marianne_ua | @just_clarity | #JBoye15
  26. 26. 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
  27. 27. Video backgrounds @marianne_ua | @just_clarity | #JBoye15
  28. 28. Video backgrounds
  29. 29. New perspectives @marianne_ua | @just_clarity | #JBoye15
  30. 30. Subtle animations @marianne_ua | @just_clarity | #JBoye15
  31. 31. Ghost buttons @marianne_ua | @just_clarity | #JBoye15
  32. 32. High performance @marianne_ua | @just_clarity | #JBoye15
  33. 33. High Performance  Responsive is complex – performance requires attention  Avoid downloading heavy images  Conditional loading  Flat design @marianne_ua | @just_clarity | #JBoye15
  34. 34. Flat vs rich
  35. 35. Sticky navigation @marianne_ua | @just_clarity | #JBoye15
  36. 36. Sticky navigation
  37. 37. Cards @marianne_ua | @just_clarity | #JBoye15
  38. 38. Mobile-first influence @marianne_ua | @just_clarity | #JBoye15
  39. 39. Fairness, ethical values @marianne_ua | @just_clarity | #JBoye15
  40. 40. 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
  41. 41. Summary  Clear and simple uncluttered, flat design  Responsive, scalable, interactive full-screen images, mobile icons  Real, authentic original images, telling a story @marianne_ua | @just_clarity | #JBoye15
  42. 42. Analyst at Digital Clarity Group  mkay@digitalclaritygroup.com  @marianne_ua  uk.linkedin.com/in/mariannekay  www.facebook.com/marianne.kay.uk Marianne Kay
  43. 43. Look your best! Who said love is blind? - Mae West @marianne_ua | @just_clarity | #JBoye15

×