SlideShare a Scribd company logo
The Future of Website
Design - 11 Trends for
2017 and Beyond
www.Inspiredgm.com
1.Flat + Material Design
www.Inspiredgm.com
Expect an increase in
the combination of
both these design
models to achieve the
intuitive learnability of
flat design and the
modern, physical
aesthetic of material
design.
www.Inspiredgm.com
2. Illustrations
www.Inspiredgm.com
Illustrations are a new
way to make websites
unique and original.
Not to mention it gives
the site a personality
of its own.
www.Inspiredgm.com
Try adding an
illustration to
your loading
page to make
it more fun
and less
frustrating
your visitor
www.Inspiredgm.com
Use small and few illustrations to make certain areas of your page
pop and/or to highlight places you want your visitors to click
www.Inspiredgm.com
3. Cards / Grid
Structure
www.Inspiredgm.com
Pinterest was one of the leaders when it came to
using cards and the grid format. Since this style’s
growth in popularity on other SM platforms it has
spilled out to other websites.
Use cards and grid as a way to organize your site
Even use them as navigation to other pages
instead of having a long indepth menu
www.Inspiredgm.com
Use of cards as Navigation
Symmetrical
Grid Format
www.Inspiredgm.com
4. Microinteractions
www.Inspiredgm.com
Microinteractions turn
a good website into a
great one. They let
your user know your
page is reacting to
their actions and
ready to respond.
These come in all
sorts of formats,
buttons that change
color, cards that
move, areas that
become highlighted
(right)...etc the
possibilities are
endless!
www.Inspiredgm.com
5. Videos and Animations
www.Inspiredgm.com
BTW this is just a gif
Continue
In this example:
Cards move in from the left + Content appears as you scroll + Animated logo = High engagement!
Use animations
sparingly to give
life to the
website and
attract the user's
attention to
certain areas.
www.Inspiredgm.com
Here's an example of incorporating
animation in a much larger way, by Coin
www.Inspiredgm.com
Video Currently Accounts for 50%
of mobile traffic
By 2018: 79% of all consumer
internet traffic will be video
www.Inspiredgm.com
Coin also has a video loaded onto their homepage that automatically plays. It’s a great way to incorporate a
customer testimonial
Bonus Tip: make sure any videos uploaded are set to mute so the user isn’t alarmed by unexpected sound
www.Inspiredgm.com
6. Storytelling
www.Inspiredgm.com
Storytelling makes the user feel
like the website has a logical
beginning, middle and end - the
website becomes a journey
they immerse themselves in
Knuckles is a designer who works with metal. His
images and textual elements is how he tells his
story. The user goes on journey about his
passion
www.Inspiredgm.com
7. Typography
www.Inspiredgm.com
Expect Big, Loud, Bold Text!
Pro Tip: Keep the different types
down to 2 (3 max) to maintain
consistency
www.Inspiredgm.com
8. Bold, Vibrant
Colors
www.Inspiredgm.com
www.Inspiredgm.com
Colored sections with rounded edges are helpful to draw the viewer’s
eye around the image instead of focusing on one area
www.Inspiredgm.com
Duotone - used for dramatic effect
www.Inspiredgm.com
9. Centered / Split
Screen Content
www.Inspiredgm.com
Centered content is usually
paired with a bold visual. The
text may appear as the focus
but the image is what creates
that dramatic effect.
Centered content is easy to follow and
digest, and lets the user know that this is
what your website is all about.
www.Inspiredgm.com
This
company
uses split
screen
content to
tailor the
website to
each user.
As a result the user feels as though the website was designed
with them in mind and are more likely to enjoy their experience.
www.Inspiredgm.com
10. Parallax Scrolling
www.Inspiredgm.com
This technique is all about
layering images on top of
each other and timing them
differently so it gives the
appearance of movement
In this gif the tree images are:
● The ground and bushes
● The hills
● The sky
All timed differently so it gives
the impression that we’re
moving from left to right
www.Inspiredgm.com
Here’s a modern example: Seattle’s Space Needle
www.Inspiredgm.com
Hapnotic Feedback
(Haptic + Hypnotic)
Sense of touch
+
Captivation
www.Inspiredgm.com
In the far future (+5 years), Hapnotic feedback
will allow us to do things like:
Combine pulse/vibrations with an animation of a
button to prompt the user to click
Use Sound waves broadcasted from behind the
screen, to make it feel as though it has a texture
to it.
...and more!
www.Inspiredgm.com
www.Inspiredgm.com
Happy Designing!

