Discover the 10 webdesign trends of 2014 according to Vanksen, the digital native agency
This presentation is also available in french : https://fr.slideshare.net/Vanksen/les-10-tendances-webdesign-de-2014-by-vanksen
3. 3
10 WEBDESIGN TRENDS
FOR 2014 BY
1. MOBILITY CHANGES
EVERYTHING
2. THE SCROLL AND
SINGLE PAGES SITES
3. LESS
BLAH BLAH BLAH
4. FOCUS
ON PICTURES
5. VIDEO SPEAKS
LOUDER THAN WORDS
6. FLAT
DESIGN
7. FONT, WEBDESIGN
STAR
8. GEOMETRIC
WEBDESIGN
9. PARALLAX AND
ANIMATED SITES
10. SYNCHRONISED
NAVIGATION
5. 1. Mobility changes everything
The year 2014 will be influenced by mobility
MOBILITY
Today, more and more people connect to the Internet
whilst on the go thanks to smartphones, tablets and
even « phablets » (device between a smartphone and
a tablet, according to the size of the screen)
5
6. 1. Mobility changes everything
The year 2014 will be influenced by mobility
MOBILE PHONES
7 BILLIONS
mobile phones in the world
of which 48 million in France
72%
of French users browsed the Internet on their
mobile phone in 2013 (against 55% in 2012 and
40% in 2011).
Globally, there are more internet users browsing
from mobiles than desktops.
6
7. 1. Mobility changes everything
The year 2014 will be influenced by mobility
TABLETS
4 MILLIONS
of french mobile owners have a tablet too.
4 TIMES FASTER
The growth of tablets (still less widespread
compared to mobile phones : 14% of french adults
own one), is 4 times faster than the growth of
mobile phones at their launch.
7
8. 1. Mobility changes everything
The year 2014 will be influenced by mobility
MOBILITY = LOTS OF SCREENS
Mobility demands adaptation to a variety of
screen resolutions and formats:
Design: to adapt to a smaller screen is a major obstacle
in terms of creation for mobile, for example.
Development: to adpat to all the devices demands way
more optimisation in web development.
Navigation: mobile touchscreen navigation and small
screens challenge to rethink the websites’ ergonomy.
Content: mobile users want accessible contents, faster,
simpler, without the distortion of elements.
8
9. 1. Mobility changes everything
The year 2014 will be influenced by mobility
MOBILITY = A GLOBAL INFLUENCE
It isn’t only a matter of « adapting » or even
« declining » websites’ design to mobile devices but
it is now about « rethinking » the whole webdesign
concept according to the influence of mobiles.
Today, people require website content to be
rethought and reshaped with the same evolutions as
mobile sites.
In 2014, the « mobile first » creation process
(whereby the mobile site is created and then
adapted to desktop) is becoming
increasingly adopted.
9
10. 1. Mobility changes everything
The year 2014 will be influenced by mobility
MOBILITY = THE CHANGES
• Solutions for a design adapted to all devices
• Straight-to-the point content: less text, more visuals
• Simplified access for less loading time and a faster experience
• Rethought ergonomics to find the correct information immediately
• New « touch friendly » navigation
10
11. 1. Mobility changes everything
The year 2014 will be influenced by mobility
Emergence of responsive design
Responsive design adapts to all
devices, this means lower costs as
multiple version do not have to be
developed.
Responsive is a practice that consists of
a mix of flexible grids and layouts,
images and an intelligent use of CSS
media queries. As the user switches
from their laptop to iPad, the website
should
automatically
switch
to
accommodate the resolution, image
size and scripting abilities. In other
words, the website should have the
technology to automatically respond to
the user’s preferences.
11
12. 1. Mobility changes everything
The year 2014 will be influenced by mobility
More visual content
… to fit to a screen size where text
is more complicated to read
… to highlight the important
information in a more attractive
way
http://bit.ly/1lBaqjn
12
13. 1. Mobility changes everything
The year 2014 will be influenced by mobility
Rethought ergonomics for touch navigation
13
14. 1. Mobility changes everything
The year 2014 will be influenced by mobility
Mobile influences desktop sites
As we can see on this site Travel Alberta:
its navigation is similar to tablets.
The user clicks and opens various layers to
instantly access the information he was
looking for immediately.
14
15. 1. Mobility changes everything
The year 2014 will be influenced by mobility
All the content needs to be rethought !
Check out our blog and our report about Karen McGrane’s very interesting
book « Content strategy for mobile »: http://bit.ly/1bs65ur
15
17. 2. Scrolling and single paged sites
Webdesigners like scrolling and single paged sites
SCROLL
Still influenced by mobile and touchscreen
navigation, scrolling is developed on lots of
sites.
With the image optimisation technics, scrolling and
mobile experience, single paged sites will still be the
star of the year!
17
18. 2. Scrolling and single paged sites
Webdesigners like scrolling and single paged sites
SCROLL
It should not be overlooked, however, that
multiple paged sites are much better
adapted to websites with a substantial
amount of content.
Single paged sites are mainly used to make the
website visually more attractive and to provide
a friendly surfing experience with simplified
content.
Useless if your site is full of information!
18
19. 2. Scrolling and single paged sites
Webdesigners like scrolling and single paged sites
Examples of single scroll paged sites:
http://bit.ly/1dHk9OL
19
20. 2. Scrolling and single paged sites
Webdesigners like scrolling and single paged sites
Examples of single scroll paged sites:
20
21. 2. Scrolling and single paged sites
Webdesigners like scrolling and single paged sites
Examples of double-scroll:
Scroll isn’t only linear, it can be
crooked, from left to right or doublescroll: sites are very creative.
Here, the site is in double-scroll,
it means that when you scroll
with your mouse, the two parts
scroll in the opposite directions.
Try on the website to know more
about what is double scroll:
http://www.fadeoreddy.com/
21
23. 3. Less blah blah blah
Say it, but say it in a more catchy way
IN 2014, WE KEEP QUIET?
Yes and No!
We try to be straight to the point : say less to only
provide the essential information.
We can say as much as usual but with more
attractive elements for more comfortable reading:
less text, more pictures, pictograms, illustrations,
videos, datavisualization…
23
24. 3. Less blah blah blah
24
Say it, but say it in a more catchy way
IN 2014, LESS BLAH BLAH BLAH!
Just look at Apple: they say as much as
their competitors but they really know
how to highlight their products, be
straight to the point and prioritise
which information to provide.
They focus on design and key visuals of
products to be more catchy.
25. 3. Less blah blah blah
25
Say it, but say it in a more catchy way
Content can be simplified by datavisualization
Datavisualization and pictograms
give life to text.
It creates an attractive layout and
highlights the key points of the speech.
http://bit.ly/1djnwji
26. 3. Less blah blah blah
26
Say it, but say it in a more catchy way
…or pictograms
Pictograms explain different steps
or visually categorize text.
http://bit.ly/1jwkmfU
27. 3. Less blah blah blah
Say it, but say it in a more catchy way
…or pictures to explain in a more attractive way than text
On this site, Android
succeed in portraying
the brand and the
systems’ stories without
having to explain it with
text. Its message is
conveyed mainly by the
pictures of pastries that
stand for the OS.
Here, the brand history
isn’t boring.
Challenge completed.
27
29. 4. Focus on pictures
29
Say it with images !
IMAGES: THE HEART OF WEBDESIGN
Images are meaningful and attractive. This
trend is fully related to trend 3 « Less blah blah blah »
and the need to get staight to the point.
We see more and more websites with high
quality background images. This introductive
image is very impressive and important on the
website, it makes it very visual and refined.
Not to mention Pinterest and Instagram which
have a big influence and play a part in the
development of the image as a way of communicating.
3D Design will also be a key player on the 2014
webdesign stage.
30. 4. Focus on pictures
30
Say it with images !
More and more large background image websites
Webdesign in 2014 will focus on
large high quality images.
http://bit.ly/NC94JV
http://bit.ly/1aUCPjg
31. 4. Focus on pictures
Say it with images !
More and more large background image websites
http://bit.ly/1okfVFr
http://bit.ly/1hbDFLd
http://bit.ly/1iOH6Vs
31
32. 4. Focus on pictures
Say it with images !
More and more large background image websites
This site highlights the product and focusses
on the printed materials of the bottle to design
the entire website.
32
33. 4. Focus on pictures
Say it with images !
More and more large background image websites
The site of Sagmeister Walsh is composed of random
images. The menu is directly clickable in the images.
33
34. 4. Focus on pictures
Say it with images !
More and more large background image websites
The menu is clickable directly in the background of the picture.
34
35. 4. Focus on pictures
Say it with images !
More and more large background image websites
The site of Windshape is composed of large random images with
filter effects like on Instagram.
35
36. 4. Focus on pictures
36
Say it with images !
Blurred images trend is developing
We see more and more ‘blurred
design’ on these large image
background websites.
‘Blurred images’ are large images with
a big blur of pastel tones of colours.
They bring a refined and sober
atmosphere to the website. They also
take less time to load because the size
of the picture is smaller than standard
images.
http://bit.ly/1eQ21IK
http://bit.ly/MbTW54
37. 4. Focus on pictures
37
Say it with images !
Image editing and creation
The images are even more
meaningful when they are
customised : mixed with
geometric patterns, fonts,
other images… It conveys a
stronger message and creates
a specific atmosphere.
http://bit.ly/1aUELbA
39. 5. Video speaks louder than words
Video, added content value
VIDEO: 90% OF WEB TRAFFIC IN 2017
Like images, videos occupy a more important
place in webdesign for more airy, visual and
attractive content.
Video will make up 90% of web traffic in 2017
according to Cisco.
According to Social Media Examiner, 76% of
marketers plan to increase the use of videos
on the internet.
No need to tell you that video will be the star
of 2014 to bring forward a concept and a
brand product.
39
40. 5. Video speaks louder than words
Video, added content value
Video in centre page
We see it increasingly in the
centre page of sites to animate
and dynamise but equally
to replace explanitory texts
which take time to read.
A non negligeable point about
video: it allows for greater
virality than text (videos are
easily shareable on social
networks).
The Qcamera Site is animated by the
video in centre page with an explanation
about the product.
40
41. 5. Video speaks louder than words
Video, added content value
Video in centre page
The whole background of Any.do’s site is animated
by a video to give a particular ambiance to the site.
41
42. 5. Video speaks louder than words
Video, added content value
Video in centre page: other examples
A swimming pool site with a video in
centre page to « plunge » you into the
universe.
The site of the film Gravity to immerse the
user into the film.
42
43. 5. Video speaks louder than words
Video, added content value
100% vidéo
This site of Puma uses a video for its background with two other
video screens in the foreground.
43
45. 6. Flat design
45
Sites in flat
SKEUOMORPHISME IS ALREADY AWAY
Skeuo-what ? !
For those that do not know, skeuomorphism is a term
defining an element of design that ornamentally reproduces
a necessary element of the original object.
This trend was democratised by Apple’s interface designs
that were reproduced in the form of physical objects to
make it easier for the user to understand.
The gallery of e-books, the memos in the forms of ‘post its’,
metal effect buttons…. Or even in navigation that took
inspiration from physical reflexes (e.g turning the page of
an e-book).
46. 6. Flat design
46
Sites in flat
FLAT DESIGN IS STILL TRENDY IN 2014
Apple has often influenced artistic direction in the last
few years, notably with skeuomorphism.
Last year it was Windows, Apple’s competitor, with
its colour blocks and simple icons: the first OS to
apply ‘flat design’.
Flat design takes inspiration from the 60s and wants
for the design of the site to be flat by removing all
the frills. No gradients, textures or drop shadows etc.
47. 6. Flat design
47
Sites in flat
FLAT DESIGN IS STILL TRENDY IN 2014
iOS6
iOS7
Evidence of the influence of flat design,
Apple has abandoned its skeuomorphism
to adapt to this trend for iOS 7.
The interface revisits the 80s, with flash
colour gradients. This change created a
real controversy in 2013.
Flat design will once again be a
trend for webdesign in 2014!
49. 6. Flat design
Sites in flat
Know the difference between flat design and realism (skeuomorphism)
This site clearly explains the difference between these two trends which went head to
head in 2013: http://www.flatvsrealism.com/
49
50. 6. Flat design
50
Sites in flat
More and more sites are being influenced by the flat
http://bit.ly/1m7tUA1
http://bit.ly/1djO8ke
51. 6. Flat design
Sites in flat
The long shadow design gives depth to the flat
We see the appearance of the
‘long shadow’ trend which
consists of simply adding a long
shadow to elements which adds
depth to their flat design.
51
53. 7. Font, the star of webdesign
More personalised fonts
FONTS, MORE THAN JUST LETTERS
Gone are standard fonts, we are seeing more
and more personalised fonts, made to
measure, which alone can portray a whole
universe and significations.
53
54. 7. Font, the star of webdesign
More personalised fonts
FONTS, MORE THAN JUST LETTERS
To the delight of designers, all font types are
becoming compatible with browsers. Google
Chrome and Firefox are constantly looking for
solutions to improve the visual appearance and
the display of these new fonts. Unfortunately,
most browsers have sprung into action a little
too late, notably Internet Explorer, the most
widespread in the world. But the evolution is
ongoing and soon enough the basic fonts
will be sitting on the sidelines.
54
55. 7. Font, the star of webdesign
More personalised fonts
Font, much more than just letters: a visual full of meaning
The fonts give a more unique aspect to
the creations, express their personality,
positioning, their message and values.
http://bit.ly/1fgkEQY
http://www.valentinagallo.us/site/
55
56. 7. Font, the star of webdesign
More personalised fonts
Font, much more than just letters: a visual full of meaning
http://bit.ly/1jx5EVS
56
57. 7. Font, the star of webdesign
More personalised fonts
Font, much more than just letters: a visual full of meaning
The font gives more dynamism to
images with ‘mix and match’
(mixing numerous fonts for an
artistic approach).
http://bit.ly/1kBJCle
http://bit.ly/N5qUEf
57
58. 7. Font, the star of webdesign
More personalised fonts
Other examples of fonts:
http://bit.ly/1fYSlbp
http://bit.ly/MbZrR0
http://bit.ly/1eTVJ9x
58
59. 7. Font, the star of webdesign
59
More personalised fonts
http://bit.ly/MKXI58
http://bit.ly/1er05jC
60. 7. Font, the star of webdesign
More personalised fonts
http://bit.ly/1aUJOIP
60
62. 8. Geometric webdesign
Use of geometric forms in webdesign
We still notice and continue to use geometric
forms in webdesign, angular or rounded,
the forms honour and embellish layouts of
sites with reworked images.
62
67. 9. Parallax and animated sites
Giving an immersive and functional dimension
The scrolling parallax made a
strong entry, now 2 years ago, and is
certainly set to continue in 2014.
With
this
technique,
the
background images move more
slowly than the images in the
foreground, this gives a feeling of
depth and immersion.
Based on the principal of video games,
this technique gives a lot of dynamism
to sites.
The possibilities are endless and we
think that many more surprises lie
ahead for this year!
Parallax gives depth through moving
products Rimmel’s site
67
68. 9. Parallax and animated sites
68
Giving an immersive and functional dimension
On this site of Anna Safroncik, the
parallax technique has been used to
dynamise reading, by scrolling, the
images appear as and when to give
more character to the site.
69. 9. Parallax and animated sites
Giving an immersive and functional dimension
On this site of No Leath, all the products
are highlighted thanks to the movement
that produces the parallax, the content of
the site becomes the essential for more
attractive and dynamic reading.
69
70. 9. Parallax and animated sites
Giving an immersive and functional dimension
Other sites do not stop at a
simple parallax scroll and
go as far as developing
entirely animated and
interactive sites.
These sites have a more fun
and event related purpose,
their role is to completely
immerse the user in an
engaging experience.
This draws attention to
the site and encourages
the user to stay on the
site for longer.
http://bit.ly/1hbOvB4
70
71. 9. Parallax and animated sites
Giving an immersive and functional dimension
This site helps users to discover the mystical universe of Jack Daniels during the
Christmas period, the site is full of animations to give total immersion into the different
facets of the brand.
71
73. 10. Synchronised navigation
A multi device experience
For some years, "Google
experiment" has frequently
come up with new technical
feats that change the web of
tomorrow, and therefore
inspire
designers
to
create different models.
One of the new techniques
that marked this spirit is
synchronised navigation
on mobiles or tablets.
Google Chrome presented this with their site Super Sync
Sports.
The idea is to scan a QR code to therefore be immediately
directed to a specific URL on your smartphone, the link is
automatically made and the magic starts!
73
74. 10. Synchronised navigation
A multi device experience
The Adidas site– Nitrocharge your game is a
digital experience where you can discover players
sponsored by Adidas, admire shoes from all angles
and play the multi screened game on your iPhone or
on your desktop.
74
75. 10. Synchronised navigation
A multi device experience
On the Justareflektor site, Arcade Fire allow you to
discover their new video by interacting with the site
through mobile.
75
76. 10. Synchronised navigation
A multi device experience
The site Racer allows you to complete a racetrack made
up of numerous smartphones and tablets (5 maximum).
To accelerate you just have to touch the screen of your
terminal.
76
78. Thank you for your attention
Do not hesitate to get in touch
Jean-Marc Liacy and his team
Artistic Director
jmliacy@vanksen.com
+352 48 90 90 226
Contact us:
Benelux
Jérémy Coxet
jcoxet@vanksen.com
+352 48 90 90
France
Xavier Lesueur
xlesueur@vanksen.com
+331 55 33 89 00
Suisse
David Pihen
dpihen@vanksen.com
+41 22 306 49 90
Solange Derrey
Head of digital studies
sderrey@vanksen.com
+33 1 55 33 89 17
vanksen.com
twitter.com/vanksen
facebook.com/vanksen
pinterest.com/vanksen