Approche Théorique du Webdesign

Approche Théorique du Webdesign

Heather (Thomas Vuillermet) explique quelques bases du webdesign dans un tutoriel théorique.

Bonjour à  tous, voilà  un petit dossier pour vous parler de méthodologie et de théorie, en matière de webdesign. Je pense que si vous en êtes à  lire ceci, c’est que le domaine vous intéresse et que vous avez pu observer durant de longues années les sites web sur lesquels vous êtes tombés.

Je ne prétends pas être expert en la matière, loin de là , simplement, il y a 2-3 ans, un tutoriel de ce style m’aurait été d’une grande aide. Et par conséquent, si ce document peut vous être utile, j’en serais ravi.


Un point sur vous.

Le webdesign est un métier, et il est très important de prendre l’approche qu’il faut avec ce mot là . Un métier s’apprend plutôt facilement de nos jours. On peut en conclure que l’apprentissage est une chose très rapide, mais c’est la correction de vos multiples défauts qui peut prendre le temps d’une vie.
Je veux dire par là  qu’il est bien plus facile de juger un webdesign correctement que d’en faire un correctement !


Un point sur le Design

Design veut dire « concevoir, réaliser ». Et c’est ce que beaucoup de graphistes oublient. Ce n’est pas simplement « je met ce titre en rouge, et ce texte en Helvetica parce que ça rendra bien ». Ce qui intéresse un designer, c’est « Quelle est la couleur la plus adaptée pour ce titre, et quelle typographie pour ce texte ? » Derrière un design graphique, une recherche est à  faire en amont, tant au niveau symbolique, qu’au niveau lisibilité, cohérence, et utilisabilité. Je pense que pour remplir ce type de « devoir » envers la cible le minimum est un message clair, concis et une création simple. Plus le visuel est chargé, plus il est difficile à  lire, et le but premier est déjà  raté.

Et aujourd’hui, les communautés graphiques, les écoles, les magazines, ont tendance à  « donner » une technique plutôt poussée pour apprendre à  maitriser des logiciels, mais très peu abordent le sujet de la simplicité du message et de sa mise en forme. De la même manière, les gens qui ont besoin d’une identité graphique ou d’un webdesign par exemple, en oublient de vérifier si le prestataire à  qui ils parlent a une réelle technique et culture graphique, si c’est bien un designer, et non un « artiste » qui bidouille quelques lignes de code. Tout le monde tend à  oublier la philosophie du design.

La perfection ne réside pas dans la beauté puisqu’elle est subjective, mais dans la justification, et la réalisation de ce qu’on lui demande.


Le design graphique, c’est de la psychologie, aussi.

Quelle type de réaction est sensé se produire chez un utilisateur si j’utilise cette typographie sur ce fond ? A quoi s’attend l’utilisateur sur cette page ? La prévisibilité est à  prendre en compte de manière à  combler les attentes de l’utilisateur.

La simplicité d’utilisation ne doit pas être délaissée au profit d’enjolivures visuelles inaptes au design. Nous ne faisons pas de décoration, ni d’illustration. (Loin de moi l’idée de dénigrer les illustrateurs, mais c’est un autre métier).

Et même sans parler de visuels complètement « cheap », la typographie et la mise en page sont généralement bâclées, puisqu’irréfléchies.

Donc voici une petite (toute petite) liste, qui vous permettra de suivre une procédure « normale » de conception d’un webdesign. Je ne parlerai donc pas de pratique ici, mais uniquement de théorie. Je veux aussi vous dire qu’il est préférable de connaître toutes ces règles pour mieux les enfreindre, il est inutile de dire que mon coté « minimaliste » que je mets en avant n’est pas sensé vous empêcher de surprendre avec ce que vous voulez, tant que c’est de bon gout, et justifié ! ;-)


Quelle type de personne mon site cible-t-il ?

