Traduction : Les Eléments du Design

Début de la traduction (article d’origine ici)

Introduction

Dans « Les Principes du Design », nous avons étudié la moitié des principes de base qui du Design. Ces principes représentent les assomptions de base de l’univers qui guident la pratique du Design, et qui gèrent l’arrangement des objets dans une composition donnée. Dans cet article, nous allons étudier l’autre moitié de ces principes, les éléments du design, dans un effort de construction d’une base solide sur laquelle baser toutes nos enquêtes futures.

Que sont les Éléments du Design ?

Les éléments du design sont les composants de base utilisés dans n’importe quelle composition. Ils sont les objets que nous devons arranger, les parties constituantes utilisées pour créer la composition en elle-même. Dans la plupart des situations, les éléments du design s’appuient les uns sur les autres, les premiers aidants à créer les derniers, et les éléments de cet article sont organisés de cette manière. Nous allons nous concentrer sur les éléments : point, ligne, forme, texture et couleur.

Le point

Un point est un élément qui a une position mais pas d’extension. Il s’agit d’une seule marque dans l’espace, dont la localisation est précise mais limitée. Seul il peut fournir une relation forte entre l’espace positif et l’espace négatif, mais groupé avec d’autres points le réflexe de groupage fermé Gestalt(ien ?) a tendance à être déclenché et le cerveau connecte les points ensemble. La ligne ou la forme est le résultat naturel de plusieurs points dans l’espace.

  • PointPoint
  • Plusieurs points dans l’espacePlusieurs points
    dans l’espace
  • ComplétionComplétion

La ligne

Une ligne est un élément caractérisé par une longueur et une direction. Une ligne créée des contours et des formes et sont est souvent utilisées pour transmettre un sentiment particulier ou pointer vers un dispositif important dans la composition. Les lignes sont aussi utilisées pour créer une perspective, et les lignes dominantes sont souvent utilisées pour créer un sens de continuité dans une composition. De plus, les lignes qui sont groupées ensemble créent souvent un sentiment de valeur, densité ou texture.

  • OrganiqueOrganique
  • RigideRigide
  • Poids différentsPoids différents

La figure (ou forme)

La définition la plus simple d’une figure est un contour fermé, un élément défini par son périmètre. Les trois figures de bases sont : le cercle, le rectangle (ou carré) et le triangle. La figure est créée par la forme et la structure d’un élément dimensionnel dans une composition donnée. La figure peut être en deux ou trois dimensions et peut être réaliste, abstraite ou quelque part entre les deux. Les termes figure et forme sont souvent utilisés de manière synonyme, c’est pourquoi nous utilisons les deux ici. Dans la réalité, la figure est dérivée de la combinaison du point, de la ligne et de la forme.

  • ContourDe contour
  • DimensionnelleDimensionnelle

La texture

La texture est utilisée pour donner l’apparence d’une surface, et se rapporte à la composition physique d’une figure donnée. La texture se réfère souvent au matériau qui compose un objet, et peut être créée en utilisant n’importe lequel des éléments déjà abordés. La texture est un phénomène à la fois visuel et tactile.

  • Texture RugueuseTexture Rugueuse
  • Texture OrganiqueTexture Organique

La couleur

La couleur est la réponse de l’œil à des longueurs d’ondes différentes dans le spectre visible. Le spectre visible est ce que nous percevons comme la lumière. C’est la partie que nous pouvons voir dans le spectre électromagnétique. L’œil humain normal répond à des longueurs d’ondes entre 400 et 700 nanomètres (nm), le rouge étant à une extrémité (700nm), le violet à l’autre (400nm) et toutes les autres couleurs se situent entre ces deux couleurs.

Il y a beaucoup de systèmes de couleurs différents, et beaucoup de théories différentes sur la couleur. Nous rentrerons dans ce genre de détail dans un futur article. Pour l’instant nous allons nous concentrer sur les bases, en utilisant une roue chromatique pour illustrer nos propos. Il y a trois composantes principales de la couleur :

  • Teinte : où se trouve la couleur sur la roue chromatique. Des mots tels que rouge, bleu-vert ou mauve définissent tous la teinte d’une couleur donnée.
  • Valeur : le degré de clarté ou d’obscurité d’une couleur. En général, il s’agit de déterminer à quelle proximité une couleur donnée est du blanc ou du noir.
  • Saturation : l’intensité, ou le niveau de chroma d’une couleur. Plus une couleur est grise, moins elle a de chroma/moins elle est saturée.

