SlideShare a Scribd company logo
1 of 71
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

More Related Content

What's hot

NDC Sydney 2018 | Bots - the Next UI Revolution | Adam Stephensen
NDC Sydney 2018 | Bots - the Next UI Revolution | Adam StephensenNDC Sydney 2018 | Bots - the Next UI Revolution | Adam Stephensen
NDC Sydney 2018 | Bots - the Next UI Revolution | Adam StephensenAdam Stephensen
 
Consumer Experience [CX] Evolution - Full Report - Latitude
Consumer Experience [CX] Evolution - Full Report - LatitudeConsumer Experience [CX] Evolution - Full Report - Latitude
Consumer Experience [CX] Evolution - Full Report - LatitudeLatitude
 
The Little Blue Book of Social Transformation
The Little Blue Book of Social TransformationThe Little Blue Book of Social Transformation
The Little Blue Book of Social TransformationBrian Solis
 
Flat Design. Microsoft Story
Flat Design. Microsoft StoryFlat Design. Microsoft Story
Flat Design. Microsoft StoryNikita Lukianets
 
UX: A Ten Year Retrospective
UX: A Ten Year RetrospectiveUX: A Ten Year Retrospective
UX: A Ten Year RetrospectiveMichael Vaughn
 
CETWorld- Mobile MediaCrossMedia
CETWorld- Mobile MediaCrossMediaCETWorld- Mobile MediaCrossMedia
CETWorld- Mobile MediaCrossMediaMatthew Snyder
 
Mobile User Experience – A key to successful strategies in the mobile market
Mobile User Experience – A key to successful strategies in the mobile marketMobile User Experience – A key to successful strategies in the mobile market
Mobile User Experience – A key to successful strategies in the mobile marketHenrik Hedegaard
 
IxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital InteractionsIxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital InteractionsJayan Narayanan
 
What Matters Now: Retail
What Matters Now: RetailWhat Matters Now: Retail
What Matters Now: RetailHuge
 
Inside the Driving Forces of Disruptive Innovation
Inside the Driving Forces of Disruptive InnovationInside the Driving Forces of Disruptive Innovation
Inside the Driving Forces of Disruptive InnovationMSL
 
Digital Business Acquisition: How to Perform?
Digital Business Acquisition: How to Perform?Digital Business Acquisition: How to Perform?
Digital Business Acquisition: How to Perform?Vanksen
 
Sxsw 2017 Epsilon Agency Recap
Sxsw 2017 Epsilon Agency RecapSxsw 2017 Epsilon Agency Recap
Sxsw 2017 Epsilon Agency RecapSteven Harries
 
Lillian Tong_The UX Factor_Voyeur
Lillian Tong_The UX Factor_VoyeurLillian Tong_The UX Factor_Voyeur
Lillian Tong_The UX Factor_VoyeurLillian Tong
 
Why Mobile App Should Upgrade to UX/UI Design?
Why Mobile App Should Upgrade to UX/UI Design?Why Mobile App Should Upgrade to UX/UI Design?
Why Mobile App Should Upgrade to UX/UI Design?AppClues Infotech
 
BtoB : Digital for Business - English Version
BtoB : Digital for Business - English VersionBtoB : Digital for Business - English Version
BtoB : Digital for Business - English VersionVanksen
 
Let's Break Tradition: Virtual Reality in Public Relations
Let's Break Tradition: Virtual Reality in Public RelationsLet's Break Tradition: Virtual Reality in Public Relations
Let's Break Tradition: Virtual Reality in Public RelationsMSL
 
3rd Annual International UX Awards- June 2013
3rd Annual International UX Awards- June 20133rd Annual International UX Awards- June 2013
3rd Annual International UX Awards- June 2013Oxford Tech + UX
 
UI & UX DESIGN FOR MOBILE
UI & UX DESIGN FOR MOBILEUI & UX DESIGN FOR MOBILE
UI & UX DESIGN FOR MOBILEJoseph Ssekono
 
