Articles

Les dégradés Web inspirants et où les trouver

Les dégradés Web reviennent sont DE retour en tant qu’élément de conception pour le monde en ligne. Ils sont devenus un moyen facile de donner vie à votre site Web.

S’ils sont bien appliqués, ils donnent à l’œil un sentiment unifié qui invite l’utilisateur à rester sur le site. Ce sentiment résulte de l’absence de bords durs et de ruptures dans la structure de la page.

web gradients-nyc_prideComme vous pouvez le voir dans l’exemple ci-dessus, le dégradé calme l’action de l’image d’arrière-plan pour la rendre apte à être l’arrière-plan de cette conception d’interface utilisateur.

Vous voulez en connaître la raison?

Le secret est que l’harmonie qu’un gradient diffuse provient de phénomènes dans la nature où la plupart du temps aucun bord dur n’apparaît. Tout a une forme organique ou des transitions douces.

De plus, les humains ont une excellente vision des couleurs et aiment voir les couleurs. Imaginez un dégradé noir et blanc. Cela dépend du cas, mais très probablement, il n’a pas l’air que de grands dégradés colorés soient préférés dans de nombreux cas.

Pourquoi pensez-vous que tout le monde aime regarder les couchers de soleil?

gradients web - dégradé de coucher de soleil

Ou simplement met la tête au ciel?

dégradés web - dégradé de nature

L’utilisation de dégradés en arrière-plan d’une page Web peut également être un moyen discret de guider la vue du visiteur à travers le contenu sans avoir à placer des flèches gênantes au premier plan.

Le premier plan doit de toute façon être utilisé pour les informations importantes et l’arrière-plan peut remplir un objectif subordonné.

Appliqué à des éléments tels que des dégradés de boutons et d’icônes peut également conduire à un effet 3D facile.

Il n’est pas toujours facile de trouver le dégradé approprié et de l’appliquer correctement avec tous ces avantages.

Ne vous inquiétez pas. Il y a une solution.

Il existe de nombreux outils en ligne qui offrent déjà beaucoup de dégradés préparés, soit juste pour l’inspiration, soit directement pour les intégrer facilement dans votre site Web.

Maintenant, il vous suffit de savoir quel outil répondra le mieux à vos besoins.

Commençons.

Gradients web inspirants…

gradients web - symodd

Comme mentionné, symodd est un exemple classique de la façon dont de bons gradients Web peuvent fonctionner comme un arrière-plan simple qui est intéressant et accrocheur de toute façon.

web gradients-qards

Utilise non seulement Qards un dégradé comme arrière-plan, mais ils sont également appliqués à presque tous les éléments, en particulier aux icônes et aux boutons.

dégradés web - gogoro

Gogoro utilise un dégradé dans une forme qui le rend plus dynamique et soutient l’objectif de la marque.

Comme vous pouvez le voir sur ces sites web, il s’agit de trouver le bon équilibre et d’utiliser les couleurs avec modération.

Pas un dégradé inspirant:

web gradients-badExample

Ce dégradé est si laid que je dois m’excuser de le présenter ici car cela fait tellement mal aux yeux. Il a trop de couleurs qui sont toutes très différentes. De plus, le texte noir brut au premier plan semble déplacé et est supprimé par le dégradé.

Donc, si après avoir vu ces exemples, vous n’êtes toujours pas sûr de pouvoir appliquer un dégradé capable de supporter votre projet comme il se doit, vous pouvez aller plus loin dans le design web et graphique.

Pas assez?

PROFESSIONNEL de LA CONCEPTION WEB

En savoir plus sur notre cours signature.
Choisissez le meilleur horaire
pour étudier EN LIGNE ou à l’école.

VOIR LE COURS

Suivez ce guide pour mieux comprendre les types de gradients et donner des conseils sur les meilleures pratiques.

andet où les trouver

gradients web-uiGradients
gradients Web-uiGradients

uiGradients est très facile à utiliser car il ne comporte que deux écrans principaux. Après le chargement, vous pouvez voir directement un dégradé aléatoire sur tout l’écran.

