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

4.
2. Illustrations
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

11.
4. Microinteractions
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

18.
6. Storytelling
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

20.
7. Typography
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

22.
8. Bold, Vibrant
Colors
www.Inspiredgm.com

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

29.
10. Parallax Scrolling
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

34.
www.Inspiredgm.com
Happy Designing!