Six Social-Digital Trends for 2013
Six Social-Digital Trends for 2013Six Social-Digital Trends for 2013
Six Social-Digital Trends for 2013David Armano
 
Why UI & UX Design Matters? For building digital and software products
Why UI & UX Design Matters? For building digital and software productsWhy UI & UX Design Matters? For building digital and software products
Why UI & UX Design Matters? For building digital and software productsBoldare
 

What's hot (20)

NDC Sydney 2018 | Bots - the Next UI Revolution | Adam Stephensen
NDC Sydney 2018 | Bots - the Next UI Revolution | Adam StephensenNDC Sydney 2018 | Bots - the Next UI Revolution | Adam Stephensen
NDC Sydney 2018 | Bots - the Next UI Revolution | Adam Stephensen
 
Consumer Experience [CX] Evolution - Full Report - Latitude
Consumer Experience [CX] Evolution - Full Report - LatitudeConsumer Experience [CX] Evolution - Full Report - Latitude
Consumer Experience [CX] Evolution - Full Report - Latitude
 
The Little Blue Book of Social Transformation
The Little Blue Book of Social TransformationThe Little Blue Book of Social Transformation
The Little Blue Book of Social Transformation
 
Flat Design. Microsoft Story
Flat Design. Microsoft StoryFlat Design. Microsoft Story
Flat Design. Microsoft Story
 
UX: A Ten Year Retrospective
UX: A Ten Year RetrospectiveUX: A Ten Year Retrospective
UX: A Ten Year Retrospective
 
CETWorld- Mobile MediaCrossMedia
CETWorld- Mobile MediaCrossMediaCETWorld- Mobile MediaCrossMedia
CETWorld- Mobile MediaCrossMedia
 
Mobile User Experience – A key to successful strategies in the mobile market
Mobile User Experience – A key to successful strategies in the mobile marketMobile User Experience – A key to successful strategies in the mobile market
Mobile User Experience – A key to successful strategies in the mobile market
 
IxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital InteractionsIxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital Interactions
 
What Matters Now: Retail
What Matters Now: RetailWhat Matters Now: Retail
What Matters Now: Retail
 
Inside the Driving Forces of Disruptive Innovation
Inside the Driving Forces of Disruptive InnovationInside the Driving Forces of Disruptive Innovation
Inside the Driving Forces of Disruptive Innovation
 
Digital Business Acquisition: How to Perform?
Digital Business Acquisition: How to Perform?Digital Business Acquisition: How to Perform?
Digital Business Acquisition: How to Perform?
 
Sxsw 2017 Epsilon Agency Recap
Sxsw 2017 Epsilon Agency RecapSxsw 2017 Epsilon Agency Recap
Sxsw 2017 Epsilon Agency Recap
 
Lillian Tong_The UX Factor_Voyeur
Lillian Tong_The UX Factor_VoyeurLillian Tong_The UX Factor_Voyeur
Lillian Tong_The UX Factor_Voyeur
 
Why Mobile App Should Upgrade to UX/UI Design?
Why Mobile App Should Upgrade to UX/UI Design?Why Mobile App Should Upgrade to UX/UI Design?
Why Mobile App Should Upgrade to UX/UI Design?
 
BtoB : Digital for Business - English Version
BtoB : Digital for Business - English VersionBtoB : Digital for Business - English Version
BtoB : Digital for Business - English Version
 
Let's Break Tradition: Virtual Reality in Public Relations
Let's Break Tradition: Virtual Reality in Public RelationsLet's Break Tradition: Virtual Reality in Public Relations
Let's Break Tradition: Virtual Reality in Public Relations
 
3rd Annual International UX Awards- June 2013
3rd Annual International UX Awards- June 20133rd Annual International UX Awards- June 2013
3rd Annual International UX Awards- June 2013
 
