A propos de l’auteur
Steven Bradley est l’auteur de design fundamentals: elements, attributes,& principles and CSS Animations and transitions for the modern web., Quand ce n’est pas le cas More en savoir plus sursteven Bradley Share
- 10 min de lecture
- Inspiration,Design,créativité,principes de conception
- enregistré pour une lecture hors ligne
- Partager sur Twitter, LinkedIn
le Design est un arrangement à la fois les formes et l’espace. Pour travailler plus efficacement avec l’espace, vous devez d’abord en prendre conscience et apprendre à le voir — apprendre à voir les formes que l’espace forme et comment l’espace communique. Ceci est la deuxième partie d’une série sur les principes de conception pour les débutants. La première partie couvrait une introduction à la gestalt; le reste de la série (y compris cet article) s’appuiera sur ces principes de gestalt et montrera combien de principes fondamentaux avec lesquels nous travaillons en tant que designers ont leur origine là-bas.,
la relation Figure-Sol
le principe de gestalt qui s’applique le plus à l’espace est celui de figure-sol. Tout dans une conception de la vôtre sera considéré comme l’un ou l’autre, et la relation entre eux est mutuellement exclusive. Ni l’un ni l’autre ne peuvent être perçus, sauf par rapport à l’autre, et changer l’un est impossible sans changer l’autre aussi.
la relation figure-sol est également complémentaire. La Figure et le sol peuvent améliorer ou nuire l’un à l’autre, et l’organisation des deux par rapport à l’autre est l’un des aspects les plus importants de la conception., Il définit un contexte pour la façon dont votre conception communique et comment elle sera interprétée.
« l’espace blanc doit être considéré comme un élément actif et non comme un arrière-plan passif.”
— Jan Tschichold
Dans le troisième panneau, deux lignes noires ont été supprimés. Cela active l’espace, ce qui donne l’impression d’être assis au-dessus du champ gris., Le sol est devenu la figure et ajoute plus de profondeur à la conception.
Il existe trois types de relations figure-sol:
- Stable (en haut à gauche)
Il est clair ce qui est figure et ce qui est sol. L’un ou l’autre domine généralement la composition. - réversible (au-dessus du centre)
La figure et le sol attirent également l’attention du spectateur., Cela crée une tension, l’un pouvant dépasser l’autre, conduisant à une conception dynamique. - ambigu (en haut à droite)
Les éléments peuvent sembler être à la fois la figure et le sol simultanément. Ils forment des formes tout aussi intéressantes, et le spectateur est laissé à trouver son propre point d’entrée dans la composition.
en fonction de la relation que vous établissez et de la façon dont vous équilibrez à la fois la figure et le sol, vous demandez au public de regarder différentes parties du design et d’interpréter ce qu’il voit dans différents contextes.,
Figure-ground n’est pas le seul principe gestalt dans lequel l’espace joue un rôle de premier plan. Deux autres sont les suivants:
- Proximity
Proximity utilise l’espace pour connecter et séparer des éléments en enfermant certains éléments dans l’espace. Un exemple que nous pourrions prendre pour acquis les paragraphes de texte sur la page. L’espace entre les paragraphes est plus grand que l’espace entre les lignes de texte dans un paragraphe. - fermeture
cela utilise l’espace comme espaces entre les éléments. Les téléspectateurs comblent les lacunes avec leurs propres informations pour compléter un tout à partir des pièces. Trop d’espace et aucune fermeture ne se produit., Trop peu d’espace et aucune fermeture n’est nécessaire. Seul l’équilibre correct entre l’espace et l’espace rempli activera l’espace et conduira à la fermeture.
l’Espace Comme Un Élément de Design
Pense à propos de la musique pour un moment. Si chaque note ou accord était joué en même temps, vous n’auriez pas de musique. Vous auriez du bruit. La musique se produit lorsque les sons sont contrastés avec le silence. Varier le motif du son et du silence crée le rythme et la mélodie., Sans le silence, il n’y a pas de musique.
Space remplit visuellement la même fonction. Il donne aux éléments positifs de la place pour respirer. Il donne à l’œil la liberté de se déplacer à travers un design et de découvrir les éléments qu’il recherche. Le positif est vu qu’en contraste avec le négatif. Sans espace, vous n’avez pas de conception. Vous avez du bruit visuel.
à moins que le bruit ne soit ce que vous essayez de communiquer, Penchez-vous vers l’espace. Les gens sont moins susceptibles de se plaindre de trop d’espace que trop peu.,
Space peut faire ce qui suit:
- établir le contraste, l’emphase et la hiérarchie;
- générer du drame et de la tension;
- fournir un repos visuel entre les groupes d’éléments.
comme l’implique la relation figure-sol, vous n’avez d’espace que lorsque quelque chose est présent à l’intérieur. Avant l’ajout d’éléments positifs, l’espace n’est pas défini. La relation figure-sol doit être établie avant que l’espace puisse exister et que sa communication commence.
l’Une des plus importantes fonctions de l’espace est d’améliorer la lisibilité et la lisibilité., Macro-espace rend le texte plus invitant. Le Micro-espace le rend plus lisible.
- Micro-espace
c’est l’espace dans les éléments d’un groupe. C’est l’espace entre les lettres, les mots et les paragraphes. - Macro-espace
C’est l’espace entre les éléments majeurs. Il sépare des éléments ou des groupes d’éléments et fournit des avenues à suivre pour l’œil et des endroits pour se reposer entre les éléments.
L’espace est corrélé à la qualité. Plus d’espace implique moins d’éléments ou une rareté des éléments. Comparez les magasins de détail haut de gamme et discount., Lequel a généralement plus d’espace à l’intérieur, et lequel emballe les produits dans chaque espace disponible? Quel est l’espace de communiquer pour vous?
l’Espace peut également donner des attributs autres que la qualité, tels que:
- la sophistication,
- la simplicité,
- luxe
- la propreté,
- la solitude,
- ouverture.
vous gaspillez de l’espace lorsque vous ne le considérez pas. Vous pouvez gaspiller de l’espace en le remplissant trop. Vous pouvez gaspiller de l’espace en le piégeant à l’intérieur des éléments d’une conception et en ne lui permettant pas de se connecter à un autre espace de la conception.,
Le Design est finalement un arrangement de formes, et cela inclut les formes formées par l’espace. N’hésitez pas à utiliser l’espace. Voyez – le comme un élément de conception important sous votre contrôle.
quelques exemples d’espace dans les sites web
pour mieux utiliser l’espace, vous devez d’abord en prendre conscience. Apprenez à reconnaître l’espace dans différents modèles. Remarquez la forme qu’il forme et réfléchissez à ce que l’espace communique. À cette fin, regardons la conception de certains sites Web, en prenant note de la façon dont l’espace est utilisé.,
Old Guard
La conception de la vieille garde de Tom Johnson utilise beaucoup d’espace blanc, donnant au texte et à d’autres éléments de la place pour respirer. Il n’y a pas de confusion entre la figure et le sol.
Les informations sont contenues et séparées par un espace (rappelons le principe de Proximité), en distinguant les groupes d’éléments., Vous pouvez facilement dire où un poste se termine et le prochain commence, uniquement par l’espace entre eux.
Le contenu principal est légèrement décentré sur la page, avec un généreux espace de chaque côté. Cet espace est parfois interrompu par des éléments, activant à la fois l’espace et les éléments interrupteurs. Cela permet d’attirer l’attention sur la zone et en particulier les éléments à l’intérieur.
page Staus de Heroku
l’image ci-dessous montre une partie de la page d’état de Heroku comme étant principalement de l’espace., Il m’est arrivé d’attraper le site web un jour particulièrement bon, car des éléments positifs supplémentaires signifieraient plus d’incidents signalés sur la plate-forme. Ici, plus d’espace blanc signifie un meilleur service.
Remarquez comment l’espace blanc n’a pas besoin d’être blanc. Bien que la page soit trop généreuse en espace, il est peu probable que vous vous plaigniez qu’il y en ait trop., Seules les informations importantes — dans ce cas, les mises à jour de statut et les rapports d’incidents-interrompent l’espace.
l’Introduction du Roman
L’espace en haut de l’Introduction du Roman est asymétrique et active. Remarquez comment le grand bloc d’espace sur la gauche mène votre œil directement au contenu. Si vous cliquez sur le site web et faites défiler vers le bas à partir du haut, vous verrez que l’espace est également utilisé pour séparer et regrouper des blocs d’informations.
de fines lignes lumineuses sont également utilisées pour regrouper et séparer ces blocs. Lorsque vous consultez le site web, remarquez que les lignes ne se touchent pas toujours, ce qui permet à l’espace de circuler autour d’eux et de se connecter à un autre espace. Cela empêche l’espace d’être pris au piège.
Elliot Jay Stocks
le site Web D’Elliot Jay Stocks devrait vous être familier, car il est derrière la conception de celui-ci. L’espace asymétrique sur le site Web D’Elliot conduit à nouveau à l’espace actif.,
la grande image en haut de cette page pourrait potentiellement constituer un bloc temporaire pour accéder au contenu ci-dessous; cependant, une quantité généreuse d’espace à côté de l’image offre un espace suffisant et invitant pour que l’œil puisse se déplacer., Si la barre latérale à gauche avait la même couleur d’arrière-plan que le contenu principal, il serait probablement plus facile pour l’Œil de se déplacer dans l’image, mais le changement de couleur ne le rend guère difficile.
comme pour les sites Web ci-dessus, l’espace est utilisé pour entourer et séparer des groupes d’informations distinctes, permettant à chaque groupe de se démarquer et permettant à l’Œil de trouver ce qu’il veut et de se reposer entre les deux.
Phil Coffman
le contenu du site Web de Phil Coffman forme une seule forme qui se trouve dans un espace principalement vide., L’absence de nombreux éléments positifs augmente l’importance de ceux qui sont présents.
même dans les fonds rectangulaires colorés, le texte a suffisamment d’espace autour pour être facilement lu et ne pas être confondu avec une autre catégorie de texte sur la page.,
la forme positive (et la forme de l’espace) s’ajuste de manière réactive aux différentes largeurs du navigateur, mais le motif d’une seule grande forme entourée d’espace reste.
New Adventures in Web Design
Comme beaucoup de sites Web ici, le site Web 2013 de la conférence New Adventures in Web Design laisse une large place aux éléments. Des groupes distincts d’informations sont contenus par l’espace, et l’espace est actif tout au long de la conception.
quelque chose d’intéressant à noter est les flèches circulaires grises entre l’image en haut à gauche et le contenu principal à droite.
ces flèches bloquent-elles le flux de l’espace? Parce qu’ils ne se touchent pas et parce que chacun est en pointillé là où il interrompt l’espace, l’espace peut circuler, bien qu’il soit clairement plus restreint dans ce flux.
la couleur Gris plus clair aide. Il empêche les flèches de dominer, et il n’est pas difficile d’imaginer l’espace qui coule sur les lignes.,
en toute justice, si mon navigateur était plus large lorsque j’ai saisi la capture d’écran, les flèches ne se chevaucheraient pas avec le contenu principal. Cependant, environ 1280 pixels jusqu’à l’endroit où le design devient une seule colonne, ils le font. Dans l’ensemble, cela fonctionne, bien que je me demande si l’espace coulerait mieux sans les flèches présentes.
Quelques Exemples De Logos
– je vais vous laisser avec quelques logos dans laquelle l’espace est partie intégrante de la conception. Au lieu de souligner l’utilisation de l’espace dans chacun, je ferai quelques commentaires généraux et vous laisserai ensuite explorer les espaces par vous-même.,
remarquez comment les logos ci-dessous utilisent la relation figure-sol. Avec certains, jusqu’à ce que vous voyiez à la fois la figure et le sol, vous ne voyez pas le logo complet. Les deux sont des contributeurs nécessaires à ce qui est communiqué.
Plusieurs de ces logos reposent sur le principe de fermeture. Ce que vous êtes censé voir n’est pas vraiment là, mais vous le voyez quand même. Quelques-uns de ces logos jouent également avec la figure et le sol. Quelle est la figure lorsque vous prenez dans l’ensemble du logo sur son fond devient sol pour une figure plus petite à l’intérieur., Cette relation réversible figure-sol est au cœur de ce qui est communiqué.
- Nuage de Lit
- Chat Noir Lounge
- Maj
- Dolphin & Joint Logo Designer
- Implants Dentaires Guide
- Wineforest
Résumé
j’espère que vous prendre deux choses principales de ce post., Le premier est le lien entre l’utilisation de l’espace dans la conception et le principe gestalt de figure-sol. Les principes de Gestalt sous-tendent une grande partie de ce que nous faisons en tant que designers.
Deuxièmement, et peut-être plus important encore, faites un effort pour passer du temps à observer comment l’espace est utilisé dans la conception. Ne laissez pas l’Espace être un sous-produit de vos éléments positifs. Apprenez à concevoir l’espace autant que, sinon plus, des éléments positifs. La mise en page de n’importe quelle page est finalement une organisation de l’espace.
analysez consciemment cet espace et utilisez-le délibérément pour créer un meilleur design. Ne permettez pas que ce soit ce qui reste., Visualisez – le comme un élément de conception essentiel, puis visualisez la relation entre l’espace et les éléments positifs comme un élément de conception que vous façonnez.
La prochaine fois, nous ajouterons plus de principes de gestalt au mélange et explorerons comment les points focaux, la continuation et le destin commun nous mèneront à des idées telles que le poids visuel et l’équilibre compositionnel.
- attention à vos tirets En et Em: étiquette typographique
- principes de conception: poids et Direction visuels
- Comment la géométrie influence la conception du Logo
- À propos de L’Art
(al, ml, il)