Ce n'est pas votre résumé typique des textures à utiliser pour les arrière-plans de sites Web. Si vous recherchez une texture spécifique, nous les avons ici. Mais que faire si vous voulez créer le vôtre? Ou trouvez-vous un moyen de personnaliser une texture pour l'adapter à votre projet? C'est ce sur quoi nous allons nous concentrer aujourd'hui.
Bien qu'il existe de nombreuses façons d'utiliser les textures dans la conception Web, vous obtiendrez beaucoup plus de temps à partir de ces arrière-plans si vous adoptez une approche moderne et suivez quelques règles simples. Voici sept conseils pour vous aider à bien utiliser les textures d'arrière-plan dans la conception Web (et en ligne avec les modèles de conception et les tendances de 2018).
1. Aller simple et discret
Une bonne texture de fond pourrait même ne pas être remarquée par de nombreux utilisateurs. Il devrait s'agir d'un élément presque invisible contribuant à la lisibilité et à la convivialité tout en offrant une profondeur ou un intérêt visuel.
Les textures d'arrière-plan simples et discrètes sont le moyen idéal de le faire. Pour un événement qui s'est tenu à la fin de l'année dernière, la Conférence de l'univers de Github a utilisé un concept comprenant un simple fond noir avec des points blancs. L’effet ciel nocturne tombe vraiment à l’arrière-plan, de sorte que le logotype de dégradé amusant et les informations sur les événements sont faciles à trouver.
Les textures de fond simples ont tendance à avoir des motifs répétitifs petits ou serrés et peuvent être presque toutes les couleurs. L'idée est que ces textures de fond ne sont pas un point central; ils servent à attirer l'attention sur le reste de la conception.
2. Allez gros et audacieux
Peut-être que subtile n'est pas ton truc. Si tel est le cas, optez pour une texture ou un motif de fond grand et gras.
Ces styles plus grands que nature fonctionnent pour les conceptions dont l'avant-plan est plus lourd en éléments de texte ou d'interface utilisateur et où il n'y a pas d'autres images en concurrence à gérer. L'utilisation de ce type de texture d'arrière-plan peut s'avérer délicate, qu'il s'agisse de créer un motif de mosaïque invisible pour l'utilisateur ou d'empêcher que l'arrière-plan devienne par inadvertance le point central de toute la conception.
Pour vous assurer que votre texture de fond surdimensionnée fonctionne, gardez un œil sur les analyses et les habitudes des utilisateurs pour effectuer le changement. Une forte diminution du trafic ou des conversions indique que vos visuels et vos utilisateurs risquent de ne pas se connecter.
3. Incorporer une tendance
Une texture de fond avec une tendance peut donner à votre design une sensation de modernité et de fraîcheur.
Avec des formes géométriques qui font fureur à l'heure actuelle, il n'est pas étonnant que le site Web d'Apacio soit attrayant. Avec un mélange de géométrie de couleurs vives sur un arrière-plan sombre, le motif crée une belle texture et une profondeur qui aident l'utilisateur à se concentrer sur le texte de grande taille et à l'appel à l'action car ces éléments contrastent avec l'arrière-plan. Le texte - simple lettrage sans empattement - semble se détacher des formes vertes.
La superposition de textures contribue également à cet effet général. Notez que la couleur sépare deux couches d'arrière-plans avec des éléments plus sombres? Derrière? éléments plus lumineux.
4. Utiliser une image
Une texture d'arrière-plan ne doit pas nécessairement être un motif récurrent que vous extrayez d'un site de téléchargement. Certaines des meilleures textures d'arrière-plan sont des images liées à la marque ou à la messagerie principale, ce qui ajoute un autre niveau d'intérêt visuel et d'engagement.
L'astuce consiste à atténuer efficacement l'image dans l'arrière-plan. (Et cela ne signifie pas nécessairement que vous utilisiez une technique de fondu.) Le fait de fondre l’image signifie qu’elle s’éloigne de la zone de l’image principale et s’éloigne de celle-ci.
Dans l'exemple ci-dessus, Oxeva effectue cette opération de deux manières: elle assombrit la photo de sorte que seuls les contours soient visibles du paysage urbain et elle utilise un traitement de couleurs vif à l'avant-plan pour attirer naturellement le regard. La photo est également légèrement floue, de sorte que l’image est visible, mais pas avec un niveau de détail qui donne de l’importance aux détails de la photo.
5. Utiliser les variations de couleur
Mélangez et assortissez les teintes et les tons de la même palette de couleurs pour créer une texture audacieuse à partir de lettres ou de formes. Les variations de couleur, même celles de la même famille, peuvent créer de la profondeur et un intérêt visuel.
Types of Type utilise une combinaison de couleurs amusante avec des lettres géantes pour créer la texture d'arrière-plan. Même en l'absence de techniques telles que les dégradés ou les ombres, les lignes des formes de lettre établissent la profondeur et l'équilibre tout en attirant le regard sur l'endroit où les couleurs de l'arrière-plan se rejoignent et sur le titre principal.
6. Prenez un dégradé
Les dégradés sont à la mode et visuellement attrayants. Lorsqu'il s'agit d'utiliser un dégradé comme texture d'arrière-plan, vous pouvez l'utiliser seul ou le superposer à une photo.
Presque toutes les combinaisons de couleurs vont, donc utiliser un dégradé pour créer une texture et une profondeur n'est pas difficile. Vous pouvez trouver une combinaison de dégradés que vous aimez chez WebGradients si vous n’avez pas déjà l’idée d’utiliser des échantillons.
Mobipaid utilise plusieurs dégradés subtils pour créer une profondeur et une texture en arrière-plan. Des animations illustrées au premier plan font presque ressortir les dégradés et l’appel à l’action de couleur sombre est facile à voir. Les espaces plus clairs et plus sombres de la texture en dégradé aident l'utilisateur à se déplacer d'un seul coup d'œil à la conception.
7. l'animer
Bien que de nombreuses astuces se soient concentrées sur les éléments d'arrière-plan statiques, il n'existe aucune règle indiquant qu'un arrière-plan ne peut pas être dynamique.
Pour tirer le meilleur parti de ce type de texture d'arrière-plan, le mouvement doit être subtil pour ne pas nuire à l'image principale ou à la messagerie. Inclure une palette de couleurs atténuée ou subtile, telle que l'alphabet letton, ci-dessus, est également une excellente option.
Cette animation peut inclure des éléments qui bougent ou tournent ou tournent ou vidéo. Le mouvement est un bon moyen d'attirer l'attention des utilisateurs. Tirez le meilleur parti d'une texture d'arrière-plan animée en veillant à ce que cette motion ne submerge pas le premier plan du dessin.
Conclusion
Une excellente texture de fond peut ajouter de la profondeur et un intérêt visuel à la conception globale de votre site Web. Bien que de nombreux concepteurs utilisent encore des arrière-plans plus plats, tels que la couleur unique, l’ajout d’un soupçon de texture permet de mettre en valeur votre projet.
L'astuce pour utiliser les textures est qu'elles doivent être subtiles et qu'elles tombent à l'arrière-plan pour que les éléments de premier plan soient faciles à lire et à comprendre. Cela peut être un équilibre assez délicat. N'oubliez pas de créer beaucoup de contraste entre les textures d'arrière-plan et les images de premier plan, les éléments de l'interface utilisateur et le texte afin de maximiser l'impact de la conception globale.
Textures de fond
Choisir la bonne texture d’arrière-plan pour votre site Web ou votre projet de conception peut être délicat. Notre série vous apprend à travailler avec les textures d'arrière-plan et à les intégrer, ainsi qu'à trouver des graphismes époustouflants.