Menu

Webdesign & Integration

Webdesign & Integration

Comptoir Français du Thé// 2008
Les débuts

Je m’appuie sur ma première expérience en création de webdesign.

En 2008, la société Mercure Informatique, filiale du groupe Divalto, collabore avec moi pour la création de webdesign pour leurs clients. Mercure Informatique avait développé une solution d’e-commerce. Ils avaient jusqu’à lors travaillé avec un autre graphiste qui leur préparait plusieurs visuels de webdesign (homepage, page catégorie, page produit, panier, validation de commande…).

Désirant changer de style et de méthode de travail, ils se sont orientés vers moi. Leur développeur étant une connaissance, il a appuyé la collaboration. S’en est suivi une sous-traitance pour quatre projets.

Le projet “comptoir français du thé” était dédié aux clients professionnels, soit un site non public uniquement accessible par les revendeurs.

J’ai réalisé la conception des planches en mixant Illustrator et Photoshop. La photographie avait une forte place, mais travailler ces maquettes web sur Photoshop est pour moi une hérésie, tant le logiciel néglige le texte et les vecteurs (technique de dessin). Le graphiste précédent travaillait uniquement avec Photoshop.

Mon travail a surtout permis une meilleur flexibilité avec le développeur qui s’est occupé de l’intégration complète du site.

Je ne retiens pas de cette expérience que mon approche était plus moderne ou adéquate que celle du graphiste précédent, je retiens que si un webdesigner tient à jour ses compétences, son approche sera le plus souvent plus pertinente que celle du graphiste précédent, tant les standards et les visuels sont en perpétuel mouvement.

Mon travail de l’époque s’appuyait sur mes connaissances logicielles et mes recherches en matière de webdesign. En réalité il était limité par mes lacunes en langages web. Dix ans après, les logiciels ont évolué, les codes graphiques et techniques ont changé. Il est évident qu’avec une approche plus technique, mon graphisme aurait été différent (moins marqué par la présence d’images) et ma relation avec le developpeur aurait nettement gagné en fluidité.

J’ai depuis pris parti de m’expertiser en HTML5 et CSS3, les deux langages ressources du web. Je me suis autoformé avec une série de vingt ouvrages de la collection «A book Appart», dont sont issues beaucoup de mes références bibliographiques. Le web actuel s’est purifié par souci d’être plus accessible et universel. Beaucoup d’illustrations se créent actuellement via cadrage avec des langages. Ce qui peut encore creuser l’écart entre le graphiste, le webdesigner et l’intégrateur.

Autre notion qui règne dans le webdesign : l’ergonomie.

Le site web de la W3C (Word Wild Web Consortium) définit l’ergonomie comme une “Étude quantitative et qualitative du travail dans l’entreprise, visant à améliorer les conditions de travail et à accroître la productivité”.

En transposant cela au webdesign, il s’agit de proposer l’interface la plus simple, lisible et efficace à l’utilisateur. Exemple marquant: les 3 clicks. L’internaute visitant en premier lieu votre site dans le but de trouver une information et non de le contempler, doit trouver ce qu’il recherche en trois clicks.

Au fur et à mesure des années de webdesign, une uniformisation s’est ainsi créée. Les internautes ont inconsciemment pris des habitudes lorsqu’ils consultent un site web. C’est au webdesigner de se démarquer de toutes ces règles pour proposer une lecture efficace du site web. Sans cela le visiteur ne s’attarde pas et réitère sa recherche dans le moteur de recherche. Il s’agissait là de ma première expérience en webdesign. Même si les standards visuels ont changé, il faut remettre le comptoir du thé dans son contexte, l’ergonomie était plus libre. Le web actuel, dominé par le web-mobile, est plus formaté et autorise de moins en moins les libertés des designers. A eux d’être inventifs.

L'expérience

D’après l’Onisep, le webdesigner se définit comme suit : “À la fois artiste et informaticien, le webdesigner est capable de réaliser une interface web ergonomique et un design adapté au contenu d’un site Internet donné.”

Ce compromis entre graphisme et web se base obligatoirement sur une connaissance des langages web.

Le webdesigner peut avoir deux grandes tâches :

Dans les deux cas, la connaissance des langages est indispensable.

La réflexion web diffère de celle du print pour deux raisons: visuelle et technique.

Un graphiste est un professionnel qui conçoit des solutions de communication visuelle. Il travaille sur le sens des messages à l’aide des formes graphiques qu’il utilise sur tout type de support. Ainsi il doit maîtriser les différents aspects liés à son domaine, typographie, couleurs, mise en page et jouer sur des symboliques, il est également préférable d’avoir une veille graphique et une culture artistique importante pour son inspiration.

Un Webdesigner est une des évolutions du graphiste. En plus de maîtriser les bases du graphisme, il comprend les contraintes du web entre les différentes technologies, les supports, l’ergonomie des interfaces, l’accessibilité, etc.

De plus, il est capable de travailler sur tous types de médias, aussi bien sur le web, les mobiles, la vidéo.

Là où la conception d’un support de communication imprimé est figée dans le temps, celle d’un site web est dynamique, évolutive et vouée à être modifiée.

On ne peut donc pas penser une communication web comme celle d’une communication papier. C’est là tout le sens que j’essaie de donner à mes visuels.

Bon nombre de maquettes web faites par des graphistes print, sont non-praticables pour le développeur qui va coder le site, et ce à cause des évolutions numériques d’aujourd’hui. Se mettre à jour des contraintes et normes web, c’est aussi garantir le bon développement d’un support adaptable et praticable pour ses utilisateurs.

On ne communique pas sur le web pour faire du beau, on communique sur le web pour avoir une expérience utilisateur positive. Si le site est mal pensé, pas ergonomique avec une arborescence non intuitive, alors l’interface web ne sera pas un outil marketing efficace. Les dirigeants de Morgan Stanley disaient il y a 6 ans : «L’Internet sur mobile est monté plus rapidement en puissance qu’Internet sur ordinateur. Nous pensons que les utilisateurs préféreront le mobile à l’ordinateur d’ici 5 ans. » 34

En effet, en juin 2017, les consultations mobiles ont dépassé les consultations desktop (via ordinateur).

Le webdesigner doit tenir compte des fonctionnalités du projet, car le meilleur moyen de perdre un utilisateur est qu’un élément ne fonctionne pas comme prévu. Le web n’est tout simplement pas apte techniquement à supporter la majorité des règles typographiques imposées au print. C’est un fait et une limite technologique.

À l’ère de la mobilité, les sites qui ne sont pas pensés « responsive web design35 » deviennent un vrai calvaire à consulter sur mobile et tablette.

D’après Ethan Marcotte:

Plutôt que de créer des espaces qui influent sur le comportement des personnes qui y acceèdent, le responsive designer cherche à ce que l’architecture et ses habitants s’influencent et s’informent mutuellement.36

Il en ressort que le web, de part ses us et normes, a une marge de manoeuvre limitée. En 2017, l’internaute cherche une information et non plus une expérience graphique. Il est formaté par des standards de lecture, qui prennent de plus en plus de pouvoir dans la structuration des webdesigns. Nous ne pouvons plus imposer une interface et des dimensions de sites, c’est notre site qui s’adptera au support et aux yeux des visiteurs.

Cela peut paraître grisant, pourtant la prise de conscience de contraintes ne coupe pas totalement la liberté de création, d’autres moyens esthétiques existent comme les images ou les jeux de couleur.

Dans ce chapitre, je vais vous présenter des projets de webdesign à travers différentes approches: conception graphique, intégration, mise en ligne. Tout ceci à partir de contextes périodiques différents tout au long de mon parcours.