Si vous parlez de hi-tech, ou si vous parlez de bateau, votre site n’aura pas la même portée. Par conséquent, il vous faut définir une cible, qui pourrait s’avérer utile de connaitre lors des prochains choix. Ce qui peut nous intéresser par exemple, c’est si votre cible serait potentiellement un utilisateur averti, équipée d’un écran avec une bonne résolution et d’un navigateur de qualité, ou si elle serait capable de qualifier votre contenu d’important, au point de peut-être pouvoir justifier quelques publicités par exemple.
De la même manière, vous pourrez vous engager aux cotés d’un web qui va de l’avant, en avertissant les utilisateurs d’IE que leurs navigateurs ne vaut pas grand chose, mais là  n’est pas le débat. De la même manière, votre cible ( et par conséquent votre contenu ) est sensé influencer votre contenu.

Comme lors de la création d’un logotype par exemple, si vous voulez véhiculer une image « sérieuse », autant adopter un style graphique simple, tandis qu’un site qui se veut proche de ses utilisateurs, complice, peut se permettre plus de fioritures !


Le contenu

Il est très important de faire un point sur le contenu avant de commencer quoi que ce soit. Je ne pense pas qu’il soit nécessaire de préciser grand chose de plus à  ce sujet, mais il faut avoir en tête ce point là  pour toutes les autres étapes.


L’arborescence

Voilà , le premier point qui est généralement négligé.
L’arborescence se traduit par l’organisation de vos pages. A partir de quelle page puis-je aller à  telle autre ? Cette étape est généralement mentale, naturelle, pour un site de petite taille, mais prend de l’importance pour des sites dotés d’une arborescence un peu plus complexe.
S’il y a beaucoup de page, comment vais-je organiser mon/mes menu(s) ? Dois-je les diviser en catégories ? Quelle catégorie mérite d’apparaître dans les menus principaux ?

Le Zoning

Voilà  donc la première étape que l’on pourrait qualifier de « graphique ». Par gain de temps, je conseillerais de faire cette étape sur papier. C’est l’étape où on délimite pour chaque page des zones correspondantes aux menus, aux contenus, au logo,… Si elles changent de contenu, elles sont susceptibles de changer de mise en forme. Pensez avant tout utilisabilité : un menu est d’autant plus utile s’il est bien placé tout comme le contenu. Beaucoup de webdesigners utilisent des « grilles » pour cette étape. Certains utilisent même le nombre d’or, pour construire des pages harmonieuses dans la construction, chacun sa technique, mais voilà  une étape à  ne pas négliger.
Passons ensuite à  une étape un peu plus intéressante graphiquement.

Exemple de zoning basé sur le nombre d’or (en largeur uniquement)


Le Contraste

Voilà  la base du design. Le contraste permet de mettre en valeur certaines choses, sans pour autant mettre des petites fleurs et des effets biseautés sur chaque élément graphique.
Il y a 6 formes de contrastes importantes : le contraste de forme, de rotation, de taille, de couleur, de position et de texture.
Il est important « d’imposer » un « code », que vous partagerez implicitement avec les utilisateurs, pour qu’ils ne soient pas perdus à  chaque nouveau clic.

La couleur et la forme

Il est primordial d’avoir une bonne connaissance en symbolique notamment pour tout ce qui concerne les formes et les couleurs. Un site qui présentera des formes arrondies et des couleurs pastels sera plutôt destiné à  des femmes, tandis qu’un site en noir et blanc, avec des formes un peu plus brutales, se verra en train de passer un message de sérieux, à  qui l’ont fait plus facilement confiance. C’est tant de choses qu’analysent, inconsciemment ou pas, chaque utilisateur à  sa manière. Faites attention quand même, dans d’autres pays, les symboles peuvent changer radicalement !

Le code que vous établirez avec vos utilisateur, au niveau du contraste, des formes et des couleurs, s’appelle l’identité visuelle.


La typographie

La typographie possède des règles, qui résultent de constats qu’ont fait certains typographes. Avant d’utiliser une typographie, réfléchissez comme le créateur de cette fonte : dans quel but a-t-elle été crée ? Quel message transmet-elle ? Par exemple, Futura est une police géométrique, elle impose à  l’utilisateur un peu plus de temps de lecture pour comprendre le sens des mots. Ce genre de police est complètement adaptée à  un titre ou un logo. Les empattements donnent un coté traditionnel, tandis qu’une typographie linéale de type Verdana donnera un effet plus récent, plus numérique.

En cours, ma professeur m’a conseillé de n’utiliser que du Verdana, sur du support numérique. Cette typographie a été créée pour le web, et elle a fait ses preuves sur ce support, mais je ne suis pas pour un web ou il n’y aurait que du Verdana partout, par conséquent, faites vos choix, mais pour moi, c’est tout vu !

L’échelle typographique est quelque chose de très important. La plus utilisée est celle que vous voyez dans Photoshop, ou la plupart des éditeurs de textes. Elle a été créée au 16ème siècle. Mais vous êtes libre d’en créer une et de vous y tenir, elle vous permettra de hiérarchiser l’information et de faciliter la mise en page et la lecture.

Les marges et gouttière, l’interlignage, la justification, l’emphase, la ponctuation flottante… Ce sont pleins de paramètres à  prendre en compte pour une mise en page qui en vaille la peine ! Que ce soit encore une fois en webdesign, ou dans la construction de n’importe quel document voué à  être lu. Le nombre de caractères par ligne est aussi à  prendre en compte. Par exemple, il est prouvé qu’une ligne idéale à  la lecture sur un écran est composé de moins d’une centaine de caractères.

Tout ceci se gère en CSS, et il est important d’avoir de bonnes bases en tant que webdesigner.


Voilà  par exemple le site d’une très bonne agence de communication (selon moi) basée en Suède :

Vous noterez la simplicité du site. Il semblerait que leur rapport sidebar/contenu soit proche du nombre d’or, aussi. ;-)

La tendance en ce moment, c’est une typographie vraiment au centre du webdesign, relativement énorme. On aime ou on n’aime pas, mais ça fonctionne quand même pas mal. Voici 2 exemples, l’un plutôt épuré, l’autre un peu moins.


Le Développement

Dans l’idéal, un développeur confirmé développera pour vous, mais vous devez au moins discuter avec lui, pour être sur que le design finira comme vous l’avez conçu. Notamment au niveau de la typographie, car un intégrateur ne fait pas forcément attention à  tous les paramètres que vous utilisez dans votre maquette.
Sinon, c’est à  vous que revient la lourde tâche de prendre encore plus de décisions.
Pour quel navigateur vais-je devoir perfectionner mon site web ?
Mon site est-t-il accessible, et valide W3C ? Quelle tolérance dois-je avoir vis à  vis des résolutions d’écran ? Quel technologies/CMS puis-je me permettre d’utiliser ? Comment puis-je optimiser mon SEO (Search Engine Optimization) ? Quel hébergement est le plus approprié ? Vous vous devez ensuite de faire les tests en conséquence et travailler sur l’évolution possible du site. Mais ce sont d’autres compétences, et je n’en parlerai pas aujourd’hui.


Conclusion

Voilà  ! Je pense qu’on a fait le tour des choses les plus importantes. En gardant en tête ce processus de création et en travaillant les points ou vous vous sentez faible, vos créations seront bien plus élaborées et finies que la plupart des webdesigns (amateur ou non) que l’on peut observer.

J’espère que ce petit tutoriel aura été instructif pour vous.
Je prends en compte tout les commentaires constructifs, pour pouvoir répondre peut-être plus complètement et concrètement à  d’autres besoins de connaissances !

Au plaisir,

