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

Commençons par le commencement…

Cette publication parle du Web Design (non, vraiment), quoi qu’elle en semble un peu distraite et détachée parfois.
A mon avis, toute bonne discussion sur le design commence par les principes fondamentaux. Presque par définition, les fondements majeurs sur lesquels tout domaine est basé sont universels : ils peuvent être appliqués à une variété de disciplines de manières diverses. Cela peut parfois provoquer une confusion lorsqu’un principe est mis en pratique dans le cadre des contraintes spécifiques du médium choisi.

Le WebDesign est une profession relativement nouvelle par rapport aux autres formes de design, et ce à cause de la jeunesse de notre médium. Comme avec toute discipline de design, il y a des aspects du processus de Webdesign qui sont uniques au médium employé, telles que la résolution d’écran, les espaces de couleurs additives (???) travailler en RVB et plus CMJN (merci Sylvain Lelièvre de Pompage.net) et la compression d’image. Mais trop souvent ces détails un peu uniques dépassent notre sens de la globalité. Nous nous concentrons sur le fait qu’il s’agit de Web Design et laissons de côté les concepts centraux du design : ces concepts qui peuvent renforcer un projet sans interférer avec les considérations plus techniques par la suite.

En quoi le Web Design nous intéresse-t-il dans ce contexte ?

J’ai tendance à définir le Web Design comme étant l’une des nombreuses disciplines dans le large domaine du Design (un égal au design “print”, industriel, d’intérieur, etc.). Pour prendre encore plus de recul, je vois le design comme une discipline dans le domaine de l’art (un égal à la peinture, l’illustration, la sculpture, etc.). L’argument étant que pour commencer une discussion sur les fondamentaux du design tels qu’appliqués au Web Design, nous devons comprendre qu’il y a une bonne quantité d’éléments que le design a “hérité” au cours du temps des autres formes d’art. Ces formes d’art, comme la lithographie, la typographie, la peinture/l’illustration et le design industriel ont évolué sur beaucoup de siècles, et un certain nombre d’idées ont émergé comme guide pour n’importe quelle démarche artistique. Lorsque nous parlons de concepts fondamentaux, nous regardons inévitablement à l’extérieur de notre discipline et adoptons une perspective un peu plus large.

Les trois premiers articles de cette colonne seront dédiés à l’excavation de ces joyaux universels de perspicacité afin de mieux comprendre notre profession. Dans les deux premiers articles, nous adopterons une perspective plus large pour établir une base. Dans le troisième article, nous lions le tout ensemble, en utilisant des exemples réels afin de voir comment les principes de base sont mis en pratique au travers du médium web.

---

I – Les principes du design

Il y a beaucoup de concepts fondamentaux qui sont à la base du domaine du design. Ils sont souvent catégorisés différemment dépendamment de la philosophie ou de la méthodologie d’enseignement. La première chose que nous devons faire est de les organiser, afin d’avoir un cadre pour cette discussion.

Nous pouvons regrouper tous les fondements du design en deux catégories : principes et éléments. Pour cet article, les principes de design sont les vérités finales de la profession. Ils représentent les hypothèses de base du monde qui guident la pratique du design, et interfèrent sur l’arrangement d’objets dans une composition. Par comparaison, les éléments du design sont les composants du design eux-mêmes, les objets à arranger.

Commençons en nous concentrant sur les principes du design, les axiomes de notre profession. Plus spécifiquement, nous allons étudier les principes suivants :

• équilibre,
• rythme,
• proportion,
• prédominance,
• unité.

Équilibre

L’équilibre est une stabilité qui résulte de l’examen d’une image et d’une comparaison avec nos idées de la structure physique (comme la masse, la gravité, ou les bords d’une page). C’est l’arrangement d’objets dans un design spécifié en fonction de leur poids visuel dans la composition. L’équilibre existe généralement sous deux formes : symétrique et asymétrique.

Symétrique

L’équilibre symétrique a lieu quand le poids d’une composition est réparti uniformément autour d’un axe central vertical ou horizontal. Dans des circonstances normales, il prend les mêmes formes des deux côtés de l’axe. Quand la symétrie a lieu avec des formes similaires mais pas identiques, cela est appelé symétrie approximative. De plus, il est possible de construire une composition de manière égale autour d’un point central résultant d’une symétrie radiale.
L’équilibre symétrique est aussi connu sous le nom d’équilibre formel.

