L'histoire est aussi ancienne que le graphisme lui-même: vous avez deux sections différentes et vous avez besoin d'un moyen de les séparer visuellement. En tant que designer, je me vois souvent revenir au même vieux ou deux vieux trucs pour réussir ça. Pourquoi ne pas mélanger un peu?
Aujourd'hui, nous allons vous montrer dix façons géniales de créer deux sections de contenu distinctes. Chaque exemple provient d'un site Web réel. Vous pouvez donc cliquer dessus pour le voir en action.
Le roi de contraste
C'est l'un des moyens les plus simples et les plus courants de séparer deux sections. Tout ce que vous faites est de trouver deux couleurs qui contrastent vraiment bien.
Cela se fait généralement avec du blanc ou un équivalent proche en plus de quelque chose de vraiment sombre comme le noir ou très lumineux comme le rouge. Le contraste des couleurs est l’un de vos outils de conception les plus puissants. Vous l’utilisez avec habileté et vous obtenez un design accrocheur à chaque fois.
Le fondu rapide
Le fondu rapide est comme l'opposé de l'exemple précédent. Ici, au lieu de beaucoup de contraste et une ligne dure, nous avons très peu de contraste et une séparation douce.
Ceci est idéal pour les situations où vous souhaitez ajouter une petite différence visuelle entre deux sections qui sont encore très étroitement liées d'un point de vue conceptuel.
L'exemple ci-dessus utilise le fondu rapide pour séparer les icônes de leur texte de descripteur. Encore une fois, les deux vont ensemble et pourtant fonctionnent bien avec une légère distinction.
Le cran
L'encoche peut être combinée à plusieurs autres techniques, mais est généralement utilisée avec une ligne dure, comme dans l'exemple ci-dessous. Celui-ci est plus un point qu'une encoche mais une variante populaire consiste à inverser le triangle afin qu'il coupe dans la couche inférieure.
L'encoche est parfaite lorsque vous souhaitez attirer l'attention sur quelque chose. Cela se présente généralement sous la forme d'une collection horizontale d'éléments avec une sélection active. Bien entendu, le triangle se déplace lorsque vous sélectionnez différents éléments.
Le scrapbook
Je ne sais pas qui a commencé, mais les séparateurs irréguliers tels que celui ci-dessous sont devenus très populaires depuis un an ou deux. C'est une solution élégante qui ajoute définitivement plus d'intérêt visuel que votre ligne continue typique.
La technique ne suggère pas nécessairement un thème de scrapbooking, c’est ce à quoi je pense à chaque fois que je le vois. Pour varier, essayez d’expérimenter la hauteur, l’espacement et la rondeur des points. Vous pouvez également utiliser un motif moins régulier tel qu'un bord déchiré.
La coupure
Cet exemple provient en fait du même site que le dernier, félicitations à Colin Grist pour un site génial. Découvrez comment il sépare ces deux sections:
Ici, il utilise une ligne dure, mais au lieu de contraste de couleur, il découpe simplement un graphique. La solution est merveilleusement simple et fonctionne très bien. Si vous faites défiler l'écran un peu plus bas, il ramène la scène vers le haut. Il s'agit donc d'une bande, mais vous pouvez certainement l'utiliser de toute façon.
La silhouette
Celui-ci est conceptuellement identique au look de scrapbooking, vous êtes essentiellement en train de casser la ligne pour que ce ne soit pas simple et ennuyeux. Cependant, un graphique entre en jeu pour ajouter beaucoup plus d'intérêt visuel.
J'aime beaucoup la manière dont ce designer a poussé les choses plus loin et a superposé les bâtiments à l'arrière-plan. Cela rend la séparation beaucoup plus complexe et impressionnante. Ne vous contentez pas d'arnaquer cette idée et de choisir des bâtiments, essayez d'autres formes que vous pourriez essayer: montagnes, eau, arbres, etc.
La superposition
La superposition est un autre moyen de séparer deux sections de manière très subtile. C'est un peu plus élégant et commun que le fade rapide.
Cela peut être facilement accompli dans Photoshop avec une opacité de calque, mais l’utilisation de CSS pour le réaliser est également simple. Assurez-vous simplement que vous déclarez votre couleur à l'aide de RGBa et définissez cette valeur alpha sur une valeur correspondant au niveau de transparence souhaité.
L'astuce de superposition est couramment utilisée dans la navigation et d'autres barres de menus, à la fois dans la conception d'applications et de sites Web. C'est vraiment une technique solide pour à peu près n'importe quel but et devrait certainement aller dans votre? Utilisation souvent? sac de trucs.
La règle (a.k.a. La timeline)
J'aime beaucoup le look de celui-ci et je le garderai certainement à l'esprit pour les projets futurs. L'exemple ci-dessous l'utilise verticalement, mais il peut également être horizontal.
Vous pouvez utiliser cette technique en tant qu'élément statique simple, mais ce concepteur est allé plus loin. Arrêtez-vous sur le site et faites défiler pour voir comment il devient un outil de navigation dynamique. Très glissant!
Cet exemple a aussi une technique de bonus, remarquez la simple ligne horizontale à un pixel. Si vous optez pour un design minimaliste, la meilleure façon de séparer deux choses est parfois de tracer une ligne! Combien cela peut-il être plus facile?
La tranche
J'ai débattu pendant un bon moment de la façon dont on pourrait appeler celui-ci. Est-ce un oreiller, une digue, une bouffée, une tranche, une ligne ou un pli? Je ne sais pas comment vous l'appelez, mais c'est plutôt cool.
Il existe plusieurs variantes de cette idée. Fondamentalement, ils visent tous à ajouter un peu de dimensionnalité à la rupture de contenu et impliquent généralement un peu plus qu'un positionnement intelligent des ombres. C'est parfait pour quand vous voulez un peu de réalisme dans votre conception.
L'évier de la cuisine
Si cet article vous fait tourner la tête en vous demandant quelle méthode utiliser pour votre projet de conception actuel, gardez à l'esprit que vous pouvez en utiliser plusieurs!
Comme pour toute chose, il est facile d'aller trop loin, mais je pense que la conception ci-dessus est un bon exemple d'utilisation de plusieurs méthodes, tout en gardant son aspect attrayant et peu occupé. Nous pouvons repérer les contrastes de couleurs, les superpositions, les lignes simples et la méthode de scrapbook, le tout dans quelques centaines de pixels d’espace!
Il y a certainement quelque chose à dire sur la cohérence et la répétition, alors assurez-vous de ne pas utiliser quelque chose de différent pour chaque section. Choisissez deux méthodes différentes et répétez-les plusieurs fois dans la conception.
Conclusion
Voilà qui résume nos dix exemples de conception de séparateurs de contenu. Cela peut sembler un peu trivial maintenant, mais croyez-moi, la prochaine fois que vous concevez quelque chose, vous allez penser à ce post et à vos différentes options pour créer une distinction visuelle!
Laissez un commentaire ci-dessous et indiquez-nous les techniques que vous utilisez régulièrement dans vos conceptions.