X
2018
UX & WEBDESIGN TRENDS

We split these different trends into 3 major pillars.

Aesthetic
Interaction
Architecture

AESTHETIC

5
Aesthetic
/ The main challenge is to be able to understand these new trends in order to know how to
use them properly and efficiently. Aesthetic trends do not all work the same and act
differently depending on the context and its targeted users.
/ The purpose here is not to judge aestheticism itself. And it certainly isn’t
about redefining what beauty is either. However, just like trends,
aestheticism evolves and is impacted by society, artistic movements, and
innovation.
/ When handled well, trends which would normally only be judged as purely aesthetic and providing some sort of
visual satisfaction, can actually contribute to the performance and effectiveness of your digital tools.

6
/ The cinemagraph is a subtle mix of photography and video. It is an animated
image displayed in the form of an iterative and endless loop.
/ Since only a small part of the image is animated, the effect gives life to a visual
and adds an unexpected dimension to a traditionally still image.
/ Cinemagraphs are made from video files or GIFs, with no audio track, and are
cut into several frames.
Trend #1
Cinemagraph

7
SEO INSIGHT
Since GIFs have now been made indexable, it is possible to integrate
cinemagraphs directly into page results.
Attractive and eye-catching, this animated format increases click rate
and time spent by a user on a webpage.
According to certain studies, embedding an animated content in an
email could increase click rate by 25% compared to a non-animated
one.
Trend #1 - Cinemagraph
AESTHETIC – CINEMAGRAPH

8
CREATIVE INSIGHT
By focusing exclusively on one detail (the animation itself) cinemagraphs raise
the level of attention and lead the user into focusing on that very detail.
And due to their repetitive nature, cinemagraphs tend to have a hypnotizing
effect.
They can be used as a subtle pause before diving into richer contents on a
website.
Trend #1 - Cinemagraph
AESTHETIC – CINEMAGRAPH

9
UX INSIGHT
Today, videos represent more than 70% of the web’s global traffic, which
is why animated elements are a must. In this context, the cinemagraph
meets the new digital user’s experience.
Fortunately, cinemagraphs are easily accessible since they’ve been made
widely available in image databanks as an alternative to longer videos.
Trend #1 - Cinemagraph
AESTHETIC – CINEMAGRAPH

Things To Keep In Mind
10
AESTHETIC – CINEMAGRAPH
Cinemagraphs can be exported as GIFs or videos (MP4). A GIF
is generally lighter but of poorer quality. A video, though heavier,
benefits from a higher quality.
If used as an MP4, it is important to pay attention to the file’s
overall weight. A heavy file will affect page load speed and
therefore, website ranking.
On the UX side, cinemagraphs shouldn’t take too much space at
the expense of content. Otherwise, website browsing and the
user’s experience itself could be negatively impacted.

11
/ Flat design, which was popular for years but ended up being judged for its lack of
finesse and relief, has been progressively replaced by what is called “material
design”: an alternative design pushed by Google, which offers more perspective and
depth.
/ With the aim of providing more dynamism and making colors really vibrant, colorful
gradients are slowly taking over flat designs and their lack of personality.
/ The release of iOS 7 is clearly what jump-started the colorful gradients trend.
These are now massively adopted for apps’ icons, and tend to be more common on
full-screen websites. A vibrant and bold bias that gives power to shapes.
Trend #2
Colorful Gradients

12
Color gradients are more refined than simple flat designs and convey
energy and dynamism. But in order to make a gradient effective,
inspiration is required. And is there any better inspiration than the
multiple chromatic variations Mother Nature has to offer ?
In fact, the human eye and brain are more receptive to the colors and
gradients they would normally see in nature’s infinite beauty.
Trend #2 – Color gradients
AESTHETIC – GRADIENT
CREATIVE INSIGHT

