More Related Content

Similar to 2018 UX & Web Design Trends(20)


More from Vanksen(20)

Recently uploaded(20)


2018 UX & Web Design Trends

  2. We split these different trends into 3 major pillars.
  3. Aesthetic Interaction Architecture
  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
  57. Creation UX SEO
  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 (image) Slide 7 Video example Slide 8 Trend #1 – Cinemagraph – SEO expert eye (image) (chiffres) Slide 9 Trend #1 – Cinemagraph – Creative expert eye (image) Slide 10 Trend #1 – Cinemagraph – UX expert eye (chiffres) Slide 11 Vigilance points – Cinemagraph Slide 13 Video example Slide 14 Video example Slide 15 Video example Slide 16 Trend #2 – Gradient – Creative expert eye Slide 17 Video example
  66. OUR SOURCES Slide number Slide title Sources Slide 19 Video example - Masta Typo Slide 20 Trend #3 – Masta Typo – UX expert eye Slide 21 Trend #3 – Masta Typo – Creative expert eye Slide 22 Vigilance points – Masta Typo HTTPS://WWW.AWWWARDS.COM/SITES/LIG-WORKS Slide 24 Video example – Serif Slide 25 Video example – Serif Slide 26 Video example – Serif Slide 27 Trend #4 – Sérif – UX expert eye (image) lisible-voici-les-tests-menes/ (chiffres) Slide 28 Trend #4 – Sérif – Creative expert eye
  67. OUR SOURCES Slide number Slide title Sources Slide 29 Vigilance points – Serif Slide 33 Video example – Full Screen Search Slide 34 Trende #5 – Full Screen Search – UX expert eye Slide 35 - 37 Full Screen Search HTTPS://WWW.AWWWARDS.COM/SITES/LIG-WORKS Slide 38 Trend #6 – NFL Slide 39 Video example – Sérif Slide 40 Trend #6 – NFL – UX expert eye Slide 41 Trend #6 – NFL – SEO expert eye Slide 42 Vigilance points – NFL (pour les deux images)
  68. OUR SOURCES Slide number Slide title Sources Slide 43 Trend #7 – Micro Interactions Slide 44 Video example – Micro Interactions*2gzBT_k8M-SrIZ1maT7njQ.gif Slide 45 Video example – Micro Interactions b37446bf6306 Slide 46 Trend #7 – Micro Interactions – UX expert eye b37446bf6306 Slide 47 Trend #7 – Micro Interactions – Creative expert eye b37446bf6306 Slide 48 Vigilance points – Micro Interactions micro-interactions/ Slide 49 Trend #8 – SVG Slide 50 Video example – SVG Slide 51 Video example – SVG Slide 52 Trend #8 – SVG – Creative expert eye
  69. OUR SOURCES Slide number Slide title Sources Slide 53 Tendance #8 – SVG –SEO & UX expert eyes Slide 54 Vigilance points – SVG Slide 58 Video example – Asymmetric Slide 59 Trend #9 – Asymmetric – Creative expert eye Slide 60 Trend #9 – Asymmetric – L’œil de l’UX Slide 63 Video example – Split Screen Slide 64 Video example – Split Screen Slide 65 Trend #10 – Split Screen – Creative expert eye Slide 66 Trend #10 – Split Screen – L’œil du SEO Slide 67 Trend #10 – Split Screen – L’œil de l’UX
  70. OUR SOURCES Slide number Slide title Sources Slide 68 Vigilance points – Split Screen Slide 69 Trend #11 – Bot Page Slide 70 Video example – Bot Page Slide 71 Trend #11 – Bot Page – UX expert eye Slide 72 Vigilance points – Bot Page
  71. THANK YOU for your attention, feel free to contact us ! Jérémy Coxet ASSOCIATE DIRECTOR Mail : Tél. : +352 691 501 411

Editor's Notes

  5. (image)
  6. « 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é. » (image)
  7. (image)
  8. (chiffres) (image)
  10. 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.
  12. Exemples de simulateurs de vision:
  13. **
  14. Visuel :
  15. Visuel :
  17.  POUR LES CHIFFRES (image)
  28. (pour les deux images)
  39. Architecture de l’information
  40. Visuel :
  41. Visuel : Drop Box UpGrade
  42. Visuel :