Lorsque vous pensez à des espaces dans la conception Web, des exemples tels que Apple ou Google sont probablement les premiers qui viennent à l’esprit. Bien que ces sociétés fassent un excellent travail en utilisant des espaces dans leurs conceptions, il existe de nombreuses autres façons de tirer le meilleur parti de l'espace? même si ce n'est pas toujours blanc.
L'espace blanc est une partie importante de votre plan de conception. Dans cet article, nous allons examiner l’importance de l’espace en tant qu’outil de conception et cinq exemples de sites Web utilisant beaucoup l’espace blanc (ce n’est pas du tout blanc).
Espace blanc 101
L'espace blanc fait référence à toute partie de la conception laissée intacte par les éléments de conception. Cela inclut l'espace entre les graphiques ou les images, entre les lignes de texte et les marges et les gouttières. L'espace ouvert à l'intérieur des éléments de conception, tels que le? Caché? La flèche située à l'intérieur du logo de FedEx est appelée espace négatif, mais il est devenu assez courant d'échanger la terminologie.
Les espaces blancs sont importants car ils jouent un rôle majeur dans la lisibilité et l'organisation globales d'un dessin.
- Facilite l'analyse du texte par les utilisateurs.
- Permet de créer un regroupement naturel d'éléments similaires.
- Donne la priorité aux éléments de la conception, tels que les appels à l’action, la recherche ou la navigation.
- Crée un sentiment d'harmonie et de sophistication.
- Établit l'équilibre et la hiérarchie visuelle.
- Permet de digérer des blocs de texte lourds plus facilement (et plus facilement lisibles)
- Guide les utilisateurs à travers la conception de manière logique.
L'espace n'a pas à être? Blanc?
Il y a ce mythe sur l'espace blanc qui doit être supprimé: l'espace blanc ne doit pas nécessairement être blanc.
L'espace blanc peut être une couleur unie, un arrière-plan flou ou même un peu de mouvement. Le facteur commun est que l'espace est juste cela? espace. Il ne contient pas d'autre contenu ou élément de conception. Si l'utilisateur regardait au-delà ou au-delà, aucune information ne serait perdue.
Le seuil est que tous les espaces blancs réellement pourrait être blanc, mais le concepteur a choisi de créer le visuel d’une autre manière tout en utilisant les principes de l’espace.
Un espace peut apparaître dans n’importe quelle partie de la conception et doit servir d’outil pour améliorer la convivialité du haut de la page au bas de la page et dans les pages secondaires. Un bon modèle de conception utilisera les espaces blancs de manière cohérente pour faciliter la digestion des éléments visuels.
Exemple 1: U + Design
U + Design renverse littéralement le concept d'espace blanc avec beaucoup d'ouverture sur une toile noire pour les éléments de texte. Les images vivent dans un espace plus clair, ce qui crée un effet yin et yang. Bien qu'aucun espace ne soit techniquement blanc, il reste entièrement blanc.
L'espace est également utilisé sous le parchemin avec beaucoup d'espace pour les éléments et un motif presque en mouvement d'espaces et d'éléments de conception qui encourage le défilement.
Si vous recherchez une leçon sur la création de texte lisible, jetez un coup d'œil à cette conception. Bien que plusieurs styles et couleurs de texte soient utilisés, tout est lisible et l'emplacement et la taille du texte constituent un bon cadre hiérarchique.
Exemple 2: Emark
Emark utilise des découpes et des motifs géométriques pour créer des espaces et ajouter un intérêt visuel aux images et au texte. L'espace est un mélange de blanc et de couleur avec des formes et des lignes aidant à fournir un flux visuel.
La conception utilise également des blocs de couleur sur un fond blanc qui inclut beaucoup d'espace blanc. La combinaison de couleurs vives et d'espace crée des conteneurs de texte distinctifs qui constituent également des appels à l'action hautement cliquables. En raison de l'espace blanc coloré, les utilisateurs savent que chacun de ces blocs est conçu pour cliquer.
L'ensemble de la conception utilise un espace blanc agrandi autour des éléments de texte, ainsi que de nombreux rembourrages et espaces pour améliorer la lisibilité. (C’est l’une de ces tendances que nous verrons probablement encore plus alors que les concepts d’espacement des textes mobiles commencent à se répandre dans un nombre encore plus grand de conceptions de sites Web basés sur des ordinateurs de bureau.)
Exemple 3: blague de hiver
Joke de Winter utilise une photo floue en noir et blanc comme modèle pour les espaces blancs à l’arrière-plan de son site Web. Le look est une conception moderne en couches qui a une sensation distincte et un flux facile.
Sous le défilement, un espace plus important est utilisé autour des éléments de texte avec des marges surdimensionnées pour mettre l'accent sur des éléments de texte spécifiques. L'espace blanc dans la conception alterne entre le blanc et le gris et, comme dans l'exemple précédent, inclut plus d'espacement que nous en voyons souvent entre les lignes f du texte.
Tout au long de la conception, toutes les marges ont un style asymétrique et beaucoup d’espace. Le hors bilan? Solde? est harmonieux et visuellement intéressant.
Exemple 4: les astronautes recherchés
L'action rapide des astronautes recherchés n'est peut-être pas ce qui vient à l'esprit lorsque l'on pense à l'espace blanc. Mais le logo, le texte et les éléments au-dessus de la vidéo fonctionnent de cette façon. Les informations importantes au-dessus du défilement sont faciles à lire et à voir malgré l'action en arrière-plan. Il est centré avec beaucoup d'espace de chaque côté et tout autour. (Et le logo créé avec un espace négatif permet d'attirer l'attention sur l'effet global.)
Le même concept est utilisé sous le parchemin avec des blocs de texte au-dessus des images fixes. L'espace est magnifiquement conçu et le seul élément réel de couleur blanche dans la conception est le texte lui-même.
Exemple 5: Le Farfalle
Le Farfalle utilise une découpe simple dans l'image du héros, comme dans l'un des exemples précédents, mais l'utilisation la plus impressionnante de l'espace apparaît lorsque vous faites défiler de grands espaces alternés pour des images équilibrées avec des espaces blancs surdimensionnés contenant du texte.
Ce style permet aux utilisateurs de passer facilement d’une image à l’autre, puis de revenir en bas de la page et de tout le contenu. Ce qui pourrait être un design lourd devient léger et facile à lire.
De plus, la conception utilise de larges marges et un rembourrage de sorte que chaque élément ait vraiment de la place pour être autonome.Cette utilisation de l'espace crée une esthétique sophistiquée qui correspond à l'ambiance du restaurant.
Conclusion
Le plat du jour: l'espace blanc ne doit pas nécessairement être blanc. Ne te laisse pas tomber dans ce piège. Vous avez quelques exemples de moyens d'utiliser l'espace avec la couleur, les images et la vidéo pour relancer votre créativité.
À vous maintenant de présenter quelques exemples d’espace blanc. Partagez des dessins que vous avez créés dans la galerie Design Shack ou partagez des sites Web que vous aimez avec moi sur Twitter. (Vous ne savez jamais? Ils pourraient se retrouver dans un futur post!)