Catégories
Plugin et site web

Ce que Vitruve peut nous apprendre sur la conception Web – Smashing Magazine

A propos de l'auteur

Frederick O’Brien est un journaliste indépendant qui se conforme à la plupart des stéréotypes britanniques. Ses intérêts incluent la littérature américaine, le graphisme, le développement durable…
Plus à propos
Frédéric

Les anciens peuvent nous apprendre une chose ou deux sur le design – même le webdesign. L'architecte romain Vitruve avait à l'esprit les bâtiments lors de la présentation de sa triade d'or, mais ses principes sont tout aussi applicables à la toile qu'ils le sont à la brique et au mortier.

Il n'y a pas moyen d'échapper aux anciens maîtres. Leurs ombres dominent la philosophie, la littérature, l'architecture, la guerre et… la conception Web? Croyez-le ou non, oui. Bien que Platon ait tristement omis CSS Grid de la version finale de La république, il y a néanmoins beaucoup de choses que les anciens chefs peuvent nous apprendre sur le développement web.

La conférence d'aujourd'hui porte sur l'architecture et sur la manière dont certains de ses principes fondamentaux s'appliquent au Web mondial. Les termes architecturaux ne sont pas inhabituels dans le développement Web, et pour une bonne raison. À bien des égards, les développeurs Web sont des architectes numériques. Cette pièce se concentrera sur Vitruve, un architecte romain, et comment ses principes peuvent et doivent être appliqués aux sites Web.

Celui-ci portera notamment sur la triade Vitruve, trois qualités essentielles à tout bâtiment: la durabilité (firmitas), l'utilité (utilitas) et la beauté (venustas). La familiarité avec ces termes – et ce qu'ils signifient dans la pratique – contribuera à améliorer votre site Web.

Vitruve

Marcus Vitruvius Pollio était un architecte romain, ingénieur civil et auteur qui a vécu au premier siècle avant JC. Il est surtout connu pour ses écrits sur l'architecture, De architectura. S'adressant à l'empereur d'alors Auguste, Vitruve expose ses réflexions sur la théorie architecturale, l'histoire et les méthodes.

Dessin de l'architecte romain Marcus Vitruvius Pollio
Vitruve posant pour un portrait de LinkedIn. (Grand aperçu)

De architectura est le seul traité d'architecture à avoir survécu à l'antiquité, et reste une pierre de touche du design à ce jour. Comme vous pouvez probablement le deviner, Léonard de Vinci Homme de Vitruve a été inspiré par les écrits de Vitruve sur la proportion.

Pour ceux d'entre vous intéressés à descendre un trou de lapin d'architecture, le texte intégral de De l'architecture est disponible gratuitement sur Project Gutenberg. Cette pièce ne tentera pas de résumer tout le livre. Il y a plusieurs raisons à cela. Tout d'abord, il y aurait énormément de choses à couvrir. Deuxièmement, je n’ai pas totalement perdu de vue qu’il s’agit d’un magazine de conception Web. Nous allons perfectionner la triade de Vitruve, une norme de conception qui s'applique bien au-delà de l'architecture.

Les anciens avaient le don de réduire les sujets à l'essentiel – vous pourriez dire élémentaire -. La triade de Vitruve en est un exemple. Il y a d'autres architectes qui méritent d'être étudiés, d'autres théories du design qui valent la peine d'être familières, mais Vitruve propose un ABC particulièrement soigné qui s'applique aussi bien au web qu'aux temples.

La Triade de Vitruve

Dans De architectura, Vitruve a identifié trois qualités essentielles à toute architecture. Depuis des siècles, ils se sont imposés comme ses «règles d'or». Si vous voulez faire plaisir à Vitruve – ce que vous faites bien sûr – chaque fois que vous faites une chose, vous devez vous efforcer de la faire:

  • Utile (utilitas)
  • Durable (firmitas)
  • Beau (venustas)

Concevoir avec ces trois choses à l'esprit élèvera votre travail. Avoir une de ces qualités, c'est bien; en avoir deux, c'est bien; et avoir les trois ensemble est divin. Divin semble être la meilleure option. Décrivons ce que chacune des trois qualités signifie en principe, puis comment elles peuvent être appliquées à la conception Web.