13
There is no actual rule on how to make a colorful gradient.
However, respecting colors contrast and text readability (by taking into account every type
of user and their eye-sight) is key to a successful gradient.
Plugins are available online to test readability interfaces for users with visual impairments
(color blindness, age-related macular degeneration..)
These plugins are vision simulators that allow you to test what your interface would look
like through every kind of human eye.
Regardless, it is important to keep in mind that no informational text should be associated
with a gradient. Otherwise readability would be skewed and the user might miss a crucial
piece of information.
Color Blindess Simulator
UX INSIGHT
Trend #2 – Color gradients
AESTHETIC – GRADIENT

14
TRENDS
2018 / If mobile web browsing has seen an explosive growth in the past few years,
sessions are becoming shorter and shorter: 40% of sessions are now micro-
sessions lasting less than 15 seconds.
/ Fast reading also known as « glancing » is now the norm and website editors
have to set up readable typographic conceptions in non optimal conditions.
/ … hence the development of huge or « Masta » fonts.
Trend #3
MASTA font

15
UX INSIGHT
Masta fonts are useful for highlighting very small portions of text.
This technique guides users towards what we want them to see on a
webpage. On average, users only read 28% of the words on a page
while visiting a website. This figure can even go down to as low as
20%.
Users prefer to scan and analyze the page upstream in order to
carefully choose what they really want to read and pay attention to.
Trend #3 – Masta font
AESTHETIC – MASTA FONT

16
Masta fonts were previously used with traditional fonts and typical colors as we
can still see in the press headlines for example.
Today, masta fonts tend to be much more colorful and creative and can even
replace visuals and images.
The very graphical use of these fonts creates outstanding and impactful
impressions, sometimes stronger than visuals themselves. And a title will always
be lighter than an image.
As a result, while creating this powerful impression, Masta fonts have a positive
impact on page load speed.
Trend #3 – Masta font
AESTHETIC – MASTA FONT
CREATIVE INSIGHT

Things To Keep In Mind
17
AESTHETIC – MASTA FONT
These giant fonts have to be used with frugality (only for titles and short texts, for example).
Let’s keep in mind that the Masta fonts’ main objective is to catch the user’s attention while leading to what really matters.
Still, it’s highly recommended not to use masta fonts in capital letters only.

18
/ A font with serif is a font with a small line attached to the end of a stroke in a
letter or symbol.
/ Fonts with serif tend to embellish a basic typography thanks to its fine details
and lines.
/ The most famous serif font is Times New Roman.
Trend #4
SERIF

19
UX INSIGHT
Many studies have been conducted on the readability of Serif fonts.
While the results are relatively inconclusive, it seems that Serif fonts
could be easier to read.
The Garamond font, for instance, is said to improve readability by a
whopping 67%, significantly more than Times New Roman which is
at 32%.
One thing is sure: thanks to newer screen resolutions which display
more and more details, Serifs fonts have become much easier to read
over time, even on smaller screens.
Trend #4 – Serif
AESTHETIC – SERIF

20
Thanks to technology and more detailed screen resolutions, it is now
possible to have fun with Serif fonts.
With their elegance and their « litterature flavour » inspiring stability and
temporality, these fonts are making a big comeback in modern-day
Webdesign.
Combined with lighter and more disruptive fonts, they can provide a great
mix of old and new to create very unique renderings and vibes.
CREATIVE INSIGHT
Trend #4 – Serif
AESTHETIC – SERIF

21
This style of fonts alters the outline of a letter, making it more difficult to read for people suffering from dyslexia or visual impairment.
Things To Keep In Mind
AESTHETIC – SERIF

INTERACTION

Interaction
23
Interaction
/ Interaction is very specific to the internet. It aims to provide the
user with the opportunity to engage with different contents and give
life to his/her web browsing.
/ Interaction has to be thought out in a manner that meets users’ needs.
It should therefore be as intuitive, immersive, simplified and
entertaining as possible.
/ Successful interactions have many advantages: better memorization,
increased time spent on pages, brand preference…

24
/ The way Fullscreen Search works is quite simple to understand. It is nothing
more than a search box that, once clicked on, goes full screen. Thanks to that
design, the user has the possibility to exclusively focus on the request he or she
needs to make.
/ On some websites, in order to provide an optimized search experience, you can
find some full screen search features with auto-suggestions, dynamic results,
most frequent search requests and so on.
Trend #5
Full Screen Search

