Fermer

juin 19, 2020

Ce que Vitruve peut nous apprendre sur la conception Web


À 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…
En savoir plus sur
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.

On ne peut échapper aux maîtres anciens. 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 comment certains de ses principes fondamentaux s'appliquent au Web mondial. Les termes architecturaux ne sont pas inhabituels dans le développement Web et pour cause. À 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.

Cela se concentrera en particulier sur la triade de 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 cours du 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 Vitruve 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'homme de Vitruve de Léonard de Vinci a été inspiré par les écrits de Vitruve sur la proportion.

Pour ceux d'entre vous qui souhaitent descendre un trou de lapin d'architecture, le texte intégral de ] De architecture est disponible gratuitement sur le projet 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 nous concentrer sur 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 à leurs nus – vous pourriez dire élémentaires – essentiels. 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 méritent 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

En De architectura Vitruve a identifié trois qualités essentielles à toute architecture. Au cours des siècles, depuis qu'ils se sont imposés comme ses «règles d'or». Si vous voulez rendre Vitruve heureux – 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)
  • Belle (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 de sites 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'usage, et lorsque chaque classe de bâtiment est assigné à son exposition appropriée et appropriée. »

Vous avez déjà entendu celui-ci auparavant, mais avec un langage différent. Vitruve est le grand-papa qui explique comment la forme 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
But: 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 terrains 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 à propos d'un procès pour terrain de jeux
Ne soyez pas le concepteur du terrain de jeu dont le terrain de jeu donne aux enfants des brûlures au deuxième degré. Article complet dans The 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 que vous attendez pour être facile à rechercher et à naviguer, avec une présentation propre et correcte informations 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 au centre, et donc sa conception de base est restée cohérente au cours des années depuis sa fondation. 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
The Guardian 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 le design en souffre.

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

De même, comme les bâtiments, les sites Web devraient ê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. Celles-ci nous permettent d'identifier très tôt les problèmes de mise en page et de les résoudre.

Il est particulièrement important d'examiner le design à travers différents objectifs. La palette tient-elle compte du daltonisme et des différences culturelles? Les couleurs signifient des choses différentes à différents endroits après tout. Est-il facile de naviguer à l'aide des claviers et des 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 devrait être construit 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 transportées jusqu'au sol et aux matériaux solides
– 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 bien plus de 2 000 ans, on peut dire que la Grande Muraille de Chine a été construite pour durer. Photographie de 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 sa longévité que pour sa 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 aient 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'effondre pas pendant un certain temps, et à long terme, cela finit généralement par être moins cher. 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. Parmi 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 le faire correctement la première fois si possible.

 Un message d'erreur générique pour les sites Web ayant 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 au design. 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; il ne les évite pas.

À mesure qu'un site grandit, ses utilisateurs se familiarisent 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 de Smashing Magazine
La refonte 2017 de Smashing Magazine a solidifié en coulisse des éléments comme la gestion de contenu, les sites d'emploi et le commerce électronique tout en conservant 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.

Beau (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 raison proportion 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 magnifiques. La symétrie et la proportion l'intéressaient particulièrement (d'où l'homme de Vitruve de Da Vinci ). 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 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 la forme physique 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 une architecture de mauvaise qualité
Pour les curieux de savoir à quoi la belle architecture ne ressemble pas comme, 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 rehausser la beauté par d'autres moyens. 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 le design de base de la structure – pensez aux gravures des colonnes, aux motifs de pavage, etc. les détails et les 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 et plus encore, qui alimentent toutes la beauté d'un site Web – ou son absence.

Pour faire bouger les choses, 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 d'être assis 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
Site 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. C'est agréable en soi et s'aligne sur le but de Google en tant que source d'information.

 Exemple de 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 fabrication ici . ( Grand aperçu )

Le Web poursuivant sa transition vers une expérience mobile avant tout, dans laquelle les utilisateurs peuvent littéralement toucher les sites Web qu'ils visitent, il faut se rappeler que la beauté appartient à tous les sens – pas seulement

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. Cela est agréable à lui seul, et bien fait, le changement de forme lui-même devient beau à sa manière.

A Balancing Act

Les règles de Vitruve sur utilitas firmitas et les venustas ont perduré parce qu'ils travaillent, et ils ont résisté en triade parce qu'ils fonctionnent 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 de mauvaise conception, 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é, la commodité et la convenance qui le distingueront.
– Vitruviuas

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

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 utilitas firmitas et venustas elles-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 – quand 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 accomplie, il vaut mieux avoir une bonne compréhension de plusieurs sujets que l'expertise en un seul:

Qu'il soit éduqué, habile au crayon, instruit en géométrie, sachant beaucoup d'histoire, ayant suivi les philosophes avec attention, comprendre 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 des cieux.

La pertinence de certains d'entre eux est évidente, d'autres moins, mais elle est précieuse pour les architectes et les développeurs Web. La géométrie informe des proportions et de la disposition ; l'histoire met les conceptions en contexte et veille à ce qu'elles soient comprises telles qu'elles sont censées être; la philosophie nous aide à aborder les projets de façon 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 est plus importante que jamais . La théorie des cieux est peut-être un peu exagérée, mais vous avez 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 la Stanford Encyclopedia of Philosophy le note «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: "Le savoir 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 portfolio. 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 beaucoup.

 Éditorial fracassant (ra, yk, il)




Source link