Améliorez vos conceptions avec les principes de fermeture et de figure-Ground (Partie 2)

à propos de l’auteur

Jon a été concepteur visuel pendant de nombreuses années avant de faire le saut vers la conception d’interaction., Il est titulaire D’une maîtrise en Interaction homme-ordinateur de DePaul More en savoir plus surjon

• 12 min de lecture
• Inspiration,Design,créativité,principes de conception
• enregistré pour une lecture hors ligne
• Partager sur Twitter, LinkedIn

Avez-vous jamais demandé comment les éléments sont réunis pour créer des conceptions réussies? Ce n’est pas un hasard si un design convaincant semble fonctionner., Ce que la plupart de ces conceptions ont en commun, c’est l’utilisation de principes de regroupement gestalt pour organiser l’information qui nous aide à comprendre les relations et les différences entre les éléments. En tant que designers, nous pouvons utiliser ces principes pour créer notre propre travail engageant et réussi.

commençons par le principe Gestalt de fermeture.

fermeture

selon les principes universels de conception, ce principe stipule que nous avons tendance à percevoir un ensemble d’éléments individuels comme un motif unique et reconnaissable, plutôt que plusieurs parties individuelles., L’utilisation de la fermeture diminue efficacement la complexité en réduisant les éléments au moins de pièces possibles nécessaires pour compléter un objet. Fourni avec suffisamment d’informations, nous allons remplir les parties manquantes pour créer un tout. Ceci est réalisé grâce à l’utilisation de l’espace positif et négatif.

Dans l’exemple ci-dessous, nos esprits compléter les lignes pour former un cercle, même si la forme n’existe pas. L’espace positif et négatif se combinent pour former notre perception du cercle.,

de Fermeture peut être utilisé pour faire de nous les percevons des objets ou des motifs en utilisant la plus petite quantité d’informations. Nos esprits sont si désireux de compléter les informations manquantes que cela peut être fait avec très peu d’éléments. Cependant, si nous ne fournissons PAS ASSEZ d’informations pour compléter le motif, nous ne pouvons pas percevoir l’objet et la fermeture échoue, ce qui rend le cercle beaucoup plus difficile à former dans notre esprit. Jetez un oeil et voyez si vous pouvez le compléter dans votre esprit. Il est beaucoup plus difficile, n’est-ce pas?, Nous ne pouvons pas tout à fait le mettre ensemble maintenant avec la quantité clairsemée d’informations données.

création D’une fermeture efficace

Les exemples ci-dessus sont des illustrations très simples de la façon dont nous percevons les motifs pour former une fermeture. En réalité, il existe de nombreux éléments visuels que nous pouvons utiliser pour nous aider à former une fermeture efficace:

• espace positif et négatif. Comme mentionné précédemment, l’espace positif et négatif se combinent en fermeture pour former un tout., Cela peut être réalisé en recherchant les formes cachées dans l’espace négatif d’un design ou dans le type. De plus, la suppression d’éléments du premier plan peut créer des formes négatives intéressantes et, ce faisant, simplifier un design.
• Contraste. La clé pour former la fermeture est de créer un fort contraste entre les éléments de premier plan et l’arrière-plan. Comme toujours, le noir et blanc crée le meilleur contraste, mais vous pouvez également expérimenter avec des couleurs complémentaires pour un contraste fort.
• Couleur., La couleur ajoute non seulement de la vie à un design, elle peut également être utilisée pour renforcer les relations, en particulier si vous utilisez des formes abstraites pour représenter des formes.

All closure utilise beaucoup, sinon tous les éléments visuels ci-dessus. L’utilisation de ceux-ci et l’expérimentation de la réduction de vos conceptions vous aideront à découvrir de nouvelles formes. Jetons maintenant un coup d’œil à la fermeture dans le monde réel et voyons comment tout cela se réunit.

fermeture dans la pratique

en utilisant la fermeture, nous pouvons réduire les éléments nécessaires pour transmettre des informations visuelles, réduire la complexité et rendre les conceptions plus attrayantes., L’une des utilisations les plus courantes de fermeture est dans la conception de logos d’entreprise, précisément parce que la fermeture peut simplifier un dessin pour transmettre rapidement une marque d’identité.