25
UX INSIGHT
Full screen search aims to help users exclusively focus on what they
are doing and, at the same, avoid any information overload. Thus,
users do not experience any interference with any non relevant
element that isn’t directly linked to the request.
The full screen search feature is also known for offering a very good
user experience, especially on mobile devices.
Trend #5 – Full screen search
INTERACTION – FULL SCREEN SEARCH

26
SEO INSIGHT
Faceted browsing is set up to link pages without overloading the navigation menu
while also creating semantic cocoons. What the search engine brings is interesting
for its analytical purpose: analyzing requests made by users is a good way to learn
more about what they really want on the website. It also helps detect and select
topics for which it is important to create dedicated contents.
Trend #5 – Full screen search
INTERACTION – FULL SCREEN SEARCH
Search on a website is really important from an SEO point of
view. Page Results are chosen with great care and should
always be as optimized as possible. However for these pages to
be indexable, they have to be linked somewhere else on the
website.

Things To Keep In Mind
27
INTERACTION – FULL SCREEN SEARCH
The use of an internal search engine on a website is totally invisible
from an SEO point of view: the Google crawling bot cannot type
sentences in an empty field, it can only follow links on a given page.
It is therefore very important to plan an alternative navigation made of
hyperlinks in order to lead crawling bots to the deepest pages of a
website, something that a search feature alone cannot do.
This is why you need a navigation menu and a footer, as well.

Things To Keep In Mind
28
INTERACTION – FULL SCREEN SEARCH
The way full screen search works might be baffling for users who are not used to it. To solve this problem you have to work with codes they are used
to, such as an “X” at the top right to close the search box, something users already know and can relate to.
/ In order to improve the user experience, you might want to use auto-
suggestions, filter systems and auto-corrects in order to avoid any non-
relevant or the dreaded “Zero” results! Let’s keep in mind that the main
goal here is to ease the user’s research process.
/ When clicking on the search icon, it is recommended to bring all the
attention on the search field, thus avoiding an extra click. It is also
recommended to give to the user the opportunity to go back to his/her
initial search request even after browsing one or several pages on the
website.

29
/ Natural Language Form is a traditional web form displayed with sentences in
natural language, that “everyone can understand”.
/ Simple information requests are turned into sentences instead of being sorted
by predefined fields such as name, surname, address…
/ In many cases, Natural Language Forms are completed by auto-completion
and/or auto-suggestion in order to guide and help the user with his/her request.
Trend #6
Natural Language Form

30
UX INSIGHT
The way users enjoy this kind of form is closely linked to the context
and the audience. Even if NLF aims to be more intuitive, a format as
disruptive as this one might confuse certain users.
In any case, NLF can only be used for short and simple forms.
Trend #6 - Natural Language Form
INTERACTION – NATURAL LANGUAGE FORM

31
Trend #6 - Natural Language Form
INTERACTION – NATURAL LANGUAGE FORM
SEO INSIGHT
In general, forms aren’t that effective from an SEO perspective: lists or
empty fields are not making a lot of sense in the eye of search engine
algorithms.
But when a NLF is used as a submission form, the page might be
indexable if the text is long enough (150 to 200 words).

Things To Keep In Mind
32
Taking into account the audience and the context in which it is used is crucial
to make sure the form will be efficient and used properly.
In cases where a form is the only way to browse through deep website
pages, it is important to plan a drop-down menu with HTML links for each
field to fill. This technique allows robots to crawl all pages that have been
generated.
Another way to browse other contents of the site is also required on the
landing pages in order to have an internal SEO-friendly linkage.
INTERACTION – NATURAL LANGUAGE FORM

33
/ Micro interactions are subtle animations triggered when interacting with an
application. Almost every application we use on a daily basis is filled with micro
interactions.
/ You can experience micro-interactions, for example, when adding an item to
your basket when shopping online. The purpose is to give you confirmation that
your action has been done successfully.
/ When integrated with design, these micro interactions enhance the user
experience by making the interface less « machine-like» and more « human ».
Trend #7
Micro Interactions

