Publié le 3 May 2013

Être infographiste chez PointPub Media Communications : un bref aperçu!.

Avant de commencer à travailler, détail bien important : je me connecte à Spark, un programme qui s’apparente un peu à MSN Messenger, mais pour les enterprises, ce qui me permet de garder contact avec mes collègues tout au long de la journée.

En tant qu’infographiste pour PointPub, je reçois toutes sortes de devis. De la carte professionnelle au logo, en passant par la bannière de 7 pieds par 4 pieds… bref, tout ce qui peut s’imprimer!

Aujourd’hui, j’ai cependant choisi de vous parler de ce que mon travail implique lorsque nous avons le mandat de concevoir un site Web.

Tout d’abord, je reçois le devis de la part d’Annie, notre responsable des relations clients, ou encore de Sébastien, notre grand boss!

Dans le meilleur des cas, ils me fournissent :

    • Une description de la compagnie;
    • Des photos;
    • Les préférences du client (couleurs, styles, etc.);
    • Le logo de l’entreprise en haute resolution;
    • Des exemples de sites que le client aime ou n’aime pas;
    • La nomenclature du futur site.

Le client aussi a des devoirs à faire, car il doit nous fournir de l’information. Dans certains cas, nous devons lui créer une identité visuelle de toutes pièces Dans d’autres, il nous arrive d’avoir un format JPG du logo entre les mains, mais ce format est trop petit pour pouvoir l’utiliser, et nous devons alors diriger le client afin d’avoir une idée claire de ce qu’il désire.

Une fois toutes les informations nécessaires réunies, le processus de création en tant que tel commence par un croquis dans mon cahier à dessin… en fait, par plusieurs croquis!

Pour ce faire, je navigue sur le Web pour en savoir davantage à propos du domaine du client… pour voir un peu ce qui se fait du côté de la compétition. Un site sera très différent selon qu’il se destine au domaine de la construction plutôt qu’à celui d’une agence d’artistes!

Après ce léger survol, j’établis la direction que je vais prendre, je choisis les couleurs et je commence le design dans Photoshop.

Je mets une photo ici, une ligne par là, un slogan en haut… j’essaie plusieurs agencements de couleurs… Le premier 30 min/1 h, le projet n’a pas encore une apparence très concrète : le tout se construit lentement, mais sûrement!

Après quelques heures de travail, j’arrive finalement à un visuel qui me convient, selon, bien entendu, les goûts et les spécifications du client. J’ajoute aussi des texts fictifs à la maquette : on appelle ça le lorem ipsum. Il s’agit de faux textes écrits en faux latin. Comme ces textes ne veulent évidemment rien dire, ils permettent de présenter au client un visuel comprenant du texte tout en évitant de recevoir des commentaries du genre : « Mais vous n’avez pas pris les bons textes! ».

Si vous voulez essayer, allez sur lipsum.com et faites générer!

Je remets ensuite la maquette en version PDF ou JPG à Annie, qui se charge de contacter le client et de voir avec lui si le visuel lui convient. Le tout reste une image : aucun lien n’est cliquable et aucune intégration n’a été faite. Cette partie se fait une fois que le client a bel et bien approuvé la maquette.

Je vous dirais que la plupart du temps, nous avons visé dans le mille, et qu’il n’y a que quelques corrections mineures à apporter. Il se peut toutefois que nous ayons pris une direction totalement opposée à celle que le client avait en tête. Il arrive également que le client ne sache pas du tout ce qu’il souhaite comme visuel avant d’entamer le projet, alors la première version de la maquette peut ainsi servir de point de départ et l’aider à s’en faire une bonne idée.

Une fois les corrections apportées et l’approbation finale confirmée, la maquette est prête à être découpée pour le montage HHTML/CSS.

Si les intégrateurs Web sont trop pris par d’autres projets en cours à l’agence, je les aide pour cette partie, car j’ai aussi reçu une formation grâce à laquelle j’ai acquis plusieurs connaissances dans ce domaine.

Cette partie est cependant plus complexe à expliquer. Un site Web est bâti de code. L’image de la maquette est à découper en plusieurs petites images, qu’il faut ensuite intégrer une à une en langage HTML dans une page de code. Personnellement, j’utilise Dreamweaver.

Le CSS est quant à lui la partie qui donne le style : le positionnement des textes et des images, la couleur, la taille, la police d’écriture des textes, l’animation des images s’il y a lieu, le rollover des boutons, des liens.

Dans la page HTML, vous retrouverez du texte de ce genre :

Accéder à la
Billeterie

Ce petit bout de texte indique tout simplement une image sur laquelle il y a un rollover, ce qui signifie que lorsque vous survolez cette image avec votre souris, une autre image apparaît.

Pour ma part, lorsque je monte un site Web, j’effectue la partie « facile ». Je monte la structure des pages et j’intègre les textes. Si nous devons par exemple créer des paniers d’achat en ligne nécessitant des bases de données, c’est Richard, notre intégrateur Web, qui prend la relève. Cette étape vous sera d’ailleurs probablement décrite dans les prochaines semaines sur notre blogue!

Voilà! J’espère vous en avoir appris un peu plus sur mon travail chez PointPub Media.

Quant à moi, je suis déjà prête à relever le prochain défi!