Avec les flèches sur les côtés, vous pouvez basculer dans la grande offre de toutes sortes de dégradés. Le deuxième écran affiche tous les dégradés sous forme de liste à parcourir et à trier par couleur.

L’atmosphère créée par les dégradés Web est prise en charge par son nom individuel. En tant que fonctionnalité spéciale, vous pouvez également faire pivoter votre dégradé pour voir à quoi il ressemble sous un autre angle.

Pour les personnes qui souhaitent contribuer leur dégradé créé à la communauté, l’option existe pour ajouter votre dégradé à la collection via GitHub. Cela rend la variété des dégradés presque illimitée.

uiGradients fournit trois façons d’enregistrer le dégradé choisi. Si vous souhaitez recréer le dégradé dans un logiciel de conception graphique ou un code, vous pouvez simplement copier le code couleur Hexadécimal.

Pour une implémentation directe dans votre site Web, vous pouvez obtenir le code CSS.

Pour enregistrer le dégradé comme inspiration, il suffit de télécharger le fichier JPEG.

WebGradients

web gradients - WebGradients

Cet outil commence par afficher la collection de 180 dégradés web sous la forme d’une longue liste que vous pouvez parcourir. Une fois que vous voulez voir plus d’un dégradé, cliquez simplement sur votre sélection et la couleur sera affichée sur tout votre écran.

Chaque dégradé a un nom ce qui rend leur application possible plus tard plus concrète.

WebGradients est géré par itmeo, une société qui fournit plusieurs outils numériques en ligne. Leur service de dégradé, dans ce cas, est gratuit, sauf si vous ne souhaitez pas télécharger un croquis ou un fichier Photoshop.

Comme dans uiGradients, vous avez également trois possibilités pour enregistrer votre nouvelle inspiration de dégradé trouvée ici.

Pour chaque dégradé, vous pouvez enregistrer un fichier PNG volumineux pour l’utiliser comme arrière-plan pour votre propre conception graphique.

Afin d’utiliser les couleurs exactes et le dégradé dans un logiciel ou un code de conception graphique, vous pouvez copier le code couleur hexadécimal ou obtenir la version CSS du dégradé.

coolHue

dégradés web - coolHue

Cette collection de dégradés est déjà affichée lors de la première ouverture du site Web. Vous pouvez choisir parmi 60 dégradés colorés. Il suffit de faire défiler dans chaque cas six tuiles d’affilée de cette variété de dégradé.

Malheureusement, il n’y a aucun moyen d’afficher le dégradé en taille réelle.

Le bon ajout pour coolHue est l’animation lorsque vous survolez les tuiles dégradées, ce qui vous en donne une impression tangible.

Les dégradés web doivent vous livrer leur atmosphère juste à travers les couleurs. C’est pourquoi ils n’ont pas de noms dans cet outil. Par conséquent, dans le coin inférieur droit, vous avez plus d’options pour Sketch et Photoshop.

Lorsque vous survolez le dégradé sélectionné, deux autres options s’affichent. Vous pouvez copier le code CSS pour une implémentation facile dans votre code ou télécharger un petit fichier PNG.

Si vous souhaitez utiliser les couleurs exactes, vous pouvez simplement copier le code de couleur hexadécimal sous le dégradé.

ColorSpace

colorspace

ColorSpace vous offre la possibilité de choisir et d’appliquer une couleur dégradée dans 10 directions différentes. Pour appliquer une couleur, vous pouvez choisir dans le menu couleur qui apparaît, le même que dans un logiciel de retouche d’image. Vous pouvez également coller un code de couleur hexadécimal de la couleur afin d’obtenir les couleurs exactes que vous souhaitez utiliser.

Le dégradé est appliqué sur l’arrière-plan sur tout l’écran. Cela vous donne une très bonne idée de l’humeur des couleurs et vous motive à choisir la couleur qui vous semble la mieux adaptée au sujet pertinent que vous recherchez.

