Design Graphique

L’intégrateur Web : De la maquette au site internet !

Il y a quelques semaines, nous avons pu interroger Teddy, notre Directeur Artistique, qui prenait parti des UX et UI (maquettages techniques et graphiques) de votre futur site internet vitrine ou e-Commerce.
Mais qu’advient-il de ces maquettes ? Qui s’occupe de transformer ces schémas colorés en page web attractives ? Pour le coup, c’est facile :  C’est l’Intégrateur Web prendra soin de faire de chacune des attentes graphiques et visuelles de votre site, une réalité (virtuelle).

Zoom sur un métier essentiel, celui qui donne vie à votre site !

Pour aborder le sujet, c’est André, l’un de nos intégrateurs qui répond à nos questions cette semaine ? :

André
Intégrateur Web

Intégrer tous les contenus de vos sites en m’assurant que le rendu soit visuellement beau et fonctionnel, voilà ma mission au sein de l’Agence.

André, comment décodes-tu le métier d’intégrateur web en 2020 ?

Comme dit précédemment, le métier d’un intégrateur consiste, en tout cas au sein de l’Agence, à retranscrire la maquette graphique du webdesigner en page internet. Pour ce faire, il nous faut un certain sens artistique, d’ailleurs, on participe souvent à l’élaboration du webdesign, tout en alliant la technicité de langages de programmation (front).

Nous bâtissons ce qui se voit à l’écran ainsi que les actions qu’offre un site internet (menu qui s’ouvre ou se ferme, des images qui défilent, la couleur de fond ou tout autre élément vu directement lors de la navigation de l’internaute). Globalement, l’intégrateur web de 2020 a le rôle de donner vie à un site internet en appliquant et en respectant la charte graphique tout en mettant en place tout ce qui rendra le site interactif !

Quelles sont tes missions au sein d’un projet ? À quel moment interviens-tu ?

La plupart du temps, j’interviens en « milieu de début de projet » jusqu’à la fin, pour m’assurer que tout ce qui se voit à l’écran est conforme et fonctionnel aux attentes du client.
Globalement, le plus important est de bien prendre en compte les besoins et les attentes du client. Le travail est « à moitié fait » une fois qu’on comprend exactement ce qu’il veut. C’est un travail en collaboration avec le DA (Directeur Artistique), le webdesigner, et le graphiste car il faudra retranscrire leur maquette. En plus de l’aspect visuel, nous intégrons les contenus du site, comme les images, les textes, les graphiques, ainsi que les fonctionnalités demandées. Un point important également : adapter le site à tous les écrans ! À l’heure où le format AMP (Mobile First) est favorisé par les moteurs de recherche comme Google, il est vraiment primordial de penser à cela ! C’est ce que l’on appelle le « responsive design ».
Nous assurons également un S.E.O (le référencement naturel) minimal, au travers des contenus textes et image. Ensuite, en fonction des projets, on peut également être appelés à installer, configurer des modules, des extensions…

L’intégrateur Web est le garant du beau et du fonctionnel d’un site.

Pour toi, l’intégrateur/trice web est plutôt technique ou créatif/ve ?

Quelle bonne question ! Je dirai les deux. Un intégrateur web doit être parfaitement organisé et respecter les normes de compatibilité entre les navigateurs et d’accessibilité par les moteurs de recherche tout en alliant un esprit créatif et technique. Il est le garant du beau et du fonctionnel d’un site internet, d’où l’importance d’avoir une certaine sensibilité à l’aspect créatif. Il faut savoir retoucher une image comme il faut être capable de coder ou de débugger des scripts.Étant ainsi dans le même temps un métier technique basé sur des connaissances spécifiques, la meilleure formation est de s’exercer sur des projets riches et variés.

Quel est ton aspect préféré du métier au sein de l’Agence ASDORIA ?

C’est évidemment lorsque le client découvre son site et qu’il est mieux que ce qu’il imaginait après avoir vu les maquettes ! Une maquette reste figée, un site peut être en mouvement avec plusieurs animations. On navigue sur un site, pas sur une maquette ! Alors, la plus grande satisfaction, c’est lorsque notre client et les personnes qui travaillent avec lui sont unanimes et apprécient le travail fourni, qui représente leur entreprise.

L’intégrateur web s’occupe de l’aspect visuel du site. Mais le développeur front-end aussi, non ?

