Fermer

avril 1, 2019

Comment utiliser les espaces dans la conception Web avec les principes de Gestalt


À propos de l'auteur

Ayesha Ambreen est un stratège en matière de contenu créatif, auteur principal de Quora, auteur SlideShare en vedette et graphiste. Mieux connu pour ses visuels créatifs et…
Pour en savoir plus sur Ayesha

Lorsque les éléments sont disposés de manière ordonnée, l'utilisation intelligente des espaces attire notre attention sur l'espace le plus remarquable, qu'il soit positif ou négatif. Même si l'espace positif semble dominer la contrepartie négative, les deux sont utilisés à l'équilibre pour raconter une histoire harmonieuse, cohérente et parfaitement complète. Mais quel genre d'histoire les espaces racontent-ils dans la conception Web?

Les cerveaux humains sont câblés pour relier les points et donner un sens à tout ce que les yeux voient. Le design est un champ créatif où les formes et l’espace s’entremêlent pour nous prêter une variété d’expériences. Quelle que soit la conception que nous rencontrons, notre cerveau est câblé pour transformer cette pièce en composants plus simples constitués de formes de base et de formes jouant avec les espaces. Notre esprit déborde de souvenirs et – grâce à nos expériences – nous reconnaissons facilement les motifs.

L'espace – à la fois positif et négatif – joue un rôle central dans l'unification des éléments de conception. En conséquence, nous voyons un motif uniforme (ou non). Lorsque les éléments sont disposés de manière ordonnée, l'utilisation intelligente des espaces attire notre attention sur l'espace le plus remarquable – qu'il soit positif ou négatif.

L'espace positif se présente comme la chair ou la chair de la conception; c’est la partie où vous voyez les formes, les couleurs, les motifs, etc. L'espace négatif en revanche, constitue l'arrière-plan ou l'espace blanc branché (la plupart du temps).

 L'œuvre d'art populaire de Vincent Van Gogh présente un cas intéressant d'espace négatif / positif [19659008] “The Starry Night” de Vincent van Gogh </figcaption></figure>
<p> Même si l'espace positif semble dominer la contrepartie négative, les deux sont utilisés en équilibre pour raconter une histoire harmonieuse, cohérente et parfaitement complète. </p>
<p> En équilibre Les compositions, les parties positives et l’espace négatif de la conception fonctionnent ensemble et se complètent pour former un ensemble homogène et esthétique. Les compositions déséquilibrées, au contraire, peuvent gêner le public et véhiculer une histoire incomplète et plutôt déformée. </p>
<p> <strong> Mais quel genre d'histoire les espaces racontent-ils dans la conception Web? </strong> </p>
<p> Au milieu de les espaces, le succès et l'échec de la conception Web sont davantage déterminés par l'utilité et la convivialité. Considérez simplement que si vous avez de faibles compétences en conception, l’efficacité globale et la présentation de la conception Web seront perturbées. Le contenu est roi, mais d'un autre point de vue, le contenu aura des conséquences néfastes sur votre site Web si les espaces ne sont pas utilisés de manière appropriée. </p>
<p> Si vous pensez que vos compétences en développement vous débloquent, mais que vos compétences en conception pourraient nécessiter quelques améliorations viens de décrocher le jackpot. Dans cet article, nous allons couvrir: </p>
<ul>
<li> Relation espace positif / négatif, importance et mise en œuvre; </li>
<li> Le lien entre les espaces et la perception cognitive; </li>
<li> Les principes de la Gestalt et leur implication dans la conception Web. [19659017] Nous allons également aborder quelques exemples concrets de conception Web avec chaque principe Gestalt et utilisation créative des espaces. </p>
<p> Sans plus tarder, commençons. </p>
<h3 id= L'espace positif ou négatif: relation, importance et mise en œuvre [19659002] Les espaces comportent deux dimensions principales: positive et négative. Le positif est l'élément et le négatif est le non. Comme mentionné précédemment, le positif est objet, le négatif est l'espace négligeable derrière. Là où l'un est le focus, l'autre sert d'arrière-plan. Là où le premier bouge et motive, le dernier reste immobile et obscur. Où l'un est la lune, l'autre le ciel sombre qui l'entoure.