ci-dessous est le célèbre logo que nous reconnaissons comme le paon NBC. En comparant le logo actuel (à droite) avec l’ancien logo, vous pouvez voir qu’ils ne sont pas très différents. Mais en réduisant les éléments et en travaillant avec l’espace négatif, le logo actuel devient beaucoup plus simplifié et élégant., La fermeture est réalisée avec succès en utilisant des formes positives étroitement groupées comme des plumes, avec notre perception du corps du paon formée par l’utilisation de l’espace blanc négatif au milieu.

Un autre logo bien reconnu qui utilise la fermeture avec succès est de FedEx., Dans ce logo, la fermeture est réalisée avec un espace blanc négatif, en utilisant les parties du E majuscule et du x minuscule pour former la flèche vers l’avant familière. Le concepteur a expérimenté avec de nombreux modèles, tirant finalement les lettres de plus en plus proches jusqu’à ce qu’il voit la flèche se former entre le e et X. Cela montre que l’expérimentation de la réduction de vos dessins, et la recherche des espaces entre les deux, peut donner des résultats fantastiques. Pour l’histoire derrière la création du logo, consultez le grand article de Matthew May à Fast Company. Pouvez-vous voir la flèche dans le logo?, Vous ne le manquerez plus à partir de Maintenant!

Les exemples ci-dessus sont des logos bien connus qui utilisent la fermeture de manière assez évidente. Cependant, il existe des logos moins célèbres qui utilisent la fermeture plus subtilement. Par exemple, Houzz utilise la fermeture de manière plus conceptuelle. À première vue, les formes vertes, noires et blanches peuvent ressembler à une étagère, à une partie d’un bâtiment ou à un motif mural, suggérant de quoi parle le site web., Mais un examen plus approfondi révèle également autre chose. Le désir de notre esprit de remplir les espaces et les motifs complets nous permet de combiner les formes séparées en un tout, formant un H majuscule dans l’espace tridimensionnel.

bien que la fermeture soit idéale pour la création de logos intéressants, elle peut également fonctionner d’autres manières., Les sites Web peuvent également utiliser un espace positif et négatif dans la conception de leurs interfaces pour produire une fermeture efficace. Ci-dessous, le logo Uncrate utilise un espace positif sur un fond noir négatif pour former les lettres de son logo et créer l’image de marque du site. C’est aussi un bon exemple de figure-ground que nous allons aborder sous peu.

Utilisation de la fermeture lors de la création D’icônes

Les icônes sont utiles lorsque nous devons transmettre un message ou renforcer un concept dans un petit espace. Ils doivent être simples et dépouillés de leurs éléments de base pour aider les gens à comprendre rapidement leur signification. Closure fonctionne bien dans la création d’icônes, utilisant l’espace positif et négatif pour diminuer la complexité, tout en suggérant des formes ou des objets que nous percevons comme des entiers, comme dans ces exemples du site Web du projet Noun.,

fermeture abstraite

la fermeture peut devenir assez abstraite et nous permettre de former des motifs reconnaissables. Une de mes utilisations préférées de la fermeture est dans le Google doodle., Google utilise souvent la fermeture dans ses doodles, en s’appuyant sur notre besoin inhérent de remplir les informations manquantes pour créer un objet entier. Google doodles dépend de notre familiarité avec le logo Google qui nous permet de lire l’image ci-dessous malgré contenant des formes très abstraites. Ici, la couleur contribue également à renforcer la relation entre chaque lettre du logo de Google.,

comme vous pouvez le voir, en utilisant l’espace positif et négatif de manière créative, et en réduisant les éléments dans nos conceptions, nous pouvons créer des conceptions vraiment intéressantes avec fermeture. Nous pouvons profiter de la nécessité de remplir les pièces manquantes pour diminuer la complexité et simplifier nos conceptions., Ensuite, nous examinerons comment nous pouvons utiliser l’espace positif et négatif pour créer de bonnes relations figure-sol.

