Navigation

Toutes les catégories

Filtrer par auteur

Voir les derniers articles

UX/UI Design : Comment utiliser les séparateurs de section ?

En UX/UI design, l’expérience utilisateur prime et une structure cohérente et lisible de vos contenus est indispensable. Elle va fluidifier la lecture et concentrer le regard de...

Publié par Elise Duret

En UX/UI design, l’expérience utilisateur prime et une structure cohérente et lisible de vos contenus est indispensable. Elle va fluidifier la lecture et concentrer le regard de l’internaute sur les informations importantes.

Pour concevoir des pages structurées, les séparateurs de contenu sont donc des éléments indispensables.

On vous explique comment utiliser les séparateurs de section pour rendre votre interface agréable à l’œil !

 

Les séparateurs de section traditionnels

Les lignes horizontales et verticales font partie des séparateurs de section les plus courants. Elles permettent de diviser efficacement les contenus denses. Pourtant, ces séparateurs de contenu peuvent vite surcharger votre interface s’ils ne sont pas employés avec parcimonie…

Les lignes horizontales

Ni trop épaisse, ni trop fine, la taille parfaite d’une ligne horizontale discrète et efficace est de 1 pixel. Elle doit se fondre dans le décor, n’oubliez pas que son but est de séparer vos contenus, pas de faire partie intégrante de vos éléments visuels.

Pour une structure équilibrée, la ligne horizontale va, soit correspondre à la largeur de votre contenu, comme sur les deux exemples suivants :

séparateur de section ligne

séparateur de section ligne

Soit se fondre jusqu’aux extrémités de la page, on parle alors de diviseur de section à fond perdu, comme ici :

séparateur de section à fond perdu

Les lignes verticales

Tout aussi efficaces que les lignes horizontales, les lignes verticales vont vous permettre de séparer des blocs de contenus côte à côte.

Vous pouvez également agrémenter votre séparateur vertical d’un petit mot explicatif pour couper le côté rigide de votre ligne.

séparateur de section ligne

Astuce
Pour vous faciliter la tâche et éviter d’avoir à centrer vos lignes, ne les coupez pas pour insérer du texte ! Créez un carré que vous viendrez positionner sur votre ligne, puis ajoutez un calque de texte. Vous pourrez ainsi mettre votre contenu en évidence en jouant sur les différentes couleurs d’arrière-plan de votre carré.

 

Des séparateurs de section plus modernes

Bien que les lignes restent des éléments de séparation efficaces, elles peuvent alourdir un contenu et ont un côté un peu désuet. Pour des interfaces au design plus moderne, privilégiez des séparateurs de section qui donnent un aspect plus fluide à votre contenu.

Jouez avec les espaces blancs

Souvent délaissés, les espaces blancs sont pourtant essentiels en UX/UI design. Ils ont l’avantage de permettre à l’œil de se reposer et surtout aérer vos contenus, donc de les séparer !

Jouez avec les espaces blancs pour démarquer vos différents éléments et désencombrer votre interface pour une meilleure lisibilité.

Voyez dans cet exemple comment le designer a travaillé les espaces blancs, les différentes sections sont parfaitement démarquées, l’ensemble est fluide et agréable à regarder.

séparateur de section

Misez sur le contraste des couleurs

Le contraste des couleurs est un élément puissant pour séparer vos différentes sections, mais attention à l’utiliser habilement !

Premièrement, le contraste doit amener de la clarté pour que l’utilisateur puisse identifier rapidement le contenu important. Voici une parfaite illustration d’un contraste bien pensé, avec des sections bien définies :

séparateur de section

Deuxièmement, les couleurs doivent respecter votre charte graphique si vous voulez donner de la cohérence à votre interface. Ne perdez pas l’internaute dans une multitude de couleurs, restez sobre.

Les couleurs sont très souvent utilisées pour séparer les menus sur les interfaces mobiles, le contraste aide à la navigation en séparant efficacement les sections comme sur l’exemple ci-dessous :

séparateur de section

Encore un exemple d’une bonne utilisation du contraste des couleurs comme séparateur de section, avec une mise en évidence du CTA intelligente.

séparateur de section

Jonglez avec les ombres et les volumes

Les ombres et les volumes vont donner une profondeur à votre interface tout en remplissant leur rôle de séparateurs de section.

L’application Calendrier de Google en est un parfait exemple, il jongle avec les contrastes et les ombres sans avoir recours aux lignes :

séparateur de section

Les ombres portées, comme sur l’exemple ci-dessous, donnent un effet d’élévation visuelle et créent une sensation de profondeur. Le résultat est visuellement efficace, les sections sont parfaitement séparées et l’ensemble est harmonieux.

séparateur de section

Adoptez les formes arrondies

Pourquoi vouloir utiliser des séparateurs de section rectilignes ? Les formes arrondies sont très tendance, notamment dans des univers plutôt froid et rigide comme la finance.

Du rose et des formes imparfaites pour séparer le contenu d’une application mobile bancaire… c’est original et on pourrait même finir par aimer faire ses comptes !

séparateur de section

Encore des courbes pour cette application bien-être, les différentes sections sont bien délimitées et l’ensemble invite à la douceur de vivre.

séparateur de section

Notre conseil
Ne rajoutez pas de séparateurs de section à une liste d’images, elles se suffisent à elles-mêmes et vous ne feriez que surcharger votre interface !

 

Vous l’aurez compris, le mot d’ordre est de structurer ses sections tout en aérant le contenu. Créer une interface cohérente est un travail minutieux et exigeant. Des graphistes professionnels sauront utiliser les séparateurs de section pour mettre votre site en valeur et améliorer l’expérience utilisateur, pensez-y !

5
/
5
(
1

vote

)
Lire la suite de l'article
Afficher les commentaires (0)

Commentaires

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Graphisme

5 astuces de design pour vos dépliants 3 volets

Comme son nom l’indique, le dépliant 3 volets est un document plié en trois parties. Il offre ainsi un large espace d’expression, composé de six...

Publié le par Solenne Ricard
Graphisme

Symbolique des formes : que signifie un logo carré ?

Nous vous avons longuement parlé de la psychologie des couleurs pour votre logo, pourtant la forme est aussi porteuse de sens pour votre marque. On ne choisit pas de mettre...

Publié le par Charlotte Chollat