La couleur : teinte, valeur, saturation

Les harmonies de couleur

Les harmonies de couleur servent à décrire les relations que certaines couleurs ont entre elles et comment elles peuvent être combinées pour créer une palette de couleur.

  • Complémentaire : une harmonie complémentaire est une harmonie de deux couleurs situées à des côtés opposés de la roue chromatique. Quand des couleurs complémentaires sont placées l’une à côté de l’autre, elles ont tendance à renforcer leurs intensités (chroma) respectives, et quand elles sont mélangées ensemble elles ont tendance à diminuer leurs intensités respectives.
  • Analogue : une harmonie analogue est une harmonie de couleur dont les teintes sont adjacentes sur la roue chromatique. Les couleurs analogues sont des familles de couleurs comme les bleus (bleu, bleu-violet, bleu-vert) et les jaunes (jaune, jaune-orange, jaune-vert).
  • Triadique : une harmonie triadique est une harmonie de 3 couleurs équidistantes les unes aux autre sur la roue chromatique. Les couleurs primaires et les couleurs secondaires sont des exemples de triades.

Dans ces exemples, un espace de couleur soustractif a été utilisé pour améliorer l’illustration.

  • ComplémentaireComplémentaire
  • AnalogueAnalogue
  • TriadiqueTriadique

Espaces de couleur

La couleur est généralement utilisée de manière hiérarchique, en fonction de comment les couleurs sont mélangées. Un espace de couleur définit comment les couleurs sont mixées, en fonction du médium sur lequel les couleurs sont utilisées. Il existe deux types différents d’espaces cde couleur :

  • Soustractif :un espace de couleur soustractif est l’espace de couleur traditionnel auquel la plupart des gens se réfèrent quand ils parlent de couleur. Il s’agit d’une couleur basée sur les pigments, comme le mélange de peinture. Dans un espace de couleur soustractif, les pigments manipulent les longueurs d’ondes que voient nos yeux. L’absence de pigment produit du blanc, et tous les pigments mélangés ensemble produit du noir.
    • Couleurs primaires : rouge, jaune, bleu.
    • Couleurs secondaires : orange, vert, violet.
  • Additif :un espace de couleur additif est un espace de couleur électronique. Il s’agit d’une couleur basée sur la lumière, comme le mélange de couleur sur un ordinateur. Dans un espace de couleur additif, la lumière est ajoutée sur l’écran en quantités différentes pour produire de la couleur. L’absence de lumière produit du noir, et la présence de toute la lumière, ou la lumière à son intensité maximum, produit du blanc.
    • Couleurs primaires : rouge, vert, bleu.
    • Couleurs secondaires : jaune, magenta, cyan.
  • Espace de couleur soustractifEspace de couleur
    soustractif
  • Espace de couleur additifEspace de couleur
    additif

Concepts connexes

Il y a de nombreux autres concepts qui sont liés aux éléments du design. Ils peut s’agir de termes spécifiques et/ou de techniques qui sont d’une certaine manière plus ou moins basés sur un ou plusieurs des principes présentées ci-dessus. Finalement, ils viennent s’ajouter à la collection d’outils de composition disponibles pour le designer.

Typographie

La typographie est l’art d’arranger les lettres (typeface), en sélectionnant le style, l’interlignage, la mise en page et l’apparence afin de solidifier le langage. La typographie a beaucoup de facettes, et nous n’approcherons que brièvement les termes les plus communs.

  • Ligne de base (ou ligne de pied) : la ligne sur laquelle repose toutes les lettres.
  • Ligne des descendantes : la ligne atteinte par les descendantes (ou jambages inférieurs) des lettres en minuscule.
  • Panse : la partie ronde ou elliptique d’une lettre.
  • Ligne des capitales : ligne atteinte par le haut des lettres majuscules.
  • Contrepoinçon : espace blanc, partiellement ou totalement enclos à l’intérieur de la panse d’un caractère.
  • Jambages : les jambages sont les parties des lettres qui s’étendent soit sous la ligne de base (jambages inférieurs, ou ascendantes) ou au dessus de l’œil (jambage supérieurs, ou descendantes).
  • Ligne médiane : ligne atteinte par le haut des lettres minuscules comme a, c ou e, ou par le haut de la panse de lettres minuscules comme b ou d.
  • Serif : le trait ajouté à l’une des extrémités des traits principaux d’une lettre.
  • Fût (ou montant) : le trait principal d’une lettre, qui est généralement droit et ne fait pas partie d’une panse.
  • Ligne des ascendantes : la ligne atteinte par les ascendantes (ou jambages supérieurs) des lettres minuscules.
  • Hauteur d’x (ou corps) : distance entre la ligne de base et la ligne médiane d’un alphabet. La hauteur d’x est généralement la hauteur des lettres minuscules basses.

