Le Wireframe est une représentation schématique de votre futur site Internet. Il permet de mettre en relief la composition de vos pages Web. Tout comme l’arborescence, c’est une étape qui vient en amont du projet. Le Wireframe vous permet de mettre en forme vos idées sur la structuration de vos pages.
Une fois l’arborescence terminée (idéalement) ou bien en cours de réalisation, vous pouvez créer vous-même vos propres Wireframes. Littéralement, Wireframe se traduit par maquette de fil de fer. Il s’agit, au travers de cette méthode, d’obtenir une vue générale et schématique de l’ensemble des zones qui composeront votre futur page Web. Pour illustrer mon propos, voici un exemple de Wireframe.
Le Wireframe, également appelé zoning web, est une étape aussi cruciale que l’arborescence. Ces deux éléments représentent en partie l’aboutissement du cahier des charges. Le Wireframe fait abstraction du graphisme et se focalise sur la disposition des contenus et des fonctionnalités dans la page. C’est la raison pour laquelle un Wireframe se base sur des formes simples et sans couleur.
Comment faire un Wireframe ?
Faire un Wireframe, ou du moins son esquisse, est à la portée de tous. Il vous est possible de participer à cette étape et de vous approcher du résultat final. Cependant, tout comme l’arborescence, il est préférable de faire appel à un professionnel du web pour sa validation définitive.
De même que l’arborescence, un Wireframe peut être réalisé avec la méthode papier/crayon ou encore avec Powerpoint. Cependant, votre futur site doit s’adapter à tous les formats existants (smartphone, tablette, portable, pc, …), il est donc nécessaire d’intégrer cette contrainte dès cette étape. Idéalement, vous devez utiliser la méthode mobile first, qui fera l’objet d’un prochain article.
Wireframe CC : Le meilleur outil pour élaborer vos Wireframes
Wireframe CC est un outil en ligne qui ne nécessite aucune installation sur votre ordinateur et qui dispose d’une interface très intuitive. Voici le lien à suivre pour le tester : https://wireframe.cc/
Sa prise en main, d’une facilité enfantine, est déconcertante. Proposant les formats smartphones, tablettes et sur mesure, l’outil vous permet de créer vos Wireframes pour les différents terminaux, favorisant ainsi une conception adaptée au responsive webdesign.
Grâce au bouton « Save », vous pouvez sauvegarder votre travail sous forme d’URL. Ce petit détail s’avère d’une grande efficacité, notamment si vous souhaitez partager vos Wireframes avec les différents intervenants de votre projet Web. En obtenant un lien unique pour chacun de vos Wireframes, vous aurez ainsi la possibilité de dialoguer facilement avec votre prestataire et vos collaborateurs.
L’approche Mobile First
Dès l’élaboration de vos Wireframes, vous vous apercevez que la mise en page sur petit format diffère des formats les plus grands. Pour obtenir un résultat cohérent, il est conseillé de démarrer par la création d’un modèle de page au format smartphone avant de travailler sur les formats plus larges. C’est ce que l’on appelle l’approche Mobile First.
Conclusion
Tout comme l’arborescence, le zoning web est indispensable et le garant d’un projet web réussi. Si vous disposez de temps, n’hésitez pas à mettre la main à la pâte. Ces étapes ne nécessitent aucun pré-requis spécifique. En revanche, même si vous atteignez un résultat fini, l’œil et l’expertise de votre prestataire web est indispensable. Celui-ci doit impérativement valider avec vous l’arborescence et le Wireframe avant de poursuivre la réalisation du site.