Le design d’un site Web sur mesure

L’analyse des besoins

Avant de commencer quoi que ce soit, il est important de faire une bonne analyse des besoins de l’entreprise qui désire un site Web. À quoi sert le site Web? À qui s’adresse-t-il? Quelles seront les fonctionnalités principales? Y aura-t-il des inscriptions à des infolettres de prévues? Y aura-t-il des moteurs de recherche sur le site Web? Toutes ces questions sont valables autant pour le designer que pour le programmeur. Parfois, certaines fonctions semblent simples, mais requièrent beaucoup de temps de programmation ou du moins elles doivent être prévues dès le départ. Ce qui nous amène à la création de l’arborescence.

 

L’arborescence

Voici une étape cruciale du site Web. C’est la fondation. C’est le squelette qui établira à la fois le nombre de pages et qui servira de guide pour toute la création de contenu. À cette étape on doit prévoir et penser à tout. Il est important que le client comprenne bien l’arborescence et donne son approbation finale. N’ayez pas peur de le retravailler, d’y apporter des modifications avant de le considérer final. Ça permet souvent de sauver du temps et de l’argent.

Il faut également toujours garder en tête le public cible. On établit l’ordre des pages. Qu’est-ce que le client potentiel doit voir dès le départ. Un site Web c’est avant tout une expérience utilisateur (UX). Le client doit être dirigé vers l’information pertinente qui le concerne. Une fois que l’information essentielle est bien disposée de façon logique, on peut ajouter du “gravy”. Par exemple, une section blogue pour toutes les informations supplémentaires (à moins que le but du site Web soit un blogue). Cela dépend énormément des objectifs établis à priori.

Les outils utilisés pour la création de l’arborescence ne sont pas importants. L’important c’est de TOUJOURS en faire une ! Que ce soit dans Excel, dans InDesign, Google Docs… etc.

 

©vdesrochers.com

 

Les maquettes fonctionnelles

Une autre étape essentielle, les maquettes fonctionnelles. Elles ont pour but de planifier toutes les fonctionnalités, le contenu, l’ordre des éléments, les liens.

Par exemple, pour une boutique en ligne, la création de maquettes fonctionnelles s’avère souvent une étape cruciale, car elle permet de réfléchir aux actions que devront faire les clients. Par exemple, dans une page produit, on peut suggérer des achats supplémentaires. Ou encore, comment on présente toute la procédure d’achat, par étapes, dans une seule page…. etc. Les maquettes fonctionnelles permettent aussi une collaboration entre designers, programmeurs et client. Cela nous évite des mauvaises surprises ou des oublis rendus à l’étape de la programmation. (Encore une fois, on évite des frais supplémentaires imprévus). Souvent, le budget détermine les limites possibles du projet (nombre de maquettes visuelles, animations… etc.)

Parfois, cette étape est moins nécessaire dans le cas d’un petit site Web de base. Si votre site Web n’est en fait qu’une simple carte de visite pour vous positionner sur le Web, un designer d’expérience pourra faire des maquettes visuelles qui combleront les besoins de la cause. Mais attention… ceci s’applique vraiment si c’est un site Web de base.

 

©vdesrochers.com

 

Les maquettes visuelles

La partie la plus excitante pour le client, car il voit son projet prendre vie. En se basant sur les maquettes fonctionnelles (s’il y a lieu) le designer établit la grille graphique, le choix des typographies, les éléments visuelles, le style des icônes, la mise en page, les couleurs. Bref, il a beaucoup de travail en vue, mais oh combien palpitant ! Le design doit être le reflet de l’entreprise, lui donner une image brillante, intelligente et réfléchie.

Selon ce qui a été établi avec le client, le designer propose une ou deux avenues possibles. S’il y a plusieurs propositions de grilles graphiques, elles se doivent d’être assez différentes pour que le client ait un véritable choix à faire.

Combien de maquettes sont nécessaires? Cela dépend vraiment du design, du budget, du contenu. On s’adapte à tous les projets.

 

“Ce qui fait l’homme, c’est sa grande faculté d’adaptation.”
– Socrate

 

L’important, c’est que le client soit bien au courant des limitations monétaires et que le designer respecte le nombre de pages établi. Le programmeur pourra ajuster les pages non réalisées par le graphiste en utilisant les gabarits des autres pages.

Il est aussi préférable de montrer les maquettes sur écran, les couleurs, la grosseur des éléments seront plus proches de la réalité.

Le designer doit réfléchir à la version mobile et tablette. C’est une réalité d’aujourd’hui, on ne peut plus se permettre de ne pas avoir un site Web responsive. Selon kap-numérique, au Canada, 50 % des utilisateurs du Web sont sur la plateforme mobile!

kap-numerique.com

Dans certains cas, le programmeur fait directement l’adaptation mobile et le designer fait l’assurance qualité pour être sur que cela respecte la grille et le “look” général.

 

Les ajustements

Le client a le droit de faire des ajustements. Parfois on a fait de petites omissions (on est humains après tout). C’est le temps de passer le tout au peigne fin et de faire toutes les corrections finales.

Le designer doit bien vérifié aussi la standardisation des styles, des grosseurs de textes et que la grille soit bien respectée. Bref, on peaufine et finalise toutes les maquettes.

 

On passe en programmation

La balle est dans le camp du programmeur et du chargé de projet qui s’assure d’avoir tous les contenus à temps pour respecter les échéanciers. Il est sage aussi de prévoir un temps pour faire de l’assurance qualité et de tester le nouveau site Web de fond en comble avant d’annoncer la mise en ligne.

 

Programmation site Web
©vdesrochers.com

 

 

À noter :

Il faut aussi être à jour dans les stratégies de positionnement en ligne. Ici, je laisse les professionnels du SEO, du positionnement, des AdWords faire le point sur toutes les choses importantes à savoir ! Les stratégies changent très souvent dues aux algorithmes complexes des moteurs de recherche.  Il existe d’ailleurs plusieurs formations disponibles à chaque année à ce sujet. Ces connaissances auront un gros impact sur le contenu du site Web alors ne prenez pas cela à la légère et parler à un professionnel qui vous conseillera dès le départ.

 

Quelques références :

Qu’est-ce que le SEO sur Wiki 

Qu’est-ce que l’expérience utilisateur (UX) sur Wiki

 

Pour de l’inspiration Web :

httpster.net

awwwards.com

smashingmagazine.com

webdesignerdepot.com

designshack.net

 

 

 

Voilà cela donne un portrait global du travail effectué par un designer, pour la réalisation complète d’un site Web.

Leave a Reply

Your email address will not be published.