Dans la conception Web, les espaces interagissent les uns avec les autres pour maintenir l'idée de composition holistique. La hiérarchie visuelle n’est créée que lorsque les deux espaces sont différenciés par le contraste tout en ayant tendance à donner une image plus large (pensez à le yin et le yang ).

 Le symbole chinois populaire Yin et Yang
"Yin et yang ”, un concept de dualisme dans la philosophie chinoise ancienne. ( Grand aperçu )

Nous faisons la différence entre l’espace positif et l’espace négatif au point de rencontre. Le négatif apparaît principalement comme l'espace blanc qui complète le positif pour le faire ressortir.

Il peut sembler que l'espace positif prenne la tête, l'espace négatif est également important pour une multitude d'avantages. Certains de ces avantages sont:

  • Il crée une hiérarchie visuelle facile à suivre;
  • Définit le centre de l’attention et réduit la distraction;
  • Aide à établir l’échelle et à donner une plus grande focalisation; [19659015] Il améliore la capacité de numérisation des pages;
  • Donne un aspect naturel au déroulement de la page;
  • Il clarifie la relation entre les éléments visuels sans recourir à des aides supplémentaires;
  • Il permet de désencombrer la page; 19659015] Améliore le style et l'apparence de la page Web.

L'espace négatif dans la conception n'est pas si négatif si vous me demandez. Cependant, les deux types d’espace fonctionnent parfaitement lorsqu'ils sont utilisés dans un rapport équilibré. Malheureusement, le chaos ne frappe que lorsque l’un ou l’autre domine l’autre et donne une impression de «surpeuplement» ou de «manque». Dans les deux cas, le public est incapable de traiter des informations aussi complexes, d'où la motivation d'utiliser un espace de manière créative pour la conception Web.

Voici un modèle Web avec un contenu égaré ou un espace de «chaos»:

 Voici:
Nous avons traduit le modèle de site Web ci-dessus en noir et blanc pour afficher les divergences dans l'espace « />
. Les différences en matière d'espace sont indiquées en noir et blanc. et blanc ( Grand aperçu )
 Nous avons ici un espace fixe pour montrer comment l'espace peut provoquer de la clarté et de l'uniformité lorsqu'il est utilisé proportionnellement
L'espace fixe pour montrer comment de l'espace peut provoquer de la clarté et de l'uniformité lorsqu'il est utilisé proportion ( Grand aperçu )
 Utilisation efficace de l'espace en conception de sites Web
Utilisation efficace de l'espace en conception de sites Web ( Grand aperçu )

Aussi fascinant que le concept et arrangement de l'occu Le doute commence à embuer la surface.

  • L'espace positif est-il entouré par le négatif ou l'espace négatif est-il dévoré par le positif?
  • Comment détermine-t-on la proportion de chaque type d'espace?
  • Est-il obligatoire de surligner l'un et d'éclipser l'autre pour communiquer la perception souhaitée au public?
  • Comment pourrais-je réaliser le «nirvana de la conception» avec la communion d'espaces positifs et négatifs?

Les questions comme celles-ci ne peuvent être répondues qu'avec une compréhension claire des bases. Et selon la règle d'or: la simplicité est la meilleure politique ( nous l'avons inventée parce qu'elle convient! ).

Nous avons mentionné au début que la conception Web était tout. créer une interface utilisateur simple qui aide votre auditoire et vous-même à tuer plus d'une pierre deux coups, ou littéralement, contribue à accroître l'intérêt visuel de la conception du site Web tout en la rendant efficace et facile à utiliser – oui, avec un pouvoir incroyable sur l'utilisation des espaces.

La connexion entre les espaces et la perception cognitive

Puisque notre esprit joue toujours le rôle du détective pour trouver des indices cachés et des liens manquants entre les espaces, il compare les visuels actuels à ceux vécus auparavant. une partie du processus cognitif. Pour devenir un concepteur Web efficace, vous devez d'abord comprendre comment le cerveau fait attention à son environnement. Cela peut vous aider à comprendre l’utilisation particulière d’éléments visuels et à les utiliser pour influencer la perception du spectateur.

«Les grands concepteurs comprennent le rôle puissant que la psychologie joue dans la perception visuelle. Que se passe-t-il quand un œil rencontre vos créations? Comment leur esprit réagit-il au message que votre pièce partage? »