Avec ColorSpace, vous pouvez également copier l’URL du dégradé de couleur que vous avez choisi. Cela permet de partager très facilement les options de couleur sans avoir à enregistrer un fichier puis à l’envoyer en pièce jointe ou à envoyer les spécifications de la couleur. Ils peuvent simplement voir ce que vous regardiez en cliquant sur le lien que vous avez envoyé et ils auront toutes les informations dont ils ont besoin, les codes hexadécimaux et le code CSS.

Cependant, si vous préférez enregistrer un fichier image, malheureusement ce site Web ne vous donne pas cette option.

Générateur de gradient CSS Ultime

gradients web - Générateur de gradient CSS ultime

Maintenant, nous arrivons aux outils plus complexes qui, dans ce cas, comme son nom l’indique déjà, ne sont utilisés que pour l’intégration dans votre code CSS.

L’interface est divisée en quatre parties et rappelle un logiciel de conception graphique typique. Vous pouvez ajuster ou créer des préréglages, afficher ce résultat dans un petit aperçu et consulter le code CSS complet.

Le générateur de dégradé CSS ultime fait partie de l’extension de navigateur ColorZilla. Son outil de dégradé offre des possibilités illimitées pour créer des dégradés Web.

Vous pouvez ajouter autant de couleurs que vous le souhaitez, ajuster la teinte et la saturation comme vous le savez à partir de votre logiciel de conception graphique, inverser le dégradé et définir les couleurs, l’opacité et l’emplacement du dégradé.

En dehors de cela, vous pouvez enregistrer votre propre dégradé créé dans les préréglages, il n’y a qu’une seule façon de l’exporter avec le code CSS ou SASS.

Mais avant cela, vous pouvez définir la taille du dégradé, changer l’orientation de celui-ci dans différentes directions et choisir le format de couleur parmi cinq options données.

Problèmes à résoudre ?

uiGradients WebGradients coolHue Gradientify Gradients.io CSS Gradient Generator
Full-screen view + + +
Switch in full-screen view +
List view + + + + + +
Amount of gradients almost unlimited 180 60 45 24 unlimited
Sort gradients by colour
Named gradients + + + +
Rotate gradient (change orientation) + +
Change colour opacity +
Change colour location +
More than two colours + +
Change hue/saturation +
Reverse colours + +
Adding new gradient + +
Import image +
Import CSS code + +
Change export size +
Hex Color Code + + + + +
CSS code + + + + +
Chose colour format (CSS) +
JPEG file 1920 × 1080
PNG file 2400 × 2000 500 × 500

Quel outil de dégradé web est le mieux à utiliser dépend toujours de votre projet, du temps dont vous disposez et du niveau d’individualité ou d’autres exigences de qualité.

Le tableau ci-dessus peut vous aider à décider quel outil vous devriez utiliser le mieux pour le résultat que vous souhaitez obtenir.

Rappelez-vous la chose la plus importante?

N’utilisez pas trop de couleurs – la meilleure pratique d’aujourd’hui est d’utiliser seulement deux couleurs qui ne sont pas trop différentes.

Ce à quoi vous devez également faire attention, c’est la conception générale de votre dégradé, la façon dont vous l’appliquez à votre projet plus tard et comment il s’intègre dans son environnement.

uiGradients offre toutes les fonctionnalités visuelles importantes comme vous pouvez le voir sur la table. Cet outil vous permet d’imaginer le dégradé de votre projet de la meilleure façon possible.

Si vous souhaitez approfondir l’adaptation du dégradé pour un projet Web de haute qualité, vous pouvez combiner uiGradients avec le générateur de dégradé CSS Ultime en important le code CSS ou l’image téléchargée.

Maintenant, vous êtes prêt à le faire par vous-même. Si vous décidez de travailler avec des dégradés, veuillez nous en informer sur twitter.

PROFESSIONNEL de LA CONCEPTION WEB

En savoir plus sur notre cours signature.
Choisissez le meilleur horaire
pour étudier EN LIGNE ou à l’école.

VOIR LE COURS

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.