More Related Content

Viewers also liked

App design기획서 mmca jihyeonkim
App design기획서 mmca jihyeonkimApp design기획서 mmca jihyeonkim
App design기획서 mmca jihyeonkim
Jihyeon Kim
 
Web design trends 2017
Web design trends 2017Web design trends 2017
Web design trends 2017
Valu
 
Design Trends 2017
Design Trends 2017Design Trends 2017
Design Trends 2017
Sigma Connectivity
 
Challenges in Mobile App Marketing in 2017 - Pocket Gamer Connects London
Challenges in Mobile App Marketing in 2017 - Pocket Gamer Connects LondonChallenges in Mobile App Marketing in 2017 - Pocket Gamer Connects London
Challenges in Mobile App Marketing in 2017 - Pocket Gamer Connects London
Ross Sheil
 
17 digital trends for 2017 by @FrojdAgency
17 digital trends for 2017 by @FrojdAgency17 digital trends for 2017 by @FrojdAgency
17 digital trends for 2017 by @FrojdAgency
Fröjd Interactive
 
Google material-design
Google material-designGoogle material-design
Google material-designHarrison Weber
 
Icinga Camp Berlin 2017 - End user experience monitoring of network applications
Icinga Camp Berlin 2017 - End user experience monitoring of network applicationsIcinga Camp Berlin 2017 - End user experience monitoring of network applications
Icinga Camp Berlin 2017 - End user experience monitoring of network applications
Icinga
 
5 Presentation design trends 2017
5 Presentation design trends 20175 Presentation design trends 2017
5 Presentation design trends 2017
Annova Studio
 

Viewers also liked (8)

App design기획서 mmca jihyeonkim
App design기획서 mmca jihyeonkimApp design기획서 mmca jihyeonkim
App design기획서 mmca jihyeonkim
 
Web design trends 2017
Web design trends 2017Web design trends 2017
Web design trends 2017
 
Design Trends 2017
Design Trends 2017Design Trends 2017
Design Trends 2017
 
Challenges in Mobile App Marketing in 2017 - Pocket Gamer Connects London
Challenges in Mobile App Marketing in 2017 - Pocket Gamer Connects LondonChallenges in Mobile App Marketing in 2017 - Pocket Gamer Connects London
Challenges in Mobile App Marketing in 2017 - Pocket Gamer Connects London
 
17 digital trends for 2017 by @FrojdAgency
17 digital trends for 2017 by @FrojdAgency17 digital trends for 2017 by @FrojdAgency
17 digital trends for 2017 by @FrojdAgency
 
Google material-design
Google material-designGoogle material-design
Google material-design
 
Icinga Camp Berlin 2017 - End user experience monitoring of network applications
Icinga Camp Berlin 2017 - End user experience monitoring of network applicationsIcinga Camp Berlin 2017 - End user experience monitoring of network applications
Icinga Camp Berlin 2017 - End user experience monitoring of network applications
 
5 Presentation design trends 2017
5 Presentation design trends 20175 Presentation design trends 2017
5 Presentation design trends 2017
 

Similar to The Future of Website Design - 11 Trends for 2017 and Beyond

Web animation, interaction and user experience
Web animation, interaction and user experienceWeb animation, interaction and user experience
Web animation, interaction and user experience
saya4
 
Top 10 responsive web design & ux trends in 2019
Top 10 responsive web design & ux trends in 2019Top 10 responsive web design & ux trends in 2019
Top 10 responsive web design & ux trends in 2019
Nishant Desai
 