Asymétrique

L’équilibre asymétrique se produit quand le poids de la composition n’est pas réparti uniformément autour d’un axe central. Cela implique l’arrangement d’objets de tailles différentes de sorte qu’ils s’équilibrent mutuellement grâce à leur poids visuel respectif. Il s’agit souvent d’une forme majoritaire équilibrée par un grand nombre de formes plus petites. En général, les compositions asymétriques possèdent une plus grande tension visuelle.
L’équilibre asymétrique est aussi connu sous le nom d’équilibre informel.

• Symétrie Horizontale
• Symétrie horizontale
  approximative
• Symétrie Radiale
• Asymétrie

Rythme

Le rythme est la répétition ou l’alternance d’éléments, souvent avec un intervalle visuel défini entre eux. Le rythme peut créer un sens de mouvement, et peut définir des motifs et des textures. Il y a différents types de rythmes, souvent définis par le ressenti à l’examen.

• régulier : un rythme régulier se produit quand les intervalles entre les éléments, et souvent les éléments eux-mêmes, sont similaires en taille ou en longueur.
• Fluide : un rythme fluide donne un sens de mouvement et est souvent plus organique de nature.
• Progressif : un rythme progressif affiche une séquence de formes au travers une progression d’étapes.

• Rythme régulier
• Rythme fluide
• Rythme progressif

Proportion

La proportion est la comparaison des dimensions ou de la distribution des formes. C’est la relation d’échelle entre un élément et un autre, ou entre un objet entier et une de ses parties. Des proportions différentes à l’intérieur d’une composition peuvent interagir avec différents types d’équilibre ou de symétrie, et peuvent aider à établir le poids et la profondeur visuels. Dans les exemples ci-dessous, remarquez comme les éléments plus petits ont l’air de reculer vers le fond tandis que les éléments plus gros s’approchent du devant.

  

Prédominance

La prédominance se rapporte aux différents degrés d’emphase dans le design. Elle détermine le poids visuel d’une composition, établit l’espace et la perspective, et souvent décide où va l’œil en premier quand il regarde un design. Il y a trois étapes de prédominance, chacune se rapportant au poids d’un objet particulier au sein d’une composition.

• Prédominant : l’objet qui a le plus de poids visuel, l’élément le plus en emphase, qui avance au premier plan d’une composition.
• Dominant : l’élément second en emphase, les éléments au plan médian d’une composition.
• Subordonné : l’objet qui a le moins de poids visuel, l’élément le moins en emphase, qui recule au dernier plan d’une composition.

Dans l’exemple ci-dessous, les arbres agissent comme l’élément prédominant, la maison et les collines comme les éléments secondaires, et la chaîne de montagnes comme l’élément tertiaire subordonné.

Unité

Le concept d’unité décrit la relation entre la globalité d’une composition et les parties individuelles qui la composent. Elle recherche l’aspect d’un design donné qui est nécessaire à la liaison de la composition, afin de lui donner un sens d’unité ou au contraire de la morceler et lui apporter la variété. L’unité dans le design est un concept qui vient de certaines théories Gestalt de la perception visuelle et de la psychologie, spécifiquement celles traitant de l’organisation de l’information visuelle par le cerveau humain en catégories ou groupes.

La théorie Gestalt en elle-même est assez longue et complexe, traitant de divers niveaux d’abstraction et de généralisation, mais certaines des idées basiques qui émergent de ce type de raisonnement sont plus universelles.

Complétion

La complétion est l’idée que le cerveau a tendance à insérer l’information manquante quand il perçoit qu’il manque certaines parties d’un objet.
Les objets peuvent être déconstruits en groupes de parties plus petites, et quand certaines des ces parties sont manquantes le cerveau tends à ajouter de l’information à un objet pour atteindre la complétion. Dans les exemples ci-dessous, nous remplissons compulsivement l’information manquante pour créer les formes.

Continuité

La continuité est l’idée qu’une fois qu’on commence à regarder dans une direction, on continuera de le faire jusqu’à ce que quelque chose de plus important attire votre attention. La perspective, ou l’utilisation de lignes directionnelles prédominantes, sert à amener le regard du spectateur vers une direction donnée. De plus, la direction des yeux de n’importe quel sujet dans le design peut causer un effet similaire. Dans l’exemple ci-dessous, l’œil suit directement la direction de la route, terminant dans le coin haut droit du cadre de référence. Il n’y a aucun autre objet prédominant pour attraper et rediriger l’attention.

