Catégories
Astuces et Design

3 Essential Design Trends, juillet 2020

La plus grande tendance dont nous parlons ce mois-ci a commencé à la WWDC, car Apple a donné un aperçu de ce qui allait suivre pour leurs systèmes d'exploitation. Cette fois, il y a un élément de design distinct. L'as-tu attrapé?

Voici les tendances du design ce mois-ci.

1. Points saillants et soulignements du texte

Il y a toujours eu une règle non écrite dans la conception de sites Web selon laquelle le texte utilise des styles plus simples. Les caractères gras sont acceptables, les italiques sont OK de temps en temps, mais le soulignement est rarement utilisé.

Cette tendance au design va à l'encontre de ce concept avec des éléments de texte qui utilisent des éléments de surlignage ou de soulignement pour souligner les mots clés. Et ça marche plutôt bien.

Ce qu'il faut pour faire ce travail, c'est beaucoup de contraste et un style de conception qui correspond aux éléments soulignés ou mis en évidence.

Cette tendance de conception fonctionne grâce à une intention claire. Les mots sont évidemment importants pour la signification globale de la conception ou ce que les visiteurs devraient retirer du contenu.

Pepper It utilise un soulignement astucieux que les lettres semblent reposer à l'intérieur pour mettre en évidence une phrase clé. La forme et la couleur imitent également celles du plus gros bouton ci-dessous, aidant les yeux à passer d'un élément à l'autre. C'est une utilisation efficace d'un effet de soulignement (ou peut-être vous pourriez appeler cela un point culminant) en conjonction avec des couleurs de marque.

poivre "width =" 1856 "height =" 1280 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/3-Essential-Design-Trends-juillet-2020.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / pepper-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/pepper-768x530.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/pepper-1024x706.jpg 1024w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/pepper-1684x1161.jpg 1684w "tailles = "(largeur max: 1856px) 100vw, 1856px" /></div>
<p>Zappos Kids utilise un surlignage amusant dans un schéma coloré pour mettre en évidence un élément de texte clé. Il ressemble presque à un bouton et aide les visiteurs du site à comprendre que toute la zone d'image du héros est cliquable. Le point culminant sert à rendre le texte plus lisible et l'élément interactif plus fonctionnel.</p>
<div class=zappos "width =" 1856 "height =" 1280 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1593447713_844_3-Essential-Design-Trends-juillet-2020.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / zappos-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/zappos-768x530.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/zappos-1024x706.jpg 1024w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/zappos-1684x1161.jpg 1684w "tailles = "(largeur max: 1856px) 100vw, 1856px" /></div>
<p>Zeus Jones utilise une variété de traitements de texte sur la page d'accueil, mais on peut soutenir que le soulignement est le plus visible, probablement parce qu'il est le plus inconnu dans le contexte de la conception de sites Web.</p>
<div class=zeus "width =" 1856 "height =" 1280 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1593447713_671_3-Essential-Design-Trends-juillet-2020.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / zeus-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/zeus-768x530.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/zeus-1024x706.jpg 1024w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/zeus-1684x1161.jpg 1684w "tailles = "(largeur max: 1856px) 100vw, 1856px" /></div>
<p class=

2. Géométrie distincte

Les formes géométriques dans la conception de sites Web sont apparues comme des éléments de tendance dans une variété de formes. Cette itération est assez simple: utilisation d'une géométrie distincte dans le cadre de l'esthétique globale.

La géométrie peut être associée à des illustrations, des photos, du texte ou en arrière-plan ou au premier plan. Ce qui est génial avec les formes, c'est qu'elles sont polyvalentes et fonctionnent avec de nombreux autres modèles de conception.

Ce qui peut être le plus difficile à propos des formes et du design, c'est que la géométrie distincte nécessite un peu d'espace et de réflexion. Jeter quelques triangles ou rectangles dans un dessin sans raison peut sembler assez étrange.

Alors, comment pouvez-vous ajouter des formes géométriques à un design pour qu'elles aient l'air intentionnelles? Ces exemples le font bien (et de trois manières différentes).

Rui Ma utilise des conteneurs carrés et rectangulaires dans une grille modulaire avec des projets de portefeuille à l'intérieur de chacun. Il s'agit de l'une des utilisations les plus courantes et applicables de la géométrie – en tant qu'élément conteneur. Ce qui le distingue, c'est le cercle, la roue de smiley (également une forme géométrique) qui ne quitte jamais le centre de l'écran. Le fond noir de la grille est également un bel élément de contraste pour les blocs de contenu.

