ONLINE DESIGN TRENDS Sungho Youn

62 

Loading....

Loading....

Loading....

Loading....

Loading....

Full text

(1)

1

ONLINE DESIGN

TRENDS 2015

(2)

2

TABLE OF CONTENTS

What Is Online Design?

Outdated Design Trends

Current Design Trends

Lg.com Design Analysis

Lg.com Mockup

Layout

Visual

Components

Adaptive

2

(3)

3

(4)

4

(5)

5

OUTDATED

DESIGN TRENDS

• SKEUOMORPHIC DESIGN

• BEVELS & DROP SHADOWS

• QR CODES

• SIDEBAR CALL TO ACTION

• CAROUSEL SLIDERS

(6)

6

SKEUOMORPHIC DESIGN

Design cues taken from the

physical world

OUTDATED DESIGN TRENDS

The most familiar example of skeuomorphic design is Apple’s digital interface before the release of iOS 7. They were a big advocate for skeuomorphic design and was implemented on all mobile, tablet and desktop interfaces.

(7)

7

BEVELS & DROP SHADOWS

OUTDATED DESIGN TRENDS

These trends were popular in

the late 90’s and early 2000s but

are unfortunately still misused

(8)

8

BEVELS & DROP SHADOWS

Shadows are still important in

modern online design. However,

subtlety is key.

OUTDATED DESIGN TRENDS

OUTDATED DESIGN TRENDS

(9)

9

QR CODES

QR codes were popular as recently

as just a couple of years ago

OUTDATED DESIGN TRENDS

Although they were everywhere in the recent past, QR codes have failed because scanning

required installing an application that could read QR codes.

(10)

10

SIDEBAR CALL TO ACTIONS

Impact Branding & Design Case Study

Original webpage had multiple call to actions on sidebar

Can be distracting

Although the CTA get many views, they may not get many hits

(11)

11

SIDEBAR CALL TO ACTIONS

Impact Branding & Design Case Study

OUTDATED DESIGN TRENDS

Removed all call to actions from sidebars and put in one CTA that is relevant to the topic

(12)

12

SIDEBAR CALL TO ACTIONS

Impact Branding & Design Case Study

OUTDATED DESIGN TRENDS

Removed all call to actions from sidebars and put in one CTA that is relevant to the topic

Changed call to actions to inline

Before change:

3.3% click through rate 14 leads per 1000 views

(13)

13

SIDEBAR CALL TO ACTIONS

Impact Branding & Design Case Study

OUTDATED DESIGN TRENDS

Removed all call to actions from sidebars and put in one CTA that is relevant to the topic

Changed call to actions to inline

Before change:

3.3% click through rate 14 leads per 1000 views

After change:

Less total views

(14)

14

CAROUSEL SLIDERS

Carousel sliders are not effective

OUTDATED DESIGN TRENDS

Average click through rate for carousel slider images is less than .1%

(15)

15

UNREALISTIC STOCK PHOTOS

Take your own professional photos

OUTDATED DESIGN TRENDS

“Visitors aren’t blind to the fact that these aren’t the real faces behind your company. “

-Donny Wilson

(16)

16

CURRENT

DESIGN TRENDS

STORYTELLING

• LAYOUT

• VISUAL

• COMPONENTS

• ADAPTIVE

(17)

17

THE STRAWBERRY

Message

Web Elements

Web Elements

Web Elements

Web Elements

Web Elements

(18)

18

THE STRAWBERRY

(19)

19

(20)

20

(21)

21

(22)

22

(23)

23

CURRENT DESIGN TRENDS

(24)

24

CURRENT DESIGN TRENDS

(25)

25

CURRENT DESIGN TRENDS

(26)

26

WHAT IS THE CURRENT TREND?

• Communicating the company, product

or brand’s story in the simplest form with

unobtrusive elements that enhance the story.

• Anything that distracts or takes away from the

story is unnecessary

(27)

27