UI & UX DESIGN FOR MOBILE
UI & UX DESIGN FOR MOBILEUI & UX DESIGN FOR MOBILE
UI & UX DESIGN FOR MOBILE
 
Six Social-Digital Trends for 2013
Six Social-Digital Trends for 2013Six Social-Digital Trends for 2013
Six Social-Digital Trends for 2013
 
Why UI & UX Design Matters? For building digital and software products
Why UI & UX Design Matters? For building digital and software productsWhy UI & UX Design Matters? For building digital and software products
Why UI & UX Design Matters? For building digital and software products
 

Similar to 2018 UX & Web Design Trends

2013 ion responsive_design_landingpages
2013 ion responsive_design_landingpages2013 ion responsive_design_landingpages
2013 ion responsive_design_landingpagesChafik YAHOU
 
5 ux design trends you need to pay attention to in 2021
5 ux design trends you need to pay attention to in 20215 ux design trends you need to pay attention to in 2021
5 ux design trends you need to pay attention to in 2021Stefan Gerber
 
Responsive Design for Landing Pages
Responsive Design for Landing PagesResponsive Design for Landing Pages
Responsive Design for Landing PagesEvgeny Tsarkov
 
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile SolutionsDMI
 
A Forecast of 2016 Web Design Trends
A Forecast of 2016 Web Design TrendsA Forecast of 2016 Web Design Trends
A Forecast of 2016 Web Design Trendswebdesigntrends
 
Mobile ui trends present future – meaningful mobile typography
Mobile ui trends present future  – meaningful mobile typographyMobile ui trends present future  – meaningful mobile typography
Mobile ui trends present future – meaningful mobile typographyHalil Eren Çelik
 
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 ElementsLany Lyn Magdaraog
 
10 Usability & UX Guidelines
10 Usability & UX Guidelines10 Usability & UX Guidelines
10 Usability & UX GuidelinesShawn Calvert
 
Hallvarsson & Halvarsson - Webbdesigntrender 2012
Hallvarsson & Halvarsson - Webbdesigntrender 2012Hallvarsson & Halvarsson - Webbdesigntrender 2012
Hallvarsson & Halvarsson - Webbdesigntrender 2012Hallvarsson Halvarsson
 
interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016Halil Eren Çelik
 
Web designing & web development! BATRA COMPUTER CENTRE
Web designing &  web development! BATRA COMPUTER CENTREWeb designing &  web development! BATRA COMPUTER CENTRE
Web designing & web development! BATRA COMPUTER CENTREgroversimrans
 
Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Shah Muhammad Baig
 
How not having a Responsive Website can be Detrimental to your business?
How not having a Responsive Website can be Detrimental to your business?How not having a Responsive Website can be Detrimental to your business?
How not having a Responsive Website can be Detrimental to your business?Helios Solutions
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014Lewis Lin 🦊
 
Portfolio Karen Sátiro
Portfolio Karen SátiroPortfolio Karen Sátiro
Portfolio Karen SátiroKaren Sátiro
 
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014MoodLabs
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designInVision App
 
Dynamic Design (magazine/issue 1/fall 2015)
Dynamic Design (magazine/issue 1/fall 2015)Dynamic Design (magazine/issue 1/fall 2015)
Dynamic Design (magazine/issue 1/fall 2015)Henk Haaima
 

Similar to 2018 UX & Web Design Trends (20)

2013 ion responsive_design_landingpages
2013 ion responsive_design_landingpages2013 ion responsive_design_landingpages
2013 ion responsive_design_landingpages
 
5 ux design trends you need to pay attention to in 2021
5 ux design trends you need to pay attention to in 20215 ux design trends you need to pay attention to in 2021
5 ux design trends you need to pay attention to in 2021
 
Responsive Design for Landing Pages
Responsive Design for Landing PagesResponsive Design for Landing Pages
Responsive Design for Landing Pages
 
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
 
