Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Ajout d’espace à vos créations

by
Length:ShortLanguages:
This post is part of a series called Design School for Developers.
An Introduction to Composition
Building Consistency and Relationships into Your Designs

French (Français) translation by Henri Lotin (you can also view the original English article)

Gérons d'abord les concepts de base. L'espace vierge n’est pas simplement un bloc d’espace dans votre design qui doit être blanc. Au lieu de cela, pensez-y plus comme à un espace « vide » structurel, où aucun élément supplémentaire, embellissements et autres pièces de votre design ne sont placés.

A great example of whitespace - but still with embellishments - on Layervault's website.
Un excellent exemple d'espace vierge - mais toujours avec des embellissements - sur le site Web de Layervault.

L'espace vierge est essentiellement l’espace « inutilisé », bien que je pense que ça peut être un mauvais terme pour le désigner. Bien que l'espace vierge puisse sembler inutilisé, il sert en fait un but très utile dans vos créations et, en fait, travaille très dur. L'espace vierge est précieux pour n’importe quel design, permettant à votre design de respirer et offrant un meilleur équilibre à vos créations.

Après tout, qu'est-ce qui définit la présence d’un bloc, si ce n’est pas l’espace vierge autour de lui ?!


Micro & macro espace vierge

Si vous voulez creuser encore plus loin, nous pouvons définir d’autres types d’espaces : micro et macro.

Micro espace vierge

Micro espace vierge est ce à quoi vous vous attendez - toutes les pièces minuscules de votre design qui sont dépourvues de tout élément. Cela peut être de petits bouts d’espace entre chaque lettre dans un mot, ou entre chaque ligne de mots.

Macro espace vierge

Macro espace vierge désigne de plus grandes pièces d’espace que vous trouverez dans votre design - entre les principaux blocs de contenu, d'éléments ou de modules. Par exemple, vous pourriez trouver des blocs de macro espace vierge entre un en-tête et votre bloc de contenu suivant ou entre une pièce de texte à l’autre.


Pourquoi devrions-nous nous préoccuper d'espace vierge ?

Imaginez que vous parcourez un site web et, où que vous regardiez, vous ne savez pas si vous avez trouvé ce que vous cherchiez. Ceci, et le fait que c'est aussi difficile à lire ; le texte est à l’étroit, il est trop près de l’autre bloc de texte et il n’y a aucun diviseur sensible (ou même juste assez d’espace) pour différencier les entre blocs. C’est ennuyeux, n’est-ce pas ?

Mailchimp use whitespace cleverly on their homepage, to highlight their brand message more clearly.
Mailchimp utilise habilement l'espace vierge sur leur page d’accueil, de mettre en évidence leur discours de marque plus clairement.

Selon toute vraisemblance, les utilisateurs de sites web que vous designez se sentiront de la même manière. Au contraire, ils vont être moins patient que vous l'êtes ; Nous comprenons que cela demande du temps, du talent et beaucoup de connaissances pour créer un bon site Web, mais la plupart des utilisateurs n'en tiennent pas compte et s'attendront souvent juste à un bon site web, une bonne expérience et seront frustrés lorsqu’ils ne reçoivent pas ça.

Lorsque vous regardez à n’importe quelle astuce de composition ou option de mise en pages, l'espace vierge est l’une de ces choses qui doivent toujours être à la pointe de votre esprit. Permettre à tous les principaux éléments de notre site de respirer donne un meilleur équilibre à un site web, aussi ce qui nous permet de placer plus de confiance dans notre hiérarchie pour diriger nos utilisateurs où nous voulons qu’ils aillent, les accompagnant dans leur parcours à travers l’utilisation du site.


Avantages de l’espace vierge

Nous devons savoir maintenant qu’avoir plus d'espace vierge dans nos créations donne plus de marge de manoeuvre à chaque élément différent sur la page. Cela crée de l’équilibre, car cela signifie que nous pouvons apporter plus de poids aux éléments sur lesquels nous voulons mettre l’accent.

On Dan Edward's site, he uses whitespace to offset the typography and introduction to his portfolio website.
Sur son site web personnel, Dan Edwards utilise un espace pour compenser la typographie et l’introduction à son portfolio.

Tenant compte de notre hiérarchie, l'espace vierge peut également aider à guider correctement nos utilisateurs à travers le site et ce à quoi nous les destinons. Avec plus d’espace autour de nos éléments, nous pouvons espérer également accélérer les interactions entre notre utilisateur et le site web. Cela signifie que nos utilisateurs doivent être en mesure de trouver ce qu’ils cherchent aussi rapidement que possible, contribue seulement à améliorer leur expérience sur votre site web.


Comment utiliser l'espace vierge dans vos créations

Comprendre que l’espace vierge est bon pour vos créations est une chose, mais vous devez savoir comment le mettre en pratique.

KISS (Keep It Simple, Stupid)

Je souhaite toujours pouvoir appeler ça « KIS », parce que je déteste appeler les gens stupides ! Toutefois, c'est vrai ; gardez tout simple. Souvent, il n’y a pas besoin de compliquer votre design en bourrant des morceaux d’information dans tous les coins et recoins. Ce que vous voulez faire c'est plutôt utiliser toutes vos autres techniques compositionnelles (espace vierge, couleur, taille, typographie, etc.) pour attirer l’attention sur les zones dans votre design nécessitant cet intérêt supplémentaire.

Garder votre design simple n’aide pas seulement à vous faciliter la vie en tant que designer et développeur, mais cela rend les choses plus faciles pour vos utilisateurs aussi. Garder les choses simples en élaguant absolument tout ce qui n’est pas nécessaire ou important, ou que l’utilisateur n’a pas besoin de savoir.

Cela ne signifie pas que vous vous retrouvez avec une quantité ridicule d’espace complètement vide, où aucune partie de votre design ne semble avoir aucune relation avec l’autre. Au lieu de cela, utilisez habilement l’espace que vous avez, et améliorez l'utilisabilité de votre design au travers de l'espacement qui est compatible et assurez vous que votre design est clair et facile à comprendre et à suivre.

Squarespace use space, texture, colour and typography to set a clear brand tone - even with many different stories to tell.
Squarespace utilise espace, texture, couleur et typographie pour donner un ton de marque clair - même avec de nombreuses histoires différentes à raconter.
squarespace-2
squarespace-3

À la prochaine

Après avoir introduit les principes fondamentaux de composition, et un peu parlé d’espaces vierges, notre section suivante poussera les choses plus loin en regardant comment construire relations et cohérence dans nos créations.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.