Shamit Khemka describes Top 5 web designing trends
Shamit Khemka describes Top 5 web designing trendsShamit Khemka describes Top 5 web designing trends
Shamit Khemka describes Top 5 web designing trends
SynapseIndia
 
Web Design - What's Trending in 2021-Mantran Presentation
Web Design - What's Trending in 2021-Mantran PresentationWeb Design - What's Trending in 2021-Mantran Presentation
Web Design - What's Trending in 2021-Mantran Presentation
Mantran
 
Top 10 Web Design Trends in 2022
Top 10 Web Design Trends in 2022Top 10 Web Design Trends in 2022
Top 10 Web Design Trends in 2022
simonedaniels3
 
Infographics for Fun and Profit - Chris Bennett #df13
Infographics for Fun and Profit - Chris Bennett #df13Infographics for Fun and Profit - Chris Bennett #df13
Infographics for Fun and Profit - Chris Bennett #df13
97th Floor
 
How to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the EnterpriseHow to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the Enterprise
FlashGuy13
 
1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx
1  httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2  ht.docx1  httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2  ht.docx
1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx
jeremylockett77
 
10 golden rules for website design
10 golden rules for website design10 golden rules for website design
10 golden rules for website design
Hih7 Webtech Pvt Ltd
 
Web animation
Web animationWeb animation
Web animationLS66731
 
Web design - What's Trending in 2021 - Mantran
Web design - What's Trending in 2021 - MantranWeb design - What's Trending in 2021 - Mantran
Web design - What's Trending in 2021 - Mantran
Mantran
 
17 Essential Elements of Web Design | FODUU
17 Essential Elements of Web Design | FODUU17 Essential Elements of Web Design | FODUU
17 Essential Elements of Web Design | FODUU
Anuj Kumar Singh
 
Web design trends 2013
Web design trends 2013Web design trends 2013
Web design trends 2013
Xavier Martin
 
Web design lesson 1
Web design lesson 1Web design lesson 1
Web design lesson 1Jamie Hutt
 
Web Design Lesson 1
Web Design Lesson 1Web Design Lesson 1
Web Design Lesson 1
Jamie Hutt
 
Web design lesson 1
Web design lesson 1Web design lesson 1
Web design lesson 1Jamie Hutt
 
Lesson 1 - Web Design
Lesson 1 - Web DesignLesson 1 - Web Design
Lesson 1 - Web Design
Jamie Hutt
 
Empowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and ElementsEmpowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and Elements
Lany Lyn Magdaraog
 
Minimalist Web Design | Simplemachine
Minimalist Web Design | SimplemachineMinimalist Web Design | Simplemachine
Minimalist Web Design | Simplemachine
Sean Morrison
 
ICT Projects for Social Change.pptx
ICT Projects for Social Change.pptxICT Projects for Social Change.pptx
ICT Projects for Social Change.pptx
ALCondezEdquibanEbue
 

Similar to The Future of Website Design - 11 Trends for 2017 and Beyond (20)

Web animation, interaction and user experience
Web animation, interaction and user experienceWeb animation, interaction and user experience
Web animation, interaction and user experience
 
Top 10 responsive web design & ux trends in 2019
Top 10 responsive web design & ux trends in 2019Top 10 responsive web design & ux trends in 2019
Top 10 responsive web design & ux trends in 2019
 
Shamit Khemka describes Top 5 web designing trends
Shamit Khemka describes Top 5 web designing trendsShamit Khemka describes Top 5 web designing trends
Shamit Khemka describes Top 5 web designing trends
 
Web Design - What's Trending in 2021-Mantran Presentation
Web Design - What's Trending in 2021-Mantran PresentationWeb Design - What's Trending in 2021-Mantran Presentation
Web Design - What's Trending in 2021-Mantran Presentation
 
Top 10 Web Design Trends in 2022
Top 10 Web Design Trends in 2022Top 10 Web Design Trends in 2022
Top 10 Web Design Trends in 2022
 