A Forecast of 2016 Web Design Trends
A Forecast of 2016 Web Design TrendsA Forecast of 2016 Web Design Trends
A Forecast of 2016 Web Design Trends
 
datenwerk Cookbook: webdesign trends 2014 (en)
datenwerk Cookbook: webdesign trends 2014 (en)datenwerk Cookbook: webdesign trends 2014 (en)
datenwerk Cookbook: webdesign trends 2014 (en)
 
Mobile ui trends present future – meaningful mobile typography
Mobile ui trends present future  – meaningful mobile typographyMobile ui trends present future  – meaningful mobile typography
Mobile ui trends present future – meaningful mobile typography
 
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
 
10 Usability & UX Guidelines
10 Usability & UX Guidelines10 Usability & UX Guidelines
10 Usability & UX Guidelines
 
Hallvarsson & Halvarsson - Webbdesigntrender 2012
Hallvarsson & Halvarsson - Webbdesigntrender 2012Hallvarsson & Halvarsson - Webbdesigntrender 2012
Hallvarsson & Halvarsson - Webbdesigntrender 2012
 
interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016
 
Web designing & web development! BATRA COMPUTER CENTRE
Web designing &  web development! BATRA COMPUTER CENTREWeb designing &  web development! BATRA COMPUTER CENTRE
Web designing & web development! BATRA COMPUTER CENTRE
 
Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014
 
How not having a Responsive Website can be Detrimental to your business?
How not having a Responsive Website can be Detrimental to your business?How not having a Responsive Website can be Detrimental to your business?
How not having a Responsive Website can be Detrimental to your business?
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014
 
Portfolio Karen Sátiro
Portfolio Karen SátiroPortfolio Karen Sátiro
Portfolio Karen Sátiro
 
10 Hottest Web-Design Trends | Keyideas Infotech
10 Hottest Web-Design Trends | Keyideas Infotech10 Hottest Web-Design Trends | Keyideas Infotech
10 Hottest Web-Design Trends | Keyideas Infotech
 
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX design
 
Dynamic Design (magazine/issue 1/fall 2015)
Dynamic Design (magazine/issue 1/fall 2015)Dynamic Design (magazine/issue 1/fall 2015)
Dynamic Design (magazine/issue 1/fall 2015)
 

More from Vanksen

Le digital au service des patients et des professionnels de santé
Le digital au service des patients et des professionnels de santéLe digital au service des patients et des professionnels de santé
Le digital au service des patients et des professionnels de santéVanksen
 
Empowering patients and health professionals through digital content
Empowering patients and health professionals through digital contentEmpowering patients and health professionals through digital content
Empowering patients and health professionals through digital contentVanksen
 
Socio-digital evolutions and micro-communities: what business opportunities d...
Socio-digital evolutions and micro-communities: what business opportunities d...Socio-digital evolutions and micro-communities: what business opportunities d...
Socio-digital evolutions and micro-communities: what business opportunities d...Vanksen
 
Content drivers for global brands: new innovative paths for your branded cont...
Content drivers for global brands: new innovative paths for your branded cont...Content drivers for global brands: new innovative paths for your branded cont...
Content drivers for global brands: new innovative paths for your branded cont...Vanksen
 
Business on TikTok: After the Hype, the New Norm?
Business on TikTok: After the Hype, the New Norm?Business on TikTok: After the Hype, the New Norm?
Business on TikTok: After the Hype, the New Norm?Vanksen
 
Business sur TikTok: Après la Hype, le Nouveau Standard ?
Business sur TikTok: Après la Hype, le Nouveau Standard ?Business sur TikTok: Après la Hype, le Nouveau Standard ?
Business sur TikTok: Après la Hype, le Nouveau Standard ?Vanksen
 
Digital Business Acquisition : comment performer ?
Digital Business Acquisition : comment performer ?Digital Business Acquisition : comment performer ?
Digital Business Acquisition : comment performer ?Vanksen
 
