Comment faire un storyboard HTML

Bien que le storyboard soit le plus souvent utilisé pour les images animées, les développeurs Web et les consultants en entreprise sont également des sites de story-boards. Les storyboards vous aident à visualiser un grand projet graphique, tel que la mise en page et la conception de votre site Web. Le processus implique de dessiner des images de ce à quoi votre site Web devrait ressembler avant de développer réellement le site, ce qui fournit un outil efficace pour concevoir le flux du site. La scénarisation avant de commencer à coder vous permet également d’économiser temps et argent lors de la nouvelle conception.

1.

Développez un plan conceptuel pour votre site Web afin de créer un guide approximatif pour votre scénarimage. Déterminez le type de contenu que le site contiendra, tel qu'un blog, une galerie d'images, une page de biographie, un formulaire de contact, un forum de discussion et une page de commerce électronique.

2

Dessinez la maquette d'un conteneur pour votre site Web à l'aide de papier ou d'une surface de dessin numérique. Un conteneur est un ensemble d'éléments graphiques qui apparaissent régulièrement sur la plupart ou la totalité de vos pages Web. Il comprend généralement la bannière de votre site Web, le menu de navigation, les pieds de page en bas de page et la disposition des colonnes. L'utilisation d'un conteneur rend les pages Web de votre site cohérentes, même si elles affichent un contenu très différent. La définition de normes cohérentes pour vos pages Web facilite la navigation sur le site pour vos visiteurs. Cela vous donne également plus d'occasions de créer une marque distinctive.

3

Dessinez des maquettes de chaque type de page de contenu. Utilisez votre conteneur comme point de départ, puis placez les éléments graphiques requis par le contenu de la page. Par exemple, sur une page de modèle de blog, concevez l'apparence des titres d'articles de blog, le corps du texte des entrées de blog, les balises et autres métadonnées à inclure, des liens permettant de commenter l'article et des divisions pour séparer visuellement les articles. Soyez très précis, identifiez les dimensions en pixels et les emplacements des éléments sur la page, ainsi que la liste des codes de couleurs pour le jeu de couleurs. Le storyboard est à votre avantage, ou à celui de votre équipe de conception embauchée, et devient plus utile à mesure que vous ajoutez de la spécificité.

4

Examinez l'intégralité du storyboard pour en assurer la cohérence sans limiter inutilement l'apparence ou les fonctionnalités de certains types de pages de contenu. Faites des révisions si nécessaire.

Choses nécessaires

• Papier à dessin ou surface de dessin numérique

Conseils

• Vos dessins ne doivent pas être parfaitement conçus; ils servent à faire passer le message.
• Il est plus facile et moins coûteux de faire des erreurs et de changer de direction dans la phase de scénarisation qu’une fois que vous avez commencé à écrire le code et les balises.