Rubans et étiquettes dans la conception Web
Les tendances peuvent naître si silencieusement et subtilement que nous les remarquons rarement.
Et lorsque vous examinez des centaines de sites Web, vous voyez souvent des modèles qui vous manqueraient autrement. Un de ces modèles est l'utilisation fréquente d'étiquettes et de rubans.
Ces petites fioritures sont devenues de plus en plus populaires. Cet article aborde les deux éléments car ils sont utilisés ensemble si fréquemment.
Alors que les rubans sont explicites, j'entends par tags les étiquettes qui pendent du haut de l'écran, comme une étiquette sur un t-shirt.
Les sites Web qui utilisent ces éléments sont vraiment d'une qualité exceptionnelle. Rassembler cette magnifique vitrine s'est avéré être remarquablement facile. Peu de tendances sont comme ceci: il faut habituellement parcourir de nombreux exemples pauvres pour trouver les savoureux.
Pourquoi utiliser ces rubans et étiquettes?
Les tags sont utiles car ils attirent l'attention de l'utilisateur en créant l'illusion de profondeur. Ils transmettent leur contenu à l'utilisateur. Les tags sont souvent stylés, que ce soit via des effets 3D ou des couleurs contrastées.
Ces facteurs font de la balise un emplacement privilégié pour les informations critiques: logos, navigation, appels à l'action. Nous le voyons dans la vitrine ci-dessous. Bien sûr, comme toujours, évaluez vos besoins avant de mettre en œuvre cet élément sur votre propre site Web.
Le ruban partage les mêmes qualités, ce qui est en effet la raison pour laquelle nous le trouvons et le tag ensemble si souvent: il attire l’attention et est un endroit idéal pour des informations importantes. La forme du ruban le distingue de l'étiquette, cependant; les deux flèches à ses extrémités semblent indiquer le contenu à l'intérieur, dirigeant subtilement l'attention de l'utilisateur.
Une famille de styles
Une autre raison pour laquelle ces deux éléments se retrouvent souvent sur des sites Web est qu’ils sont tous deux des représentations numériques du tissu. Il n’est donc pas surprenant que de nombreux sites Web ci-dessous présentent d’autres éléments liés au tissu, notamment des points de couture subtils, des textures et d’autres éléments organiques.
Rubans
Lettre apprenant
Le ruban encadre bien le nom Lettre apprenant ici. En outre, la page est présentée comme une seule colonne; le titre ruban encourage l'utilisateur à commencer son voyage au sommet et à en descendre.
Ribot
Ribot Le ruban est assez subtil. L'épanouissement anime la page, tout en résumant les priorités de l'entreprise dans un slogan de deux mots. Un moyen idéal pour définir les attentes, car le nom de l'entreprise ne nous dit pas ce qu'il fait.
Alex Pierce
Le texte étant si énorme sur la page d'accueil de Alex Pierce Son portefeuille, il faudrait un élément plutôt audacieux pour l’équilibrer. Dans ce cas, le ruban fait un bon travail pour définir l'en-tête. J'aime aussi le fait que la couche pliée au milieu du ruban soit plus ciblée sur le nom du designer.
Rockaholic!
Sur le plutôt inhabituel Rockaholic! , le ruban attire l’attention de l’utilisateur, joue bien dans le défilement vertical du site Web et aide l’utilisateur à explorer le contenu.
Paris jones
Le rouge délicieux du ruban fait le nom du groupe Paris jones sortir ici Même si le traitement du texte est plutôt subtil, le motif en gras vous permet de le remarquer.
Blog en Bois
Sur Blog en Bois , l'effet de flèche du ruban est particulièrement puissant, en grande partie à cause de l'obscurité contrastante derrière le jaune. Je me retrouve de nouveau au logo encore et encore. C’est certainement un moyen puissant d’engager la marque dans l’esprit de l’utilisateur.
HTML5 Boilerplate
Le site populaire HTML5 Boilerplate utilise des rubans pour attirer notre attention sur les actions les plus importantes de la page. J'aime que les rubans fassent leur travail sans avoir à dire "Télécharger ici". La combinaison des rubans et des étiquettes nous indique que c'est là que les ressources doivent être téléchargées.
Cantilever Fish & Chips
Le but du ruban n'est pas si clair sur Cantilever Fish & Chips . Les détails concernant le fait d'être "ouvert 7 jours par semaine" sembleraient relativement mineures, mais c'est probablement une distinction importante pour ce restaurant.
Wells Riley
Wells Riley est un exemple parfait de rubans au service de l'esthétique. Les rubans sont superbes ici et deviennent le centre de la page.
Dhiraj Singh Karki
J'adore toujours les designs qui s'écartent des conventions. Le portefeuille de concepteur d'interface utilisateur Dhiraj Singh Karki est juste un tel site web. Ici, le ruban est utilisé de manière assez intelligente et ne contient pas le même effet visuel que sur les autres sites Web. Il se fond parfaitement dans la page et possède néanmoins suffisamment de style pour empêcher la conception de paraître trop simple.
Chipmunk
Chipmunk est un excellent exemple de la façon dont un ruban peut fonctionner avec des éléments organiques. Le ruban autour de la navigation principale correspond parfaitement aux riches illustrations ci-dessous. Il empêche également la navigation de se perdre parmi les œuvres d'art puissantes.
Ryan M. Stryker
Une fois encore, nous voyons le pouvoir du ruban de se concentrer. Son emplacement central et son contraste audacieux garantissent que vous ne manquiez pas Ryan M. Stryker 'Le nom de.
Mots clés
Ennea
Étant donné que Ennea est une marque de vêtements, il n’est pas surprenant que la balise contienne le logo et le nom de la marque. Parfois, une approche simple fonctionne mieux.
Philip Meissner Design
La balise contient la navigation principale sur Philip Meissner Design . Habituellement, je serais découragé par cette configuration inhabituelle de liens, mais la disposition et les couleurs garantissent que les liens sont très faciles à trouver.
Singe bricoleur
Qu'est-ce qui pourrait être plus important sur un site Web de commerce électronique que de guider les utilisateurs à vérifier? Singe bricoleur a une belle petite balise en gras pour aider les utilisateurs à compléter leur achat.
Parkbud
Avec toutes les applications smartphone disponibles, les bonnes doivent communiquer leurs principaux facteurs de différenciation. Parkbud est gratuit, et l'étiquette rouge audacieuse s'assure que vous le savez. La balise est joliment cachée mais toujours visible du coin de l’œil, vous rappelant que cette application savoureuse est gratuite.
Lentille
Lentille est un exemple parfait d'étiquettes combinées avec des textures de tissu. Remarquez d'abord le fond en denim texturé; de plus, la bordure festonnée sous la navigation principale est très orientée vers le textile.
Coreymade
Bien qu'un petit détail, j'aime beaucoup la façon dont la police de script rend le tag Coreymade se sentir plus comme un tag sur une chemise qu'un logo de site Web normal. Et l'effet pseudo-3D rend le tag vraiment pop pour le spectateur.
Netastica
Le tag sur Netastica est principalement là pour être jolie, même si elle contient toujours des informations importantes et relie les visiteurs à la page d'accueil.
Ryan Havoc Taylor
La balise est dans un endroit visible sur Ryan Havoc Taylor Le site Web ne nécessite pas beaucoup de contraste pour se démarquer. Cela fonctionne bien avec le flux du site Web et remplit son rôle sans effort.
Rubans et étiquettes
Dans la dernière partie de cette présentation, nous examinerons des sites Web utilisant à la fois des rubans et des tags.
ClearSpan Media
Les rubans et les étiquettes vont très bien ensemble, comme le montre ClearSpan Media . Vous trouverez également des tissus avec des motifs, des points et des variations de couleurs subtiles. Les deux étiquettes en haut et le ruban en bas fonctionnent comme une sorte de cercle d'intérêt pour l'utilisateur.
Krichevtsova Alexandra
Tandis que Krichevtsova Alexandra Le site Web est plutôt un contenu dénudé, l'étiquette et le ruban ajoutent de la vie aux éléments clés. Vous pouvez profiter de ce site sans même savoir ce que fait la personne.
Wes Bos
La plupart des sites Web de cette collection ont des rubans plutôt volumineux. Pas avec Wes Bos . Ils sont beaucoup plus petits, un bon rappel qu'ils n'ont pas besoin de dominer le design pour remplir leur fonction.
Conclusion
Étant donné la qualité des sites Web de cette collection, aucun de ces concepteurs n’a entrepris de créer quelque chose de «tendance». Ils ont plutôt été confrontés à un ensemble de besoins et, de ces besoins, ils ont créé un dispositif visuel efficace. et mettre en évidence les actions importantes.
Si vous souhaitez de beaux rubans basés sur CSS pour votre propre site Web, le site Web Générateur de ruban 3D est un outil pratique pour le travail.