1. La similarité

www.youtube.com

Les miniatures des vidéos ont toutes la même taille et les mêmes caractéristiques semblables, même quand on passe la souris au dessus ça se passe la même interaction pour toutes les miniatures.

www.rtbf.be

Les boutons du menu ont une apparence similaire (couleur du texte, fond, taille, espace entre les boutons..).

2. La proximité

www.font.google.com

Les éléments sont sont placés côte à côte ce qui donne l’impression qu’ils font partie du même bloc.

www.wish.com

Les éléments entouré sont placés approximativement coté a coté ils forment un groupe global.

3. La clôture

Le cerveau humain est capable de combler les vides d’une forme si il n’en perçoit qu’une partie afin de l’a percevoir dans sa totalité.

www.apple.com

Sur le site d’Apple on peut voir qu’une partie de l’iPhone XS est coupé mais puisque on voit la forme du téléphone du coté gauche on peut bien l’imaginer dans sa totalité et combler le vide.

www.coolcat.be

La partie gauche de l’image est coupé, notre cerveau va tenter à faire une symétrie et imaginer le coté gauche de la veste regardant le coté droit.

4. La symétrie

www.celio.com

Les éléments des deux parties sont semblables selon l’axe de symétrie tracé en rouge.

www.pepsi.be

La même chose sur le site de Pepsi on peut remarquer que les 2 parties coupées par la ligne rouge sont symétriques.

5. La continuité

www.belgiumpayment.com

Sur le site de Belgiumpayment on peut voir que les petites images qui sont rapprochées, nous les percevons dans une continuité l’une après l’autre.

www.youtube.com

Les miniatures sont rapprochées elles représentent des formes lorsqu’elles sont perçues, on peut voir une continuité des miniatures sur l’axe x dans le sens de lecture.

5. Fond / Figure

Le principe qui nous fait percevoir en premier la forme distincte d’un élément, puis une autre forme derrière.

www.proximus.be

Les blocs ont un background de couleur différentes qui permet de les séparer et les distinguer l’un de l’autre.

www.coolcat.be

Le designer de ce site à utiliser un fond rouge qui nous marque bien l’attention sur la phrase “soldes jusqu'à 70%“ pour nous l’a faire percevoir en premier.

6. Point focal

C’est le fait de mettre un élément en avant afin d’attirer l’œil de l’utilisateur.

www.coolcat.be

Le texte en grand positionné au milieu de la page, avec une couleur blanc sur fond rouge, ce qui nous attire l’attention une fois arriver sur le site.

www.zara.com/be/fr/

Le texte en grand en couleur blanche positionné au milieu de la page et un peu vers le bas pour ne pas cacher les visages des mannequins, il est présent sur tous les slides ce qui attire l’oeil de l’utilisateur pour passer le message que les vêtements de la marque Zara sont en solde.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store