Oui, mais il y a des différences majeures entre un intégrateur web et développeur front. Elles se trouvent essentiellement dans la technicité de leurs tâches. Un intégrateur web va jongler entre intégration de la maquette graphique, des contenus et des fonctionnalités plus ou moins standards. Le développeur front quant à lui va intégrer, développer des fonctionnalités « front » plus poussées et spécifiques au projet sur lequel il travaille. Étant donné les spécificités des sites aujourd’hui et de leur complexité, le rôle du développeur web est tout autant important que celui de l’intégrateur.

*****

À l’Agence, nos développeurs front-office, back-office, full-stack, intégrateurs web prennent soin de leur code pour s’assurer que tous les besoins techniques de votre entreprise soient retranscrits parfaitement sur votre site. La technicité de nos expertises de développement associée à des graphismes et design travaillés transmet l’expérience utilisateur la plus juste en fonction de vos cibles et vos besoins métier.

Et vous, qu’attendez-vous pour créer ou améliorer votre site vitrine ou votre boutique en ligne à l’aide d’experts du domaine ?

Posted by Julie Sébille

Webdesign et Expérience Utilisateur : joindre l’utile à l’agréable

« Nous voulons un site attractif, beau, qui nous plaise et qui plaise également aux personnes qui vont se rendre sur notre site. »

Voici l’une des réponses les plus fréquentes lorsque nous demandons à nos clients s’ils ont déjà une idée de l’apparence de leur site « idéal ». Et s’en suit en général une petite sélection de sites qui plaisent.

Cela nous donne effectivement une idée des goûts du client. Ce qui est important. Mais ce qu’il ignore la plupart du temps, c’est que vont s’ajouter à cet aspect une multitude de critères et d’éléments qui façonneront la manière dont le site sera présenté et traduit de manière graphique.

Pour parler webdesign, Teddy, le Directeur Artistique d’Asdoria est toujours de bonne humeur. Voici dans cette interview comment mieux comprendre les facettes et l’impact du webdesign, incluant le graphisme, les UX, les UI et le rôle de Directeur Artistique au sein d’un projet !

Teddy T.
Directeur Artistique chez Asdoria

Mon rôle ? Définir la direction artistique et les concepts graphiques de tous les projets multimédias.

Peux-tu expliquer plus précisément en quoi consiste ton rôle de Directeur Artistique (DA) au sein d’un projet ?

– C’est très simple : ma mission lors d’un projet consiste à concevoir la charte graphique et le concept graphique en adéquation avec la demande client et son positionnement marketing. Le webdesign, c’est bien plus qu’un simple choix de couleurs ou de formes. Ici la conception graphique intervient tout au long de la chaîne de production et de suivi d’un projet.

Lorsque le client demande un site « moderne », « fun », ou « graphiquement beau », comment l’interprètes-tu en webdesign ?

– Le plus important, c’est de bien définir sa vision du « moderne », du « fun » ou du « beau ». Force est de constater que nous n’avons pas tous les mêmes goûts ! Souvent, on voit des clients qui ne connaissent pas du tout le domaine du webdesign, et c’est bien normal, ce n’est pas leur corps de métier. Certains aiment des choses qui sont déjà “has been” par exemple. Difficile de leur expliquer ! Mais avec des exemples webdesigns concrets, ils voient vite la différence, et c’est ça qui est agréable dans ce métier ! Apporter de la fraîcheur là où les personnes n’en voient pas l’utilité alors que cela nuit à leur image car elle ne correspond pas ou plus du tout à leur vision marketing.

Quelle est la différence entre le graphisme et le design ?

– Pour faire (très) bref, le design correspond plus à un aspect généraliste et esthétique. Le graphisme peut toucher à une partie d’un site (fond, bannière, slider, logo,…), c’est plus précis.

Et l’UX et l’UI dans tout cela ?

– On touche là à des points essentiels lors du développement d’un projet ! On pourrait en parler pendant des heures. Mais en règle générale, l’UX (User Experience) tient une part très importante car c’est cette partie qui traduit la vision marketing du Business Analyst / Chef de Projet selon les besoins du client. En collaboration avec le Directeur Artistique ou le Webdesigner, le Business Analyst matérialise les chemins de navigation, la pertinence de l’expérience utilisateur, et forcément prend un risque car c’est lui qui fait un choix sur le pourcentage de conversion du projet. C’est une phase très importante qu’on ne peut confier à une seule personne. Il y a du marketing dedans, de la stratégie, du ROI, du webdesign, de l’ergonomie… On construit le squelette entier du site web.

