Couleur et couches. Cette paire d'éléments de conception a été le moteur de nombreuses tendances de l'année. Bien que nous n'ayons rien vu prendre le dessus, comme le design plat il y a quelques années ou plus récemment le Material Design, des éléments des deux styles poussent les concepteurs à explorer de nouvelles choses.

Les choix de couleurs et la superposition semblent avoir pris racine dans ces grandes tendances et sont utilisés dans des schémas de conception même sans esthétique totalement plate ou matérielle. Voici ce qui est tendance dans la conception ce mois-ci:

1. Beaucoup d'éléments en couches

Les éléments en couches et les effets en trois dimensions sont la technique indispensable dans l’espace Web 2D. Grâce aux techniques amusantes et aux meilleures pratiques, introduites principalement par Material Design, des éléments en couches apparaissent dans des projets de tous types.

Ce qui est particulièrement intéressant, c’est de donner un aspect plus réaliste au site Web. L'utilisateur peut presque tendre la main et saisir les éléments à l'écran. (Et c'est une bonne chose!) L'astuce est que chaque calque doit avoir un aspect réel et léger, et que les calques sont naturels.

Voici quelques façons de commencer à expérimenter des calques dans vos projets de conception:

  • "Soulevez" les éléments du fond avec une ombre ou une animation simple. Olle fait cela avec plusieurs éléments sur des plans différents, mais ils s’allient tous et semblent naturels.
  • Autoriser les éléments à se croiser. Le texte peut se croiser dans l'espace occupé par une image.
  • Les fonctions de défilement de la parallaxe constituent un moyen intéressant de créer des éléments en couches (un premier plan se déplaçant sur un arrière-plan) sans être trop écrasantes.
  • Utilisez des formes géométriques, des animations et des variations de couleur pour imiter la profondeur de la conception. Les utilisateurs doivent avoir l'impression qu'ils peuvent presque tomber dans les images, comme l'expérience établie par Supprimer l'agence .
  • Créez des calques en allant en dehors du canevas, avec des éléments qui dépassent l'arrière-plan ou le bord de l'écran.
  • Permettre aux éléments de reposer sur un arrière-plan texturé pour créer une séparation entre le calque supérieur (que les utilisateurs peuvent imaginer toucher) et le calque d'arrière-plan.
Olle
effacer
fil

2. couleurs foncées

Pendant un certain temps, il semblait que chaque site Web était un idéal minimaliste, y compris un fond blanc. Cette tendance a évolué au fur et à mesure que de nouveaux schémas de couleurs sombres apparaissent comme le favori du design.

Et pour une bonne raison. Une belle palette de couleurs sombres peut attirer l'attention et n'est pas aussi dure pour certains utilisateurs que le blanc éclatant. D'un autre côté, l'esthétique sombre peut être un peu plus gênante si le texte est petit ou sur des écrans plus petits (assurez-vous donc de faire particulièrement attention au rendu des éléments sur les appareils mobiles).

Les éléments qui se démarquent vraiment dans les combinaisons de couleurs sombres incluent l'utilisation de vidéos et d'animations sympas, même si elles sont difficilement reconnaissables. typographie blanche audacieuse, touches de couleur vive pour accentuer les appels à l'action ou les informations importantes et l'ambiance générale appropriée.

Rappelez-vous aussi que l'obscurité ne signifie pas toujours le noir. Les couleurs sombres peuvent être enracinées dans une variété de teintes allant des rouges aux bleus en passant par les verts. Bien que les options noires soient les plus courantes, il est important de choisir un noir riche composé de différentes combinaisons de couleurs. Un noir mat (ou "K black" comme l'appellent les concepteurs d'impression) laissera à désirer dans la conception du site.

Lorsque vous travaillez avec des jeux de couleurs sombres, prenez soin de vous assurer que le contraste entre les éléments est correct et que les couleurs et les images ne sont pas perdues dans la nature sombre du motif. Le blanc peut être une bonne option, ainsi que d'autres couleurs primaires avec beaucoup de luminosité ou de saturation. N'oubliez pas de penser également au contraste de taille. Pensez à augmenter la taille de tous les éléments de texte de 10 à 20% lorsque vous travaillez avec une structure sombre pour en améliorer la lisibilité.

ambassadeur
convoi
manteaux

3. Les dégradés font un retour

Le dégradé, une des techniques rejetées par le design plat, fait son grand retour. (Et il est même utilisé dans la plupart des modèles de design plat.)

Les dégradés fonctionnent parce qu’ils font quelque chose qui, selon de nombreuses personnes, ne correspondait pas à un design plat, c’est-à-dire aider à créer et à établir la profondeur. Ce qui est nouveau dans les dégradés, cette fois-ci, c'est qu'ils ne sont pas utilisés pour imiter des textures ou sans but. La tendance actuelle se concentre sur les dégradés de couleurs vives qui accentuent le contenu. Qu'il s'agisse de superpositions de dégradés en plein écran ou d'arrière-plans, presque tout ce qui concerne la technique, tant qu'il est en gras, est pris en compte.

Les designers tirent le meilleur parti du retour en dégradé de plusieurs manières différentes:

  • Les paires dégradées «couleur plate» combinent les deux idées de design pour un look audacieux, tel que le site web pour WPcrew .
  • Les dégradés à deux tons sont une superposition de couleurs amusante pour ajouter un intérêt à une photo qui pourrait faire défaut ou pour ajouter de la profondeur à un arrière-plan.
  • Bien que plusieurs de ces dégradés semblent être à plus grande échelle, ils sont également utilisés pour des éléments plus petits, tels que les boutons, ou pour attirer l'attention sur des contenus spécifiques.

Il y a encore quelques choses à ne pas prendre en compte. (Puisque vous ne voulez pas que ce design ait l'air d'avoir sauté dès 2012!)

  • Méfiez-vous des petites pentes. L'utilisation dans les icônes n'est toujours pas recommandée.
  • Ne pas submerger le contenu. Une incrustation en dégradé sur une photo peut être agréable (pensez à certains des effets sympas que Spotify propose régulièrement), mais la photo doit toujours être perceptible.
  • Les dégradés de couleurs vives ont tendance à avoir une sensation légère et gaie. Assurez-vous que cela correspond à votre contenu.
  • Faites attention aux combinaisons de couleurs et au contraste en matière de lisibilité. Certains dégradés peuvent être légers et le texte blanc peut poser problème. Assurez-vous de tester la lisibilité par rapport à la couleur, aux différents points de contrôle réactifs et aux périphériques de plusieurs tailles. (Avec les dégradés, des problèmes de lisibilité peuvent parfois apparaître dans des endroits auxquels vous ne vous attendiez pas.)
wpcrew
Victor
interactif

Conclusion

Il n'y a rien de plus amusant que la couleur quand il s'agit de concevoir. Les tendances en matière de couleurs sont agréables car ce sont des éléments que vous pouvez ajouter à presque tous les styles de conception sans une révision complète. La même chose est vraie pour les éléments superposés. C'est une technique qui peut être ajoutée à un design existant pour lui donner un aspect plus moderne.

Quelles tendances aimez-vous (ou détestez-vous) en ce moment? J'adorerais voir certains des sites Web qui vous intéressent. Laisse moi un lien sur Twitter ; J'adorerais avoir de vos nouvelles.