Share
L’espace est un paramètre fondamental de la conception Web, mais aussi l’un des plus sous-estimé. Si nous saisissons le contrôle de l'espace blanc, nous pouvons contrôler un élément subtil, mais déterminant, d'une page Web et en faire bon usage.
En un mot, l'espace blanc représente l'espacement entre différents éléments, que ce soit entre les sections réelles de la page ou jusqu'à l'espace entre les lettres. Dans la plupart des cas, nous utilisons des espaces (également appelés espaces négatifs) pour espacer le contenu afin de numériser plus facilement et plus rapidement une page sans avoir à insérer d'éléments de séparation spécifiques..
Aujourd'hui, nous allons expliquer comment vous pouvez utiliser un espace négatif dans vos conceptions et déterminer en quoi exactement cela contribue à donner à votre conception une sensation de netteté et de netteté..
Comme je viens de l'expliquer, l'espace blanc (ou espace négatif) est l'espacement entre différents éléments qui ne contient rien. À des fins de comparaison, nous appelons l'espace rempli de manière positive. L'espace négatif aide en fait à modeler et à définir ce qu'est l'espace positif. Cela peut être démontré en regardant l'illusion d'optique ci-dessous.
Que vois-tu? Le vase ou les deux faces? Si vous voyez les visages, c'est que, dans cette conception particulière, l'espace blanc agit comme un espace négatif, tandis que le noir est le positif. Nous pouvons inverser les rôles et obtenir une vue complètement différente parce que les deux travaillent ensemble pour modeler l'image..
Ce que cet exemple tente de faire est que votre espace négatif est assez important car il peut aider à définir le contenu qui se trouve dans l'espace positif. Ne considérez pas les espaces blancs comme le reste des éléments pour lesquels vous n'avez pas créé de contenu, mais plutôt comme un acteur structurel majeur dans la mise en page de votre site..
Il y a aussi deux niveaux d'espace blanc. Il s’agit des espaces macro et micro blancs, relatifs à l’espace entre les éléments centraux et à l’espace entre les éléments les plus petits, respectivement..
Comme vous pouvez le constater, Google est un grand partisan des espaces dans leurs conceptions. Le moteur de recherche est généralement considéré comme ayant un design épuré, car l’accent est mis sur l’objectif principal de la page, sans dévouement massif à d’autres domaines (contrairement à d’autres)..
J'admire le travail de conception que l'équipe Envato a réalisé avec ce site même. Il y a une belle utilisation équilibrée des espaces entre les titres, les lignes de crédit et les paragraphes.
L'espace négatif ne doit pas nécessairement être un seul bloc de couleur. En photographie, toute zone non mise au point peut être classée comme espace négatif. Dans cet exemple, le manque de concentration dans l'arrière-plan attire votre attention sur la tasse en question. (Et aussi, Starbucks n’a-t-il pas changé de logo?)
Quand on conçoit, son accent est normalement mis sur l’espace positif. Il est presque inconscient que l'espace négatif suive et aide réellement à façonner et à définir la manière dont l'espace positif est aménagé puis lu. Cette propriété peut ensuite être modifiée pour adapter l'expérience à un meilleur temps de lecture et d'interaction avec l'espace positif..
Disons que vous êtes dans un magasin. Ce ne serait pas une expérience confortable si vous aviez du mal à vous déplacer à cause des allées surchargées, aux côtés des vendeurs qui vous incitaient constamment à vous proposer des offres spéciales. Il y a trop à regarder et vous n'avez ni le temps ni la patience de trouver ce que vous recherchiez au départ. Ce n'est pas bien.
C'est l'une des principales raisons pour lesquelles les magasins Apple fonctionnent si bien. Ils sont très minimalistes et une grande partie de l'atelier est donnée aux produits eux-mêmes. Toutefois, si vous vous aventurez dans un autre magasin d’ordinateurs, vous êtes envahi par des allées infinies de machines qui ressemblent et fonctionnent différemment. D'après mon expérience, l'expérience de magasinage minimaliste est beaucoup plus agréable.
Maintenant, qu'est-ce que cela a à voir avec la conception web? Beaucoup en fait. Nous ne venons pas en ligne pour chercher une chaîne de texte spécifique sous une profusion de contenu inutile qui ne vous intéresse pas. L'espace négatif aide à résoudre ces deux problèmes en laissant les dessins épurés en même temps que d'attirer l'attention sur le point central de la page..
Vous vous demandez peut-être pourquoi je devrais m'occuper de mon espace négatif?
Les textes sur le Web sont différents des textes sur les autres plates-formes et nous adaptons tous nos conceptions afin que l'utilisateur final ait l'expérience de lecture de notre contenu la plus simple possible. Contrairement à un journal, il peut être frustrant sur le Web d'essayer de déchiffrer le contenu qui vous intéresse. Les conceptions encombrées qui sont trop lourdes à traiter ne fournissent pas une expérience de lecture propre et facile, car nous sommes obligés d’examiner la page Web en premier, afin de distinguer les éléments les uns des autres. Les espaces blancs hachent un tampon entre les éléments, il est donc plus facile pour nous de trouver le contenu qui nous tient à cœur..
Nous pouvons également nous référer à un article récent de moi sur la typographie, dans lequel j'ai examiné huit facteurs importants qui contribuent à une bonne typographie Web. En fissurant les éléments spatiaux (tels que l’espacement entre les lettres et les lettres), on peut augmenter la lisibilité. Travailler à ce niveau signifie que nous travaillons avec des micro-espaces blancs.
En un mot (différent de celui mentionné précédemment), les espaces blancs espacent tout, donnent aux éléments leur propre espace pour être eux-mêmes, pour être reconnus et pour être facilement lus et interagis avec.
L'espace négatif est utilisé dans de nombreux domaines créatifs, notamment la photographie. En photographie, un espace négatif est un espace qui n'est pas utilisé pour contenir un sujet, ce qui n'est pas très éloigné de son rôle dans la conception Web. Si nous examinons le design Web d’Apple, ils utilisent naturellement des espaces blancs macro et micro pour masquer des éléments et leur donner leur propre place sur la page Web..
La conception d’Apple utilise à la fois des espaces blanc et macro, définis par les deux couleurs différentes superposées sur l’image ci-dessous. Il en résulte un design épuré et élégant, espacé gracieusement. Vous ne le savez peut-être pas, mais votre attention sur le contenu aura été influencée par le manque de contenu dans les espaces blancs. Il a été prouvé que notre capacité d’attention était plus courte sur le Web. Par conséquent, les motifs encombrés d’impressions lourdes n’étaient pas une tendance qui passait aux domaines de la conception virtuelle..
Bien sûr, l'espace ne doit pas nécessairement être blanc. Tout type d'espace vide qui n'est pas en concurrence avec le contenu cible peut être classé comme "espace blanc", comme le suggère le dessin ci-dessous..
En conception graphique, vous remarquerez peut-être que votre client veut que chaque objet de son bien immobilier soit utilisé pour promouvoir son produit. Cependant, il en va tout autrement lors de la conception de terrains virtuels. Les espaces blancs peuvent ajouter une sensation de sophistication et de luxe à une page Web générique en donnant l’impression que le produit est plus important que l’immobilier dans lequel il vit. Il peut donner un aspect luxueux à un produit en appliquant le principe "less is more". Si vous consultez le site Web d’Apple - une marque que nous considérons comme étant du dernier cri en matière d’informatique -, vous en avez très peu besoin, car les produits parlent d’eux-mêmes, même à côté de slogans minimalistes. Il s’agit d’un phénomène également répandu parmi les sites Web de premier plan sur la santé et le bien-être où il faut peu de contenu pour communiquer l’idée générale du produit ou du service annoncé..
Souvent, les marques moins chères semblent rassembler autant d'informations que possible dans un espace; différents marchés, différents utilisateurs finaux. Les sites HP et Apple, par exemple, soulignent ce point. Apple est notoirement confiant et laisse ses produits parler pour eux-mêmes. Si vous voulez le produit, regardez autour de vous, sinon déplacez-vous. D'autre part, le site HP emploie des ventes croisées et plus achalandées, promeut des offres et insiste pour que les prix restent bas dans l'esprit de l'utilisateur, tout en essayant de présenter un assortiment de produits alternatifs susceptibles de vous intéresser..
A présent, vous devez reconnaître ce qu'est un espace négatif et comment l'identifier dans votre conception. Si vous débutez dans ce domaine, vous pourriez être déconcerté lorsque quelqu'un vous proposera d'améliorer l'espace blanc. Je ne serais pas complètement surpris si vous répondiez avec quelque chose du genre: "c'est juste l'espace qui reste". Eh bien, en fait, votre espace négatif peut être grandement amélioré en réglant quelques problèmes courants pour rendre son existence beaucoup plus efficace..
Un espacement incohérent peut être l’un des plus gros problèmes, mais il peut être facilement modifié. Tout semble simplement plus équilibré et globalement plus esthétique lorsque votre remplissage autour d'un élément est égal. Si nous prenons l'exemple ci-dessous, le design (celui de notre site soeur, ActiveTuts +), le vrai sur le côté droit est beaucoup plus beau parce que le remplissage entre les éléments est beaucoup plus cohérent..
Les marges ne doivent pas non plus donner l'impression que le design est déconnecté. Des marges trop grandes peuvent rompre la relation entre les éléments et réduire le sentiment d'unité dans la conception. De grandes marges gaspilleront également vos biens immobiliers, ce qui réduira potentiellement l'efficacité de votre travail..
Comme expliqué précédemment, l’espacement des micro-niveaux est l’espace négatif qui existe entre les plus petits éléments de la page, comme les lettres d’un paragraphe..
L'espacement des lignes peut considérablement améliorer la lisibilité d'un corps de texte, ce qui constitue un facteur de rupture dans votre étude de cas sur une typographie bien adaptée. L'interligne, ou interligne, correspond au micro-espace blanc situé entre les lignes de texte. En général, plus le nombre de caractères est grand, meilleure sera l'expérience de l'utilisateur lors de la lecture, mais trop peut casser l'unité et rendre le design déconnecté..
J'ai utilisé l'image ci-dessous dans plusieurs articles différents ici à Tuts +, et je tiens à le souligner à nouveau. L’exemple de droite a plus d’avantages et, utilisé dans une sélection plus large de textes, devrait en faciliter la lecture..
De même, l’espacement des lettres peut contribuer à un espace négatif bien utilisé. Les lettres encombrées ne sont pas très amusantes à lire, mais vous ne pouvez pas non plus les prendre pour des mots individuels. Encore une fois, il s'agit simplement de trouver l'équilibre parfait.
Lorsque vous concevez et personnalisez votre conception Web, faites-le avec un esprit nouveau, qui ne soit pas contaminé par ce que vous avez bien fait la dernière fois. Chaque projet est différent et, en l'absence de directives prédéfinies ou de calculs cohérents, vous devez utiliser votre œil récemment affiné pour analyser chaque produit séparément..
Comme je l’ai mentionné à plusieurs reprises tout au long de cet article, les espaces non hiérarchiques permettent de dessiner et d’aider à modeler et à attirer l’attention sur le contenu de la page. Pour revenir à l’analogie du magasinage, personne ne veut travailler pour obtenir le résultat souhaité. Au lieu de cela, ils veulent qu'il soit servi sur une assiette facilement identifiable qui ne soit pas dérangée par des plats d'accompagnement inutiles qu'ils ne voulaient ni ne voulaient.
Pour récapituler, nous pouvons également améliorer l'utilisation de l'espace négatif en analysant et en affinant les marges en les maintenant cohérentes dans la plupart des cas, et en prêtant attention à la typographie et à l'espacement au niveau micro. Idéalement, vous devriez également prendre chaque projet différemment afin de reconnaître la position idéale dans la conception..
Outre les avantages pratiques d'une page Web propre et épurée, un espace négatif peut créer un sentiment de sophistication et d'élégance en permettant au contenu de "parler pour lui-même" sans intrusions majeures qui semblent bon marché..
Merci d'avoir plongé dans un voyage intéressant dans une région qui ne l'est pas. J'espère que vous avez appris quelque chose (j'en ai certainement compris) sur l'importance de l'espace négatif dans la conception, et réfléchissez-y à deux fois avant d'essayer de placer un million d'objets insensés ou inutiles dans votre page. Avant de vous quitter, un dernier conseil: essayez le test de cinq secondes (visualisez une page Web pendant cinq secondes et écrivez ce que vous vous rappelez) pour vous assurer que votre dessin est clair et que son espace est bien utilisé..
Accentsconagua