Design : trends graphiques (et tendances UI)

Skeuomorphisme

Le skeuomorphisme, en design digital, consiste à imiter l’apparence d’un objet réel lors de la conception d’un objet virtuel. Cette technique permet à l’utilisateur de comprendre l’action à effectuer face à l’UI. Outre cet objectif d’affordance, il rend l’interface homme machine rassurante et ludique.

https://blog-ux.com/le-skeuomorphisme/

Usabilis

Minimalisme

The purpose of an effective minimally designed web page is to layout the content in such a way that no single element distracts attention from the visual hierarchy. And the key to achieving minimal distraction is to initially have a well-structured backbone focused on the comparative space relation between the fundamental elements of the web page

https://lagentx.com/fr/live/les-tendances-ui-design-2022

https://speckyboy.com/modern-minimal-web-design/

Bauhaus Style

Soit modelé sur l’esthétique des années 1920, soit grands principes du Bauhaus.
On retrouve formes géometriques, couleurs simples
The Bauhaus UI style revolves around geometric graphics: semicircles, circles, rectangles, triangles, etc., innovative use of typography and non-distracting non-functional details. This design style relies on the design elements themselves: line, shape, color, and it features abstract shapes and balanced forms.

5 Bauhaus Principles in Web Design

Form follows function: This is the primary concept that shapes Bauhaus ideology. Bauhaus designs use geometric shapes and elegant layouts, but always keep the focus on the elements. In the same way, when designing a website, you have to first think about the function of each element for users. It should always take precedence over visual impact, but that does not mean that both can’t be achieved.
Unify disciplines: Walter Gropius’s vision was to unify all disciplines and abandon the distinction between artists and craftsmen. In web design, this makes sense, because there are a wide variety of digital formats that you can combine to bring your website to life.
Minimalism: The Bauhaus ideology opts for straight and geometric lines. Bauhaus artists sought a clean design, with pure forms and without unnecessary ornamental elements. This philosophy is very useful for designing clear and functional web pages and applications.
Emphasis on new materials and techniques: Bauhaus artists were constantly looking for new materials and techniques to apply to their designs. Today, the evolution of technology has provided new resources to apply to web design, so you can follow the spirit of Bauhaus ideology while also looking for new ways to elevate it in your designs.
Constant evolution: A key aspect of the Bauhaus ideology is to constantly look for ways to evolve and innovate. Since we work in an environment where technology and user preferences are constantly changing, web design has to embrace this principle and accept constant change as a way to progress.

https://jack01671.medium.com/what-can-ui-designers-learn-from-the-bauhaus-459fb7a7cf2d

https://uxplanet.org/learning-in-the-bauhaus-school-five-lessons-for-todays-designers-and-five-ways-the-web-still-is-64f2985ce811

https://99designs.fr/blog/histoire-design-genres-mouvements/histoire-bauhaus/

https://dribbble.com/tags/bauhaus_website

https://www.behance.net/search?tracking_source=typeahead_search_direct&search=bauhaus%20

Dark Mode

Le Dark Mode ou « mode sombre » vous propose une interface plus sombre de votre application.

A quoi ça sert ?

à réduire la fatigue des yeux
à réduire la consommation d’énergie et donc à économiser de la batterie. Techniquement, les pixels sombres consomment moins d’énergie. (différence led/oled -> led s’allume pour le noir, oled, non)
et à consommer moins d’énergie, on fait un geste pour la planète
le noir c’est classe
ergonomiquement parlant, certaines couleurs se voient mieux sur un fond noir et donc amélioration de la lisibilité

https://www.aum-world.com/blogs/aum-world-actualites/le-dark-mode-bien-plus-qu-une-simple-tendance-design

https://www.leparisien.fr/guide-shopping/le-dark-mode-la-nouvelle-tendance-des-sites-systemes-et-applications-28-10-2019-8181882.php

Pour elementor
(note: test aout2022 sur wptest0103 )

BIG AND/OR BOLD TYPO

