Caouinche

n.f : tête.

étym : bourguignon

syn : binette, bourrichon, caboche, ciboulot, caillou, trogne, tronche…

Le design

Une évolution constante

Dans le web comme dans tout le monde du design, tout n’est que mode, qui perdure plus ou moins longtemps…

Ces modes graphiques habitent et cohabitent les unes avec les autres, certaines prennent le dessus à un instant T, d’autres s’estompent, vivotent et disparaissent.

hulki-okan-tabak-x3kQTL7yw30-unsplash

Le skeuomorphisme

L’art de mettre effet et matière en avant

XXX

web
Animation
source

XXX.

web
Interface IOS, l'une en skeuomorphisme, l'autre en flat
source

web
Webdesign en skeuomorphisme
source

Le flat design

Plat plat plat

web
Interface Metro de Windows 8
source
web
Avant après de logo après leur passage en flat
source

Stylisation des éléments, de manière très plate. Pas de relief, pas d’effet, juste l’essentiel.

Cette mode (qui perdure) a aussi touché et touche encore les grandes marques qui mettent au gout du jour leurs logotypes. Beaucoup de marques ont revu leur image de sorte à « l’aplatir ».

web
Avant après de logo après leur passage en flat
source
web
Web design flat
source

Associé au design de sites internet le flat design s’axe dans une démarche de minimalisme.

Le long shadow

Du flat avec de l’ombre

XXX

web
XXX
source

Ajout d’un ombrage au niveau de la stylisation des éléments pour casser cette platitude. On n’est pas sur un style à proprement parler, mais d’une évolution de tendance, car la base reste le flat, base à laquelle on vient greffer cette ombre.

web
XXX
source
Long Shadow: Fade GIF
source

Le material design

Au service de l’UX

web
Loading status Material design
je n’ai plus la source
06-Exemple-Movie-Booking-Elastic-Experience-Material-design.gif
Exemple-Movie-Booking-Elastic-Experience-Material-design
Je n’ai plus la source

Tendance graphique mise en place par Google visant à mettre en avant l’expérience utilisateur (UX) alors que pour le flat par exemple on est sur un mix UI UX (interface utilisateur et expérience utilisateur). Mise en place de beaucoup d’anims subtiles visant à dynamiser un design simple.

fully-angular-material-themes.jpg
Fully angular material themes
Plus la source
Material-Dashboard-Angular-768x426
Material-Dashboard-Angularflat
source
05-Exemple-Swiss-Watch-Material-design.gif
05-Exemple-Swiss-Watch-Material-design.gif
Plus la source

Associé au design de sites internet le flat design s’axe dans une démarche de minimalisme.

Le neumorphism

Néo skeuomorphisme

Néo skeuomorphisme ou neumorphism Tout comme le skeu, le souhait est de mettre en avant le réel, mais ici un réel plus moderne. Adieu les images qui surcharge le tout et bonjour le réel minimal. Le neuo est donc un mix de skeuo et de flat : On est sur du minimal avec de la matière, du volume.

neumorphism_exemple.jpg
neumorphism exemple
source
image_processing20200211-22369-44pbms.gif
App concept
source
98e08b95555893.5e9de4a39e06e.gif
App concept
source

Le glassmorphism

Floutage

image_processing20201219-7829-1w4jcmv.gif
glassmorphism card
source

Le glassmorphism En quelques mots le glassmorphism c’est : – Transparence (effet de verre avec un flou en background) – Utilisation de plusieurs couleurs avec des objets flottants – Contour fin et net – Couleurs vives – Des objets flottants Pour en savoir plus sur la Glassmorphism c'est iciet

c24781b01d3533c473ca66ece2584887.png
glassmorphism
source
ed504755d2f4350dec896dae113238d1.webp
Credit Card Landing Page Dark
source

XXX

Le brutalism ou neo brutalism

un courant issu de l’architecture

À la base, le brutalisme est un courant architectural né dans la fin des années 1940 dont l’un des exemples serait la Cité Radieuse de Le Corbusier à Marseille (ou celle de Rezé). Au premier abord, et lors de son apparition dans le webdesign, le brutalisme pouvait donner une impression de retour au non-gout, de design fait à la va-vite voir même sans design, n’étant qu’une mise en place de la construction, présente, sans fioriture.

Puis ce courant à évolué, la construction reste la base du Brutalisme, mais le non-gout à laisser place à des envies de designer, ce qui fait qu’aujourd’hui on peut avoir des réalisations visuelles qui sont très intéressantes, et qui obligent, d’un point de vue technique à utiliser d’autres unités de mesure en web (vh et vw) et à jouer avec d’autres propriétés et valeurs en CSS (les grid et les flex qui sont aussi utilisables pour chaque projet web). Ces webdesign peuvent donner une impression de retour aux sources du webdesign, mais agrémenter de jeux de construction typo et photographies, accompagnés de formes graphiques simples. En quelques mots le brutalisme c’est la répétition de certains éléments l’absence d’ornements le caractère « brut » du béton ou de la brique Pour en savoir plus sur la Glassmorphism c'est ici

article-img01.jpg
brutalism
source
0_jBdahdNEfcreVAoh.gif
brutalism
source
web
brutalism
source
brutalism
source

Le néo memphis

géométrie, couleur et répétition

Encore un courant issu à la base de l’architecture, souhaitant ici être en confrontation avec le Bauhaus ou tout était strict, droit (et gris). Le Memphis design lui se voulait coloré, libre et géométrique. Pour en savoir plus sur le néo memphis c’est ici

803f3cca4df51c4e6be2a74e4df88470 Logo d'MTV
source


90-s-pop-memphis-design-elements-seamless-pattern-free-vector Pattern pop de motifs des années 90 (1990)
source
Memphis Aesthetic Illustrated Desktop Site
source
affiches-2
Confetti
source