Utile (utilitas)

En principe

Les bâtiments sont conçus et construits pour une raison. Quel que soit ce but, il doit toujours être l’esprit d’un architecte. Si la structure ne remplit pas son objectif, il y a de fortes chances que cela ne soit pas très utile. Un théâtre sans scène a plutôt laissé tomber le ballon, par exemple.

Selon Vitruve, l'utilité sera assurée "Lorsque la disposition des appartements est irréprochable et ne présente aucun obstacle à l'utilisation, et lorsque chaque classe de bâtiment est affectée à son exposition appropriée et appropriée."

Vous avez déjà entendu celui-ci auparavant, mais avec une langue différente. Vitruve est le grand-papa de dire comment le formulaire doit suivre la fonction. Louis Sullivan, le «père des gratte-ciel», a inventé ce terme particulier en 1896. Sullivan aurait attribué l'idée à Vitruve, bien que la documentation à ce sujet soit douteuse. C’est en tout cas ce que utilitas se résume à.

Photographie de l'ancienne bibliothèque publique de Cincinnati
Objectif: Bibliothèque. Tout est clair? (Grand aperçu)

Différents types de bâtiments ont des exigences différentes. Un bâtiment conçu avec ces exigences après coup décevra probablement. Cela peut sembler évident, mais il y a suffisamment d'éléphants blancs dans ce monde pour justifier la prudence. Les centres commerciaux labyrinthiques et les dômes métalliques hautement conducteurs dans les aires de jeux peuvent sembler cool dans les présentations des investisseurs, mais ils ne sont pas terriblement utiles.

Capture d'écran d'un article de presse du New York Times sur une action en justice sur un terrain de jeu
Ne soyez pas le concepteur de l'aire de jeux dont l'aire de jeux donne aux enfants des brûlures au deuxième degré. Article complet dans le New York Times. (Grand aperçu)

Cela signifie également que les différentes parties d'une structure doivent être logiquement connectées. En d'autres termes, ils doivent être simples d'accès et de navigation. Si un bâtiment est utile et facile à utiliser, c'est un très bon début.

En ligne

Utilitas s'applique également à la conception Web. Chaque site Web a un but. Cet objectif peut être pratique, comme un moteur de recherche ou des prévisions météorologiques, ou peut être artistique, comme une histoire interactive ou un portfolio de conception graphique. Quoi qu'il en soit, il a une raison d'exister, et s'il est conçu dans cet esprit, il est plus susceptible d'être utile à quiconque visite le site.

Une encyclopédie dont vous vous attendriez à être facile à rechercher et à naviguer, avec des informations clairement présentées et correctement citées. Wikipedia, par exemple, coche toutes ces cases. C'est l'équivalent sur le Web d'une énorme bibliothèque, jusque dans les sections obscures et le personnel se chamaillant dans les coulisses. Il a été construit avec une utilité avant et centrale, et donc sa conception de base est restée cohérente au cours des années depuis sa fondation.

Alternativement, le but d'une publication est de produire un contenu original intéressant ou intéressant pour ses lecteurs. Pour être utile, la publication d'un site Web présenterait ledit contenu de manière dynamique et directe, en accordant une attention particulière à l'expérience de lecture sur divers appareils. Un site Web avec un contenu merveilleux et une mauvaise conception mine sa propre utilité.

Capture d'écran de la page d'accueil du journal The Guardian
Le gardien est un journal. Son but est de rapporter les nouvelles. Son site Web primé ne se contente pas de slogans ou de spectacles; il est plein de contenu. (Grand aperçu)

Un objectif clair conduit à une conception claire. Si un objectif vous amène dans plusieurs directions différentes, il en sera de même pour le site Web. Vous ne pouvez pas être tout pour tout le monde, et il est inutile d’essayer. L'utilité tend à répondre à des besoins spécifiques, pas à tous.