Infographics for Fun and Profit - Chris Bennett #df13
Infographics for Fun and Profit - Chris Bennett #df13Infographics for Fun and Profit - Chris Bennett #df13
Infographics for Fun and Profit - Chris Bennett #df13
 
How to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the EnterpriseHow to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the Enterprise
 
1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx
1  httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2  ht.docx1  httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2  ht.docx
1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx
 
10 golden rules for website design
10 golden rules for website design10 golden rules for website design
10 golden rules for website design
 
Web animation
Web animationWeb animation
Web animation
 
Web design - What's Trending in 2021 - Mantran
Web design - What's Trending in 2021 - MantranWeb design - What's Trending in 2021 - Mantran
Web design - What's Trending in 2021 - Mantran
 
17 Essential Elements of Web Design | FODUU
17 Essential Elements of Web Design | FODUU17 Essential Elements of Web Design | FODUU
17 Essential Elements of Web Design | FODUU
 
Web design trends 2013
Web design trends 2013Web design trends 2013
Web design trends 2013
 
Web design lesson 1
Web design lesson 1Web design lesson 1
Web design lesson 1
 
Web Design Lesson 1
Web Design Lesson 1Web Design Lesson 1
Web Design Lesson 1
 
Web design lesson 1
Web design lesson 1Web design lesson 1
Web design lesson 1
 
Lesson 1 - Web Design
Lesson 1 - Web DesignLesson 1 - Web Design
Lesson 1 - Web Design
 
Empowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and ElementsEmpowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and Elements
 
Minimalist Web Design | Simplemachine
Minimalist Web Design | SimplemachineMinimalist Web Design | Simplemachine
Minimalist Web Design | Simplemachine
 
ICT Projects for Social Change.pptx
ICT Projects for Social Change.pptxICT Projects for Social Change.pptx
ICT Projects for Social Change.pptx
 

Recently uploaded

一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
h7j5io0
 
7 Alternatives to Bullet Points in PowerPoint
7 Alternatives to Bullet Points in PowerPoint7 Alternatives to Bullet Points in PowerPoint
7 Alternatives to Bullet Points in PowerPoint
Alvis Oh
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
7sd8fier
 
projectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdfprojectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdf
farazahmadas6
 
Let's Summon Demons Shirt Let's Summon Demons Shirt
Let's Summon Demons Shirt Let's Summon Demons ShirtLet's Summon Demons Shirt Let's Summon Demons Shirt
Let's Summon Demons Shirt Let's Summon Demons Shirt
TeeFusion
 
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
708pb191
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
9a93xvy
 
White wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva TschoppWhite wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva Tschopp
Mansi Shah
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
cy0krjxt
 
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
smpc3nvg
 
Borys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior designBorys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior design
boryssutkowski
 
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
h7j5io0
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
garcese
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
n0tivyq
 
Exploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdfExploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdf
fastfixgaragedoor
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
7sd8fier
 
Book Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for DesignersBook Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for Designers
Confidence Ago
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
aaryangarg12
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
smpc3nvg
 

Recently uploaded (20)

一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
 
7 Alternatives to Bullet Points in PowerPoint
7 Alternatives to Bullet Points in PowerPoint7 Alternatives to Bullet Points in PowerPoint
7 Alternatives to Bullet Points in PowerPoint
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
 
projectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdfprojectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdf
 
Let's Summon Demons Shirt Let's Summon Demons Shirt
Let's Summon Demons Shirt Let's Summon Demons ShirtLet's Summon Demons Shirt Let's Summon Demons Shirt
Let's Summon Demons Shirt Let's Summon Demons Shirt
 
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
 
White wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva TschoppWhite wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva Tschopp
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
 
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
 
Borys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior designBorys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior design
 
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
 
Exploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdfExploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdf
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
 
Book Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for DesignersBook Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for Designers
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
 