Figure-fond

Quel est le principe de la figure-sol? Selon les principes universels de la conception, figure-sol est l’état dans lequel nous percevons les éléments comme les objets de mise au point ou l’arrière-plan. Comme la fermeture, figure-ground fonctionne à travers l’utilisation de l’espace positif et négatif. Figure-ground existe dans pratiquement tout ce que nous percevons visuellement, qu’il s’agisse d’une scène, d’une composition, d’un site web, d’un logo ou d’une icône.,

Figure-ground est stable lorsque les objets se distinguent de l’arrière-plan et que l’arrière-plan ne présente aucun intérêt. Figure-sol Stable fournit un cadre pour les objets et nous permet de concentrer l’attention où nous le voulons. Par exemple, nous percevons l’image ci-dessous comme un cercle sur un fond. Le cercle est le centre et retient notre attention tandis que le fond est de peu d’intérêt. Cet exemple présente une forte stabilité figure-sol car la figure a une forme et est perçue comme devant, tandis que l’arrière-plan est informe, continuant derrière la figure à une plus grande profondeur.,

Quand la figure-sol n’est pas stable, comme dans l’exemple ci-dessous, l’ambiguïté de la perception est introduit et les relations entre les éléments deviennent floues. Dans cet exemple délibérément trop simplifié, la figure et le sol sont réversibles, ce qui nous amène à alterner entre voir un élément, puis l’autre comme la figure, puis le sol.

Cependant, l’ambiguïté n’est pas nécessairement une mauvaise chose., Ce manque de stabilité peut être utilisé à notre avantage lors de la conception. Déstabiliser délibérément la relation figure-sol peut introduire de la discorde ou de la tension, ajoutant de l’excitation et de l’intérêt à nos conceptions. L’une de mes utilisations préférées de cette tension dans figure-ground est dans la série D’affiches Criminal Underworld de Simon C. Page. Ici, Page déstabilise délibérément la figure et le sol, opposant le principe à lui-même alors que la figure et le sol se battent pour notre attention, tout comme le héros et le méchant de l’affiche se battent l’un contre l’autre.,

créer de bonnes relations Figure-Sol

Il existe de nombreux éléments visuels que nous pouvons utiliser pour renforcer la relation figure-sol dans nos conceptions. L’utilisation de ces éléments peut nous aider à concentrer l’attention là où nous le voulons, en aidant à la mémorisation d’un site web ou d’un autre design:

• Contrast., Le blanc ou le noir, associé à la couleur, comme on le voit dans les affiches de la pègre criminelle, crée un contraste très fort. De même, les couleurs complémentaires sont excellentes pour créer un contraste. Si les couleurs pures sont trop intenses, Modifiez la valeur (à quel point la couleur est sombre ou claire) pour créer un contraste plus efficace.
• Couleur. Les couleurs chaudes, telles que les jaunes, les oranges et les rouges, sont perçues comme approchant et peuvent être utilisées pour renforcer la silhouette. Les couleurs froides, telles que les violets, les bleus et les verts, sont perçues comme reculant et peuvent être utilisées pour renforcer le sol.
• la Taille., Lorsqu’un grand élément remplit la majorité du sol, il sera perçu comme la figure. Inversement, un petit élément dans un grand terrain sera perçu comme la figure.
• Position. Les éléments positionnés dans les zones inférieures seront perçus comme une figure tandis que les éléments positionnés dans les zones supérieures seront perçus comme un sol. Cela joue avec notre perception de la distance, car nous percevons des objets positionnés dans les zones inférieures pour être plus proches de nous et des objets positionnés dans les zones supérieures pour être plus éloignés.
• mise au point., Les éléments qui sont au point seront perçus comme une figure tandis que les éléments qui sont flous, flous, fanés ou teintés seront perçus comme un sol.

La plupart des bonnes relations figure-sol sont créées avec une combinaison de plusieurs de ces éléments visuels. Ensuite, jetons un coup d’œil à quelques exemples du monde réel et voyons comment ces éléments fonctionnent ensemble pour créer un terrain de figure réussi.,