B2B & Growth Hacking: drawing from startups for online lead generation
B2B & Growth Hacking: drawing from startups for online lead generationB2B & Growth Hacking: drawing from startups for online lead generation
B2B & Growth Hacking: drawing from startups for online lead generationVanksen
 
B2B & Growth Hacking: s'inspirer des startups pour générer des leads
B2B & Growth Hacking: s'inspirer des startups pour générer des leadsB2B & Growth Hacking: s'inspirer des startups pour générer des leads
B2B & Growth Hacking: s'inspirer des startups pour générer des leadsVanksen
 
Employee Advocacy : Comment faire de vos employés vos meilleurs ambassadeurs ?
Employee Advocacy : Comment faire de vos employés vos meilleurs ambassadeurs ?Employee Advocacy : Comment faire de vos employés vos meilleurs ambassadeurs ?
Employee Advocacy : Comment faire de vos employés vos meilleurs ambassadeurs ?Vanksen
 
Employee Advocacy : Turn your employees into better brand ambassadors
Employee Advocacy : Turn your employees into better brand ambassadorsEmployee Advocacy : Turn your employees into better brand ambassadors
Employee Advocacy : Turn your employees into better brand ambassadorsVanksen
 
Succeeding Internationally with your Social Media strategy
Succeeding Internationally with your Social Media strategySucceeding Internationally with your Social Media strategy
Succeeding Internationally with your Social Media strategyVanksen
 
Développer sa stratégie Social Media à l'international
Développer sa stratégie Social Media à l'internationalDévelopper sa stratégie Social Media à l'international
Développer sa stratégie Social Media à l'internationalVanksen
 
Automobile & Digital : des enjeux aux nouveaux usages, de la visibilité à la ...
Automobile & Digital : des enjeux aux nouveaux usages, de la visibilité à la ...Automobile & Digital : des enjeux aux nouveaux usages, de la visibilité à la ...
Automobile & Digital : des enjeux aux nouveaux usages, de la visibilité à la ...Vanksen
 
La digitalisation de l'assurance vie au Luxembourg
La digitalisation de l'assurance vie au LuxembourgLa digitalisation de l'assurance vie au Luxembourg
La digitalisation de l'assurance vie au LuxembourgVanksen
 
Drive-to-store : quelle stratégie pour performer ?
Drive-to-store : quelle stratégie pour performer ?Drive-to-store : quelle stratégie pour performer ?
Drive-to-store : quelle stratégie pour performer ?Vanksen
 
Polémique sociétale & gestion de crise par les marques
Polémique sociétale & gestion de crise par les marquesPolémique sociétale & gestion de crise par les marques
Polémique sociétale & gestion de crise par les marquesVanksen
 
The digitalisation of the Annual Report
The digitalisation of the Annual ReportThe digitalisation of the Annual Report
The digitalisation of the Annual ReportVanksen
 
La digitalisation du rapport annuel
La digitalisation du rapport annuelLa digitalisation du rapport annuel
La digitalisation du rapport annuelVanksen
 
Etude best practices social média aux usa vanksen
Etude best practices social média aux usa   vanksenEtude best practices social média aux usa   vanksen
Etude best practices social média aux usa vanksenVanksen
 

More from Vanksen (20)

Le digital au service des patients et des professionnels de santé
Le digital au service des patients et des professionnels de santéLe digital au service des patients et des professionnels de santé
Le digital au service des patients et des professionnels de santé
 
Empowering patients and health professionals through digital content
Empowering patients and health professionals through digital contentEmpowering patients and health professionals through digital content
Empowering patients and health professionals through digital content
 
Socio-digital evolutions and micro-communities: what business opportunities d...
Socio-digital evolutions and micro-communities: what business opportunities d...Socio-digital evolutions and micro-communities: what business opportunities d...
Socio-digital evolutions and micro-communities: what business opportunities d...
 