Laura Busche stratège en contenu de marque chez Autodesk

Vous devez maintenant avoir une idée claire du lien entre design visuel et psychologie et ont le pouvoir de s'influencer les uns les autres. En d'autres termes, l'idée de développer une interface simple centrée sur l'utilisateur et d'utiliser un espace pour sa conception repose sur les principes de Gestalt. Celles-ci peuvent vous aider à comprendre et à contrôler le lien visuel-psychologique.

Lectures recommandées : Améliorez vos conceptions avec les principes de similarité et de proximité

Principes de Gestalt dans la conception Web

Gestalt est l'allemand pour 'formes'. C'est plus un concept qu'un mot qui dit:

«Le tout n'est pas la somme des parties.»

– Kurt Koffka

Un ensemble d'unités individuelles nous apparaît comme un groupe. quand ils sont unifiés d'une certaine manière. Nous voyons les éléments en tant que groupe malgré leur individualité. Ce concept ou cette théorie s’applique fondamentalement à tous les supports de conception: nous ne considérons pas le texte, les couleurs et les formes comme des éléments distincts, mais une page Web entière comme une entité collective. La même chose s’applique à une forêt: nous ne voyons pas seulement un tas d’arbres, mais nous ne voyons pas les gouttes d’eau quand nous regardons un océan.

Les principes de Gestalt décrivent comment l'esprit humain perçoit les composants visuels lorsque certains termes et conditions sont appliqués. Cela aide le cerveau à créer des images du visuel. Ainsi, les principes de Gestalt sont basés sur six catégories principales:

  1. Figure And Ground
  2. Proximité
  3. Symmetry And Order
  4. Fermeture
  5. Continuité

Figure et sol

La "figure" est l'objet qui est intuitivement et visiblement séparé du sol. ] Espace négatif par rapport à une image positive dans une coupe du Graal « />

Coupe du Graal ( Grand aperçu )

L'exemple le plus classique qui existe est celui de la coupe du Graal – le vase situé entre deux silhouettes faciales en miroir. Lorsque vous rencontrez cette image pour la première fois, vos yeux sont attirés par l'objet visuel le plus focalisé qui vient immédiatement à votre notification, à savoir les visages qui s'opposent ou le vase. Pendant que votre esprit ajuste votre focalisation, le sol ou le vase est estompé et à ce moment-là, votre esprit supprime intuitivement le négatif ou le sol de l'image.

Au bout d'un moment, vous remarquerez le vase dans le fond et se rendre compte qu'il était là en premier lieu. Aussi ambigu que soit le principe de la figure et du sol les concepteurs créent habituellement des dessins et des dessins artistiques et web surréalistes et illusoires, attrayants.

 Image illustrant la relation figure-terrain
Relation figure-fond ( Grand aperçu )

Parfois, la relation entre figure et terre est stable, ce qui permet de les distinguer l'une de l'autre. Cette relation est parfois instable, ce qui signifie que la figure et le fond sont indiscernables. En raison de l’ambiguïté de cette relation, les téléspectateurs doivent faire face à une confusion des perceptions.

Pour vous donner une idée précise de l’influence de la relation image-fond sur la conception Web, examinons quelques exemples en détail. Chacun de ces exemples porte sur trois domaines principaux de la relation figure-terre : Vous pouvez ajouter des repères visuels explicites à l'aide de contrastes, de zones et d'ombres pour votre conception de sites Web. Ces techniques sont utilisées pour distinguer la couleur, la taille et le niveau de détail, pour séparer le contenu et pour ajouter de la profondeur à l'objet de la mise au point respective.

Dans le premier exemple ci-dessous, Trellis utilise un "image de héros" (images avec des CTA claires) avec une relation figure-fond qui indique clairement le niveau de détail, la couleur et la taille.

 Le site Web Trellis présente un bon exemple de relation figure-fond
