D’abord, comme dans n’importe quel outil de communication à développer, il s’agit de bien saisir le secteur d’activité du client, ses besoins, ses objectifs, ses concurrents, etc. La vocation et le type de site Internet aura également une influence sur la conceptualisation du design du site. Le site est-il une boutique en ligne, est-il informatif, ou propose-t’il des services professionnels ? Ensuite, lorsque les réponses à ces questions sont bien identifiées, nous pouvons passer à la première étape.
1. Structure et arborescence des contenus
Définir la structure et le type de contenu. Il s’agit de déterminer une arborescence au niveau des informations contenues dans le site. Mieux vaut concentrer des types d’informations dans différents niveaux du menu. D’ailleurs, un menu principal doit présenter de façon claire et précise chacun des onglets du site et chacun des niveaux (sous-menu 1, sous-menu 2, etc.). Cette étape permet au designer web d’évaluer le nombre de pages, le nombre de sections dont il faut faire le design et la programmation. Elle permet donc de bien évaluer également le budget de production.
2. Maquettes fil de fer
Une fois la structure établie, le designer web pourra conceptualiser ce qu’on appelle des maquettes fil de fer (wireframes). Cette étape consiste à illustrer à l’aide d’un schéma toutes les sections d’un site ou d’une page web. Il s’agit d’un prototype vue sous forme de dessin technique. Le web designer positionnera par exemple là où le logo sera positionné, le menu principal, un carrousel d’images, des zones de textes, des composantes, etc. Il est très rare qu’à cette étape soient présentées des couleurs, une typographie, des images ou autres visuels. Les wireframes peuvent être présentés sous forme d’esquisses ou réalisés à partir de logiciels de design. Les wireframes sont un outil essentiel dans le processus de création d’un site car c’est à cette étape que le client pourra mieux comprendre comment les différents contenus seront présentés. C’est également plus facile de revoir les différentes sections sous forme de schéma que lorsque le design est déjà complété.
3. Design web
Une fois les wireframes déterminés et approuvés par le client, le designer web pourra alors attaquer le design lui-même. C’est là que la créativité prend tout son sens et toute sa forme. L’étape de création du design représente environ 20% à 30% du travail à réaliser sur un site.
4. Programmation
Lorsque le design est complété et que sa déclinaison est également bien définie, les programmeurs prennent la relève. Leur tâche consistera à « découper » le design et le programmer en codes et feuilles de style. C’est aussi à cette étape que les contenus seront intégrés (textes, images, vidéos, liens, etc.). Lors de la programmation d’un design, il est fréquent d’y voir certains ajustements selon les tests d’affichage sur les différents navigateurs (Explorer, Safari, Firefox, etc.).
5. Validation / Révision
Une fois la programmation complétée, tous les contenus intégrés, les fonctionnalités installées et testées, l’étape de révision peut débuter. Le client sera alors invité à consulter toutes les pages du site et de valider son contenu, ses différentes sections. Si des corrections ou modifications s’imposent, elles seront réalisées par le programmeur.
6. Lancement
Sortez les bulles, célébrez, organisez un événement de lancement car c’est enfin le moment de dévoiler au grand public votre tout nouveau Site Internet !