Content drivers for global brands: new innovative paths for your branded cont...
Content drivers for global brands: new innovative paths for your branded cont...Content drivers for global brands: new innovative paths for your branded cont...
Content drivers for global brands: new innovative paths for your branded cont...
 
Business on TikTok: After the Hype, the New Norm?
Business on TikTok: After the Hype, the New Norm?Business on TikTok: After the Hype, the New Norm?
Business on TikTok: After the Hype, the New Norm?
 
Business sur TikTok: Après la Hype, le Nouveau Standard ?
Business sur TikTok: Après la Hype, le Nouveau Standard ?Business sur TikTok: Après la Hype, le Nouveau Standard ?
Business sur TikTok: Après la Hype, le Nouveau Standard ?
 
Digital Business Acquisition : comment performer ?
Digital Business Acquisition : comment performer ?Digital Business Acquisition : comment performer ?
Digital Business Acquisition : comment performer ?
 
B2B & Growth Hacking: drawing from startups for online lead generation
B2B & Growth Hacking: drawing from startups for online lead generationB2B & Growth Hacking: drawing from startups for online lead generation
B2B & Growth Hacking: drawing from startups for online lead generation
 
B2B & Growth Hacking: s'inspirer des startups pour générer des leads
B2B & Growth Hacking: s'inspirer des startups pour générer des leadsB2B & Growth Hacking: s'inspirer des startups pour générer des leads
B2B & Growth Hacking: s'inspirer des startups pour générer des leads
 
Employee Advocacy : Comment faire de vos employés vos meilleurs ambassadeurs ?
Employee Advocacy : Comment faire de vos employés vos meilleurs ambassadeurs ?Employee Advocacy : Comment faire de vos employés vos meilleurs ambassadeurs ?
Employee Advocacy : Comment faire de vos employés vos meilleurs ambassadeurs ?
 
Employee Advocacy : Turn your employees into better brand ambassadors
Employee Advocacy : Turn your employees into better brand ambassadorsEmployee Advocacy : Turn your employees into better brand ambassadors
Employee Advocacy : Turn your employees into better brand ambassadors
 
Succeeding Internationally with your Social Media strategy
Succeeding Internationally with your Social Media strategySucceeding Internationally with your Social Media strategy
Succeeding Internationally with your Social Media strategy
 
Développer sa stratégie Social Media à l'international
Développer sa stratégie Social Media à l'internationalDévelopper sa stratégie Social Media à l'international
Développer sa stratégie Social Media à l'international
 
Automobile & Digital : des enjeux aux nouveaux usages, de la visibilité à la ...
Automobile & Digital : des enjeux aux nouveaux usages, de la visibilité à la ...Automobile & Digital : des enjeux aux nouveaux usages, de la visibilité à la ...
Automobile & Digital : des enjeux aux nouveaux usages, de la visibilité à la ...
 
La digitalisation de l'assurance vie au Luxembourg
La digitalisation de l'assurance vie au LuxembourgLa digitalisation de l'assurance vie au Luxembourg
La digitalisation de l'assurance vie au Luxembourg
 
Drive-to-store : quelle stratégie pour performer ?
Drive-to-store : quelle stratégie pour performer ?Drive-to-store : quelle stratégie pour performer ?
Drive-to-store : quelle stratégie pour performer ?
 
Polémique sociétale & gestion de crise par les marques
Polémique sociétale & gestion de crise par les marquesPolémique sociétale & gestion de crise par les marques
Polémique sociétale & gestion de crise par les marques
 
The digitalisation of the Annual Report
The digitalisation of the Annual ReportThe digitalisation of the Annual Report
The digitalisation of the Annual Report
 
La digitalisation du rapport annuel
La digitalisation du rapport annuelLa digitalisation du rapport annuel
La digitalisation du rapport annuel
 
Etude best practices social média aux usa vanksen
Etude best practices social média aux usa   vanksenEtude best practices social média aux usa   vanksen
Etude best practices social média aux usa vanksen
 

Recently uploaded

SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predieusebiomeyer
 
TRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxTRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxAndrieCagasanAkio
 
ETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxNIMMANAGANTI RAMAKRISHNA
 
Cybersecurity Threats and Cybersecurity Best Practices
Cybersecurity Threats and Cybersecurity Best PracticesCybersecurity Threats and Cybersecurity Best Practices
Cybersecurity Threats and Cybersecurity Best PracticesLumiverse Solutions Pvt Ltd
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书rnrncn29
 
Company Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxCompany Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxMario
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxmibuzondetrabajo
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书rnrncn29
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119APNIC
 

Recently uploaded (9)

SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predi
 
TRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxTRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptx
 
ETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptx
 
Cybersecurity Threats and Cybersecurity Best Practices
Cybersecurity Threats and Cybersecurity Best PracticesCybersecurity Threats and Cybersecurity Best Practices
Cybersecurity Threats and Cybersecurity Best Practices
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
 
Company Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxCompany Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptx
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptx
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119
 

2018 UX & Web Design Trends

  • 2. We split these different trends into 3 major pillars.
  • 5. 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. 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. 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. 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. 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
  • 10. 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. 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. 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. 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. 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. 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. 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
  • 17. 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. 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. 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. 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. 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
  • 23. 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. 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. 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. 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.
  • 27. 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.
  • 28. 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. 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. 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. 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).
  • 32. 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. 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. 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. 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
  • 36. 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. 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. 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. 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
  • 40. 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
  • 42. 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. 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. 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. 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
  • 46. 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. 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. 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. 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. 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
  • 51. 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. 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. 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
  • 54. 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
  • 59. 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.
  • 61. 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
  • 63. 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
  • 65. 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/
  • 66. 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
  • 67. 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)
  • 68. 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
  • 69. 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
  • 70. 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
  • 71. 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

