Pour ce faire, on peut tout simplement utiliser des outils graphiques – comme Photoshop ou Illustrator – ou passer par des logiciels de diagrammes – par exemple, Visio ou Omnigraffle. Cependant, il existe d’autres outils permettant de créer rapidement un plan de site. Nous allons en voire 4. Pour comparer plus facilement, j’ai imaginé le plan d’un site d’une agence web fictive et en utilisant chacun des outils, exporté le résultat final. Let’s go!

WriteMaps

Plan de site réalisé avec Writemaps

WriteMaps est un service web gratuit entièrement dédié à la création de plans de site. Le fonctionnement est très simple: on peut créer des pages, les hiérarchiser, leur associer une URL et une note explicative. Les pages peuvent être déplacées par drag-and-drop et leur disposition se fait de manière automatique. Le plan peut ensuite être enregistré, exporté au format XML ou imprimé. Par contre, aucun export au format image n’est prévu et c’est bien dommage.

Il est possible d’éditer un plan de manière collaborative. On peut ainsi inviter des collaborateurs à venir travailler sur un même fichier.

Pour le moment, les fonctionnalités sont plutôt limitées mais suffisantes pour créer un plan simple très rapidement. Par ailleurs, une version 2 est en cours de développement et devrait apporter des améliorations significatives comme:

• création de wireframes,
• association d’icônes et de couleurs pour différencier les pages,
• possibilité de personnaliser les plans selon sa propre charte graphique.

Lovely Charts

Plan de site réalisé avec Lovely Charts

Lovely Charts est un tout jeune outil en ligne permettant de réaliser des diagrammes. Précisons tout de suite que la création d’un plan de site n’est qu’une des nombreuses possibilités offertes. On peut tout aussi bien créer des organigrammes, des wireframes, des diagrammes organisationnels, etc.

Son utilisation est gratuite pour un seul fichier. Le compte payant est tout à fait abordable – 29 € par an – et apporte des fonctionnalités significatives comme l’export PDF, le versionning et la possibilité de collaborer avec d’autres utilisateurs. Notons également la possibilité d’importer ses propres images et illustrations, ce qui étend considérablement la portée de l’application.

Comparé à WriteMaps, la création d’un plan de site est bien moins intuitive (pas de mise en page automatique, pas de drag-and-drop), mais avec un peu de travail et d’imagination, on peut obtenir un résultat beaucoup plus évolué graphiquement. C’est donc un outil à considérer si vous souhaitez réaliser des plans plus complexes et plus personnalisés.

SlickMap CSS

Plan de site réalisé avec SlickMap CSS

Publié très récemment part le studio web Astuteo, Slickmap CSS est un template html/css spécifiquement créé pour conçevoir un plan de site. Visuellement très agréable, l’utilisation du couple html/css autorise une personnalisation totale du résultat final.

A la différence des outils précédents, le plan est interactif et cliquable. Il peut donc constituer une solution intéressante pour lier tous vos templates pendant la construction d’un site, et ainsi faciliter l’accès d’un client aux différentes pages. Ceci peut s’avérer très pratique dans une phase d’intégration de maquettes graphiques.

Un emplacement a été réservé en haut à droite pour l’ajout de pages annexes, telles que le plan du site, les mentions légales ou encore une page de connexion à un back office.

Le seul inconvénient de SlickMap CSS est sa hiérarchie limitée à 3 niveaux. Toutefois, ce sera suffisant pour bon nombre de projets. De plus, rien ne vous empêche d’étendre le code pour y ajouter un niveau supplémentaire.

Bref, SlickMap CSS constitue un outil intéressant et très rapide à mettre en place. Pour ma part, j’ai déjà commencé à travailler sur cette solution pour l’adapter à mes propres besoins.

StyleMap

Plan de site réalisé avec StyleMap

StyleMap est en fait à l’origine de la création de WriteMaps. Il est donc un peu plus ancien mais mérite quand même de s’y attarder. A l’instar de SlickMap, il se présente sous la forme d’un template html/css à customiser.

La mise en page d’origine est beaucoup plus minimaliste, le template se prête donc bien à une personnalisation poussée. D’ailleurs, pour réaliser le plan ci-dessus, j’ai légèrement ajusté la feuille de style CSS en ajoutant quelques propriétés spécifiques à CSS3 telles que border-radius et box-shadow.

Un effort particulier à été fait pour que le plan s’adapte au redimensionnement de la taille de police par les navigateurs. Par ailleurs, la compatibilité a été assurée avec l’ensemble des navigateurs.

StyleMap est simple mais peut se prêter à de nombreuses utilisations, grâce à un code clair et sémantique et un fichier CSS facile à personnaliser.