The Future of Website Design - 11 Trends for 2017 and Beyond

  • 1. The Future of Website Design - 11 Trends for 2017 and Beyond www.Inspiredgm.com
  • 2. 1.Flat + Material Design www.Inspiredgm.com
  • 3. Expect an increase in the combination of both these design models to achieve the intuitive learnability of flat design and the modern, physical aesthetic of material design. www.Inspiredgm.com
  • 5. Illustrations are a new way to make websites unique and original. Not to mention it gives the site a personality of its own. www.Inspiredgm.com
  • 6. Try adding an illustration to your loading page to make it more fun and less frustrating your visitor www.Inspiredgm.com
  • 7. Use small and few illustrations to make certain areas of your page pop and/or to highlight places you want your visitors to click www.Inspiredgm.com
  • 8. 3. Cards / Grid Structure www.Inspiredgm.com
  • 9. Pinterest was one of the leaders when it came to using cards and the grid format. Since this style’s growth in popularity on other SM platforms it has spilled out to other websites. Use cards and grid as a way to organize your site Even use them as navigation to other pages instead of having a long indepth menu www.Inspiredgm.com
  • 10. Use of cards as Navigation Symmetrical Grid Format www.Inspiredgm.com
  • 12. Microinteractions turn a good website into a great one. They let your user know your page is reacting to their actions and ready to respond. These come in all sorts of formats, buttons that change color, cards that move, areas that become highlighted (right)...etc the possibilities are endless! www.Inspiredgm.com
  • 13. 5. Videos and Animations www.Inspiredgm.com BTW this is just a gif Continue
  • 14. In this example: Cards move in from the left + Content appears as you scroll + Animated logo = High engagement! Use animations sparingly to give life to the website and attract the user's attention to certain areas. www.Inspiredgm.com
  • 15. Here's an example of incorporating animation in a much larger way, by Coin www.Inspiredgm.com
  • 16. Video Currently Accounts for 50% of mobile traffic By 2018: 79% of all consumer internet traffic will be video www.Inspiredgm.com
  • 17. Coin also has a video loaded onto their homepage that automatically plays. It’s a great way to incorporate a customer testimonial Bonus Tip: make sure any videos uploaded are set to mute so the user isn’t alarmed by unexpected sound www.Inspiredgm.com
  • 19. Storytelling makes the user feel like the website has a logical beginning, middle and end - the website becomes a journey they immerse themselves in Knuckles is a designer who works with metal. His images and textual elements is how he tells his story. The user goes on journey about his passion www.Inspiredgm.com
  • 21. Expect Big, Loud, Bold Text! Pro Tip: Keep the different types down to 2 (3 max) to maintain consistency www.Inspiredgm.com
  • 24. Colored sections with rounded edges are helpful to draw the viewer’s eye around the image instead of focusing on one area www.Inspiredgm.com
  • 25. Duotone - used for dramatic effect www.Inspiredgm.com
  • 26. 9. Centered / Split Screen Content www.Inspiredgm.com
  • 27. Centered content is usually paired with a bold visual. The text may appear as the focus but the image is what creates that dramatic effect. Centered content is easy to follow and digest, and lets the user know that this is what your website is all about. www.Inspiredgm.com
  • 28. This company uses split screen content to tailor the website to each user. As a result the user feels as though the website was designed with them in mind and are more likely to enjoy their experience. www.Inspiredgm.com
  • 30. This technique is all about layering images on top of each other and timing them differently so it gives the appearance of movement In this gif the tree images are: ● The ground and bushes ● The hills ● The sky All timed differently so it gives the impression that we’re moving from left to right www.Inspiredgm.com
  • 31. Here’s a modern example: Seattle’s Space Needle www.Inspiredgm.com
  • 32. Hapnotic Feedback (Haptic + Hypnotic) Sense of touch + Captivation www.Inspiredgm.com
  • 33. In the far future (+5 years), Hapnotic feedback will allow us to do things like: Combine pulse/vibrations with an animation of a button to prompt the user to click Use Sound waves broadcasted from behind the screen, to make it feel as though it has a texture to it. ...and more! www.Inspiredgm.com