lunch and learn : 5 website trends in 2016

21
Lunch and Learn: 5 Web Design Trends for 2016 February 19, 2016

Upload: one400

Post on 15-Apr-2017

226 views

Category:

Marketing


1 download

TRANSCRIPT

Page 1: Lunch and Learn :  5 Website Trends in 2016

Lunch and Learn: 5 Web Design Trends for 2016February 19, 2016

Page 2: Lunch and Learn :  5 Website Trends in 2016

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

FLAT DESIGN 2.0

3

Page 4: Lunch and Learn :  5 Website Trends in 2016

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

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

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

MOBILE FIRST

7

Page 8: Lunch and Learn :  5 Website Trends in 2016

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

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

MICROINTERACTIONS

10

Page 11: Lunch and Learn :  5 Website Trends in 2016

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

ANIMATIONS

13

Page 14: Lunch and Learn :  5 Website Trends in 2016

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

FRESH IMAGERY

16

Page 17: Lunch and Learn :  5 Website Trends in 2016

RIP the Cheesy Stock Photo

17

Page 18: Lunch and Learn :  5 Website Trends in 2016

Time to switch it up!

18

Conclusion: More natural and custom imagery

Page 19: Lunch and Learn :  5 Website Trends in 2016

FINAL THOUGHTS

19

Page 20: Lunch and Learn :  5 Website Trends in 2016

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