1) La phase de maquettage
Le maquettage constitue une étape primordiale dans la réalisation de votre site. L'objectif est de définir comment le site va être construit, quelles fonctionnalités va t-il avoir, combien de pages va t-il comporter ... En résumé, il faut prévoir absolument tout ce qui peut être prévu pour les étapes futures. En effet, si la maquette n'est pas parfaitement conforme à votre besoin, la moindre correction risque d'entraîner des heures de travail supplémentaire.
Pour illustrer cela, imaginons que vous décidiez de repeindre votre maison en bleu. Si vous changez d'avis après avoir repeint tous vos murs, vous risquez d'avoir du travail. C'est la même chose lors de la conception d'un site web. Il est donc important de suivre chaque étape avec sérieux pour éviter les mauvaises surprises.
L'arborescence
Première étape dans la conception d'un site web, l'arborescence consiste à faire le liste de toute les pages que comportera votre site. Il est également important de réfléchir à l'organisation des liens internes, c'est-à-dire déterminer comment les pages sont liées entre elle. Par exemple, une page peut comporter des liens qui vous conduiront à une autre page, et ainsi de suite. Cet exercice permet de différencier les pages les plus importantes de votre site des pages purement informatives, mais également de comprendre comment l'utilisateur naviguera sur votre site.
Le wireframing
Aussi appelé maquettage basse fidélité, le wireframing permet de dresser une structure sommaire des pages du site. C'est notamment à cette étape que l'on va déffinir les fonctions et les différents élements du site. On va également réfléchir à l'organisation des différentes parties de chaque page. Par exemple, la page d'accueil pourra se composer d'une image de présentation et d'un titre, puis présenter différents services, et enfin proposer un bouton amenant sur la page de contact du site. On va également se poser la question de comment les éléments devront être présentés sur des écrans de taille différentes, particulièrement pour les mobiles, qui ont des tailles d'écran très réduites.
Le wireframing est très utile, car il permet de se concentrer sur l'aspect fonctionnel du futur site web sans se préoccuper de son aspect visuel. Il est ainsi beaucoup plus facile de repérer des problèmes de conception ou des sections laissant à désirer.
La charte graphique
Cette étape consiste à définir l'identité visuelle du site web, c'est-à-dire sa carte d'identité graphique, qui permettra à l'internaute de reconnaître l'entreprise sans même avoir à lire son nom. la charte servira également à définir les règles de conception de la maquette afin d'en simplifier la création et d'éviter les erreurs. Elle précise notamment :
- La ou les police(s) utilisée(s), c'est-à-dire le style d'écriture.
- Les couleurs primaires et secondaires du site.
- La taille des différents titres et des textes.
- les différentes représentations du logo.
Une bonne charte graphique permet de s'assurer que le site conservera une bonne homogénéité et qu'il restera cohérent au niveau de sa communication visuelle. Plus simplement, la charte graphique évite de se retrouver avec un site qui pique les yeux à cause d'un mauvais choix de couleurs, de textes trop petits pour être lisibles ...
Les contenus du site
Une fois la structure du site mise en place et les règles de design définies, il faut à présent créer les contenus, à savoir les textes et les médias (images, vidéos ...) Cette étape d'aspect plutôt simple nécessite tout de même quelques précautions. Concernant les textes, il est important de communiquer toutes les informations nécessaires, tout en conservant un style d'écriture dynamique et intéressant pousr l'internaute. L'orthographe doit faire l'objet d'un examen particulièrement minutieux, car la moindre erreur risque de nuire grandement à l'image du site.
Concernant les images, il est nécessaire de s'assurer de leur libre utilisation pour éviter des problèmes de droits d'auteur, soit en utilisant des images libres de droit, soit en achetant l'autorisation d'utilisation. Il faut également réaliser un travail de fond pour s'assurer que tout les médias sont au bon format. En effet, une image mal dimensionnée ou trop lourde risquerait de donner un mauvais rendu, ou de ralentir le site.
La maquette du site
Aussi appelée maquette haute fidélité, la maquette est l'étape finale de la phase de maquettage, ainsi que la plus importante. En effet, la maquette haute fidélité doit parfaitement représenter l'aspect final du site, car elle servira de modèle pour le développement. C'est ici que les étapes précédentes prennent toute leur utilité, car elles vont permettre de grandement faciliter la construction de la maquette. C'est ici que l'on intègrera notamment les contenus du site, les couleurs, et les autres spécificités graphiques définies précédemment.
2) La phase de développement
Etapes la plus connue de la construction d'un site web, la phase de développement consiste tout simplement à transférer la maquette haute fidélité en code compréhensible par l'ordinateur. Pour ce faire, il est possible d'utiliser un grand nombre de solutions et de langages différents. Nous allons donc présenter ici la manière classique pour réaliser cette étape.
HTML : Le squelette du site
La construction du site démarre systématiquement par de l'écriture HTML (ou PHP pour certains CMS comme WordPress). Acronyme pour HyperText Markup Language, le langage HTML permet de baliser tous les élements du site et de déterminer leur ordre d'apparition. Il sera par exemple possible de décider que le site affichera d'abord une image, puis un texte, puis une autre image, et ainsi de suite. La langage HTML est ainsi le squelette du site. Il ne va pas permettre d'obtenir son apparence finale, mais va poser les bases pour la suite.
CSS : la mise en forme
Acronyme pour Cascading Style Sheet (feuille de style en cascade), le CSS permet donner l'apparence voulue à tous les éléments du site. On va notamment l'uriliser pour spécifier les couleurs principales et secondaires, la polices et la taille des textes, l'alignement et l'espacement de chaque élément ... C'est également à cette étape qu'on va mettre en place le responsive design, qui consiste à modifier l'organisation du site en fonction de la taille d'écran, pour qu'il s'adapte aux tablettes et aux mobiles.
Le CSS, s'il est bien utilisé, peut également permettre des effets de styles très impressionnants qui vont améliorer l'aspect général du site et le rendre plus attayant pour les internautes. Il sera par exemple possible de faire des boutons qui changent de couleur lorsque l'on passe la souris dessus, d'ajouter une ombre à un élément, voir même d'animer un élément ... Les possibilités sont presques infinies ! En revanche, le CSS n'est pas un langage de programmation et ne permettra donc pas de programmer des actions complexes.
Javascript : La mécanique du site
Langage de programmation universellement utilisé sur le web, le javascript est un langage plus difficile à maîtriser que ses deux autres camarades, mais de loin de plus puissant. Il est essentiel pour réaliser les actions complexes du site, comme le déploiement d'un menu déroulant, ou la mise en place d'un diaporama d'images (aussi appelé carrousel). On va également l'utiliser pour animer le site et lui donner du mouvement lorsque le CSS commence à montrer ses limites.
Le Javascript va aussi servir à mettre en place les actions internes d'un site web, comme par exemple la procédure de connexion à un compte, ou la validation d'un paiement.
3) La phase de mise en ligne
Une fois sa consctruction terminée, votre site doit être mis en ligne pour pouvoir être visible sur internet. Plus courte que les précedentes, cette étape nécessite cependant de bonnes connaissances techniques sur le fonctionnement du web et des serveurs.
Le choix du nom de domaine
C'est l'adresse de votre site web. Le nom de domaine est la signature qui va permettre d'identifier le site lorsqu'il est recherché dans un moteur de recherche. Il se constitue d'une adresse URL (www.mon-site), et d'un domaine (.com). Un nom de domaine est unique à chaque site web, et il est donc impossible de l'utiliser s'il est déjà pris par un quelqu'un d'autre. Il existe cependant deux solutions pour palier à ce problème :
- Utiliser un autre domaine : si www.mon-site.com est déjà pris, il est possible de choisir un domaine finissant par .fr, .net ou .org ; Attention cependant à ne pas aller chercher des domaines trop bizarres, car cela peut poser des problèmes par le suite.
- Choisir un nom légèrement différent : Comme par exemple www.monsite.com.
Un nom de domaine est toujours payant, et coûte en moyenne une dizaine d'euros par an.
L'hébergement
Pour pouvoir être visible par les internautes, votre site doit être hébergé sur un serveur web, c'est-à-dire un type d'ordinateur conçu exclusivement pour stocker les fichiers qui composent un site web. La location d'un serveur est forcément payante, car ce dernier fonctionne 24 heures sur 24, et consomme donc de l'énergie.
Suivant votre objectif et / ou le nombre de personnes qui vont utiliser votre site web, le coût d'hébergement peut varier de quelques euros à plus de cent euros par mois, suivant si vous possédez votre propre serveur ou si vous le partagez avec d'autres personnes. Il est donc important de bien estimer le trafic que recevra votre site internet. En effet, si les ressources allouées à votre site s'avèrent insuffisantes, la vitesse d'affichage de vos pages ralentira jusqu'à-ce que le site ne fonctionne plus du tout. A l'inverse, investir dans un trop gros serveur vous obligera à payer des coûts inutiles.
Pour en savoir plus l'hébergement et les options à votre portée, consultez notre article dédié.
