6 mai 2014 | Québec
De la planification à la mise en ligne, plusieurs compétences doivent travailler ensemble
Un site Web ne commence pas par une ligne de code. Avant de créer les premières pages, il faut comprendre les besoins du projet, organiser l’information, réfléchir à la navigation et déterminer comment les utilisateurs interagiront avec le contenu.
La réalisation se poursuit ensuite par la conception visuelle, l’intégration, la programmation, les essais et, enfin, la mise en ligne. Selon la nature du site, des bases de données, des fonctionnalités interactives ou des technologies côté serveur peuvent également s’appliquer.
Créer un site Web constitue donc un processus où des compétences créatives et techniques se complètent. Cette approche se retrouve dans le programme de Design Web – LCA.C0 du Collège CDI, qui aborde différentes étapes de la production Web, de la planification au développement et à la mise en ligne.
1. Comprendre les besoins avant de commencer
Avant de réfléchir aux couleurs, aux images ou au code, il faut déterminer ce que le site doit accomplir.
À qui s’adresse-t-il? Quel contenu doit-il présenter? Quelles actions les utilisateurs doivent-ils pouvoir effectuer? S’agit-il d’un site personnel, d’un site d’entreprise, d’un commerce électronique ou d’un projet répondant à d’autres besoins?
Ces questions orienteront les décisions qui suivront.
Dans le programme de Design Web – LCA.C0, le projet d’intégration permet justement de mettre en pratique différentes compétences à travers la planification, la conception et le développement de projets Web.
Cette première étape permet donc de passer d’une idée générale à un projet dont les objectifs et les besoins peuvent guider la conception.
2. Organiser le contenu et la structure du site
Une fois les besoins établis, il faut déterminer comment l’information sera organisée.
Quelles pages seront nécessaires? Comment seront-elles reliées? Où l’utilisateur s’attend-il à trouver une information particulière? Quels éléments doivent être accessibles depuis la navigation principale?
Cette réflexion permet de définir la structure du site et de hiérarchiser son contenu.
Elle influence directement l’expérience des utilisateurs. Même un site visuellement attrayant peut devenir difficile à consulter lorsque l’information est mal organisée ou que la navigation manque de clarté.
La création Web demande donc de réfléchir à la façon dont l’utilisateur circulera sur le site avant de se concentrer uniquement sur son apparence.
3. Concevoir l’interface et l’expérience visuelle
La structure établie, le projet peut prendre une forme plus concrète.
La disposition des éléments, la typographie, les couleurs, les images, les espaces et la hiérarchie visuelle contribuent à la création de l’interface. Ces choix doivent fonctionner ensemble afin de présenter le contenu clairement et de faciliter la navigation.
Dans le programme de Design Web – LCA.C0, la conception d’interfaces utilisateur est abordée en relation avec la fonction de l’interface, le contenu, les grilles de mise en page et l’accessibilité.
Le design ne consiste donc pas uniquement à embellir une page. Il contribue à organiser l’information et à guider l’utilisateur dans son interaction avec le site.
4. Transformer la conception en pages Web
Une maquette ou une interface doit ensuite devenir un site opérationnel.
C’est ici qu’interviennent notamment HTML, CSS et JavaScript. Ces technologies remplissent des fonctions complémentaires : HTML structure le contenu, CSS en définit la présentation et JavaScript permet d’ajouter des comportements et de l’interactivité.
Le passage de la conception au développement consiste ainsi à traduire les choix effectués précédemment en pages que le navigateur pourra interpréter.
👉 Découvrez également : HTML, CSS et JavaScript : les langages au cœur de la création Web
5. Ajouter les contenus, les médias et les fonctionnalités
Tous les sites n’ont pas les mêmes besoins.
Certains reposent principalement sur le texte et les images. D’autres intègrent des formulaires, de l’animation, du contenu interactif, des comptes utilisateurs, un catalogue de produits ou diverses fonctionnalités nécessitant des données.
La réalisation d’un projet peut donc mobiliser d’autres compétences que celles requises pour la construction des pages elles-mêmes.
Le programme de Design Web – LCA.C0 aborde notamment le traitement d’images, le contenu interactif, les bases de données, PHP, MySQL ainsi que différentes technologies permettant de traiter et d’échanger des données.
Ces différentes composantes sont choisies en fonction des besoins du projet plutôt que simplement ajoutées parce qu’elles sont disponibles.
6. Adapter le site aux différents écrans
Un site ne sera pas nécessairement consulté sur un ordinateur de bureau.
Téléphones, tablettes, ordinateurs portables et écrans aux dimensions variées obligent à réfléchir à la manière dont l’interface se comportera lorsque l’espace disponible varie.
Le responsive design permet d’adapter la présentation aux différentes tailles d’écran. Le programme de Design Web – LCA.C0 aborde notamment les points de rupture, les requêtes média et l’approche mobile first.
Cette réflexion ne devrait donc pas intervenir uniquement lorsque le site est presque terminé. La capacité d’adaptation de l’interface fait partie des considérations qui guident sa conception.
👉 Découvrez également : Responsive design et mobile first : concevoir des sites Web pour différents écrans
7. Vérifier le fonctionnement avant la mise en ligne
La création d’un site ne se termine pas lorsque toutes les pages semblent complètes.
Il faut vérifier la navigation, les liens, les contenus, les formulaires et les différentes fonctionnalités. L’affichage doit également être examiné dans les contextes prévus pour le projet.
Cette étape permet de repérer des problèmes qui n’étaient pas nécessairement visibles lors de la conception ou du développement.
Elle rappelle surtout qu’un projet Web doit être considéré dans son ensemble : une page peut fonctionner correctement de façon isolée sans que l’expérience complète soit nécessairement cohérente.
8. Mettre le site en ligne et continuer à le faire évoluer
La mise en ligne marque l’aboutissement du projet de création, mais pas nécessairement la fin du travail.
Les contenus peuvent devoir être actualisés, certaines fonctionnalités modifiées et des problèmes corrigés. Les besoins de l’organisation et des utilisateurs peuvent également évoluer.
La gestion d’un site demande donc de comprendre ce qui se passe après sa publication. Le rôle du webmestre, par exemple, peut comprendre la mise à jour du contenu, la maintenance, la vérification du bon fonctionnement des pages et diverses interventions visant à faire évoluer le site.
Un projet Web s’inscrit ainsi dans un cycle plus large : planifier, concevoir, développer, vérifier, publier puis améliorer.
Des compétences qui prennent tout leur sens lorsqu’elles sont réunies
HTML, CSS, JavaScript, traitement d’images, interfaces utilisateur, bases de données ou programmation côté serveur peuvent être étudiés séparément pour en comprendre le fonctionnement.
Dans un projet Web, cependant, ces compétences doivent être mises en relation.
Une décision concernant la structure peut influencer l’interface. L’interface doit tenir compte des contenus. Certaines fonctionnalités nécessitent de la programmation ou des données. L’ensemble doit ensuite fonctionner sur différents appareils et répondre aux besoins définis au début du projet.
C’est cette complémentarité qui permet de passer d’une idée à une expérience Web fonctionnelle.
Le programme de Design Web – LCA.C0 du Collège CDI combine création, technique et programmation, et comprend des exercices, des travaux ainsi que des projets pratiques permettant d’intervenir à différentes étapes de la production d’un site Web.
Foire aux questions
1. Quelle est la première étape de la création d’un site Web?
Avant de commencer la conception ou la programmation, il est important de comprendre les objectifs du projet, les besoins auxquels le site doit répondre, le public auquel il s’adresse, ainsi que les contenus et les fonctionnalités nécessaires. Ces éléments orienteront ensuite la structure, l’interface et les choix techniques.
2. Faut-il savoir programmer pour créer un site Web?
Les compétences nécessaires dépendent du type de projet et du rôle occupé. La création Web peut faire intervenir HTML, CSS et JavaScript ainsi que, pour certains projets, des bases de données et des technologies côté serveur. Le programme de Design Web – LCA.C0 aborde à la fois la conception et les différentes dimensions de la programmation Web.
3. La création d’un site se termine-t-elle avec sa mise en ligne?
Non. Un site peut nécessiter des mises à jour, des corrections, du nouveau contenu ou des modifications de ses fonctionnalités. Sa gestion et son évolution peuvent donc se poursuivre bien après sa publication.
Pour aller plus loin
👉 Design Web : comprendre le domaine et ses perspectives
👉 Créer des expériences Web : le rôle du designer Web
👉 Créer des sites Web dynamiques : comprendre les bases de données et le côté serveur
👉 En savoir plus sur le programme de Design Web – LCA.C0 du Collège CDI