En ce qui concerne l'utilité, vous ne pouvez pas vous permettre de traiter les sites Web comme quelque chose d'abstrait. Comme les bâtiments, les sites Web sont visités et utilisés par les gens et doivent être conçus en pensant à eux avant tout. Les investisseurs, les annonceurs et tous les autres acteurs sordides auront leur temps, mais si vous les laissez entrer trop tôt, l'utilité d'un site sera compromise. Lorsqu'une publication divise des articles sur plusieurs pages uniquement pour gonfler le trafic, son utilité est réduite. Lorsqu'une plateforme de commerce électronique semble plus soucieuse de vous pousser vers le bas des entonnoirs de conversion que de fournir des informations honnêtes sur ses produits, son utilité est réduite. Dans de tels cas, l'objectif est devenu secondaire et la conception en souffre.

Capture d'écran de la page d'accueil du moteur de recherche DuckDuckGo
Nous reconnaissons les caractéristiques de la conception des moteurs de recherche, tout comme nous reconnaissons les théâtres, les bibliothèques ou les stades sportifs. Leurs formes sont façonnées autour de leur fonction. (Grand aperçu)

De même, comme les bâtiments, les sites Web doivent être faciles à naviguer. Garantir l'utilité d'un site Web nécessite une planification minutieuse. Lorsque l'architecte a des plans d'étage et des modèles, le développeur Web a des plans de site, des wireframes, etc. Ceux-ci nous permettent d'identifier rapidement les problèmes de mise en page et de les résoudre.

Regarder le design à travers différents objectifs est particulièrement important ici. La palette tient-elle compte du daltonisme et des différences culturelles? Les couleurs signifient différentes choses dans différents endroits, après tout. Est-il facile de naviguer à l'aide de claviers et de lecteurs d'écran? Tout le monde ne navigue pas sur le Web de la même manière que vous. Certes, il vaut mieux être utile au plus grand nombre de personnes possible? Il n'y a aucune bonne excuse pour que les sites Web ne soient pas à la fois accessibles et inclusifs.

Durable (firmitas)

En principe

Firmitas se résume à l'idée que les choses doivent être construites pour durer. Une structure incroyablement utile qui bascule après quelques années serait largement considérée comme un échec. Un bâtiment bien fait peut durer des siècles, voire des millénaires. Ironiquement, aucun des bâtiments de Vitruve ne survit, mais le point est toujours là.

Ce principe englobe plus d’aspects de l’architecture qu’on ne pourrait le penser immédiatement.

La durabilité sera assurée lorsque les fondations seront ramenées au sol solide et que les matériaux seront judicieusement et librement sélectionnés.
– Vitruve

En d'autres termes, choisissez soigneusement votre destination, posez des fondations profondes et utilisez des matériaux appropriés.

Photographie de la Grande Muraille de Chine
Avec certaines sections vieilles de plus de 2000 ans, il est sûr de dire que la Grande Muraille de Chine a été construite pour durer. Photographie d'Andrea Leopardi. (Grand aperçu)

Nous comprenons tous instinctivement que la longévité est une marque de bonne conception. Il reflète des matériaux de qualité, une planification méticuleuse et un entretien soigné. Le Panthéon de Rome, ou la Grande Muraille de Chine, témoignent d'un design durable, réputé autant pour leur longévité que pour leur majesté.

Le principe concerne également les facteurs environnementaux. Les bâtiments sont-ils conçus en tenant compte des contraintes météorologiques, des tremblements de terre, de l'érosion, etc.? Sinon, ce ne sera peut-être pas un bâtiment pour longtemps …

Images du pont de Tacoma Narrows peu avant son effondrement
Le pont de Tacoma Narrows a sa durabilité mise à l'épreuve après que les ingénieurs ont réduit les coûts. Spoiler: il s'est effondré.

Il est rassurant de savoir que vous pouvez compter sur une structure qui ne s'effondrera pas pendant un certain temps, et à long terme, elle finit généralement par être moins chère. Un bâtiment durable repose sur des fondations solides et utilise des matériaux adaptés à sa destination et à son environnement. Les bâtiments qui ne sont pas conçus pour durer sont généralement des plateaux de tournage glorifiés. Avant longtemps, ce sont des décombres.

En ligne

