Conception matérielle: un aperçu de la conception Web d'aujourd'hui

Cela fait presque deux ans que Google a développé et annoncé lors de la conférence Google I / O le Material design en tant que règlement de conception qui serait mis en œuvre et que, même s'il était initialement axé sur la reproduction de contenu dans le système d'exploitation Android, il était destiné à devenir une tendance sur le Web et sur toute plate-forme, ce que nous pouvons confirmer aujourd'hui. Bien que nous l'ayons mentionné à l'occasion, la vérité est que nous n'avons jamais cessé de voir ce codage en profondeur, nous allons donc aujourd'hui revoir ses principes et ses caractéristiques les plus caractéristiques.

Quelles sont les caractéristiques déterminantes de la conception de matériaux? Qu'est-ce que cela a à voir avec le mouvement Flat Design?

Que dire de cette tendance dans la conception Web?

Son nom vient de son sens le plus pratique, la matière ou les matériaux doivent être organisés et structurés le plus efficacement possible et vous vous concentrerez dessus. Ce mouvement recherche avant tout la flexibilité, l'ergonomie et la possibilité de plier et de simplifier la construction d'un site internet. Mais non seulement la dimension spatiale occupera une place importante, mais aussi celle du temps, puisque désormais les éléments occuperont certaines positions à certains moments, c'est-à-dire que le dynamisme sera également un facteur clé. De plus, ces facteurs seront inévitablement guidés par l'intellect et la logique, ce qui finit par conduire à une recherche de réalisme et de représentation spatiale de la matière physique, en fait elle prend en compte les lois de la physique et avec elle les éléments (images, boutons, panneaux ...) ne peuvent pas se croiser car ils ont un poids et une densité visuelle plus importants, ils vont plutôt se superposer.

Ordre, clarté, lisibilité

Tous ces principes découlent bien sûr de la manière dont les composants graphiques sont gérés et distribués, y compris la typographie, qui sera avant tout une solution claire et lisible, la structure textuelle sera conventionnelle et fluide, la hiérarchie visuelle motivée par l'utilisation de plus ou des tons moins forts générant des contrastes qui seront également nuancés par la taille et l'ordre.

Éclairage et réalisme

La logique se manifeste avant tout dans l'utilisation des effets d'éclairage et la gestion à la fois des lumières et des ombres. L'éclairage est un excellent indicateur de proximité, de pertinence et de situation, il deviendra donc un outil fondamental pour influencer cette hiérarchie dont nous parlions. Désormais, les boutons, les images et tous les éléments auront des ombres qui indiqueront le degré de proximité et nous aideront à nous positionner sur la scène web.

Le mouvement est l'outil le plus efficace pour capter l'attention et guider le spectateur

Son langage sera évident, graphique et éclairant aux yeux de l'utilisateur. Lors du choix d'une option ou d'un outil, il va nous approcher, en élargissant ses dimensions et vice versa lorsque nous arrêterons de l'utiliser. De plus, un article changera de couleur ou clignotera s'il doit absolument attirer notre attention.

Rythme, ordre, langage

N'oublions pas qu'au fond nous parlons sur un mode de discours. Nous parcourons les ressources que nous offre la conception web et donc tous les paramètres technico-expressifs ont un sens: De l'ordre d'apparition, par exemple d'abord les images puis les boutons flottants, à la vitesse à laquelle ils apparaissent, dans quelle direction ils le font et à quelle fin ils se déplacent. Tout cela est important car non seulement l'utilisateur indique la provenance des informations, mais aussi le trajet est facilité, les éléments sont agencés de manière à rendre le processus de lecture intuitif, facile et agréable. Sans aucun doute, l'animation et le dynamisme sont un pilier de base.

Codage illimité

Tous ces principes ou normes que nous examinons sont conçus et développés pour être mis en œuvre sur n'importe quel support et plateforme, quelle que soit sa nature et la taille de l'écran qu'il présente. Depuis les téléphones mobiles, les tablettes ou les ordinateurs. Tous les supports et destinations possibles soutiennent ce langage visuel et en fait sa transversalité et sa compatibilité sont l'un de ses ingrédients essentiels.

La conception plate n'est pas la même que la conception matérielle

Bien qu'ils partagent de nombreux points communs, comme l'engagement pour le minimalisme le plus retentissant, il existe également d'énormes différences entre les deux codes. Cependant, ils ne sont pas incompatibles et peuvent certainement être parfaitement combinés pour obtenir les meilleures finitions, mais nous en reparlerons dans un prochain article.