\n Utilisation efficace de l’espace blanc dans le site Web \u00abHobson Bernardino + Davis LLP<\/a> \u00bb.\n<\/p>\n
\n Exemple 2 – Cr\u00e9er une mise en page \u00e9quilibr\u00e9e
\n<\/h5>\n
\n Le maintien de l’\u00e9quilibre visuel est important pour ajouter un aspect \u00e9l\u00e9gant \u00e0 votre conception Web. En outre, une mise en page \u00e9quilibr\u00e9e rend la conception Web simple \u00e0 utiliser et am\u00e9liore l’UX (exp\u00e9rience utilisateur). L’espace n\u00e9gatif est consid\u00e9r\u00e9 comme l’un des moyens les plus efficaces qui peuvent aider \u00e0 atteindre l’\u00e9quilibre.\n<\/p>\n
\n Par exemple : le site Web \u00ab\u00a0Enterprise Foundation\u00a0\u00bb utilise un espace n\u00e9gatif qui aide \u00e0 cr\u00e9er un \u00e9quilibre parfait entre les \u00e9l\u00e9ments cl\u00e9s du site, y compris l’en-t\u00eate, les zones de contenu et le pied de page. Bien que les blocs de texte soient serr\u00e9s, mais pas encombr\u00e9s, en raison de la bonne utilisation de l’espace n\u00e9gatif dans la mise en page globale, cela rend la conception esth\u00e9tiquement \u00e9quilibr\u00e9e.\n<\/p>\n
\n De plus, la palette de couleurs altern\u00e9e (et le bon contraste) utilis\u00e9e dans l’arri\u00e8re-plan et le texte cr\u00e9e \u00e9galement une sensation de design spacieux et spacieux. Les zones de contenu interm\u00e9diaires dans la conception de la page d’accueil d’Enterprise Foundation semblent larges, car elles utilisent beaucoup d’espace suppl\u00e9mentaire sous forme de rembourrage. Cet espace suppl\u00e9mentaire permet de diff\u00e9rencier les zones de contenu.\n<\/p>\n \n Vous ne pourrez peut-\u00eatre pas remarquer l’espace n\u00e9gatif appropri\u00e9 dans une conception Web, mais au cas o\u00f9 il manquerait – les sections de page et les zones de contenu bond\u00e9es vous feraient s\u00fbrement remarquer l’absence d’espace n\u00e9gatif.\n<\/p>\n \n En un mot, l’\u00e9quilibre n’est pas quelque chose qui \u00abse voit \u00e0 l’\u0153il nu \u00bb, car il s’agit plut\u00f4t d’un sentiment abstrait. Par cons\u00e9quent, si l’espace n\u00e9gatif n’est pas utilis\u00e9 correctement dans la mise en page de votre site Web, il semblera instable et in\u00e9gal \u00e0 vos t\u00e9l\u00e9spectateurs, ce qui rend la lecture difficile pour eux.\n<\/p>\n \n Au cours des deux derni\u00e8res ann\u00e9es, la typographie est devenue l’une des tendances les plus en vogue. Selon The Aesthetics of Reading<\/a>, un article \u00e9crit par Rosalind Picard (MIT) et Kevin Larson (Microsoft), \u00abla typographie influence l’humeur et les performances cognitives d’un lecteur \u00bb.\n<\/p>\n \n En termes simples: une conception typographique efficace peut vous aider \u00e0 faire bonne impression aupr\u00e8s de vos utilisateurs.\n<\/p>\n \n L’espace n\u00e9gatif joue un r\u00f4le essentiel dans la production d’une bonne typographie. N’oubliez pas qu’une bonne conception typographique ne n\u00e9cessite pas seulement des lettres de grande taille, mais vous oblige \u00e9galement \u00e0 appliquer l’espace appropri\u00e9 pour cr\u00e9er un sentiment de distinction entre les lettres et les mots.\n<\/p>\n \n En fait, la typographie assure \u00e9galement le maintien de la hi\u00e9rarchie du contenu. Les en-t\u00eates de votre page Web doivent \u00eatre facilement reconnus comme les composants \u00abd\u00e9terminants\u00bb du contenu de votre page. De plus, les en-t\u00eates doivent \u00eatre capables de capter imm\u00e9diatement l’attention des utilisateurs, car ils aident \u00e0 d\u00e9terminer de quoi parle le contenu.\n<\/p>\n \n De plus, les blocs de texte ou les paragraphes sous les en-t\u00eates doivent \u00eatre plac\u00e9s plus pr\u00e8s de l’en-t\u00eate, afin d’aider les lecteurs \u00e0 comprendre la relation entre eux, et ainsi de suite.\n<\/p>\n \n Par exemple : \u00ab\u00a0HDLive 2012\u00a0\u00bb pr\u00e9sente une excellente utilisation de la typographie agrandie et correctement espac\u00e9e. Lorsque vous faites d\u00e9filer le site Web ou acc\u00e9dez aux pages int\u00e9rieures, vous remarquerez que le texte des pages Web contient une grande hauteur de ligne et des couleurs contrast\u00e9es subtiles par rapport \u00e0 l’arri\u00e8re-plan de la page. Ceci est important pour faciliter aux utilisateurs une exp\u00e9rience de lecture am\u00e9lior\u00e9e.\n<\/p>\n \n Concevoir une typographie avec des \u00e9l\u00e9ments bien espac\u00e9s cr\u00e9e un rythme naturel, ce qui permet \u00e0 vos visiteurs de vivre une exp\u00e9rience de lecture agr\u00e9able, quelle que soit la taille de votre page Web.\n<\/p>\n \n Pour utiliser correctement l’espace n\u00e9gatif dans une conception Web, vous devrez vous familiariser avec les deux diff\u00e9rents types d’espace n\u00e9gatif, \u00e0 savoir: l’espace micro et macro n\u00e9gatif.\n<\/p>\n \n Il s’agit de l’espace \u00e0 l’int\u00e9rieur des \u00e9l\u00e9ments (de la page) plus petits, tels que les marges (gauche ou droite) autour des \u00e9l\u00e9ments d’une page Web ou l’espace entre les mots, les lettres et les caract\u00e8res. Par exemple: L’espace pr\u00e9vu entre une image et sa l\u00e9gende est un espace micro n\u00e9gatif.\n<\/p>\n \n L’espace micro n\u00e9gatif est utilis\u00e9 dans la conception typographique et contribue \u00e0 am\u00e9liorer la lisibilit\u00e9 et la lisibilit\u00e9 du texte. Lorsque vous appliquez un espace micro n\u00e9gatif, vous devez vous assurer que l’espace entre vos blocs de contenu doit \u00eatre serr\u00e9, mais cela ne devrait pas les encombrer. Ceci peut \u00eatre r\u00e9alis\u00e9 en vous assurant que vous n’ajoutez pas trop de hauteur de ligne entre votre titre et vos paragraphes. Mais, en m\u00eame temps, assurez-vous que la hauteur de la ligne ne doit pas non plus \u00eatre sous-estim\u00e9e.\n<\/p>\n \n Un excellent exemple d’espace micro n\u00e9gatif est le site Web de W3Avenue ci-dessous. Le site contient beaucoup de contenu (avec plusieurs articles plac\u00e9s dans diff\u00e9rentes cat\u00e9gories), mais la mise en page ne d\u00e9route pas les utilisateurs. L’espace appropri\u00e9 dans l’en-t\u00eate et les \u00e9l\u00e9ments correctement espac\u00e9s dans le contenu au milieu et dans les annonces de la barre lat\u00e9rale rendent la mise en page du site Web propre et structur\u00e9e.\n<\/p>\n \n Ce type d’espace n\u00e9gatif cr\u00e9e une distance entre les principaux \u00e9l\u00e9ments de conception Web. Ces espaces sont plus larges par rapport aux espaces micro n\u00e9gatifs, et deviennent ainsi imm\u00e9diatement apparents. Les marges entre les zones d’en-t\u00eate, de navigation, de contenu et de pied de page sont appel\u00e9es macro espace n\u00e9gatif. De plus, l’espace fourni entre les barres lat\u00e9rales, l’arri\u00e8re-plan et d’autres parties de la page Web est un espace macro n\u00e9gatif.\n<\/p>\n \n Ces espaces peuvent fournir un espace abondant entre les \u00e9l\u00e9ments de conception (par rapport \u00e0 l’espace micro n\u00e9gatif), mais ils ne fournissent toujours pas plus d’espace pour respirer.\n<\/p>\n \n L’espace est principalement utilis\u00e9 pour s\u00e9parer et connecter des \u00e9l\u00e9ments de conception Web. Cependant, de nombreux mod\u00e8les comprennent souvent des bo\u00eetes (sous forme de bordures) – qui sont utilis\u00e9es pour s\u00e9parer et connecter des \u00e9l\u00e9ments. Mais, bien que les bo\u00eetes s’av\u00e8rent utiles pour s\u00e9parer les choses, elles peuvent ne pas maintenir l’unit\u00e9 dans la conception. C’est l\u00e0 que l’espace macro vient \u00e0 votre secours.\n<\/p>\n \n L’utilisation d’espaces macro n\u00e9gatifs plut\u00f4t que de bo\u00eetes peut aider \u00e0 s\u00e9parer et \u00e0 connecter efficacement tous les \u00e9l\u00e9ments de votre conception Web. Alors que l’espace plus grand aide \u00e0 s\u00e9parer les \u00e9l\u00e9ments, un espace plus \u00e9troit aidera \u00e0 les connecter, ce qui aide \u00e0 maintenir l’unit\u00e9 de la page.\n<\/p>\n \n Remarque<\/strong>: La majorit\u00e9 des conceptions Web contenant un espace macro n\u00e9gatif est sym\u00e9trique – avec un motif rythmique et r\u00e9p\u00e9titif.\n<\/p>\n \n La page de destination Stripe Connect est un exemple parfait d’utilisation de l’espace macro n\u00e9gatif dans une conception Web.\n<\/p>\n \n D\u00e8s les \u00e9l\u00e9ments de navigation plac\u00e9s dans l’en-t\u00eate et une quantit\u00e9 consid\u00e9rable d’espace n\u00e9gatif autour des appels \u00e0 l’action, la page de destination de Stripe se d\u00e9marque.\n<\/p>\n \n L’espace n\u00e9gatif ou l’espace blanc peut faire ou d\u00e9faire votre conception Web. Vous pouvez passer du temps \u00e0 cr\u00e9er un design visuellement attrayant avec des tonnes de fonctionnalit\u00e9s int\u00e9ressantes, mais comme vous le savez peut-\u00eatre, trop de choses ne sont pas bonnes. Et donc, pour cr\u00e9er un bon site Web, vous devez vous assurer d’utiliser un espace n\u00e9gatif appropri\u00e9 dans votre conception Web.\n<\/p>\n \n L’application d’un espace n\u00e9gatif de la bonne mani\u00e8re permet de cr\u00e9er une hi\u00e9rarchie visuelle facile \u00e0 comprendre, une mise en page \u00e9quilibr\u00e9e et produit une typographie efficace – tous ces facteurs sont cruciaux pour le succ\u00e8s d’une conception Web. En plus de cela, il existe deux types diff\u00e9rents d’espace n\u00e9gatif que vous devez comprendre, afin d’utiliser correctement l’espace n\u00e9gatif, appel\u00e9: espace micro et macro n\u00e9gatif. Ces deux concepts sont importants et aident \u00e0 maintenir un \u00e9quilibre sain dans une conception Web.\n<\/p>\n \n J’esp\u00e8re que la lecture de cet article vous aidera \u00e0 donner une meilleure id\u00e9e de la fa\u00e7on dont la pens\u00e9e n\u00e9gative (dans le contexte de l’espace) peut \u00eatre bonne dans une conception Web.\n<\/p>\n<\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-241123-63820016679f0.webp\")
<\/a> Espace n\u00e9gatif sur le site Web d’ Enterprise Foundation<\/a>.<\/p>\n\n Exemple 3 \u2013 Cr\u00e9er une typographie efficace
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-241123-6382001895b25.webp\")
<\/a> Typographie correctement espac\u00e9e sur le site Web HDLive 2012<\/a>.<\/p>\n\n Comment utiliser l’espace n\u00e9gatif dans le design ?
\n<\/h3>\n\n Espace micro n\u00e9gatif
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-241123-6382001a9f765.webp\")
<\/a> Espace micro n\u00e9gatif sur le site W3Avenue<\/a>.<\/p>\n\n Espace macro n\u00e9gatif
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-241123-6382001cc3fe4.webp\")
<\/a> Espace macro n\u00e9gatif dans la page d’accueil de Stripe Connect<\/a>.<\/p>\n\n R\u00e9sumer !
\n<\/h3>\n