34
UX INSIGHT
Micro interactions meet one of UX key criteria: immediate feedback.
In fact, micro interactions work as confirmation elements for an
action made by a user. Thanks to this process, users know their
actions have been successfully done and know where to go next.
Trend #7 – Micro Interactions
INTERACTION – MICRO INTERACTIONS

35
Micro interactions are hard to manage and to work on. They have to be
discreet but visible and yet explicit enough as well to work as a confirmation
element.
Simplicity and efficiency are key here. But the design of these micro
interactions needs to be identifying and singular for each brand. For some of
them, micro interactions are a kind of signature; a real part of their identity!
Plus, timing and motion fluidity can be critical into the success of these
animations.
Trend #7 – Micro Interactions
INTERACTION – MICRO INTERACTIONS
CREATIVE INSIGHT

Things To Keep In Mind
36
The process has to be linked to the type of action the user is doing.
For example, the action of saving a document has to match with a
visual representing this action in order to let the user know that the
system has successfully saved the document. The feedback has
to be judged according to its relevance and its capacity to be
understood by all.
INTERACTION – MICRO INTERACTIONS

37
/ Generally used for graphics in 2 dimensions, SVG or Scalable Vector Graphic
aims to describe rich images with some special features such as tilts,
transparency, filter effects or animations. Thanks to SVG, 3 types of graphic
objects are available: vectorial shapes (lines, curves..), images and text.
/ An SVG image is based on geometrical shapes to which we associate textures
and behaviors therefore allowing to set up dynamic and interactive content.
Trend #8
SVG

38
Thanks to recent technologies and the development of more
performant screens, it has become essential to use pictures and
contents that can exploit these screens at their full potential.
For this purpose, SVG is really interesting since there’s
no compression, meaning no loss in quality.
Plus, with icons and illustrations being highly praised in modern-day
webdesign, they have to be of the highest quality and very fast to load.
Trend #8 - SVG
INTERACTION – SVG
CREATIVE INSIGHT

39
SEO & UX INSIGHTS
From an SEO point of view, SVG has many advantages: the file is light so
page load speed is improved. In addition, this format can be compressed and
is well indexed by search engines.
SVG is also a must for mobiles devices’ accessibility and responsive images
management. Since SVG tags enhance page loading speeds, they perform
very well on mobile devices.
Trend #8 - SVG
INTERACTION – SVG

Things To Keep In Mind
40
When you export to SVG, it is possible to include text by using
the font of your choice. However, you have to be sure the font
has already been uploaded on your website, otherwise it will be
automatically replaced by another random font.
If the font is not on your website, you can still vectorize your
SVG text in order to maintain your graphical rendering. But
Google won’t be able to crawl the text and users won’t be able
to interact with it.
INTERACTION – SVG

ARCHITECTURE

42
/ Information architecture refers to the process of structuration and
organization of the information based on user behaviors and needs
analysis.
/ It is a key step that aims to meet an audience’s browsing habits and even anticipate final
users needs in order to provide them with optimal navigation on a website.
/ Due to changes in our behaviors and web usage (new devices, new practices, new
trends…), the way we think information architecture has to be perpetually challenged in
order to keep understanding users needs and expectations and finding relevant ways to
meet them.
Information architecture

43
/ Asymmetric Design is the absence of any symmetry between elements of a website.
/ On a website page, Asymmetric Design consists in creating blocs of elements that are
asymmetrically positioned from one another while keeping a very balanced design
overall.
TRENDS
2018
Trend #9
Asymmetric Design

44
CREATIVE INSIGHT
Asymmetric Design has many qualities. One in particular is to
provide more space and freedom: the web designer does not have
to worry about perfect symmetry of elements and, thus, have a
wider freedom in his/her artistic conception.
Trend #9 - Asymmetric
ARCHITECTURE – ASYMMETRIC

45
UX INSIGHT
Asymmetric Design meets some UX criteria as well.
/ Asymmetrical content provides a more immersive experience: it
allows to have the user paying much more attention to what matters
and make this focus last. In addition it is easier to segment the
content making it more “digestable”.
Trend #9 - Asymmetric
ARCHITECTURE – ASYMMETRIC

