Table des matières
Cette formation se concentre avant tout sur les tâches liées à la création de votre site. Il est néanmoins important de faire un apparté sur cet aspecte. Etape souvent ignorée qui peut pourtant vous éviter bien des problèmes par la suite, le maquettage consiste à réaliser une première version concrète de votre site avant de passer au développement.
Concevoir une page web au fil de ses idées est un exercice ardu, et aboutit très souvent à des oublis et des maladresses. Le développement web, comme toute les activité de création, nécessite de pouvoir se concentrer sur une chose à la fois.
Ainsi, faire une maquette de votre site permet de bien ordonner les tâches qui seront à effectuer : quelles pages vous voulez créer, quel(s) sujet(s) elles aborderont, mais aussi les outils que vous aurez besoin d'intégrer, comme un formulaire de contact. C'est aussi l'occasion de créer en parallèle une charte graphique, qui vous permettra de réfléchir à vos couleurs, votre logo, les polices d'écritures ...
Ça peut sembler paradoxal, mais maquetter votre site au préalable vous évitera beaucoup de travail additionnel par la suite en vous évitant d'avoir à faire des changement à répétition. En effet, il est rare que la première version de son site convienne parfaitement; tel élément sera trop petit, ou pas aligné au bon endroit, tel texte sera à placer à un autre endroit... Hors si effectuer des changements sur une maquette se compte en minutes, et même si Oxygen accélère grandement le processus, faire la même chose sur un site web est un travail qui se compte en heures.
Jusqu'ici, nous avons parlé du maquettage comme d'un tout. Mais il existe en réalité plusieurs étapes distincte qui vont à chaque fois préciser de nouveaux éléments.
Temps de conception : Rapide
Dit simplement, c'est le chapitrage de votre site, c'est-à-dire l'étape où vous allez définir quelles pages comportera votre site, et quelle page amènera à quoi. C'est un travail simple à faire, mais absolument cruciale. Aussi, si vous souhaitez consacrer le minimum de temps au maquettage, faites au moins ce travail, qui vous permettra de segmenter les informations de votre site.
Créer l'arborescence d'un site fonctionne un peu de la même manière que la hiérachie des titres, dans le sens où vous allez préciser des pages principales et des pages secondaires :
Gloomaps est un site de référence qui vous permettra de réaliser facilement votre arborescence. Pensez simplement à sauvegarder ou exporter votre arborescence pour éviter de perdre vos modifications.
Vous pouvez également utiliser n'importe quel outil permettant de hiérarchiser vos éléments, ou même travailler sur papier.
Temps de conception : moyen
Aussi appelé maquette basse fidélité, le Wireframe est une version simplifiée d'une maquette, qui sert à poser les bases de chaque page. L'objectif n'est pour le moment pas de réaliser une copie conforme de ce que sera le site, mais plutôt de réfléchir à quelles sections il comportera, et comment elles seront organisées.
On ici prendre soin de détailler les éléments de chaque page, en ajoutant éventuellement les titres et les textes, sans forcément rentrer dans les détails. L'objectif est qu'à la fin de cette étape, vous sachiez :
C'est également à cette étape qu'on va commencer à réfléchir la question des formats d'écran. En effet disposition sur grand écran ne sera peut-être pas adapté à un affichage plus étroit. Cette étape peut être ignorée pour le moment si vous réalisez une maquette par la suite.
Une fois le wireframe terminé, il est déjà plus facile de se lancer dans la création du site, même si certains points restent à préciser.
Vous pouvez également choisir de réaliser cette étape à la main, sur papier
Temps de conception : long
Ce que l'on appelle par défaut maquette de site web est la maquette haute fidélité, dont l'objectif est d'être la fidèle représentation de ce que sera le site web. C'est notamment à cette étape qu'on va réaliser la charte graphique du site :
Pour en savoir plus sur la charte graphique, nous vous conseillons le Guide de la Fabrique du Net qui aborde le sujet de manière complète.
On va également ici accorder une importance particulière aux formats d'écran, en réalisant trois versions différentes de chaque page :
Cette étape est la plus fastidieuse, mais vous permettra également de tester rapidement des idées de conception et de corriger votre mise en page avant de passer au développement. Notez que si vous partez d'un Wireframe, cette étape sera bien plus simple à réaliser.
Si vous avez conçu votre wireframe au préalable, vous aurez ici surtout besoin d 'apprendre à utiliser l'outil que vous avez choisi. Il existe de nombreux tutoriels sur Youtube pour vous aider dans la prise en main du logiciel qui a votre préférence.
Pour vous aider, vous pouvez consulter le guide le guide sur les règles à suivre pour créer une bonne page web.