L’UI, c’est la mise en forme graphique de tout cela, avec les tendances actuelles de formalisation des modules, des fonctionnalités… en y ajoutant la direction artistique (le design). L’UI, c’est le Webdesign, la User Interface. En tant que DA, je peux échanger en amont avec le BA afin d’aider à la pertinence des UX, car je sais déjà l’implication que cela aura sur le webdesign UI ; si les blocs placés dans l’UX sont à la bonne place, si ce n’est pas obsolète,… Ce n’est qu’à la lecture des UX que je commence réellement le travail de bench et les travaux préparatoires d’étude et de réflexion afin de créer des UI tendances, impactant et correspondant à l’expression des besoins.

Comment vient l’inspiration et la créativité dans ton métier ?

– Pour moi, il est important d’avoir une bonne culture graphique assez générale (vers d’autres corps de métiers aussi, comme l’architecture ou la mode) et d’avoir une pratique d’un art graphique ainsi qu’une connaissance des métiers du multimédia pour pouvoir travailler sa créativité et rester au courant des dernières nouveautés artistiques, des nouveaux usages, des nouvelles habitudes. Cela demande beaucoup de veille, de bench, pour pouvoir s’inspirer et rester au top des tendances.

Le webdesign, c’est du visuel, mais également le fruit d’une réflexion. On ne peut pas s’arrêter à du « beau » ou copier coller la forme d’un site qu’on aime. C’est un métier à part entière !

Chez Asdoria, il nous tient à cœur de travailler chaque projet client de manière unique. Parce que chaque entreprise à des valeurs différentes à communiquer, une image de marque à contrôler, une identité graphique à respecter. Vous avez besoin de conseils quant à l’image de votre site, de remodeler de votre webdesign pour une image plus professionnelle ? Chez Asdoria, nous avons les compétences qu’il vous faut !

Pour connaître l’intégralité des métiers qui font la richesse technique de l’Agence, restez connectés ! (Alerte spoil, nous vous parlerons très prochainement d’infrastructure web…) Stay tuned !

Posted by Julie Sébille

Créer et mettre en valeur vos visuels produits pour votre eCommerce

Dans le eCommerce, une bonne partie de la décision de l’internaute se joue à sa première impression. Il ne suffit pas d’avoir un site bien référencé pour garantir l’achat de vos produits par les internautes. Parmi tous les paramètres à prendre en compte, il y en a un qui qui pèse particulièrement dans la balance : Les visuels. Les images sur un site sont d’une importance non négligeable. Image d’illustration, photographie de produit ou d’entreprise, pictogramme ou bien même une infographie, tous les visuels que vous mettez en place sur votre site servent aussi à votre référencement et surtout à l’expérience utilisateur. On l’a déjà dit, “une image vaut mille mots”. Un visuel n’est donc pas là par hasard, il doit servir un objectif précis : Inciter au clic, à la lecture, être vecteur d’émotion, susciter la curiosité, favoriser l’achat

Photographie produits : votre arme de séduction principale

Et c’est justement ce point-là que nous allons exploiter. Favoriser l’achat grâce aux photographies de vos produits.
N’oublions pas que dans les cas d’un eCommerce, les visuels de vos produits sont votre arme de séduction principale, ne les négligez donc pas !
C’est bien souvent le tout premier contact qu’a votre internaute avec vos produits/services. La photographie d’un produit, c’est même l’unique référence (en plus de la description) que vous mettez à sa disposition pour s’en faire un avis, à défaut de pouvoir le toucher et de le voir « en vrai ». Inutile, donc, de trafiquer l’image ou de l’embellir en saturant les couleurs. Il vous faut un visuel le plus fidèle possible à l’objet initial afin d’éviter la déception du client qui peut porter préjudice à votre marque et à vos ventes.

La mise en valeur des produits du site Kalembal.com

Rassurer l’internaute pour favoriser l’achat

Les requêtes sur les moteurs de recherche sont toujours nombreuses via la section “images”. Elles représentent près d’un tiers des recherches globales. Il vous est sûrement déjà arrivé d’atterrir sur un site web en ayant cliqué dans un premier temps sur une image non ? Voilà l’importance de prendre soin de TOUS vos visuels. Ils peuvent être une porte d’entrée sur votre site, susciter la curiosité, l’envie dans un premier temps. La qualité des photos et le sérieux de votre site favorisera l’acte d’achat dans un second temps. Pour ce, nous vous conseillons de dédier un intérêt particulier :

  • à la véracité de vos contenus visuels, comme dit précédemment,
  • à présenter un maximum de détails à votre futur acheteur, en photographiant votre produit sous plusieurs angles. Votre cible pourra ainsi avoir l’idée la plus complète de votre produit.
  • Le petit + : N’hésitez pas à intégrer une option de zoom au survol de l’image ou bien une représentation 3D, dans un but de ré-assurance.

 

En pratique comment bien faire ses photographies ?