Things To Keep In Mind
46
Balance is key when talking about asymmetric design. An unbalanced design is bound to directly affect the
user experience: misunderstanding, confusion, reading complication… Many things that can penalize pages and
website performance (higher bounce rate, decrease in time spent on pages…)
ARCHITECTURE – ASYMMETRIC

47
/ Split Screen consists in dividing the screen into two parts, or more.
/ This process allows to create two (or more) atmospheres on a single page.
/ They can be built with various elements: videos, texts, gifs…
/ With Split Screen design, you can easily display two messages (different,
complementary…) on one single space.
SPLIT
SCREEN
Trend #10
Split Screen

48
With split screen design, producing minimalist but relevant layout reaches
a new level.
It also allows creatives and web designers to have more freedom on how
to think and develop a website.
Trend #10 – Split Screen
ARCHITECTURE – SPLIT SCREEN
CREATIVE INSIGHT

49
SEO INSIGHT
As long as traditional tagging rules are followed and HTML technology
is used (Java Script can be used for the layout but not for texts in the
page), Split screen does not affect SEO.
Trend #10 – Split Screen
ARCHITECTURE – SPLIT SCREEN

50
UX INSIGHT
Split screen design works pretty well on tablets and smartphones since
tactile scrolling makes the interaction smoother and more intuitive.
However there are certain key points to look out for such as
the consistency of the content. An unbalance within the different screens’
content (lack of CTA on both sides, sporadic content on one side VS
substantial content on the other side) would affect the use of Split Screen
format and, in addition, have a negative impact on the user’s experience.
Trend #10 – Split Screen
ARCHITECTURE – SPLIT SCREEN

Things To Keep In Mind
51
In SEO, the H1 (header 1) represents the page theme. When using
Split screen, people are tempted to use two H1 titles on the page,
one title for each split. However, it is mandatory to only use H2 for
each split parts and one H1, which will represent the theme, for the
whole page.
If this rule is not followed, a tagging issue will occur and the crawler
robot won’t be able to get the theme of the page resulting in a
negative impact on the website’s natural indexing.
ARCHITECTURE – SPLIT SCREEN

52
/ The democratization of bots has changed the way we use them now. Today,
bots are much more than a simple message service and can even be proper
websites.
/ Bot pages host interactive, conversational robots, that rely on data chosen with
great care to animate a conversation and meet users expectations and needs.
/ This mobile first format shakes up our traditional way of perceiving a traditional
website information architecture, offering users a total freedom in the way they
interact with the website.
Trend #11
Bot Page

53
UX INSIGHT
As a refined interface which is limited UI-wise, a Bot Page provides a
simple yet intuitive experience, thanks to the many possibilities users get
to interact with the website (vocal, chat…)
Fast by nature, bots humanize the relationship between the machine and
the user. This format fits especially well on mobiles devices, where users,
when using chat bots, can quickly relate to traditional messaging apps and
services.
Trend #11 – Bot Page
ARCHITECTURE – BOT PAGE

Things To Keep In Mind
54
Bot pages contents don’t seem to be indexable. This is a good
reason why you should not replace your FAQ with a bot page.
Otherwise, you could lose a precious source of rich indexable
contents.
It is key to prepare and to know how to meet your users’
expectations: setup of a few scenarios of possible conversions,
beta testing…
ARCHITECTURE – BOT PAGE

APPENDIX

METHODOLOGY

Creation
UX
SEO

CREATION DIVISION

Creative expertise
59
METHODOLOGY
Our references
/ Vanksen supports clients in all their creative projects thanks to a creative team made of many experts:
/ Artistic directors, graphic designers, web designers, copywriters, motion designers, editors, illustrators…
/ Our creatives have one goal: provide an emotional dimension to the rational approaches of our technical experts.

UX DIVISION