ruima "width =" 1856 "height =" 1280 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1593447713_100_3-Essential-Design-Trends-juillet-2020.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / ruima-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/ruima-768x530.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/ruima-1024x706.jpg 1024w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/ruima-1684x1161.jpg 1684w "tailles = "(largeur max: 1856px) 100vw, 1856px" /></div>
<p>Thompson Stenning utilise des formes en arrière-plan et des illustrations pour créer un superbe visuel de page d'accueil. Il est grand et audacieux et a juste assez de choses pour que vous vouliez le regarder et comprendre la scène. Ce qui est peut-être le plus intriguant dans le concept visuel, c'est qu'il utilise de nombreuses formes géométriques – rectangles, carrés, triangles, cercles publicitaires – alors que la plupart des projets choisissent une forme sur laquelle se concentrer.</p>
<div class=romain

Romain Penchenat utilise des angles de style en trois dimensions pour vous attirer dans le site Web du portefeuille. Ils utilisent une animation simple qui «flotte» sur la page d'accueil et suit le défilement avec d'autres éléments géométriques.

romain "width =" 1856 "height =" 1280 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1593447714_150_3-Essential-Design-Trends-juillet-2020.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / romain-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/romain-768x530.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/romain-1024x706.jpg 1024w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/romain-1684x1161.jpg 1684w "tailles = "(largeur max: 1856px) 100vw, 1856px" /></div>
<p class=

3. Icônes d'ombre et de dégradé

Avez-vous remarqué tous les dégradés et les ombres subtiles des icônes dans les images prévisualisant iOS 14 ou regardiez-vous simplement d'autres changements (tels que des widgets) sur l'écran de l'iPhone?

Nous voyons de plus en plus de concepteurs incorporer plus d'ombres et de profondeur dans les icônes depuis un certain temps, mais cette décision d'un acteur majeur de la conception le propulsera rapidement au premier plan. Chacune des icônes passe d'un style plat à un avec une couleur de dégradé d'arrière-plan ainsi que plus d'ombres dans les éléments d'icônes pour la profondeur.

Ne vous inquiétez pas, le design ressemble encore beaucoup à Apple, mais rappelle un peu plus les icônes de style skeuomorphisme des versions antérieures d'iOS.

C'est bien que les éléments de couleur et d'ombre soient contenus dans chaque icône. Cela crée plus d'intérêt visuel et de profondeur pour chaque élément sans être encombré ou junky. Les dégradés sont également super simples, utilisant une version plus sombre de la couleur principale dans un élément monotone.

ios14 "width =" 1856 "height =" 1280 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1593447714_551_3-Essential-Design-Trends-juillet-2020.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / ios14-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/ios14-768x530.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/ios14-1024x706.jpg 1024w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/ios14-1684x1161.jpg 1684w "tailles = "(largeur max: 1856px) 100vw, 1856px" /></div>
<p>C'est un style iconographique que d'autres utilisent déjà. DG Studio a une collection d'icônes sur sa page d'accueil avec des dégradés subtils et des ombres dans les conceptions. Encore une fois, ce qui est bien avec cette tendance, c'est qu'elle ajoute de la profondeur aux visuels sans astuces qui entravent la compréhension visuelle.</p>
<div class=romain

Guillaume Gouessan utilise des dégradés dans les icônes d'image de la même manière que les exemples précédents mais avec un peu plus de variation de couleur. Ici, vous pouvez voir à quoi ressemble le dégradé lorsque vous utilisez un changement de couleur qui n'est pas super drastique, mais plus dramatique qu'une option monotone. Vous pouvez trouver une utilisation du dégradé plus monotone sur son site sous le défilement dans la grande image de bureau. (Cela vaut certainement quelques clics pour le vérifier.)

Aimez-le ou détestez-le, les dégradés et les ombres semblent être là pour rester un certain temps.

guillame "width =" 1856 "height =" 1280 "srcset =" http://www.maclasseweb.fr/wp-content/uploads/2020/06/1593447714_308_3-Essential-Design-Trends-juillet-2020.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / guillame-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/guillame-768x530.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/guillame-1024x706.jpg 1024w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/guillame-1684x1161.jpg 1684w "tailles = "(largeur max: 1856px) 100vw, 1856px" /></div>
<p class=

Conclusion

À quelle fréquence vous trouvez-vous à la recherche d'inspiration design pour les grandes marques et entreprises? Alors que de nombreuses tendances de conception Web commencent par des expériences avec des sites plus petits, les grands acteurs peuvent vraiment façonner ce qui devient populaire (ou non).

L'exemple d'Apple passant à des icônes avec plus d'ombres et de dégradés en est un excellent exemple. Nous voyons de plus en plus de ces éléments depuis un certain temps, mais ce style est sur le point de redevenir très grand.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *