Web Design, Bannières

Les étapes qui jalonnent la conception graphique d'un site web, ou d'une application mobile

Qu'il s'agisse de sites internet ou d'applications mobiles, à chaque site web ses cibles, et à chaque cible son design. Chaque projet web débute par l'étude du client, de son univers et de ses besoins, et par la réalisation conjointe d'un cahier des charges. C'est ce que l'on appelle la phase d'initialisation.

Lors de la phase de conception, au-delà de l'esthétique d'un site internet, le designer s'attache à son aspect pratique, en terme de logique et de cheminement des visiteurs. En ce sens, en tant que créateur d'interfaces, le travail du graphiste web s'inscrit, tout au long du processus créatif, dans une démarche de design thinking. Cette approche vise à identifier les problématiques d'un site et à trouver des solutions, aussi bien sur un point de vue technique qu'esthétique ou fonctionnel. Le design thinking est une méthodologie qui permet d'améliorer l'expérience utilisateur, et de la rendre aussi intuitive qu'agréable, tout en gagnant en efficacité. C'est pour cela qu'en web, le cahier des charges est souvent amené à évoluer au fur et à mesure de l'avancée des travaux et des tests qui le jalonnent.

Une fois le cahier des charges initial défini, le graphiste web ou webdesigner crée la charte graphique. Il conçoit ensuite l'arborescence du site, et passe à la conception des interfaces : Il crée les gabarits des pages et les wireframes destinés à recevoir les contenus textuels et graphiques. Un wireframe est un prototype ou schema basse résolution, généralement conçu en noir et blanc, précisant la disposition des éléments dans une page donnée. Après validation par le client des gabarits et wireframes, l'iconographie, les boutons, et autres éléments graphiques qui composent le site sont réalisés. Vient ensuite le temps de la création des maquettes. Une maquette est une visualisation concrète et en couleur, de ce à quoi une page web va ressembler une fois codée et mise en ligne. Ce livrable est un document graphique haute résolution au format jpg, png ou pdf. On y observe la forme, les couleurs et les effets définitifs, sauf mention contraire, des polices, des boutons, des icônes et de leurs emplacement, des états par exemple d'un slider au survol de la souris ou lorsqu'un lien a été visité, etc, le tout au format desktop (ordinateur de bureau), tablettes et mobiles. Lorsque les maquettes sont validées, on passe alors au codage du site, qui sera effectué par le web intégrateur (développeur front). Les métiers étant étroitement liés, il arrive fréquemment qu'un web designer soit double-casquette, et donc un expert du développement web.
Parmi les autres attributions du web designer, on compte la conception de sliders, de bannières et d'animations flash, ou encore la création de kits de jeux et de landing pages.

De nos jours, sur le web, rien ne peut être laissé au hasard. En ce sens, le graphic designer connaît toutes les bonnes pratiques du web qu'il s'applique à mettre en oeuvre en vue de l'intégration des éléments graphiques et visuels au sein d'un langage de programmation. Il se tient informé des tendances et innovations en matière de design, et veille à respecter de nombreuses règles, en constante évolution, relatives notamment à l'accessibilité et aux tailles des différents terminaux et écrans, pour n'en citer que quelques unes.

Le travail du graphiste publicitaire, by ContempDesign - Graphiste publicitire indépendant

Quelques réalisations web

Bannières publicitaires

Bannière web - ContempDesign Graphiste freelance

A propos des bannières publicitaires pour le web

Parce qu'on n'est jamais assez connu, les bannières publicitaires sur le web permettent à la marque d'étendre sa toile en touchant un grand nombre d'internautes grâce à une diffusion de ses annonces sur des sites ciblés. Par exemple, une entreprise spécialisée dans les jouets pour enfants pourra choisir d'afficher sa bannière publicitaire sur des forums tels que MagicMaman, Doctissimo, Facebook, etc, ou s'il s'agit d'une petit commerce local, sur le site des garderies et autres centres de loisirs des villages aux alentours.
La bannière publicitaire pour le web permet à l'enseigne d'élargir son niveau de visibilité et donc de gagner en notoriété, mais également de promouvoir un produit, un service ou une offre spéciale, en redirigeant l'utilisateur directement vers la page souhaitée. Cette technique marketing est conçue pour tenter l'internaute, lui administrer une piqûre de rappel quant-à l'existence et la qualité de vos produits et services, ou convertir les visiteurs d'un site en clients et ainsi doper les ventes, que ce soit en magasin ou en ligne.

L'avantage de cet outil promotionnel réside dans le fait que la bannière peut être configurée pour apparaître ou pas, en fonction de différents critères tels que l'âge, le sexe, la situation familiale, les centres d'intérêt et le lieu de résidence de l'internaute. Ou même en fonction de la géolocalisation du terminal utilisé lors de la navigation : Si la personne se trouve dans un rayon de 500 mètres ou 3km (à définir) de votre commerce, alors un encart publicitaire l'invitant à se rendre dans votre magasin peut s'afficher sur le site qu'il est en train de visiter ! Un cas concret d'utilisation d'une bannière pour un restaurant pourrait être : Apéritif offert avec le nom de code "Apero". Voilà de quoi appâter le chaland et booster son chiffre d'affaires !

Tout est paramétrable, et mieux encore, mesurable. En effet, il est possible de suivre le nombre de fois qu'une bannière a été affichée ou a été cliquée, et combien de ventes s'en sont directement suivies.

Sur le web, on distingue 3 types de campagnes :
- celles de notoriété : qui consistent à afficher l'annonce imagée choisie par l'entreprise au plus grand nombre, sans forcément attendre des clics en retour. Cette stratégie est utilisée principalement pour imprimer la marque dans les esprits, la faire connaître et apprécier de tous
- celles destinées à la vente immédiate , conçues pour générer du chiffre d'affaires via des offres promotionnelles "imbattables"
- celles de retargeting : Cette méthode repose sur l'affichage de la photo d'un produit dont un internaute a consulté la fiche sans terminer sa visite par un achat. Le retargeting est là pour "faire craquer" le client, afin qu'il passe à l'acte d'achat. Le but étant de rappeler à l'acheteur potentiel que le produit en question est toujours disponible et qu'il n'attend plus que d'être ajouté au panier...

Les différents formats de fichier des bannières pour le web :

- Animations Flash (swf) : Ce format très ludique et animé attire de suite l'attention. Il permet d'interagir avec l'utilisateur, lorsqu'il s'intéresse à la bannière ou à un élément donné du design. Par exemple, au survol de la souris, la bannière joue une musique ou un son, se déploie et double sa surface d'affichage, lance une animation, change les couleurs des textes ou des boutons, fait apparaître un message spécifique à l'action réalisée (clic simple, double ou appuyé, survol, etc).
L'atout majeur de ce type de fichier est qu'il est possible de lui programmer tout un tas de comportements. On peut faire coup-double avec la bannière publicitaire en la présentant, par exemple, sous la forme d'un jeu de grattage, de casino jackpot, etc. Cette technique incite un plus grand nombre d'utilisateurs à cliquer. D'ailleurs de nombreux jeux en ligne ou à télécharger sont conçus en Flash + Action Script, qui ensemble répondent aux commandes de l'utilisateur et retranscrivent nombre d'animations, toutes plus sympa et intéressantes les unes que les autres. Personnellement, j'adore l'immensité des possibilités que l'on peut entrevoir et coder en Flash, mais ne comprends pas que ce principe d'interactivité ne s'applique pas à d'autres logiciels d'animation et de design.
Inconvénients : Le Flash est voué à disparaître du web : le célèbre Adobe Flash Player ne sera plus disponible, théoriquement à partir à 2020, date à laquelle l'éditeur ne mettra plus à jour le logiciel. On peut supposer que cette décision a été prise du fait que Steve Jobs / Apple a choisi une technologie alternative à Flash pour la commercialisation de l'Iphone, et que la marque Adobe n'a pas souhaité investir dans le développement [...] et l'allègement des fichiers correspondants. Quel dommage !!! Mais en effet, les fichiers swf sont relativement lourds, voire trop lourds (c'est d'ailleurs pour cela que ne propose plus la programmation d'animations relativement élaborées, de jeux et applications en Flash) et par conséquent plus longs à charger sur une page web, et pire sur un mobile. Si rien n'est fait pour parer à ces défauts majeurs, je pense qu'Adobe devrait vendre Flash à des développeurs dignes de s'en occuper ! ce qui ne semble pas prévu au programme, à mon grand regret, et à celui de milliers ou millions de designers/développeurs.

- Bannières video : A la fois tendance et captivantes de par leur concept, on les retrouve principalement en début-fin-milieu d'autres videos. De nos jours la video peut mélanger films, 3d et animations en tous genres, ce qui lui donne un côté aussi fun, attractif et distrayant qu'intéressant : on a envie de la découvrir, de la regarder et d'en parler autour de soi. Si aucune interaction (clic, survol) avec l'internaute n'est possible, le webmaster peut tout-de-même coder des comportements "de base", tels que la redirection vers la page cible, et les fonctions de lecture d'une video classique, pour n'en citer que quelques uns.
Il n'en reste que la video, en tant que bannière publicitaire indépendante affichée sur un site web, doit respecter elle aussi un poids maximum si l'on souhaite répondre à des critères de rapidité d'affichage. C'est là que ça se complique. Il est très difficile voire impossible de proposer des video de moins de 50Ko ou même 500Ko, à moins de n'utiliser que 10 aplats de couleurs maximum et quasiment aucune animation. Donc la video pour les bannières publicitaires oui, mais incluses dans d'autres videos : là plus de problèmes ou alors plus simples à résoudre.

- Bannières Gif : Plus légères qu'un swf ou qu'une video, le gif est un format de fichier qui permet de créer des animations simples, de mouvement, de texte ou de couleur, et d'interchanger des images entre elles. Les bannières gif sont non-interactives, simples à mettre en place, mais pas moins efficaces.

- Bannières jpg : Ces bannières ne présentent aucune sorte d'animation : on est sur une composition fixe, laquelle a le mérite de proposer un poids minimum pour un chargement optimal de la page web.

Les tailles standard recommandées des bannières pour le web :

Les horizontales :
- pavé 250x250
- pavé 300x250
- rectangle 180x150
- banniere 468x60
- bannière 728x90
- bannière giga ou leader, traditionnellement utilisée en haut de page, 1000x90, déployable à 1000x120

Les verticales :
- skyscraper 120x600
- banniere 300x600
- grand angle 800x600, avec un bouton X permettant de fermer l'annonce

Visuels pour le web et bandeaux pour les réseaux sociaux

Donnez du chien à votre page facebook, Twitter, Instagram, LinkedIn, Twitch, etc avec des bandeaux et images d'intro personnalisées, percutantes, représentatives de vos activités. Pour être reconnus au premier coup d'oeil, acquérir toujours plus de followers et marquer les esprits.

Création de bannières facebook et réseaux sociaux - ContempDesign Graphiste freelance

Création de bannières facebook et réseaux sociaux - ContempDesign Graphiste freelance

Création de bannières facebook et réseaux sociaux - ContempDesign Graphiste freelance

Création de bannières facebook et réseaux sociaux - ContempDesign Graphiste freelance

En haut !