UX expertise
61
METHODOLOGY
Our references
/ The most recent creation to date at Vanksen is the UX/UI department. It is made of experts such as ergonomists, UX experts
and UI designers.
/ The objective of the UX/UI department is to provide the best interface and user experience for each and every one of
our clients’ projects.
/ Our UX/ UI experts have one mission: connect design, utility and information architecture to offer a flawless experience to the
users of our clients’ websites

SEO DIVISION

SEO expertise
63
METHODOLOGY
Our references
/ Vanksen’s historical core business, SEO (Search Engine Optimization) aims to organically guide users to our clients’
websites.
/ In order to ensure a consistent and qualified web traffic, while guaranteeing visibility among the right target audiences, our
experts leverage many of their skills for our clients: technical, linking, semantic.
/ Our natural referencing specialists support our clients in:
/ Project revamps and website optimizations
/ Content creation

SOURCES

OUR SOURCES
Slide
number
Slide title Sources
Slide 6 Trend #1 – Cinemagraph http://www.tripwiremagazine.com/cinemagraphs/ (image)
Slide 7 Video example http://www.studiomarani.it/
Slide 8 Trend #1 – Cinemagraph – SEO expert eye http://www.tripwiremagazine.com/cinemagraphs/ (image)
http://blog.send-up.net/le-cinemagraphe-nouveau-souffle-emailing/ (chiffres)
Slide 9 Trend #1 – Cinemagraph – Creative expert eye http://www.tripwiremagazine.com/cinemagraphs/ (image)
Slide 10 Trend #1 – Cinemagraph – UX expert eye https://hubinstitute.com/2017/05/video-marketing-les-chiffres-de-2017/ (chiffres)
http://www.tripwiremagazine.com/cinemagraphs/(image)
Slide 11 Vigilance points – Cinemagraph http://cinemagraphs.com/
Slide 13 Video example https://mycolor.space/
Slide 14 Video example https://www.nycpride.org/events/
Slide 15 Video example https://www.spotify.com/uk/
Slide 16 Trend #2 – Gradient – Creative expert eye https://uxplanet.org/the-secret-of-great-gradient-2f2c49ef3968
Slide 17 Video example http://www.color-blindness.com/coblis-color-blindness-simulator/

OUR SOURCES
Slide
number
Slide title Sources
Slide 19 Video example - Masta Typo http://nurturedigital.com/
Slide 20 Trend #3 – Masta Typo – UX expert eye https://kingofsoul.storytelling.design/?ref=land-book.com
https://www.nngroup.com/articles/how-little-do-users-read/
https://www.nngroup.com/articles/how-users-read-on-the-web/
Slide 21 Trend #3 – Masta Typo – Creative expert eye https://yonacare.com/
Slide 22 Vigilance points – Masta Typo https://www.awwwards.com/sites/james-gillen-2017-review
HTTPS://WWW.AWWWARDS.COM/SITES/LIG-WORKS
https://www.awwwards.com/sites/la-clairiere
https://www.awwwards.com/sites/manoverboard-studio
Slide 24 Video example – Serif http://www.oursroux.com/
Slide 25 Video example – Serif http://www.vesperhotel.com/
Slide 26 Video example – Serif http://studiompls.com/
Slide 27 Trend #4 – Sérif – UX expert eye https://www.awwwards.com/inspiration/5964b901e138234ab6071601 (image)
http://larecetteduweb.fr/conseils-pour-entrepreneurs/cherchez-police-caractere-
lisible-voici-les-tests-menes/ (chiffres)
Slide 28 Trend #4 – Sérif – Creative expert eye https://www.awwwards.com/inspiration/5954cb1be1382358110b799f