Le temps semble passer beaucoup plus vite sur le web, mais le principe de firmitas s'applique toujours. Compte tenu des turbulences sans fin de la vie en ligne, il est logique de planter votre drapeau dans quelque chose de solide. Sur les trois qualités, c'est la moins visible pour les utilisateurs, mais sans elle, tout le reste s'effondrerait.

Cela commence par des considérations sous le capot. Les fondations doivent être solides. Où ira le site Web? Le système de gestion de contenu est-il adapté? Votre fournisseur d'hébergement Web peut-il gérer le trafic attendu (et plus) et tout de même fonctionner correctement? Comme toute personne ayant migré d'un CMS à un autre peut vous le dire, cela vaut la peine de bien faire les choses la première fois si possible.

Un message d'erreur générique pour les sites Web avec des problèmes de serveur
Voici à quoi ressemble un site Web en ruine. (Grand aperçu)

Il y a aussi la longévité des technologies Web que vous utilisez. Les nouveaux cadres peuvent sembler une bonne idée à l'époque, mais si un site doit être présent pendant des années, il peut être judicieux de recourir à HTML, CSS et JavaScript, ainsi qu'à des balises SEO universellement prises en charge comme les données structurées. Comme en architecture, construire des choses pour durer signifie souvent utiliser des matériaux établis plutôt que des matériaux nouveaux.

La durabilité s'étend à la conception. Les pages Web doivent se plier, s'étirer et se déformer de manière à faire pleurer les architectes. Un site Web réactif est un site Web durable. Au fur et à mesure que de nouveaux appareils – pliables, par exemple – et que des annotations entrent en jeu, les sites Web doivent pouvoir les prendre en main. Les architectes ne croisent pas les bras et ne bougent pas face aux tremblements de terre, alors pourquoi les concepteurs de sites Web devraient-ils éviter les dangers du Web? Une grande conception fait face aux défis environnementaux; cela ne les évite pas.

À mesure qu'un site grandit, ses utilisateurs se familiariseront avec sa conception. Plus cela se produit, plus c'est difficile de faire des changements en gros. Si un site est conçu avec soin dès le début, les rénovations sont plus susceptibles que les reconstructions et l'apparence reste familière même lorsqu'il est mis à jour. En ce sens, la durabilité d'un site est considérablement améliorée par un objectif clair. C'est en soi une sorte de substratum rocheux qui aide à garder les sites solides en période de changement. Même les meilleurs sites ont besoin de mises à jour de temps en temps.

Capture d'écran de la page d'accueil du site Web Smashing Magazine
La refonte de Smashing Magazine en 2017 a solidifié les éléments en coulisses tels que la gestion de contenu, les sites d'emploi et le commerce électronique tout en gardant le personnage frontal familier. (Grand aperçu)

Il y a aussi la question de la durabilité. Une attention particulière est-elle accordée aux réalités commerciales du site? En d'autres termes, où est le box-office? Qu'il s'agisse de murs payants, de publicité ou de systèmes d'adhésion, il n'y a aucune honte à les intégrer dans le processus de conception. Ils ne sont pas le but d'un site, mais ils contribuent à le rendre durable.

Belle (venustas)

En principe

Comme le dit Vitruve, «l'œil est toujours à la recherche de la beauté». C'est une qualité parfaitement légitime à viser.

Selon De architectura, la beauté se produit «Lorsque l'apparence de l'œuvre est agréable et de bon goût, et lorsque ses membres sont en proportion appropriée selon les principes corrects de symétrie.»

En plus d'être utiles et bien construits, les bâtiments doivent également être agréables à l'œil. Certains peuvent même toucher le cœur.

Une illustration des écrits de Vitruve sur l'architecture
Si vous voulez concevoir un bon temple, Vitruve est également utile pour cela. (Grand aperçu)

Vitruvius décrit plusieurs qualités qui contribuent à rendre les bâtiments beaux. La symétrie et la proportion l'intéressaient particulièrement (d'où Da Vinci Homme de Vitruve). L'intégration obsessionnelle des formes dans tout est antérieure à la conception graphique de quelques millénaires.

