C'est un fait indéniable: utiliser des images floues est une technique de conception de sites Web tendance en 2015. Il semble que partout où vous regardez, il y a un élément de flou.
Mais ce n'est pas une solution à certains de vos problèmes photo. C'est une technique distincte qui demande de la pratique à la perfection et de l'attention au détail pour bien faire les choses. Avant de vous lancer dans la tendance, réfléchissez aux options d'utilisation des images floues pour déterminer si elles vous conviennent et comment utiliser au mieux cette technique dans vos projets.
Les photos floues sont à la mode
Nous pourrions consacrer des pages entières au nombre de sites Web utilisant des images floues. La tendance est un gros problème en ce moment.
C'est la première chose que vous devez prendre en compte lorsque vous avancez avec une idée incluant des images floues.
- Voulez-vous faire partie de la tendance?
- Pouvez-vous utiliser la tendance d'une manière légèrement différente de celle des autres sites Web?
- Est-ce votre style ou un peu trop utilisé pour vos goûts?
- Serez-vous d'accord avec la conception du site une fois que la tendance aura évolué? Ou aurez-vous besoin d'une refonte?
Il n'y a absolument rien de mal à créer quelque chose qui est à la mode. Mais c’est une décision à prendre d’emblée. La création d'un site Web avec des images floues - en fonction de votre style et de votre utilisation préférés - peut prendre beaucoup de temps. Si vous n'êtes pas expérimenté dans les logiciels de retouche photo, une formation supplémentaire pourrait être nécessaire.
Le flou est une technique à utiliser avec de bonnes images
C’est peut-être la phrase la plus importante que vous lisiez lorsque vous réfléchissez aux images floues. Cela ne fonctionne que si vous avez de bonnes images pour commencer. Le flou n'est pas un moyen de résoudre le problème. une mauvaise image.
Pour le dire autrement. Si on vous donne une photo floue et qu'on vous demande de faire un site Web, ce n'est pas à la mode. C'est une mauvaise photo. Si c'est votre cas, ce n'est pas la technique pour vous. (Vous voudrez peut-être commencer à réfléchir à la création d'un élément artistique avec une typographie ou à la recherche d'images de stock.)
Mais si vous avez une belle image pour laquelle vous souhaitez utiliser quelques kilomètres supplémentaires ou utiliser d'une nouvelle manière, la technique de flou est une possibilité. Il existe plusieurs façons de penser au flou (nous allons nous concentrer sur chacune d’elles ci-dessous), mais la première étape consiste à comprendre comment créer le flou. Adobe propose un bon didacticiel pour vous permettre de démarrer avec Photoshop.
Flou l'image entière
Une des choses qui a contribué à la tendance de l’image floue est une autre tendance: l’utilisation des en-têtes de héros. Les concepteurs associent les techniques pour créer des images floues de style plein écran, qui constituent les principaux éléments visuels sur les pages de destination des sites Web.
Le site Web de Trellis Farm utilise une image emblématique d'une ferme pour vous donner une idée de l'endroit pour son site Web. Pour plus d’intérêt, la photo est en noir et blanc - afin de refléter ce sentiment d’autrefois - et est agrémentée d’une superbe police de caractères pour attirer votre attention. Le défilement continue cette sensation tout en ajoutant de la couleur au mélange. Le flou est agréable car vous savez ce qu'il y a dans la photo et cela aide l'utilisateur à se concentrer sur le texte et les actions à effectuer à l'écran.
Pourquoi ça marche:
- Un arrière-plan flou peut mettre en évidence des calques situés au-dessus de l'image, tels que du texte. Assurez-vous simplement de choisir une police de caractères percutante.
- Cela peut créer un nouvel intérêt avec une image que vous utilisez régulièrement, telle qu'une photo de marque standard.
- Il peut être utilisé avec presque tout type de contenu dans presque toutes les couleurs pour un attrait universel.
Arrière-plans et images en couches
Le flou n'est pas une technique uniquement en image complète. Des parties spécifiques d'une image peuvent être floues pour avoir un impact. Bien qu'il soit plus courant de voir des arrière-plans flous avec une mise au point nette au premier plan, certains concepteurs adoptent l'approche inverse pour une nouvelle option avec un avant-plan flou avec un arrière-plan net.
L'agence Anchour utilise des photos floues sur sa page de destination. La technique utilisée dans l'image peut faire partie de la photographie réelle ou vous pouvez créer le même effet dans un logiciel de retouche photo. Le truc ici lorsque vous créez ce style de flou est que vous ne pouvez pas dire qu'il a été créé. et il devrait sembler naturel que la photo ait été prise de cette manière. (Dans le logiciel de retouche photo, vous pouvez utiliser l’outil Flou gaussien avec de petits ajustements incrémentiels.)
Pourquoi ça marche:
- Le flou crée un contraste visuel et peut atténuer le sentiment d'affluence d'une image.
- Cela change la perspective de l'image et la vue du visuel par l'utilisateur.
- Il ajoute une dimension à une image qui, autrement, pourrait sembler plate pour un rendu presque 3D.
Flou dramatique pour l'art abstrait
Lorsque vous avez besoin d’une image d’arrière-plan pour votre site Web mais que vous pouvez trouver un motif ou une couleur qui convient, une photo avec un flou spectaculaire peut être la solution idéale. Considérez le flou dramatique comme un élément rendant le contenu de la photo non discernable en un coup d'œil et pouvant rendre la photo complètement méconnaissable.
Il s'agit d'une option populaire pour les sites Web qui lancent ou promeuvent un projet numérique avec un fond photo abstrait flou derrière un téléphone affichant le produit. Piction utilise la même image en arrière-plan et dans le téléphone avec des niveaux de zoom et de flou différents pour un design tout à fait accrocheur.
Pourquoi ça marche:
- Met l'accent sur le produit présenté.
- Crée un arrière-plan personnalisé plutôt que d'utiliser un motif qui pourrait apparaître sur d'autres sites Web.
- Permet au concepteur de contrôler les couleurs et les sensations en ce qui concerne la manière dont le flou abstrait fonctionne, allant de la netteté aux couleurs et formes douces, en passant par la lisibilité de l'image d'arrière-plan et la connexion à la marque.
Flou subtil pour n'importe quelle image
Un faible degré de flou peut également être utilisé dans de nombreux autres types de photos et ne doit pas nécessairement être utilisé uniquement pour une image en plein écran. Les concepteurs peuvent ajouter un soupçon de flou à une image nécessitant un petit focus au premier plan pour aider les utilisateurs à visualiser les bonnes parties d'une image, à styliser un logo ou tout simplement à créer un visuel plus complexe.
Le logo de Zeo utilise un flou subtil mais agréable dans le design rond. Le flou vous oblige à regarder le logo de plus près en raison de la forme intéressante et de la bordure légèrement décalée d'un côté du logo par rapport à la netteté de l'autre côté. La technique est davantage mise en avant car la conception du site Web dans son ensemble utilise le flou dans d'autres endroits, comme l'arrière-plan de l'image dominante sur la page de destination.
Pourquoi ça marche:
- De petits flous peuvent créer un élément de surprise.
- Il attire l'attention sur des parties spécifiques d'une photo, avec un focus visuel. (Jetez un coup d’œil à certaines des promos sur le site Zeo pour d’autres utilisations du flou subtil pour la mise au point de photos.)
- Cela peut vous donner le bon contraste pour superposer d'autres éléments d'une section d'image, tels que du texte, de la même manière qu'un flou plein écran peut fonctionner avec un en-tête de héros.
Utilisez-le aussi pour la vidéo
Vous pouvez également associer la tendance du flou à un autre élément de conception dynamique: la vidéo. Vous pouvez l'utiliser comme vous le feriez avec n'importe quelle autre technique d'image. Cela fonctionne de la même manière (bien que les outils d’édition et le processus soient un peu différents).
Level 2 Design utilise le bleu et un effet de type écran pour ajouter un intérêt à une vidéo en plein écran. (Actualisez le navigateur pour voir des vidéos plus floues.) L'effet est amusant et frais et fonctionne avec des vidéos censées avoir un aspect old school. Les boucles vidéo rapides sont très lisibles et attirent l’attention.
Conclusion
Il existe de nombreuses façons d'utiliser efficacement le flou pour les projets de conception Web. Le secret - s’il en existe vraiment un - est de créer un effet flou qui se fond parfaitement dans le reste de la conception. Et vous pouvez le faire presque en pensant au flou dans les extrêmes.
Utilisez beaucoup de flou pour un impact élevé et un sentiment abstrait. Utilisez un flou minimal pour créer un contraste subtil et définir la mise au point. Comme pour toute conception, testez-la sur quelques utilisateurs avant de la lancer et voyez ce qu'ils en pensent. Est-ce qu'ils remarquent le flou? (La plupart des non-designers ne vont pas vraiment y penser.)