Le fond blanc

Utiliser un fond blanc, incurvé de préférence pour éviter toute démarcation.
Le fond blanc reflète mieux la lumière sur l’objet, permet de mettre davantage en valeur vos produits et facilite le détourage du produit par la suite. Avec le fond blanc, vous pouvez plus facilement changer la couleur du fond lors du traitement de l’image et l’ajuster à votre convenance.

Le fond blanc incurvé

Ne pas lésiner sur la lumière

C’est bien la lumière qui mettra en valeur votre produit. L’idéal est un ton, une ambiance naturelle, claire. Pour éviter les ombres trop marquées qui dévalorisent le produit, vous pouvez tamiser la lumière en mettant un écran blanc devant la lampe (des écrans professionnels existent, mais un drap blanc ou une feuille blanche dans un premier temps peuvent suffire). Le but est d’adoucir les ombres : il ne faut pas avoir d’ombres nettes, qui sont peu flatteuses pour le produit.
Attention, évitez d’utiliser le flash qui a la fâcheuse tendance d’aplatir les volumes. Nous vous recommandons plutôt d’augmenter la lumière environnante. Petite astuce, si vous utilisez des lumières artificielles : utiliser des ampoules à lumière froide.

À gauche, des photographies ternies par un manque de lumière. À droite, des produits mis en valeur grâce à une luminosité plus travaillée.
À gauche, des photographies ternies par un manque de lumière. À droite, des produits mis en valeur grâce à une luminosité plus travaillée.

Stabiliser pour plus de netteté

Utiliser un trépied pour soutenir l’appareil photo, c’est éviter un maximum le tremblement lors de la prise et avoir une image la plus nette possible. Vous pouvez également utiliser le retardateur de votre appareil photo qui limitera davantage tout mouvement de l’appareil. Une image professionnelle de votre société passe aussi par la qualité de vos photographies et de vos visuels.

On exagère un peu, mais les photos manquant de netteté sont à banir.
On exagère un peu, mais les photos manquant de netteté sont à banir.

Photographier sous tous les angles de vue

L’idée est de prendre l’objet sous tous les angles pour que l’utilisateur puisse se faire une meilleure idée de votre produit global. Cela vous évitera des demandes de retour dues à la déception de certains clients qui estiment que le produit reçu n’est pas conforme au produit vendu. Présenter les produits au plus près de la version réelle originale, authentique.

angles-de-vues-multiples

Homogénéiser les tailles des photographies pour une meilleure échelle

Le cadrage est important pour que l’on puisse se rendre compte de la taille des produits les uns par rapport aux autres. Même si vous indiquez les dimensions de vos produits, l’internaute doit pouvoir se rendre compte que votre perceuse portative est plus petite que votre perforateur burineur ! Prenez soin d’afficher vos photographies au même format pour que l’on puisse se rendre compte de l’échelle de taille des différents produits, en plus des dimensions affichées en description. Vous pouvez également y placer un repère, comme une main qui montre ou qui tient le produit, une personne qui le porte (comme pour des vêtement ou de la maroquinerie…).

les-gants-de-jardinages du site univers-du-pro.fr

L’intégration des visuels sur votre site

Une fois mis en valeur, il vous reste une dernière étape : intégrer les images sur votre site.

Le bon format pour un bon temps de chargement

Un conseil, n’intégrez pas vos images sans réduire leur taille. Le temps de chargement de vos pages est en partie tributaire du poids de vos images. C’est pourquoi nous vous recommandons de réduire la taille à un maximum de 200K, d’opter pour une résolution 72pp, en JPG, PNG ou même en GIF.

L’optimisation SEO, et le compte est bon

Elles comptent elles aussi pour votre référencement naturel, songez donc à bien les renommer et remplir votre balise “alt” (texte alternatif) avec les mots clefs que vous aurez choisi d’insérer dans des phrases cohérentes à but descriptif. Dans les résultats de recherches images qui représentent à elles seules un tiers des requêtes globales sur internet, l’internaute pourra ainsi mieux retrouver l’image en fonction de sa demande et surtout savoir à quoi correspond l’image qui lui est présentée, quel est son contexte.

Le-pulvérisateur-à-batterie-vito-optimisé-grâce-à-une-légende-et-ses-mots-clés

Evidemment, tous ces conseils ne constituent pas une liste exhaustive, mais ils sont la base d’une optimisation de vos photographies produits pour vendre sur votre eCommerce.

vous vous posez des questions en termes de visuels produits, vous souhaitez plus d’informations sur le sujet ou sur le eCommerce en général ?

Contactez-nous !

Posted by Julie Sébille