Similarité, proximité et alignement

Des items de taille, forme ou couleur similaire ont tendance à être groupés ensemble par le cerveau, et une relation sémantique entre les items se forme. De plus, les items proches ou alignés les uns avec les autres tendent à être groupés de la même manière.
Dans l’exemple ci-dessous, remarquez comme il est plus facile de grouper les objets et de définir leur forme dans le coin haut gauche que dans le coin bas droite.

II – Concepts connexes

Il y a beaucoup d’autres concepts liés aux principes du design. Ceux-ci peuvent comprendre des termes et/ou des techniques spécifiques qui sont basés d’une certaine manière sur un ou plusieurs des principes énoncés plus haut. Finalement, ils viennent s’ajouter à la collection d’outils de composition disponibles pour les designers.

Contraste ou Opposition

Le contraste se rapporte à la notion de tension dynamique, et l’opposition au degré de conflit, qui existent entre les éléments visuels d’une composition dans un design donné.

Espace positif et négatif

L’espace positif et négatif se rapporte à la juxtaposition de formes et d’un plan dans une composition. Les objets dans un environnement représentent l’espace positif tandis que l’environnement lui-même est l’espace négatif.

Règle des tiers

La règle des tiers est un outil de composition qui utilise la notion que les compositions les plus intéressantes sont celles dans lesquelles l’élément primaire (ou prédominant) n’est pas centré. En gros, prenez n’importe quel cadre de référence et divisez-le en tiers en plaçant les éléments d’une composition sur une ligne les séparant.

Centre visuel

Le centre visuel de n’importe quelle page est légèrement plus haut et à droite que le centre mathématique réel. C’est vers là que tends naturellement à être le foyer, et est aussi parfois appelé la « hauteur musée ».

Couleur et Typographie

Beaucoup placeraient la couleur et la typographie avec les 5 principes décrits ci-dessus. Je pense personnellement qu’elles sont toutes les deux des éléments du design à part entière, je leur donnerai donc plus d’attention dans ma prochaine colonne. De plus, chacun de ces sujets est si robuste que j’ai prévu d’écrire des articles entiers pour chacun d’eux dans le futur.

---

CONCLUSION

En WebDesign il est trop aisé de se noyer dans les nombreuses contraintes particulières au medium et de complètement en oublier certains principes sous-jacents qui peuvent renforcer n’importe quel design. Afin de mieux discuter de ces concepts, nous devons nous éloigner de notre discipline spécifique et inspecter l’histoire du domaine. C’est là que nous trouverons les axiomes de notre profession.

Dans cet article, nous avons analysé la moitié de ces axiomes, les principes du design. Ils sont les vérités qui nous guident dans notre profession, les concepts basiques d’équilibre, rythme, proportion, prédominance et unité. L’utilisation heureuse de ces idées centrales assure une base solide sur laquelle n’importe quel design peut évoluer.

Dans la prochaine colonne, je discuterai les éléments du design – les composants basiques utilisés dans n’importe quelle composition, comme le point, la ligne, la forme, la texture, la couleur et la typographie. Commentaires et suggestions sont les bienvenus et appréciés.

Ressources additionnelles et Références

Il y a beaucoup de ressources disponibles à propos de 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

• Art, Design, and Visual Thinking de Charlotte Jirousek
• Gestalt Design and Composition de James T. Saw
• Society for Gestalt Theory and its Applications
• Graphic Design Basics
• Introduction to the Principles of Design de Jacci Howard Bear

Livres

• Design Basics de David Lauer
• The Elements of Graphic Design de Alexander W. White
• Principles of Two-Dimensional Design de Wucius Wong
• Grid Systems in Graphic Design de Josef Muller-Brockmann
• Design Principles and Problems de Paul Zelanski, Mary Pat Fisher
• A Primer of Visual Literacy de Donis A. Dondis
• History of Art de Anthony F. Janson
• A History of Graphic Design de Philip Meggs
• The Non-Designer’s Design Book de Robin Williams
• Geometry of Design: Studies in Proportion and Composition by Kimberly Elam

---

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.

---

Voilà, j’espère que cet article vous aura plût, vos commentaires seront les bienvenus !!