30 Comments to “Approche Théorique du Webdesign”

  • Sympa l’article ! Mais j’ai une petite question MON ou MA SEO ? x)

    • SEO = Search engine optimization ;
      Soit « optimisation pour les moteurs de recherches », donc c’est féminin, mais on dit « mon optimisation pour les moteurs de recherches », il me semble ! :P

      Merci !

  • Hum, vraiment très intéressant cette article ! Continuer comme ça.

  • Merci.

  • Oui, article très intéressant et a très utile …
    étant un amateur, j’ai moi même tendance a commencer sans réelle maquette mais comme le vent m’emporte et au final les typo sont peut accorder ou pire j’ai des trous je ne sait pas quoi mettre !!!

    Merci Thomas

    • très sympa!!!
      mérite une suite.

  • J’aime beaucoup ce site car ils proposent vraiment des articles qu’on ne va pas retrouver partout… Et cette article, est vraiment bien dans le sens où quand on le lit on se dit « ouais mais en fait je le savais » mais on ne s’en rend pas vraiment compte.
    Après sur certains points, il est clair que cette article m’a beaucoup appris.

    Continu comme ça :)

  • Alors ça c’est un excellente idée ! J’ai reconnu plusieurs choses à ne pas faire que je fais pourtant assez régulièrement ^^

    Une seule phrase m’a fait bondir dans ce texte : La perfection ne réside pas dans la beauté puisqu’elle est subjective.

    ;)

  • Un article qui tombe à pic pour moi, car j’apprends actuellement à faire des sites web en autodidacte.

    Merci pour la qualité du document !

  • Jolie synthèse. les bonnes questions, les bonnes réponses ! Bravo =)

  • Merci beaucoup pour vos commentaires ! :)

  • Ton article est bien sympathique, mais peut-être que j’ai mal saisis quelques points, mais je te donnes mes avis tout de même :

    1. « La perfection ne réside pas dans la beauté puisqu’elle est subjective, mais dans la justification, et la réalisation de ce qu’on lui demande. »

    On s’entend sur le fait que tout designer doit être en mesure de justifier les éléments de son design, mais un design DOIT être esthétique et intéressant visuellement. Le design est littéralement une solution graphique à un problème de communication et il est informatif, par contre du bon design est une composition créée de manière créative. C’est quelque chose qui doit être BEAU, sans compromettre l’efficacité de la communication puisque c’est ça son but premier.

    2. « Comme lors de la création d’un logotype par exemple, si vous voulez véhiculer une image “sérieuse”, autant adopter un style graphique simple [...] »

    Un logotype, un symbole ou un logotype + symbole se doivent toujours d’être simples. Je crois que de comparer un design de logo à un design de site internet n’est peut-être pas la meilleur comparaison possible. L’un doit être changé aux 20-30 ans et l’autre aux 5 ans. Un design de logo doit être exempt de toutes tendances pour pouvoir durer longtemps, tandis qu’un site Web peut les suivre.

    3. Dans la partie Contenu :

    C’est toujours important de parler de l’importance des différents contenus. Tu pourrais expliquer comment on fait pour mettre à l’avant les choses les plus importantes. Les méthodes pour mettre de l’emphase dans un design. Dire quelles sont les choses que l’on regarde en premier (1. Couleurs chaudes, 2. L’espace positif, 3. Les objets isolés , 4. Les objets aux positions clés, 5. Les gros objets , 6. Les objets animés). L’emphase est directement lié au contenu, chose à réviser pour ton tutoriel. :)

    4. « Le Contraste, Voilà la base du design. »

    Hmm, non, ce n’est pas la base. En fait, il y a beaucoup plus que cela. En tout, il y a les 4 principes d’association, dont le contraste fait partie suivit du principe de l’alignement, de la répétition et celui de la proximité. En plus de cela, il y a les 4 principes de composition, l’emphase, l’équilibre, l’harmonie ainsi que le rythme. En gros, le contraste est UNE partie de la base du design.

    5. La forme et la couleur

    « Faites attention quand même, dans d’autres pays, les symboles peuvent changer radicalement ! » C’est le même cas pour les couleurs. ;-) Si l’on se fie au blanc en Chine qui ne signifie pas quelque chose de très apprécié. Je crois même qu’il y a eu un scandale là-dessus avec la France. Sinon, tant qu’à parler de symboles, tu pourrais en expliquer un peu à propos de la métaphore, l’allégorie, la métonymie. Il y a aussi un symbolisme pour chaque couleur et même des effets physiologiques! À voir, c’est le genre de chose qui pourrait rendre ton tutoriel encore plus intéressant.

    6. Pour la section de la typographie

    Je trouve cela dommage de rester en surface. Il y a beaucoup de règles à respecter dans n’importe quel type de design en rapport à la typographie et non seulement au niveau de la police elle même. Par exemple, on ne doit généralement pas utiliser deux polices de différentes famille et de même catégorie. Par exemple, le Arial et le Verdana. Ensuite, il n’y a pas que Verdana qui a été créée pour le Web. C’est aussi le cas d’Arial, l’adaptation d’Helvetica au Web. Sinon, on n’a qu’à se fier au Web Safe Fonts pour le comprendre. Mais, ce n’est pas ton avis, mais celui de ton professeur je crois.

    Finalement, pour la section du développement, tout a été dit, mais je crois que ça sort un peu du rôle du designer de devoir penser au SEO de son site. Cette tâche est surtout reliée à la gestion du contenu. C’est plutôt complexe pour une personne qui n’est pas spécialisée dans ce domaine. Ensuite, je termine ma liste avec cela : « Pour quel navigateur vais-je devoir perfectionner mon site web ? » :
    En tant qu’intégrateur Web, je vous assure que tous les navigateurs récents incluant IE8 et IE7 devraient impérativement pouvoir gérer l’affichage de votre site. Tout dépendant du but et de l’importance de celui-ci. Mais bon, pour certains, c’est dur d’arriver à de bons résultats niveau intégration parce que leurs méthodes de travail ne sont pas à point.

    Pour finir, je te laisse un bon commentaire parce que j’imagine que mes remarques ont l’air d’avoir comme but de démonter ton tutoriel, mais non, mon but est que tu te pose des questions par rapport à comment tu pourrais l’améliorer et le rendre carrément plus intéressant. Je t’ai donné de bonnes pistes je crois et ça devrait pouvoir te motiver à faire mieux! Sinon, tu écris et exprimes très bien tes idées. Le problème est juste que ton tutoriel reste trop en surface et est encore trop subjectif. Surtout qu’il se veut théorique. Excellente rédaction. :)

    • Hey hey, quel commentaire intéressant ! :-)
      Effectivement, il y a surement quelques points ou je manque de globalité, c’est gentil d’avoir complété ceux-ci. ;-)

      Après un commentaire comme celui-ci, il serait très puéril de défendre mon point de vue ! :-/

      J’estime juste que le titre suffisait pour expliquer le fait que c’est incomplet ( et qu’il serait extrêmement dur de faire un dossier complet expliquant le webdesign de A à Z ).

      Pour la SOE, c’est en développant son site qu’on y pense. Si la personne réfléchit à la manière d’intégrer son site, elle doit aussi penser à sa SOE : Doit-il y avoir une zone réservée à la recherche ? Est-ce que cette variable mérite d’être un h2 ?

      (C’est possible qu’il y ai des incohérence dans le plan de ce tutoriel, c’est pas mon fort… Mais j’ai essayé de faire dans l’ordre de conception ! )

      Merci pour avoir pris le temps de me répondre ! :)

      • En fait, ce commentaire était surtout là pour t’aider vu que je trouve que c’est déjà un bon début. Surtout que Living Tuts a beaucoup de potentiel, tu pourrais passer plus de temps à rehausser la qualité et la quantité de ton article.

        Je suis content que tu ne t’y prennes pas sur la défensive parce que mon but n’était pas de t’attaquer. Le design est une chose assez floue et subjective dans beaucoup de cas. Seulement, il y a beaucoup de théorie que tu pourrais donner.

        Le SEO est comme je te disais, surtout au niveau du contenu (Mots clés reliés au contenu, cohérence du titre avec ce que l’on trouve dans le texte, etc.). Ensuite, c’est certain qu’il y a beaucoup de facteurs que Google impose comme la rapidité du chargement des pages, la validité du code, etc. Moi-même je ne m’y connais pas beaucoup. (En fait, je pense davantage que le SEO est une semi-arnaque et que c’est une future pompe à argent, mais bon.).

        Bonne chance pour cette article, même si c’est dur, ta notoriété augmentera de beaucoup! :)

        • La SEO est forcément liée au contenu, mais c’est le « webmaster » ( au sens large ) qui gère le contenu, et le designer qui fait la hiérarchie de l’information. ( Visuellement, mais aussi au niveau du code, selon le projet. ) C’est cette hiérarchie, que prend en compte Google en grande partie ; Mais bien entendu, la validité et le chargement sont à prendre en compte. ;-)
          Pourquoi la SEO serait-elle une arnaque ? C’est un concept, l’optimisation, qui ne peut être négatif puisque c’est du point de vue utilisateur. A moins que tu ne remettes en cause les moteurs de recherches ?

          Ensuite, tu n’as relevé que quelques points sur mon article, alors qu’ils sont tous là pour être approfondis, mais c’est du devoir de chacun de faire sa veille technologique/graphique, c’est pour ça que je n’ai fait qu’une « approche » qui plus est « théorique ».

          ( On dit « cet » article. :-P )

          • Je crois bien avoir créé un malentendu en ne donnant pas trop de détails sur « l’arnaque ». :p En fait, je ne met pas en doute la SEO en tant que telle, mais plutôt la plupart des gens qui vendent des services extravagants (beaucoup trop) pour ce service qui n’est pas connu du 3/4 des internautes.

            Et puis, si c’est une approche et que Living tuts est un site de tutoriels, je déduis donc qu’il y aura une suite. Enfin, je l’espère. :)

            Bonne chance. ;-)

    • Vous vous disputer et vous vou prennez tous pour des grand experimenté du webdesign.

      Domage, vous avez oublier de poursuivre l’etape de procedure de creation de maquette et de template: « qu’en pensez-vous du WireFrame…? »

      C’est la visuel à exporter en JPG ou mettre en valeur tous vos soucie avant de continuer ou à finaliser vos oeuvre. C’est un outil, tres efficace aussi pour remettre en question (esprit marketing) les attente et besoin du client ainsi que les tendance en agencement de bloc actuel et future.

      Le zoning ne suffi pas; Les Compatibilité navigateur ne seront abordéés que apres etape de developement.

      Comme on a dit, le web c’est un outil et support de communication. communication c’est un outil marketing, et Marketing c’est une gestion et etat d’esprit basé sur une methodologie rigoureuse.

      Donc de la methode! toujours de la methode

  • Vraiment bon cet article! Merci bien!

  • [...] récent au plus vieux) : Créez une animation typographique en vidéo 2/2 : After Effects Approche Théorique du Webdesign Créez une animation typographique en vidéo 1/2 : Photoshop Créer un site [...]

  • Très bon article !
    Merci ^_^

  • Salut,

    Super article, ça donne envie d’explorer un peu le site.
    Me donnerais tu l’autorisation d’utiliser ton illustration du zoning pour un rapport de stage, qui biensur reste entre l’école et moi.

    Merci

  • La théorie, c’est quand on sait tout et que rien ne fonctionne. La pratique, c’est quand tout fonctionne et que personne ne sait pourquoi. Ici, nous avons réuni théorie et pratique : Rien ne fonctionne… et personne ne sait pourquoi !

    Albert Einstein

    Je fais référence au site flash que je m’arrache les cheveux à mettre en place pour le BTS ( En même temps tu connais mes compétences: zéro!! :p )

    Je te retrouve tout a fait dans ce Tuto…
    (j’ai l’impression que tu parlais à côté de moi ^^)
    Bonne réflexion!
    Continues comme ça, c’est cool.
    Mais j’avoue qu’ avec tout ce que tu connais sur les symboles et leurs théories… Tu pourrais pousser le Schmilblick.
    Bisous

  • [...] Site Web < PRO < sylvietinseau Get flash to fully experience Pearltrees Approche Théorique du Webdesign <b>Heather (Thomas Vuillermet) </b> explique quelques bases du webdesign dans un [...]

  • Bravo, super article ! J’ai redécouvert le zoning grâce à toi. Je viens de gagner 2h de travail ;)

  • [...] Approche Th?orique du Webdesign ? Living Tuts : Tutoriels de qualit? pour apprendre Photoshop, le we… [...]

  • [...] Approche Théorique du Webdesign [...]

  • [...] Approche Théorique du Webdesign [...]

  • [...] Approche Théorique du Webdesign [...]

  • [...] Approche Théorique du Webdesign [...]

  • […] Approche Théorique du Webdesign […]

Laisser un commentaire