Chaque élément d'une structure doit être considéré par rapport à d'autres à proximité, ainsi qu'à l'environnement dans lequel elle est construite. Vitruve résume cette interaction avec un seul mot: eurythmie, un terme grec pour rythme harmonieux. (Le duo de pop britannique Eurythmics tire son nom du même terme, au cas où vous vous poseriez la question.) Vitruve le définit dans un contexte architectural comme suit:

L'eurythmie est la beauté et le fitness dans les ajustements des membres. On le trouve lorsque les membres d'une œuvre sont d'une hauteur adaptée à leur largeur, d'une largeur adaptée à leur longueur et, en un mot, lorsqu'ils correspondent tous symétriquement.

Comme la musique, les bâtiments ont un rythme; leurs pièces individuelles formant une sorte d'harmonie. Un beau bâtiment pourrait être l'équivalent en marbre sculpté d'un chœur de Beach Boys, tandis qu'un laid est comme des clous sur un tableau noir.

Un exemple de McMansion Hell critiquant l'architecture de mauvaise qualité
Pour ceux qui sont curieux de savoir à quoi ne ressemble pas une belle architecture, McMansion Hell est un bon point de départ. (Grand aperçu)

En plus d'être bien proportionnées et symétriques, les pièces individuelles peuvent améliorer la beauté d'autres manières. Un bon savoir-faire est beau, tout comme le souci du détail. Les matériaux appropriés à la structure sont également beaux – reflétant le bon jugement et le bon goût du concepteur.

L'ornementation est acceptable, mais elle doit compléter la conception de base de la structure – pensez aux gravures des colonnes, aux motifs de pavage, etc. Tous ces petits détails et considérations représentent le bâtiment dans son ensemble. Quand ils tombent tous ensemble, c'est à couper le souffle.

En ligne

Les beaux sites Web respectent bon nombre des mêmes normes que l'architecture. La proportion et la symétrie sont les piliers d'un design attrayant. Les systèmes de grille ont le même objectif d'organiser le contenu de manière claire et attrayante. Au-delà de cela, il y a des questions de couleur, de typographie, d'imagerie, etc., qui alimentent toutes la beauté d'un site Web – ou son absence.

Pour lancer la balle, voici une poignée de ressources sur Smashing Magazine seul:

Un aspect des venustas particulièrement pertinent pour la conception de sites Web est la manière dont les utilisateurs peuvent interagir avec. En plus d'être agréables à regarder, les sites Web ont le potentiel d'être ludiques, voire surprenants. C’est une chose de s’asseoir et d’être admiré, c’est une autre d’inviter les visiteurs à faire partie de la beauté.

Capture d'écran du site Web du portfolio de Bruno Simon
Le site Web du portfolio de Bruno Simon invite les visiteurs à se déplacer en utilisant leurs touches fléchées. (Grand aperçu)

Les griffonnages interactifs de Google en sont un autre bon – et moins intimidant – exemple. Couvrant toutes sortes de sujets, ils invitent les utilisateurs à jouer à des jeux, à apprendre et à se divertir. Il est agréable en soi et correspond au but de Google en tant que source d'informations.

Exemple d'un Google Doodle
Ironiquement, ce n'est qu'un GIF d'une chose interactive plutôt que la chose interactive elle-même, mais vous pouvez voir le doodle complet et les détails de sa création ici. (Grand aperçu)

Alors que le Web poursuit sa transition vers une expérience mobile avant tout, dans laquelle les utilisateurs peuvent littéralement toucher les sites Web qu'ils visitent, il ne faut pas oublier que la beauté concerne tous les sens – pas seulement la vue.

Quant à «l'environnement», avec la conception Web qui est le périphérique sur lequel il est affiché. Contrairement aux bâtiments, les sites Web n'ont pas le luxe d'être une seule forme à tout moment. Pour être belles, elles doivent être réactives, changer de taille et de proportion pour compléter l'appareil. C'est agréable en soi, et bien fait, le changement de forme lui-même devient beau à sa manière.

Un équilibre

