ONLINE DESIGN TRENDS Sungho Youn

Transcription

1 ONLINE DESIGN TRENDS 2015 Sungho Youn 1

2 TABLE OF CONTENTS What Is Online Design? Outdated Design Trends Current Design Trends Layout Visual Components Adaptive Lg.com Design Analysis Lg.com Mockup 2

3 WHAT IS ONLINE DESIGN? 3

4 WEBSITES ADS APPLICATIONS S 4

5 OUTDATED DESIGN TRENDS SKEUOMORPHIC DESIGN BEVELS & DROP SHADOWS QR CODES SIDEBAR CALL TO ACTION CAROUSEL SLIDERS UNREALISTIC STOCK PHOTOS 5

6 SKEUOMORPHIC DESIGN OUTDATED DESIGN TRENDS Design cues taken from the physical world 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. 6

7 BEVELS & DROP SHADOWS OUTDATED DESIGN TRENDS These trends were popular in the late 90 s and early 2000s but are unfortunately still misused 7

8 BEVELS & DROP SHADOWS OUTDATED DESIGN TRENDS Shadows are still important in modern online design. However, subtlety is key. Android Lollipop Icons 8

9 QR CODES OUTDATED DESIGN TRENDS QR codes were popular as recently as just a couple of years ago Although they were everywhere in the recent past, QR codes have failed because scanning required installing an application that could read QR codes. 9

10 SIDEBAR CALL TO ACTIONS OUTDATED DESIGN TRENDS 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 10

11 SIDEBAR CALL TO ACTIONS OUTDATED DESIGN TRENDS Impact Branding & Design Case Study Removed all call to actions from sidebars and put in one CTA that is relevant to the topic Changed call to actions to inline 11

12 SIDEBAR CALL TO ACTIONS OUTDATED DESIGN TRENDS Impact Branding & Design Case Study 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 12

13 SIDEBAR CALL TO ACTIONS OUTDATED DESIGN TRENDS Impact Branding & Design Case Study 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 24 leads per 1000 views 13

14 CAROUSEL SLIDERS OUTDATED DESIGN TRENDS Carousel sliders are not effective Average click through rate for carousel slider images is less than.1% 14

15 UNREALISTIC STOCK PHOTOS OUTDATED DESIGN TRENDS Take your own professional photos Visitors aren t blind to the fact that these aren t the real faces behind your company. -Donny Wilson Impact Branding & Design 15

16 CURRENT DESIGN TRENDS STORYTELLING LAYOUT VISUAL COMPONENTS ADAPTIVE 16

17 THE STRAWBERRY Web Elements Message Web Elements Web Elements Web Elements Web Elements 17

18 THE STRAWBERRY Message 18

19 YALE SCHOOL OF ART 19

20 YALE SCHOOL OF ART 20

21 MORTIMER LUMBER 21

22 THE STRAWBERRY CURRENT DESIGN TRENDS 22

23 THE STRAWBERRY CURRENT DESIGN TRENDS 23

24 HARRY S CURRENT DESIGN TRENDS 24

25 HARRY S CURRENT DESIGN TRENDS 25

26 WHAT IS THE CURRENT TREND? CURRENT DESIGN TRENDS 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 26

27 WHAT IS THE CURRENT TREND? CURRENT DESIGN TRENDS STORYTELLING LAYOUT VISUAL COMPONENTS ADAPTIVE 27

28 LAYOUT LONG SCROLLING PAGES GRID BASED DESIGN 28

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 29

30 30

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. 31

32 VISUAL FLAT/MATERIAL DESIGN PARALLAX LARGE TYPOGRAPHY SIMPLICITY VECTOR GRAPHICS 32

33 FLAT/MATERIAL DESIGN CURRENT DESIGN TRENDS-VISUAL As skeuomorphic design went away, flat design became the new trend. 33

34 FLAT/MATERIAL DESIGN CURRENT DESIGN TRENDS-VISUAL As skeuomorphic design went away, flat design became the new trend. 34

35 MATERIAL DESIGN CURRENT DESIGN TRENDS-VISUAL A structured form of flat design Overlapping elements create shadows and define the hierarchy of the content 35

36 MATERIAL DESIGN CURRENT DESIGN TRENDS-VISUAL 36

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 37

38 EVOLVED PARALLAX CURRENT DESIGN TRENDS-VISUAL Parallax has evolved into more interesting and useful effects 38

39 LARGE TYPOGRAPHY CURRENT DESIGN TRENDS-VISUAL Get the message across quickly and make it big 39

40 SIMPLICITY CURRENT DESIGN TRENDS-VISUAL Nothing excessive, just the necessities 40

41 VECTOR GRAPHICS CURRENT DESIGN TRENDS-VISUAL With flat design being the trend, illustrations should be flat too. 41

42 COMPONENTS FULL PAGE PICTURES FIXED NAV BAR ANIMATIONS 42

43 FULL PAGE PICTURES CURRENT DESIGN TRENDS-COMPONENTS Fully immersive experience Like large typography, full page pictures get the message or the story across quickly 43

44 FIXED NAVIGATION BAR CURRENT DESIGN TRENDS-COMPONENTS Easy navigation wherever you are on a page 44

45 ANIMATIONS CURRENT DESIGN TRENDS-COMPONENTS Creates a multimedia experience without loading any videos 45

46 ADAPTIVE RESPONSIVE DESIGN RESPONSIVE COMPONENTS UNDERSTANDING DIFFERENT PLATFORM EXPERIENCES MOBILE ADS VS DESKTOP ADS 46

47 RESPONSIVE DESIGN CURRENT DESIGN TRENDS-ADAPTIVE Design for multiple screens People view websites, ads, s and applications on multiple platforms with different screen sizes. Make sure your message can be easily read on all screens. 47

48 RESPONSIVE DESIGN CURRENT DESIGN TRENDS-ADAPTIVE 48

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 49

50 UNDERSTANDING DIFFERENT PLATFORM EXPERIENCES CURRENT DESIGN TRENDS-ADAPTIVE Understand how people use different media beyond just screen size. 50

51 CURRENT DESIGN TRENDS STORYTELLING LAYOUT VISUAL COMPONENTS ADAPTIVE 51

52 LG.COM DESIGN ANALYSIS 52

53 WHAT S OUTDATED 53

54 WHAT S OUTDATED 54

55 WHAT S OUTDATED 55

56 WHAT S OUTDATED 56

57 LG.COM MOCKUP 57

58 WIREFRAME 58

59 DESKTOP 59

60 60

61 61

62 MOBILE 62