WHAT IS THE CURRENT TREND?

CURRENT DESIGN TRENDS

STORYTELLING

(28)

28

LAYOUT

LONG SCROLLING PAGES

GRID BASED DESIGN

(29)

29

LONG SCROLLING PAGES

CURRENT DESIGN TRENDS-LAYOUT

Scrolling over clicking

It’s easier to scroll than click to navigate through a large amount of information

(30)
(31)

31

GRID-BASED LAYOUT

CURRENT DESIGN TRENDS-LAYOUT

Grid-based designs work well when

with large content lists

Grids have always played a role in web design but they haven’t always been clearly obvious in the final product.

(32)

32

VISUAL

FLAT/MATERIAL DESIGN

PARALLAX

LARGE TYPOGRAPHY

SIMPLICITY

VECTOR GRAPHICS

(33)

33

FLAT/MATERIAL DESIGN

CURRENT DESIGN TRENDS-VISUAL

As skeuomorphic design went away,

flat design became the new trend.

(34)

34

FLAT/MATERIAL DESIGN

CURRENT DESIGN TRENDS-VISUAL

As skeuomorphic design went away,

flat design became the new trend.

(35)

35

MATERIAL DESIGN

CURRENT DESIGN TRENDS-VISUAL

A structured form of flat design

Overlapping elements create shadows and define the hierarchy of the content

(36)

36

(37)

37

PARALLAX

CURRENT DESIGN TRENDS-VISUAL

Started in the 80s but now becoming

a design trend

A way to make design elements dynamic

Title Text

Title Text

Title Text

Title Text

(38)

38

EVOLVED PARALLAX

CURRENT DESIGN TRENDS-VISUAL

Parallax has evolved into more

interesting and useful effects

(39)

39

LARGE TYPOGRAPHY

CURRENT DESIGN TRENDS-VISUAL

Get the message across quickly

and make it big

(40)

40

SIMPLICITY

CURRENT DESIGN TRENDS-VISUAL

(41)

41

VECTOR GRAPHICS

CURRENT DESIGN TRENDS-VISUAL

With flat design being the trend,

illustrations should be flat too.

(42)

42

COMPONENTS

• FULL PAGE PICTURES

• FIXED NAV BAR

(43)

43

FULL PAGE PICTURES

CURRENT DESIGN TRENDS-COMPONENTS

Fully immersive experience

Like large typography, full page pictures get the message or the story across

(44)

44

FIXED NAVIGATION BAR

CURRENT DESIGN TRENDS-COMPONENTS

Easy navigation wherever you

are on a page

(45)

45

ANIMATIONS

CURRENT DESIGN TRENDS-COMPONENTS

Creates a multimedia experience

without loading any videos

(46)

46

ADAPTIVE

• RESPONSIVE DESIGN

• RESPONSIVE COMPONENTS

• UNDERSTANDING DIFFERENT PLATFORM EXPERIENCES

• MOBILE ADS VS DESKTOP ADS

(47)

47

RESPONSIVE DESIGN

CURRENT DESIGN TRENDS-ADAPTIVE

Design for multiple screens

People view websites, ads, emails and applications on multiple platforms with different screen sizes.

(48)

48

(49)

49

RESPONSIVE COMPONENTS

CURRENT DESIGN TRENDS-ADAPTIVE

Can web components change more than

it’s layout on different screen sizes?

Going beyond layout, consider if components can change based on screen size

(50)

50

UNDERSTANDING DIFFERENT PLATFORM EXPERIENCES

CURRENT DESIGN TRENDS-ADAPTIVE

Understand how people use different

media beyond just screen size.

(51)

51

CURRENT DESIGN TRENDS

STORYTELLING

(52)

52

(53)

53

(54)

54

(55)

55

(56)

56

(57)

57

(58)

58

(59)

59

(60)
(61)
(62)

62

Figure

Updating...

References

Updating...

Related subjects : Online Payments Trends For 2014