1
ONLINE DESIGN
TRENDS 2015
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
4
5
OUTDATED
DESIGN TRENDS
• SKEUOMORPHIC DESIGN
• BEVELS & DROP SHADOWS
• QR CODES
• SIDEBAR CALL TO ACTION
• CAROUSEL SLIDERS
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
BEVELS & DROP SHADOWS
OUTDATED DESIGN TRENDS
These trends were popular in
the late 90’s and early 2000s but
are unfortunately still misused
8
BEVELS & DROP SHADOWS
Shadows are still important in
modern online design. However,
subtlety is key.
OUTDATED DESIGN TRENDS
OUTDATED DESIGN TRENDS
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
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
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
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
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
CAROUSEL SLIDERS
Carousel sliders are not effective
OUTDATED DESIGN TRENDS
Average click through rate for carousel slider images is less than .1%
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
CURRENT
DESIGN TRENDS
STORYTELLING
• LAYOUT
• VISUAL
• COMPONENTS
• ADAPTIVE
17
THE STRAWBERRY
Message
Web Elements
Web Elements
Web Elements
Web Elements
Web Elements
18
THE STRAWBERRY
19
20
21
22
23
CURRENT DESIGN TRENDS
24
CURRENT DESIGN TRENDS
25
CURRENT DESIGN TRENDS
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
WHAT IS THE CURRENT TREND?
CURRENT DESIGN TRENDS
STORYTELLING
28
LAYOUT
•
LONG SCROLLING PAGES
•
GRID BASED DESIGN
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
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
VISUAL
•
FLAT/MATERIAL DESIGN
•
PARALLAX
•
LARGE TYPOGRAPHY
•
SIMPLICITY
•
VECTOR GRAPHICS
33
FLAT/MATERIAL DESIGN
CURRENT DESIGN TRENDS-VISUAL
As skeuomorphic design went away,
flat design became the new trend.
34
FLAT/MATERIAL DESIGN
CURRENT DESIGN TRENDS-VISUAL
As skeuomorphic design went away,
flat design became the new trend.
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
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
EVOLVED PARALLAX
CURRENT DESIGN TRENDS-VISUAL
Parallax has evolved into more
interesting and useful effects
39
LARGE TYPOGRAPHY
CURRENT DESIGN TRENDS-VISUAL
Get the message across quickly
and make it big
40
SIMPLICITY
CURRENT DESIGN TRENDS-VISUAL
41
VECTOR GRAPHICS
CURRENT DESIGN TRENDS-VISUAL
With flat design being the trend,
illustrations should be flat too.
42
COMPONENTS
• FULL PAGE PICTURES
• FIXED NAV BAR
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
FIXED NAVIGATION BAR
CURRENT DESIGN TRENDS-COMPONENTS
Easy navigation wherever you
are on a page
45
ANIMATIONS
CURRENT DESIGN TRENDS-COMPONENTS
Creates a multimedia experience
without loading any videos
46
ADAPTIVE
• RESPONSIVE DESIGN
• RESPONSIVE COMPONENTS
• UNDERSTANDING DIFFERENT PLATFORM EXPERIENCES
• MOBILE ADS VS DESKTOP ADS
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
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
