Lunch and Learn : 5 Website Trends in 2016
Transcript of Lunch and Learn : 5 Website Trends in 2016
![Page 1: Lunch and Learn : 5 Website Trends in 2016](https://reader034.fdocuments.in/reader034/viewer/2022052705/58f1d1b41a28ab31558b45bb/html5/thumbnails/1.jpg)
Lunch and Learn: 5 Web Design Trends for 2016February 19, 2016
![Page 2: Lunch and Learn : 5 Website Trends in 2016](https://reader034.fdocuments.in/reader034/viewer/2022052705/58f1d1b41a28ab31558b45bb/html5/thumbnails/2.jpg)
Agenda
1. FLAT DESIGN 2.0
2. MOBILE FIRST
3. MICROINTERACTIONS
4. ANIMATIONS
5. FRESH IMAGERY
6. FINAL THOUGHTS
2
![Page 3: Lunch and Learn : 5 Website Trends in 2016](https://reader034.fdocuments.in/reader034/viewer/2022052705/58f1d1b41a28ab31558b45bb/html5/thumbnails/3.jpg)
FLAT DESIGN 2.0
3
![Page 4: Lunch and Learn : 5 Website Trends in 2016](https://reader034.fdocuments.in/reader034/viewer/2022052705/58f1d1b41a28ab31558b45bb/html5/thumbnails/4.jpg)
A Quick History Lesson
Before Flat Design came along, there was something called skeuomorphism.
4
Interface elements are made to look like their physical counterparts.
![Page 5: Lunch and Learn : 5 Website Trends in 2016](https://reader034.fdocuments.in/reader034/viewer/2022052705/58f1d1b41a28ab31558b45bb/html5/thumbnails/5.jpg)
A Quick History Lesson
Eventually, the world got tired of it. So designers pulled a complete 180.
5
Gone are the gradients and leather stitching!
![Page 6: Lunch and Learn : 5 Website Trends in 2016](https://reader034.fdocuments.in/reader034/viewer/2022052705/58f1d1b41a28ab31558b45bb/html5/thumbnails/6.jpg)
Introducing Flat Design 2.0
AKA skeuomorphism and flat design’s baby
6
Google’s Material Design is one example with subtle shadows and highlights.
![Page 7: Lunch and Learn : 5 Website Trends in 2016](https://reader034.fdocuments.in/reader034/viewer/2022052705/58f1d1b41a28ab31558b45bb/html5/thumbnails/7.jpg)
MOBILE FIRST
7
![Page 8: Lunch and Learn : 5 Website Trends in 2016](https://reader034.fdocuments.in/reader034/viewer/2022052705/58f1d1b41a28ab31558b45bb/html5/thumbnails/8.jpg)
Mobile > Desktop Usage
As a result, more websites are being designed with mobile in mind from the start.
8
Mobile Desktop
![Page 9: Lunch and Learn : 5 Website Trends in 2016](https://reader034.fdocuments.in/reader034/viewer/2022052705/58f1d1b41a28ab31558b45bb/html5/thumbnails/9.jpg)
Note the differences.
The mobile version of the site is still a great experience.
9
![Page 10: Lunch and Learn : 5 Website Trends in 2016](https://reader034.fdocuments.in/reader034/viewer/2022052705/58f1d1b41a28ab31558b45bb/html5/thumbnails/10.jpg)
MICROINTERACTIONS
10
![Page 11: Lunch and Learn : 5 Website Trends in 2016](https://reader034.fdocuments.in/reader034/viewer/2022052705/58f1d1b41a28ab31558b45bb/html5/thumbnails/11.jpg)
Details, details, details
A microinteraction is a moment with a product to accomplish a single task.
11
Microinteractions:
1. Communicate status and feedback to the user
2. Educate the user about the outcome of her actions
3. Makes or breaks the user experience
![Page 13: Lunch and Learn : 5 Website Trends in 2016](https://reader034.fdocuments.in/reader034/viewer/2022052705/58f1d1b41a28ab31558b45bb/html5/thumbnails/13.jpg)
ANIMATIONS
13
![Page 14: Lunch and Learn : 5 Website Trends in 2016](https://reader034.fdocuments.in/reader034/viewer/2022052705/58f1d1b41a28ab31558b45bb/html5/thumbnails/14.jpg)
Animations
The idea of moving elements on a page is not new. (Flash anyone?)
14
So why are animations trending?
1. Recent CSS developments make them easy to implement
2. They make websites more dynamic
3. Animations enhance microinteractions
![Page 16: Lunch and Learn : 5 Website Trends in 2016](https://reader034.fdocuments.in/reader034/viewer/2022052705/58f1d1b41a28ab31558b45bb/html5/thumbnails/16.jpg)
FRESH IMAGERY
16
![Page 17: Lunch and Learn : 5 Website Trends in 2016](https://reader034.fdocuments.in/reader034/viewer/2022052705/58f1d1b41a28ab31558b45bb/html5/thumbnails/17.jpg)
RIP the Cheesy Stock Photo
17
![Page 18: Lunch and Learn : 5 Website Trends in 2016](https://reader034.fdocuments.in/reader034/viewer/2022052705/58f1d1b41a28ab31558b45bb/html5/thumbnails/18.jpg)
Time to switch it up!
18
Conclusion: More natural and custom imagery
![Page 19: Lunch and Learn : 5 Website Trends in 2016](https://reader034.fdocuments.in/reader034/viewer/2022052705/58f1d1b41a28ab31558b45bb/html5/thumbnails/19.jpg)
FINAL THOUGHTS
19
![Page 20: Lunch and Learn : 5 Website Trends in 2016](https://reader034.fdocuments.in/reader034/viewer/2022052705/58f1d1b41a28ab31558b45bb/html5/thumbnails/20.jpg)
Final Thoughts
1. Exercise caution when following a trend.
2. It’s all about the user.
3. The future lies in digital products acting more like humans.
20