Les flèches de défilement sont un élément de conception courant sur de nombreux sites qui utilisent une petite icône pour aider les utilisateurs à naviguer dans la page. Ce n’est pas nouveau et il existe depuis des décennies comme indicateur visuel.
Ce qui est nouveau, c’est que de plus en plus de designers expérimentent des façons plus créatives d’utiliser ces éléments pour créer un engagement et un intérêt visuel supplémentaires. Qu’il s’agisse de la conception de la flèche de défilement elle-même, de son emplacement ou de l’animation et des effets visuels. Il y a beaucoup de créativité au travail !
Voici un aperçu de la tendance créative en matière de conception de flèches de défilement et des moyens de l’adapter à vos projets.
Plus de 800 modèles de sites Web créés par des concepteurs + un constructeur par glisser-déposer
Avec Wix, vous pouvez créer de meilleurs sites Web avec des modèles adaptés aux mobiles, un glisser-déposer transparent et une personnalisation illimitée. Choisissez parmi plus de 800 modèles géniaux pour tous les secteurs, vendez vos produits ou services, créez un blog et prenez des décisions intelligentes grâce à des analyses claires.
Commencez à créer gratuitement dès aujourd’hui et voyez à quelle vitesse vous pouvez créer un site Web époustouflant et tendance.
Créez votre site web gratuitement
Quelle est la tendance en matière de conception de flèches de défilement créatives ?
La tendance créative en matière de conception de flèches de défilement est une variante amusante d’un élément commun. Les concepteurs font bien plus que simplement déposer une petite flèche en bas au centre de la zone des héros de la ville natale. Ils conçoivent des animations, des couleurs, des formes et d’autres éléments qui relient la flèche au reste de la conception tout en aidant à diriger les utilisateurs.
Il n’y a pas de règles en ce qui concerne votre tendance et les flèches sont utilisées de toutes sortes de façons. Dans tous les exemples ici, vous devez cliquer pour voir comment chacune de ces mises en page fonctionne, des états de survol aux animations, en passant par la mise à l’échelle et le placement.
Comment repérer cette tendance design
C’est l’une de ces tendances faciles à repérer si vous cherchez. De nombreux sites Web utilisent des flèches de défilement ; ici, les flèches ont un style de conception spécial qui les distingue.
Ce sont des flèches de défilement qui sont épinglées en raison de la couleur, de la forme, de la taille, des effets animés ou du placement. Tout ou partie de ces éléments peut contribuer à la créativité de l’élément de conception.
Comment le faire fonctionner pour vous
Si vous souhaitez utiliser cette tendance design, laissez la créativité vous guider !
Les flèches de défilement sont un bon signe directionnel pour les sites Web qui ont un grand en-tête de héros qui rend moins évident qu’il y a plus à lire ci-dessous. (C’est pourquoi cet élément de design est devenu si populaire.)
Vous pouvez posséder la flèche de défilement et l’intégrer davantage à l’esthétique du design en l’intégrant au design, pas seulement après coup.
Il n’y a pas d’ensemble de règles d’or ici; Soyez créatif et créez quelque chose qui fonctionne avec le thème général que vous essayez de présenter. Cet élément peut également être un endroit pour essayer une nouvelle technique, comme une animation intéressante ou un état de survol avec un avantage élevé et un risque assez faible (car la plupart des gens savent comment survoler, même sans la flèche).
Lorsque vous réfléchissez à la manière d’intégrer votre élément de conception ici, n’ayez pas peur de concevoir quelque chose de trop grand, comme dans l’exemple ci-dessus. Ce n’est pas la façon dont la flèche de défilement occupe une partie importante de l’écran et joue directement dans le thème « concevoir et dessiner ». (Il comprend également une animation incontournable.) C’est le genre de concept que vous devriez rechercher.
5 exemples que nous aimons
Il existe de nombreux autres exemples de cette tendance en action qui sont moins spectaculaires mais tout aussi impressionnants. Voici cinq exemples de cette tendance de conception de sites Web que nous adorons.
monsieur papa
M. Pops utilise également une flèche de défilement plus grande avec un style général funky. La flèche incurvée dans le coin inférieur droit vous aide à passer de l’image au texte pour faire défiler la page vers le bas pour plus d’informations.
Un emplacement à l’extrême droite est idéal pour ce type de mouvement ou de motif de suivi des yeux.
lagon bleu
Blue Lagoon adopte une approche plus traditionnelle de la flèche de défilement, mais avec une animation accentuée et un placement moins standard. Ce qui est bien ici, c’est la simplicité de la flèche de concert avec les éléments qui l’entourent. Remarquez comment le titre, le sous-titre et la flèche tombent tous le long de la même grille à gauche.
La couleur de la flèche correspond au reste de la conception du site Web et tous les éléments superposés à droite du texte vous aident à revenir aux éléments de gauche. C’est simple et très attrayant.
lumière et émerveillement
Parfois, une flèche de défilement n’inclut aucune flèche. C’est le cas avec Light & Wonder, qui utilise une ligne avec un point mobile pour indiquer l’interaction de défilement.
Bien qu’ils n’utilisent pas de flèche traditionnelle ici, il n’y a aucun doute sur ce que l’utilisateur est censé faire. C’est le facteur clé pour savoir si la conception de votre flèche de défilement fonctionne ou non. Est-il évident quelle action doit se produire ensuite à partir de l’élément de mise en page ? (Même s’il a une apparence peu commune ?)
médecins du monde
Cette flèche de défilement est évidente et fait partie d’un thème général d’orientations dans la conception du site Web. La chose intéressante ici est que la flèche est placée à l’intérieur d’un élément plus grand avec de la couleur afin qu’elle ne se perde pas. Vous rencontrerez probablement de nombreux sites où il y a une flèche de défilement, mais on dirait presque qu’ils essaient de la cacher dans la conception.
Soyez audacieux et allez-y. Si une flèche de défilement fait partie de votre plan de conception, ne ressentez pas le besoin de la masquer. Posséder l’élément et le faire fonctionner avec le reste de la conception.
École d’interface utilisateur Everest
À première vue, la flèche de défilement d’Everest UI School n’a pas l’air spectaculaire. Mais lorsque vous faites défiler, la flèche dans la barre latérale droite se déplace avec vous. Il y a toujours un élément de mouvement et d’interaction pour aider à guider le chemin de l’utilisateur.
C’est intéressant et vous fait réfléchir à ce que la conception vous propose de faire ou à la façon dont les interactions devraient fonctionner. Le mouvement et l’animation complexes sont combinés à la simplicité du design lui-même.
conclusion
Les flèches de défilement peuvent être un élément de conception amusant et créatif. La bonne chose est que vous pouvez l’utiliser pour presque n’importe quelle mise en page ou projet tant qu’il y a une action de défilement sur la page.
N’oubliez pas de faire en sorte que la conception de l’article lui-même fonctionne avec l’esthétique globale pour une sensation personnalisée. Envisagez l’interactivité telle que l’animation ou les états de survol pour augmenter l’engagement. Et si vous l’essayez pendant un certain temps et que vous n’obtenez pas de bons commentaires, il s’agit d’un ajustement de conception que vous pouvez continuer à apporter sans perturber le reste de la conception.