OUR SOURCES
Slide
number
Slide title Sources
Slide 29 Vigilance points – Serif https://www.awwwards.com/inspiration/582ee9b9e138237b9303c09f
https://www.behance.net/gallery/3104423/Hagin-Free-Font
https://www.awwwards.com/inspiration/582eec15e138233b0157cbc2
https://www.typewolf.com/site-of-the-day/ayaka-ito
Slide 33 Video example – Full Screen Search https://thefwa.com/
Slide 34 Trende #5 – Full Screen Search – UX expert eye http://www.jaunedechrome.com/en/collections/
Slide 35 -
37
Full Screen Search https://www.awwwards.com/sites/james-gillen-2017-review
HTTPS://WWW.AWWWARDS.COM/SITES/LIG-WORKS
https://www.awwwards.com/sites/la-clairiere
https://www.awwwards.com/sites/manoverboard-studio
Slide 38 Trend #6 – NFL https://www.jroehm.com/2014/01/ui-pattern-natural-language-form/
Slide 39 Video example – Sérif https://www.hioscar.com/get-quote/
Slide 40 Trend #6 – NFL – UX expert eye https://tympanus.net/Tutorials/NaturalLanguageForm/
Slide 41 Trend #6 – NFL – SEO expert eye https://salleprivee.ca/
Slide 42 Vigilance points – NFL https://www.jroehm.com/2014/01/ui-pattern-natural-language-form/
(pour les deux images)

OUR SOURCES
Slide
number
Slide title Sources
Slide 43 Trend #7 – Micro Interactions https://uxplanet.org/best-practices-for-microinteractions-9456211aeed0
Slide 44 Video example – Micro Interactions https://cdn-images-1.medium.com/max/2000/1*2gzBT_k8M-SrIZ1maT7njQ.gif
Slide 45 Video example – Micro Interactions https://uxplanet.org/micro-interaction-great-experience-for-user-engagement-
b37446bf6306
Slide 46 Trend #7 – Micro Interactions – UX expert eye https://uxplanet.org/micro-interaction-great-experience-for-user-engagement-
b37446bf6306
Slide 47 Trend #7 – Micro Interactions – Creative expert eye https://uxplanet.org/micro-interaction-great-experience-for-user-engagement-
b37446bf6306
Slide 48 Vigilance points – Micro Interactions https://www.webdesignerdepot.com/2015/07/7-secrets-for-enhancing-ux-with-
micro-interactions/
Slide 49 Trend #8 – SVG http://circulardev.com/nike/cortez/#
Slide 50 Video example – SVG http://www.quadnotion.com/
Slide 51 Video example – SVG https://waaark.com/
https://www.awwwards.com/inspiration/592efd72e13823389424e469
Slide 52 Trend #8 – SVG – Creative expert eye https://donttrack.us

OUR SOURCES
Slide
number
Slide title Sources
Slide 53 Tendance #8 – SVG –SEO & UX expert eyes https://promises.kommigraphics.com/
Slide 54 Vigilance points – SVG https://www.hongkiat.com/blog/svg-animations/
Slide 58 Video example – Asymmetric https://www.danielsammut.com/
Slide 59 Trend #9 – Asymmetric – Creative expert eye https://ideenfrische.de/
Slide 60 Trend #9 – Asymmetric – L’œil de l’UX https://ideenfrische.de/
Slide 63 Video example – Split Screen http://www.constructionpapers.co/
Slide 64 Video example – Split Screen https://thefwa.com/cases/mondo-robot
http://www.mondorobot.com/
Slide 65 Trend #10 – Split Screen – Creative expert eye www.dropbox.com
Slide 66 Trend #10 – Split Screen – L’œil du SEO www.dropbox.com
Slide 67 Trend #10 – Split Screen – L’œil de l’UX https://www.intercom.com/starter-kits/help-center

OUR SOURCES
Slide
number
Slide title Sources
Slide 68 Vigilance points – Split Screen https://www.enginethemes.com/
https://queenswharfbrisbane.com.au/about/
Slide 69 Trend #11 – Bot Page https://www.landbot.io
Slide 70 Video example – Bot Page http://uxchat.me/
https://www.awwwards.com/inspiration/5848aa96e1382326823c3c2e
Slide 71 Trend #11 – Bot Page – UX expert eye https://www.producthunt.com/upcoming/ship
Slide 72 Vigilance points – Bot Page https://landbot.io/
https://www.typeform.com/blog/human-experience/cui/
https://medium.com/k2-product-design

THANK YOU
for your attention, feel free to contact us !
Jérémy Coxet
ASSOCIATE DIRECTOR
Mail : jcoxet@vanksen.com
Tél. : +352 691 501 411