Trellis ( ] Grand aperçu ) ( Source de l'image )

Le texte est la figure ici dans une grande police cursive au centre de la page, le rendant ainsi visible par rapport à l'image à l'arrière-plan . Le texte blanc au-dessus de l'image en niveaux de gris contrastés attire l'attention, ce qui rend le texte visible par-dessus. D'un autre point de vue, l'arrière-plan est flou afin que le texte apparaisse comme la figure. Tous ces aspects montrent que le texte ici a la priorité en tant que figure ou espace positif tandis que l'image floue est utilisée comme arrière-plan ou espace négatif, impliquant ainsi fortement le concept de figure et de fond. [19659005] Ensuite vient le contenu dans des boîtes. Ocean Health Index utilise judicieusement le contenu encadré pour séparer le chiffre de l'arrière-plan. Voici ce que vous voyez sur leur site Web:

 Le site Web Ocean Health Index montre comment utiliser à la fois la figure et le sol dans la conception Web.
Indice de santé Ocean ( Grand aperçu ) Source de l'image )

Quelle partie de celle-ci vous saute aux yeux lorsque vous visualisez cette page pour la première fois? Si vous me le demandez, il s’agit du texte principal en blanc dans le coin supérieur droit et des deux zones de couleur et de texte contrastés. Le texte blanc en gras sur le dessus est évidemment la figure. (Remarquez comment elle est placée sur l’image plus sombre pour se démarquer.) Les cases en bas font également partie de la figure, en raison du contraste qu’elles offrent à l’image au sol. L’autre aspect de cette figure est le deuxième contraste placé dans les cases sous forme de texte de couleur contrastive.

L’arrière-plan utilise des nuances subtiles qui permettent aux figures d’apparaître nettement, montrant ainsi un motif de détail ici. Les zones chevauchent également l'image d'arrière-plan, ce qui les rend clairement visibles.

Certains sites Web montrent également la relation figure-fond en ajoutant des ombres portées à la figure, afin de donner l'impression que la figure est placée au-dessus. l'arrière-plan. Voici une capture d'écran de Sérieusement non sucré :

 Le site Web de Seriously Unsweetened utilise la représentation graphique équilibrée sur son site Web
Sérieusement non sucré ( Grand aperçu ) ( Source d'image )

La page de renvoi de Seriously Unsweetened utilise plus d'une technique pour maintenir cette relation figure-terre de manière équilibrée. Il y a des couleurs vives et des ombres. Le sol reste blanc, ce qui permet à la figure d'apparaître plus facilement au-dessus du sol. Dans l’espace positif, les objets de la figure se présentent sous l’illusion d’être «au sommet» de l’arrière-plan. Le jeu de l'ombre se joue à l'intérieur de la figure principale, ce qui nous fait remarquer qu'il existe une autre relation figure-terre dans la figure principale. Un astucieux!

La proximité

La proximité fait référence à la proximité d'éléments dans une page. Différents éléments dans les pages Web peuvent être regroupés pour créer une association plus grande. En plus d'être similaires, la proximité de ces éléments les uns avec les autres sera automatiquement associée à l'esprit du spectateur.

 L'image représente la proximité dans le graphisme
La proximité du graphisme ( Grand aperçu ])

Des images aux textes, des barres de navigation aux formulaires Web, le principe de proximité s’applique beaucoup à la conception Web. Lorsque vous regroupez du contenu similaire, vous créez une relation homogène entre les éléments et vous offrez une meilleure expérience visuelle au spectateur.

Voici un exemple de proximité tel qu'affiché dans la navigation du site Web Mashable :

 Le site Mashable présente le principe de proximité
Mashable ( Grand aperçu ) ( Source de l'image )

Dans l'instantané ci-dessus, vous pouvez clairement voir comment les éléments du même catégorie sont placés ensemble pour montrer la relation avec le type de menu principal. Les yeux des utilisateurs sont automatiquement attirés par les sous-types de la rubrique principale – également grâce à l’utilisation de couleurs et de la taille du texte . Vous pouvez voir que les éléments non liés sont séparés à l'aide d'une ligne, qui sert de guide à l'utilisateur pour mettre en relation et séparer les éléments selon le principe de proximité.

Outre le tracé de la barre de navigation, la grille contenu basé sur respecte également la règle d'or de la proximité. La liste de produits d'Amazon en est le meilleur exemple:

 Les pages de produits Amazon utilisent également le principe de proximité
Les produits Amazon ( Grand aperçu ) ( Image source )

La proximité est conforme à la similarité, ce qui reste à discuter. Comme vous pouvez le constater, les produits similaires dans l’espace positif sont regroupés et séparés par un espace blanc réduit. Cela indique à l'utilisateur de trier son article préféré de la liste des produits similaires. De plus, le principe de fermeture entre également en jeu dans la liste des éléments similaires.

Maintenant, examinons de plus près le formulaire Web Basecamp qui affiche un autre cas idéal de proximité dans le Web. design:

 Fait intéressant, le formulaire Web Basecamp utilise également la proximité des détails du formulaire.
Le formulaire Web Basecamp ( Grand aperçu ) ( Source de l'image )

Vous pouvez remarquer comment le formulaire est divisé en deux segments principaux: les détails personnels et la génération d'identifiant. La première section est considérée comme le domaine le plus important, suivie par une exigence moins importante. Les titres des deux sections varient, comme le montre la différence de couleur et de taille de police. Dans ce formulaire Web, la proximité est un indicateur qui place et priorise le regroupement d'informations de la plus haute importance à la plus petite importance.

Symmetry and Ordery

La symétrie fait référence au reflet exact ou à l'image réfléchie des deux plans opposés. Cela peut être considéré comme la balance qui divise un objet en deux moitiés égales. Les exemples concrets de symétrie incluent des images géométriques telles que des triangles, des cercles et des carrés équilatéraux, etc.

 Voici une distinction nette entre le dessin symétrique et asymétrique
Symétrie et asymétrie ( Grand aperçu )

L'esprit humain désire trouver «l'équilibre» dans les visages humains ce qu'il trouve esthétiquement agréable. L'esprit a également tendance à rechercher la symétrie dans d'autres objets, tels que les images, car celle-ci crée une harmonie et permet aux téléspectateurs d'être à l'aise lorsqu'ils regardent l'image.

Voici un excellent exemple de symétrie dans la conception Web présentée par . HvD Fonts :

 Un bon exemple de symétrie dans la conception Web est le site Web de HvD Fonts
Les polices HvD ( Grand aperçu ) ( Source image )

Non. cette page Web montre seulement une relation figure-terrain typique, mais affiche également une grande symétrie. La page est divisée en quatre moitiés égales avec des polices de taille et de couleur similaires. Le fond de chacune des quatre sections suit le même thème avec un effet de niveaux de gris. Vous pouvez également remarquer que l’espace négatif n’est pas nécessairement blanc; C’est l’image à l’arrière-plan.

L’idée de symétrie donne naissance à une autre notion: L’asymétrie peut être source de confusion et doit être utilisée avec précaution lors de la conception de sites Web . De nombreux sites Web utilisent l'asymétrie comme principal élément d'équilibrage de l'espacement, l'espace positif non conventionnel étant équilibré avec un arrière-plan neutre, et inversement. Et selon le concept d'asymétrie, Xplode Marketing incite à l'asymétrie avec une esthétique unique qui réjouit les yeux.

 Le site Web Xplode Marketing incite à l'asymétrie avec placement créatif
Xplode Marketing ( Grand aperçu . ) ( Source de l'image )

Cette page Web intercepte immédiatement l'œil à l'aide d'illusions d'optique et d'asymétrie. Les objets spatiaux positifs sont placés dans un motif inhabituel sur l'espace négatif qui crée l'appel. La couleur est le principal indicateur de l'harmonie entre les deux espaces et développe une connexion naturelle que les spectateurs peuvent remarquer. Il existe également un bon équilibre entre les graphismes de la main gauche et les ailes fortes et dominantes du côté droit. Qu'en pensez-vous?

Similarité

La raison pour laquelle la proximité est étroitement liée au principe de similitude est la qualité des attributs partagés entre les objets regroupés de la même manière. Qu'il s'agisse de couleur, de forme, de posture, de taille, de forme, d'orientation ou de toute autre propriété, la connexité prévaudra lorsqu'un ou plusieurs d'entre eux sont partagés dans tous les objets affichés à proximité.

 L'image montre comment des éléments similaires se regroupent [19659023] Similarité dans la conception (<a href= Image agrandie )

Même si les éléments d'espace positifs ne semblent pas reliés de manière visible, ils se distingueront de ceux négatifs en raison du principe de similitude.

Il suffit de regarder UrbanDecay liste un jour les palettes:

 Les produits Urban Decay sont un exemple classique de similitude de conception
Urban Decay ( Grand aperçu ) (. Image source )

Les espaces positifs, c’est-à-dire que les chiffres sont différents les uns des autres, mais partagent certaines similitudes sous divers aspects tels que leur position, leur couleur, la présentation du produit et leur mode de présentation. Le seul objet dissemblable est la publicité pour l’apprêt pour fards à paupières qui se démarque uniquement dans la catégorie des produits similaires. Il s'agit évidemment d'une tactique marketing destinée à attirer l'attention sur sans nuire à la symétrie globale et à la beauté de la page. Un autre point à prendre en compte ici est que la similarité de taille distingue l'autre image de la catégorie de produit similaire.

Hormis le seul affichage du produit, l'espace positif peut être utilisé avec la similarité conjointement avec l'espace négatif.

jetez un coup d'œil à la page de renvoi influenster :

 Le site Web Influenster applique le principe de similarité pour rendre le design plus clair.
La page de couverture d'Influenster ( Grand aperçu ) ( ] Source de l'image )

La similitude dans l'exemple ci-dessus montre des cases clairement alignées. Bien que les produits dans chaque espace positif soient différents, la perception de similarité est traduite par les champs de texte cohérents de la page globale. Le genre, la mise en page et le thème sont tous similaires, ce qui confère un effet transparent à la vision.

Closure

Avez-vous déjà vu une image qui semble proche mais qui est ouverte? C'est à cause du principe de fermeture. Notre cerveau a tendance à «combler» les lacunes dans les objets incomplets et à utiliser notre perception visuelle pour compléter la figure, en la considérant dans son ensemble.

 Un exemple parfait de fermeture où quatre cercles se rejoignent pour former un carré
Fermeture in design ( Image agrandie )

Les espaces positifs et négatifs se ferment pour former un ensemble . Le meilleur exemple est celui des formes cachées dans l'espace négatif à l'intérieur et à l'extérieur du dessin, ce qui nécessite une évaluation intelligente du message dans le dessin. Utiliser les deux espaces de manière créative dans la fermeture peut donner lieu à un design intéressant mais simplifié.

Regardez la capture d'écran de Magu Kambucha ci-dessous:

 Les relations entre les figures et les principes de fermeture, ainsi que les principes de fermeture en main sur le site Web de Magu Kambucha
Magu Kambucha ( Grand aperçu ) ( Source de l'image )

Dans cet exemple, vous pouvez voir que la fermeture est maintenue intacte avec le principe de la relation figure-terrain. Les bouteilles et le texte en gras derrière sont clairement la figure, où l’arrière-plan est rose pâle. Où est la fermeture? Voir le texte derrière les bouteilles? Vous ne pouvez pas le voir complètement, mais vous savez toujours que c’est le «Kambucha». À l’exception du premier «K» et du dernier «A», d’autres lettres sont à moitié cachées, complétées intuitivement et la forme entière commence à prendre forme et, par conséquent, à la signification. Ceci, mon ami, est un bon exemple de fermeture que nous avons ici!

Jetez un coup d’œil à la capture d’écran de Cult ci-dessous:

 Le titre du site suit le principe de la fermeture pour ajouter un effet dramatique. vers l'animation dans l'en-tête du site Web
Site Web CULT ( Grand aperçu ) ( Source de l'image )

Même si le texte n'est pas énoncé clairement, notre esprit peut facilement lisez le mot CULTE. La disposition et l'alignement du texte facilitent le déchiffrement, même lorsque les mots sont incomplets.

Continuity

Enfin, conformément aux principes généraux de la Gestalt, la continuité suit le modèle en conduisant les yeux à suivre un chemin cohérent et établir un motif linéaire d'un objet à l'autre. On peut le mieux comprendre l’exemple d’une ligne d’espace positif avec une courbe sur l’espace négatif. Les couleurs des deux lignes indiquent que les lignes se sont courbées l'une par l'autre, mais le motif de continuité suggère le contraire.

 Représentation de la ligne continue
Continuité de la conception ( Grand aperçu )

Dans l’image ci-dessus, les spectateurs sont plus enclins à voir une ligne droite malgré la dégradation de la couleur. Cela nous porte à croire que le principe de continuité guide la perception mieux que le pouvoir de la couleur . Ce concept coule à travers les deux types d'espaces. Lorsque nous insérons un sujet dans l'espace négatif, nos yeux ont tendance à tracer une ligne de distinction entre l'espace positif et l'espace négatif.

La ligne de continuité imaginaire est ce que nous avons tendance à introduire dans le dessin pour guider notre perception lorsque différencier l'espace positif de l'espace négatif.

Reprenons l'exemple du site Web Crypton Trading ci-dessous:

 Le modèle sur le site Web de Crypto Trading illustre bien la poursuite de la conception
Crypton Trading ( Grand aperçu ) ( Source de l'image )

Voir la suite parfaite du dessin dans la moitié droite de la page? Indépendamment de la teinte claire et sombre en arrière-plan, le motif est assez évident sur la page. Et lorsque vous faites défiler l'écran, vous verrez comment le motif ainsi que la couleur changent d'un mouvement continu et homogène. Le changement de tons est négligeable ici et tout ce que nous voyons est un motif continu de lignes et de points.

Un autre bon exemple est le site Web OscilloScope :

 Le site Web OscilloScope présente également la loi de la continuité Vue à 360 degrés de leur studio
Site Web OscilloScope ( Grand aperçu ) ( Source de l'image )

Le site Web utilise la loi de la continuité pour amener les visiteurs sur Internet à 360 ° degré de vue du studio où ils peuvent naviguer jusqu'à la section souhaitée

 Le site officiel du film 'Cargo' utilise également la loi de la continuité pour naviguer entre les utilisateurs
Cargo the movie ( Grand aperçu ) ( Source de l'image )

Le film Cargo comporte une page de destination qui utilise également la loi de la continuité: son texte flotte sur le site Web de manière linéaire à l'aide de la navigation par défilement uniquement. Le logo à moitié visible étant affiché verticalement, le téléspectateur doit faire défiler l'écran pour obtenir une vue complète. Au fur et à mesure que la page défile, le logo statique commence à flotter avec les fragments de texte parallèles. La navigation guide l'utilisateur à travers différents niveaux d'expérience sans perturber l'obscurité qui se cache au-dessous.

Puisque nos yeux suivent généralement le chemin le plus lisse, les graphistes peuvent utiliser ces exemples pour les amener à suivre le chemin souhaité et à positionner les éléments le long d'une ligne.

En résumé

Dans cet article, nous avons abordé les principes de la Gestalt en relation avec les espaces positifs et négatifs des sites Web. Nous nous sommes également assurés d'inclure des exemples concrets pour vous donner une idée précise de la manière dont vous pouvez utiliser des techniques simples mais efficaces pour influencer la perception de votre public. La clé ici est d’utiliser ces principes pour créer un design Web qui apparaît plus que la somme de ses parties.

Nous, les hommes, pensons en termes de notre perception – principalement basée sur des éléments visuels. Selon les principes de la Gestalt en ce qui concerne les espaces positifs et négatifs, nous avons tendance à avoir une vue d'ensemble au premier abord plutôt qu'aux éléments individuels.

Les espaces positifs et négatifs nous aident à nous différencier, nous aident à nous rappeler nos expériences et à reconnaître les modèles. Grâce aux principes de la Gestalt, nous sommes mieux en mesure de visualiser à quel point nous pouvons utiliser les espaces dans la conception Web pour créer des éléments attrayants. Puisque les espaces peuvent apparaître comme une affaire enchevêtrée pour tout concepteur, le meilleur moyen est de garder intacts vos principes de Gestalt. C’est la seule façon pour vous de vraiment réaliser l’importance, l’utilisation et l’efficacité des espaces dans vos conceptions et de devenir un contributeur efficace dans le domaine de la conception Web.

Vous voulez ajouter autre chose? N'oubliez pas de partager vos idées. Nous aimerions beaucoup recevoir vos commentaires!

Pour en savoir plus

Voici quelques sources de conception pour vous aider à comprendre les principes de la Gestalt:

N'oubliez pas de consulter les didacticiels recommandés:

 Editorial Smashing (il)




Source link