La composition des lettres

Le Motif

Le motif est la répétition d’une figure ou d’une forme. Il peut aussi refléter la structure sous-jacente d’un design en organisant les surfaces ou les objets de la composition. Il y a beaucoup de types de motifs différents.

  • Fluide  : un motif fluide est basé sur la répétition d’une ligne ondulante et reflète un chemin naturel dans la composition.
  • Bifurquant : un motif bifurquant est une répétition de lignes intersectées ou des motifs de déviation. Ce genre de motifs se retrouve dans presque toutes les plantes et dans beaucoup d’endroits du monde naturel.
  • En spirale : un motif circulaire ou un motif qui se déroule et s’enroule sur lui-même.

Le mouvement

Le mouvement peut être défini comme le déplacement d’objets dans l’espace au cours du temps, et est souvent décrit de deux manières :

  • Littéral : le mouvement littéral est le mouvement physique. Par exemple : l’automobile, les films et la danse.
  • Compositionnel : le mouvement compositionnel est le mouvement de l’œil de la personne qui regarde la composition. Le mouvement compositionnel peut être soit statique, soit dynamique. Le mouvement statique saute entre les parties isolées d’une composition. Un mouvement dynamique s’écoule sans à-coup d’une partie de la composition à une autre.

Conclusion

Nous venons d’explorer complètement les concepts fondamentaux du domaine du design. Les principes du design nous offrent une manière de regarder le monde. Les axiomes prédominants de la profession affectent le designer de manière universelle, et fournit un guidage pour toute composition. Les éléments du design se rapportent aux éléments de la composition elle-même, et fournit au designer des outils avec lesquels commencer son travail.

Afin d’explorer les principes fondamentaux du design, nous devions prendre un peu de recul d’un type particulier de médium. Il est maintenant temps de se concentrer sur le Web. Dans le prochain article, nous enquêterons sur les contraintes du design pour le Web qui peuvent affecter la manière dont nous utilisons les principes et les éléments du design. Nous étudierons des concepts spécifiques à ce médium, comme la résolution écran, la compression d’image ou le mélange de couleur dans les espaces additifs.

Appel à la participation

Le quatrième article de la rubrique « Design in Theory and Practice » (« Le design en théorie et en pratique ») sera une revue des concepts discutés dans les trois articles précédents. Nous lierons ensemble tout ce que nous avons étudié jusqu’ici, en prenant tous les principes et éléments du design et en voyant comment ils sont mis en pratique. Nous utiliserons le médium du Web pour trouver des exemples réels de comment cela est fait.

Afin d’y parvenir, nous aurons besoin d’exemples de sites Web qui font une bonne utilisation de l’un ou plusieurs des concepts fondamentaux dont nous avons discuté. Si vous connaissez des sites qui correspondent, veuillez svp me contacter par e-mail (en anglais) en m’expliquant pourquoi vous pensez que c’est le cas, et en donnant un lien vers le site pour étude. J’essayerai d’en inclure autant que possible.

Ressources additionnelles et Références

Il y a beaucoup de ressources disponibles sur tous les sujets abordés dans cet article, à la fois en ligne et hors ligne. Ce qui suit est une petite liste de ceux que je connais, mais elle n’est en aucun cas exhaustive.

Ressources en ligne

  1. Art, Design, and Visual Thinking
  2. Wikipedia.org/wiki/typography
  3. Typographica – A Journal of Typography
  4. Counterspace
  5. Munsell Color Science Laboratory
  6. Pantone

Livres

  1. The Pantone Guide to Communicating with Color
  2. The Elements of Color
  3. The Elements of Typographic Style

Joshua David McClurg-Genevese vit et travaille à Columbus, Ohio, USA. Rêveur invétéré, quand il n’est pas assis devant un ordinateur, il est le plus heureux avec un pinceau ou un crayon à la main, illustrant ou (d)écrivant son petit monde à lui.


Et voilà, encore une autre traduction ! J’en ai plein dans ma besace, revenez-souvent ! :)

PouipouiDesignTraduction : Les Eléments du Design