Figure-Ground dans la pratique

l’exemple de figure-ground dans la série D’affiches Criminal Underworld ci-dessus montre le principe dans un état instable, où figure et sol s’affrontent pour attirer l’attention. Figure-sol instable fonctionne bien quand il y a peu d’éléments et la conception est simple. Cependant, il ne s’agit pas nécessairement de l’utilisation souhaitée du principe lorsque nous concevons des sites Web, bien que cela dépende du contenu et du contexte du site web. Les sites web doivent transmettre des informations complexes tout en restant clairs et utilisables., Avec la figure-sol stable, nous pouvons guider l’attention où nous le voulons et éviter toute ambiguïté du message que nous essayons de communiquer.

regardez l’exemple ci-dessous sur le site Web D’Apple Music. Très probablement, votre œil est attiré à l’image du smartphone, qui, avec la copie à la gauche de celui-ci, sont les éléments de figure. Alors que l’arrière-plan commence à se battre pour notre attention, les éléments de la figure sont améliorés grâce à l’utilisation de plusieurs éléments visuels. Tout d’abord, la figure est renforcée par une grande copie et la Grande Taille du smartphone., Le positionnement du smartphone en bas de l’écran aide également à faire avancer la figure. La figure est encore améliorée en teintant l’animation vidéo en arrière-plan, provoquant un recul du sol. Enfin, le contraste entre l’écran lumineux et le fond sombre offre une bonne séparation entre la figure et le sol.

dans l’exemple suivant, sur le site Web de Naya, la taille de la figure est l’élément visuel le plus puissant utilisé pour créer une bonne figure-ground. Ici, on perçoit la femme (et son très grand chapeau!) aussi figure qu’elle remplit la majorité du sol. De plus, l’utilisation d’une couleur fraîche en arrière-plan, ainsi que l’utilisation Intelligente d’éléments qui se chevauchent, aident à aider l’arrière-plan à reculer. Enfin, comme dans L’exemple Apple Music, un bon contraste sépare le premier plan de l’arrière-plan.,

enfin, l’excellent contraste entre la figure et le sol est la force du site Web de R/M Design School. Ici, le menu présente un fort contraste, en utilisant des couleurs vives et le noir pour séparer la figure du sol. De plus, la couleur chaude est utilisée pour renforcer la perception de la figure qui vient vers nous. Ne voulez-vous pas juste tendre la main et attraper ces tuiles rouges!,

Conclusion

comprendre comment utiliser la fermeture et la figure-ground vous aidera à établir des relations solides et des différences entre les éléments dans vos conceptions.,

• regardez l’espace négatif autant que l’espace positif pour découvrir des formes intéressantes;
• Jouez avec la suppression d’éléments au premier plan et utilisez l’espace négatif pour former des formes à la place;
• enfin, mélangez des éléments visuels tels que le contraste, la couleur, la taille, la position et la mise au point pour créer

maintenant que vous savez comment utiliser ces deux principes dans votre travail, allez-y et créez vos propres designs attrayants et réussis!,

dans la troisième et dernière partie de cette série, nous nous concentrerons sur les principes de continuation et de destin commun, qui impliquent le mouvement, à la fois implicite et animé, pour créer des relations.

ressources et bonnes lectures

• « principes de Gestalt” sur Scholarpedia.
• principes universels de conception révisés et mis à jour: 125 façons d’améliorer la convivialité, d’influencer la perception, d’augmenter l’attrait, de prendre de meilleures décisions de conception et d’enseigner à travers le design par William Lidwell, Kritina Holden et Jill Butler. Rockport Pub, 2010.,
• visualisation de L’Information: perception pour le design par Colin Ware. Elsevier, 2012.

• principes de conception: Perception visuelle et principes de Gestalt
• connexion et séparation des éléments par contraste et similitude
• équilibre, symétrie et asymétrie compositionnels
• Comment améliorer votre flux de travail de messagerie avec la conception modulaire

(ml, da, og, jb, il)