In this design style, typography transcends its traditional role and becomes the center of the design. When typography is the main element of a design, rules change; spinning, twisting, extravagant sizes, division of words in many lines and poor readability are all fair game.

https://dribbble.com/tags/large_typography

TEAL AND ORANGE

contraste créé avec deux couleurs : orange et bleu
Très utilisé

exemples

https://petapixel.com/2017/02/23/orange-teal-look-popular-hollywood/

Neumorphisme

In neumorphic design, elements seem to extrude from the background. Neumorphism combines the minimalism of flat design with the realism of skeuomorphism. However, it doesn’t focus on imitating objects from real life but rather on creating objects that could work in real life. A neumorphic UI interface looks like you can physically interact with it; you can press buttons and move sliders.

https://florianpioli.fr/2020/04/10/quest-ce-que-la-tendance-du-neumorphisme/

https://graphiste.com/blog/neumorphism-fin-du-flat-design

https://fr.wikipedia.org/wiki/N%C3%A9omorphisme_(design)

templates deposit photos

templates envato

Glassmorphisme

https://graphiste.com/blog/utiliser-glassmorphism-tendances-creations

C’est quoi le Glassmorphism ? La nouvelle tendance UX/UI

Animations/Motion Design

https://webflow.com/made-in-webflow/website/Alex-Dram-The-Portfolio

Illustration

Très perso, ou registre Comics, pop-art ou autre…

Black and White/ Monochrome/Duochrome

https://dribbble.com/tags/duochrome

RetroFuturisme/Retro

https://colorlib.com/wp/retro-websites/

https://www.webdesign-inspiration.com/fr/webdesign/style/retro

FLAT

Le flat design (design plat en français), est un design graphique axé sur le minimalisme. Par opposition à un design réaliste et détaillé, le flat design élimine les éléments jugés décoratifs ou superflus (détails, ombres, effet 3D…). L’interface en flat design est donc centrée sur le contenu, la fonctionnalité. En fait, le design plat fait appel à l’imaginaire de l’utilisateur. Au lieu de lui expliquer l’utilité d’un élément de l’interface, elle est signifiée de la manière la plus simple possible. On souvent rapproché la “philosophie du design plat de la célèbre phrase de l’architecte Ludwig Mies van der Rohe : « Less is More. »

Flat design : boosté par la gestion de l’espace sur les appareils mobiles. Un logo simple en flat passe mieux en petit en haut à gauche…

usabilis

Petite introduction au flat design (et autres platitudes) from i-breed et associés

MATERIAL DESIGN

Le Material design est un langage visuel et interactif créé par Google. Mais c’est aussi un guide pour concevoir une interface graphique (Design system). Ce design est « matériel » car il s’inspire d’objets réels, le papier et l’encre ce en quoi, il se distingue du Flat Design.
Usabilis

L’appellation « Material Design » correspond à un ensemble de règles de design proposées par Google.
il s’agit d’un design plat… avec de l’épaisseur et du relief.

Une métaphore du papier et de l’encre à partir d’un matériel digital.
Un design audacieux et graphique.
La création de mouvements pour améliorer l’affordance et l’UX. Les actions de l’utilisateur entraînent des micro-interactions significatives.

https://www.designware.io/blog/material-design-3

https://fr.wikipedia.org/wiki/Material_Design

https://www.gowtham.design/blog/material-vs-flat

https://material.io/design ->Guideline Google à propos du design.

https://www.mockplus.com/blog/post/material-design-website-examples

Brutalisme

À première vue, on a tendance à dire que de nombreux sites brutalistes aujourd’hui reprennent l’apparence ou s’inspirent des sites des années 90 : graphismes rudimentaires, des polices de caractère basiques, des couleurs flashy, l’intégration d’éléments en 3D, etc. Ils sont assez déstabilisants voire incommodants tant on est habitués aux bonnes pratiques de notre époque. Un affranchissement total du souci esthétique.
elementor

jolipixel

https://brutalistwebsites.com/