Editor's Notes

  1. https://unsplash.com/
  2. https://unsplash.com/
  3. https://unsplash.com/
  4. https://unsplash.com/
  5. http://www.tripwiremagazine.com/wp-content/uploads/2011/07/AnimatedPhotos28_thumb.gif (image)
  6. http://blog.send-up.net/le-cinemagraphe-nouveau-souffle-emailing/ « D’après différentes études, incorporer un contenu animé dans un emailing augmente d’environ 25% le taux de clic comparé à un email non-animé. » http://www.tripwiremagazine.com/wp-content/uploads/2011/07/5659126388_3f56c8807f_o_thumb.gif (image)
  7. http://www.tripwiremagazine.com/wp-content/uploads/2011/07/5698564979_1686a328ef_o_thumb.gif (image)
  8. https://hubinstitute.com/2017/05/video-marketing-les-chiffres-de-2017/ (chiffres) http://www.tripwiremagazine.com/wp-content/uploads/2011/07/5727263344_7cbca6d91f_o_thumb.gif (image)
  9. https://static1.squarespace.com/static/51c748abe4b0c275d0aa86bf/t/598ddcdccd0f68078829f956/1502469370608/?format=500w
  10. https://graphiste.com/blog/tendances-web-design-2018 paragraphe 9 : Le Flat design a été très (trop ?) présent ces dernières années. Il flattait nos envies de simplicité, avec une iconographie simple et des couleurs uniformes. Le Material Design, initié par Google (hé oui !) ne s’écarte pas trop du Flat Design mais il y ajoute de la perspective, des ombres, des formes géométriques et même du mouvement. Il y a de la vie dans le Material Design.
  11. https://uxplanet.org/the-secret-of-great-gradient-2f2c49ef3968
  12. http://www.color-blindness.com/coblis-color-blindness-simulator/ Exemples de simulateurs de vision: https://webaim.org/resources/contrastchecker/ http://colorsafe.co/ https://chrome.google.com/webstore/detail/see/dkihcccbkkakkbpikjmpnbamkgbjfdcn https://chrome.google.com/webstore/detail/i-want-to-see-like-the-co/jebeedfnielkcjlcokhiobodkjjpbjia?hl=en-GB http://www.checkmycolours.com/
  13. **https://www.nngroup.com/articles/glanceable-fonts/
  14. Visuel : 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/
  15. Visuel : https://yonacare.com/
  16. 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
  17. http://www.aproposdecriture.com/bien-choisir-sa-police-decriture http://larecetteduweb.fr/conseils-pour-entrepreneurs/cherchez-police-caractere-lisible-voici-les-tests-menes/  POUR LES CHIFFRES https://www.usertesting.com/blog/2014/08/06/choosing-the-right-font-a-guide-to-typography-and-user-experience https://www.awwwards.com/inspiration/5964b901e138234ab6071601 (image)
  18. https://www.awwwards.com/inspiration/5954cb1be1382358110b799f
  19. 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
  20. https://unsplash.com/
  21. https://unsplash.com/
  22. http://www.jaunedechrome.com/en/collections/
  23. https://www.google.lu/search?q=Full+screen+search+overlay&rlz=1C1GGRV_enLU754LU754&tbm=isch&source=iu&ictx=1&fir=sve8uUXPUnwY_M%253A%252C_23DTJQTfADVMM%252C_&usg=__uzbEvbk9lIoI7_8bR2keQABIUfQ%3D&sa=X&ved=0ahUKEwjlqOeRkMvYAhUFU1AKHYP_B0UQ9QEIRjAH#imgrc=HM2UPq9wYxpFmM:
  24. https://www.google.lu/search?q=Full+screen+search+overlay&rlz=1C1GGRV_enLU754LU754&tbm=isch&source=iu&ictx=1&fir=sve8uUXPUnwY_M%253A%252C_23DTJQTfADVMM%252C_&usg=__uzbEvbk9lIoI7_8bR2keQABIUfQ%3D&sa=X&ved=0ahUKEwjlqOeRkMvYAhUFU1AKHYP_B0UQ9QEIRjAH#imgrc=sve8uUXPUnwY_M:
  25. https://www.jroehm.com/2014/01/ui-pattern-natural-language-form/
  26. https://tympanus.net/Tutorials/NaturalLanguageForm/
  27. https://salleprivee.ca/
  28. https://www.jroehm.com/2014/01/ui-pattern-natural-language-form/ (pour les deux images)
  29. https://cdn-images-1.medium.com/max/800/1*ItT2vE8LykICjyxGcyzprw.gif
  30. https://cdn-images-1.medium.com/max/800/1*B3FJVkgD5g1griyV1Y0uGA.gif
  31. https://cdn-images-1.medium.com/max/800/1*mnLzkXGoZBgK4FnXQvT0eg.gif
  32. https://www.webdesignerdepot.com/2015/07/7-secrets-for-enhancing-ux-with-micro-interactions/
  33. http://circulardev.com/nike/cortez/#
  34. https://donttrack.us
  35. https://promises.kommigraphics.com/
  36. https://www.hongkiat.com/blog/svg-animations/
  37. https://unsplash.com/
  38. https://unsplash.com/
  39. Architecture de l’information
  40. Visuel : dropbox.com
  41. Visuel : Drop Box UpGrade
  42. Visuel : https://www.intercom.com/starter-kits/help-center
  43. https://www.enginethemes.com/ https://queenswharfbrisbane.com.au/about/
  44. https://digitools.io/MagDigital/qu-est-ce-qu-un-bot/
  45. https://www.producthunt.com/upcoming/ship
  46. https://landbot.io/ https://www.typeform.com/blog/human-experience/cui/ https://medium.com/k2-product-design
  47. https://unsplash.com/photos/5fNmWej4tAA
  48. https://unsplash.com/
  49. https://unsplash.com/
  50. https://unsplash.com/
  51. https://unsplash.com/
  52. https://unsplash.com/photos/L6g30JaQ5Tc