Les règles de Vitruve utilitas, firmitas, et venustas ont enduré parce qu'ils travaillent, et ils ont enduré en triade parce qu'ils travaillent mieux ensemble. Atteindre les trois est un acte d'équilibre. S'ils tirent dans des directions différentes, la qualité de tout ce qui est fait en souffrira. Beau mais inutilisable est un mauvais design, par exemple. D'un autre côté, lorsqu'ils travaillent ensemble, le résultat peut être bien supérieur à la somme de leurs parties.

Comme pour l'architecture, cela nécessite une vue à vol d'oiseau. Les pièces ne peuvent pas être faites une à la fois, elles doivent être faites avec les autres à l'esprit.

L'architecte, dès qu'il a formé la conception et avant de commencer le travail, a une idée précise de la beauté, de la commodité et de la convenance qui le distingueront.
– Vitruviuas

Nul doute que les détails changeront, mais l'harmonie ne devrait pas.

Cela s'étend aux personnes qui créent un site Web. Comme pour l'architecture, les sites Web doivent généralement équilibrer les désirs d'un client, d'un architecte et d'un constructeur – sans parler des investisseurs, des financiers, des statisticiens, etc. Pour qu'un site Web soit harmonieux, il en va de même pour les personnes responsables de sa construction.

Rien de tout cela ne veut dire que les trois qualités sont également importantes quel que soit le projet – seulement que chacune doit être mûrement réfléchie par rapport aux autres. L'utilité de la Tour Eiffel semble assez banale, tout comme la beauté du barrage Hoover, et c'est très bien. Si un site Web est conçu pour être ornemental ou temporaire, il ne doit pas être plus que cela. Les natures de utilitas, firmitas, et venustas eux-mêmes changent en fonction du projet. Comme la plupart des règles qui valent la peine d'être suivies, n'ayez pas peur de les plier – ou même de les briser – lorsque l'humeur vous prend.

Mon site Web est un temple

Les développeurs Web sont les architectes d'Internet et les sites Web sont leurs bâtiments. Vitruve tient à dire que les architectes ne sont pas – et ne peuvent pas être – des experts dans tous les domaines. Au lieu de cela, ce sont des crics de tous les métiers (mon phrasé, pas le sien). Pour que la triade soit réalisée, il vaut mieux avoir une bonne compréhension de nombreux sujets que l'expertise en un seul:

Qu'il soit éduqué, habile avec le crayon, instruit en géométrie, connaisse beaucoup l'histoire, ait suivi les philosophes avec attention, compris la musique, avoir une certaine connaissance de la médecine, connaître les opinions des juristes et se familiariser avec l'astronomie et la théorie de la Le Paradis.

La pertinence de certains d’entre eux est évidente, d’autres moins, mais elle est tout aussi précieuse pour les architectes que pour les développeurs Web. La géométrie informe la proportion et la disposition; l'histoire met les conceptions en contexte et s'assure qu'elles sont comprises telles qu'elles sont censées être; la philosophie nous aide à aborder les projets de manière honnête et éthique; la musique nous éveille au rôle du son; la médecine réfléchit à l'accessibilité et aux tensions potentielles sur l'œil, l'oreille ou même le pouce; et la loi se profile plus que jamais. La théorie des cieux est peut-être un peu exagérée, mais vous voyez l'idée.

Voici encore plus de liens pour vous aider sur votre chemin:

Ce n'est pas cette théorie seule qui vous y mènera. Rien ne remplace l’apprentissage par la pratique. Comme le note la Stanford Encyclopedia of Philosophy, «l'image de Vitruve de l'architecture est enracinée dans la connaissance expérientielle de la fabrication, de la fabrication et de l'artisanat». Ou mieux encore, comme le dit Vitruve lui-même: "La connaissance est l'enfant de la pratique et de la théorie."

La triade de Vitruve est une norme valable à utiliser, que vous construisiez un colisée ou un site Web de portefeuille. Tout le monde n'a pas le luxe (ou le budget pour) une équipe d'experts, et même si nous l'avons fait, pourquoi se priver de l'étendue des connaissances qu'exige un design solide? Nous pouvons construire Levittown ou nous pouvons construire Rome, et tout le reste. Un Internet utile, durable et beau me semble une bonne affaire.

Smashing Editorial(ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *