Lorsque vous pensez à des outils que vous pouvez utiliser pour créer des pages Web, vous pensez probablement à des choses comme Kompozer ou Firebug Guide d'amateur pour personnaliser la conception de site Web avec FireBug Guide d'amateur pour personnaliser la conception de site Web avec FireBug Lire la suite. Cependant, que se passe-t-il si je vous disais qu'un outil qui peut réellement stimuler votre créativité quand il s'agit de formuler une mise en page de conception web est une carte mentale?
Nous avons couvert beaucoup d'outils de cartographie mentale ici au MUO. Jeff a couvert les outils de mindmapping pour Mac MindMapping: 3 Simple Mapping d'idées pour Mac MindMapping: 3 Mapping d'idées simples Logiciel pour Mac En savoir plus. Je pense que mon application de mindmapping préférée de tous est le projet open source FreeMind.
FreeMind est l'un de ceux qui sont merveilleusement simple à utiliser, mais complexe aussi complexe que vous en avez besoin quand vous en avez vraiment besoin. C'est la beauté de tout ça. Donc, pour les gens qui sont particulièrement créatifs, une application comme FreeMind libère littéralement votre esprit d'explorer dans la direction que vous voulez. Lorsque vous essayez de faire quelque chose d'aussi abstrait et complexe que de concevoir le flux et la fonction d'un site Web, c'est le type de flexibilité dont vous avez besoin.
Ici, à MUO, nous cherchons à aider les lecteurs à «utiliser» les applications d'une manière que vous n'avez peut-être pas envisagée auparavant. Je suis sûr que certains d'entre vous ont utilisé des outils de mindmapping à cet effet - c'est une foule intelligente après tout. Mais, pour ceux d'entre vous qui n'ont jamais envisagé d'utiliser un outil de mindmapping pour mettre en page votre nouveau site web, laissez-moi vous emmener faire un tour dans le jardin de conception web de FreeMind.
Concevoir un site Web avec FreeMind
Dans sa forme la plus simple, je pense qu'il devient très évident très vite pourquoi un outil de mindmapping comme FreeMind est idéal pour la conception de sites Web. En seulement quelques minutes, en utilisant uniquement l'option "New Child Node" dans FreeMind, j'ai généré une carte de haut niveau de mon blog.
Comme vous pouvez le voir, FreeMind vous permet de commencer à partir d'une page de base - il ne doit pas être la page principale de votre site, il pourrait s'agir de n'importe quelle page de départ - et ensuite tracer le chemin des liens à travers votre nouveau site.
Dans cet exemple, j'ai conçu une page principale avec six liens de navigation pour les six principales sous-sections de mon site. J'aurais probablement dû aussi ajouter une page "features" ou "articles", puisque c'est tout l'intérêt d'un blog. Mais c'est la beauté d'une carte mentale - vous pouvez la modifier et la modifier en fonction de toutes les idées de design qui surgissent dans votre tête en cours de route.
Bien sûr, lorsque vous commencez à créer votre site Web et que vous avez des pages à afficher, vous pouvez ajouter des hyperliens à ces pages directement à partir de votre carte mentale. Ainsi, lorsque vous créez votre site basé sur votre plan FreeMind, vous pouvez littéralement garder une trace de tout à partir du plan lui-même.
Voulez-vous consulter la page Contact que vous avez modifiée il y a quelques temps? Ne prenez pas le temps d'ouvrir votre navigateur et de taper l'URL, il vous suffit de cliquer sur votre lien FreeMind et vous y êtes.
Vous pouvez voir l'URL du lien en survolant le nœud - il s'affiche dans la barre d'état inférieure.
La création de liens hypertextes facilite l'accès aux pages que vous concevez, ce qui, bien entendu, rendra l'ensemble de votre processus de conception Web plus efficace. Votre carte d'identité de site Web peut servir de plate-forme centrale - votre feuille de route de conception Web - sur laquelle vous pouvez travailler pour réaliser l'ensemble de votre projet de conception.
Une autre fonctionnalité vraiment cool de FreeMind est la possibilité d'ajouter des images aux nœuds. Cliquez simplement sur Insérer - Image dans le menu, ou cliquez sur le nœud et appuyez sur Alt-K. Parcourez simplement le fichier image que vous voulez utiliser. Il est beaucoup plus facile de dimensionner l'image pour qu'elle corresponde à la taille des vignettes. Dans le cas contraire, vous devrez modifier l'affichage du code HTML dans FreeMind après avoir importé l'image.
Cliquez sur l'image, et un outil d'édition apparaît pour vous permettre d'ajouter une petite légende sous l'image. Vous pouvez l'utiliser pour ajouter un peu de pizzaz à votre mind-map. Je l'ai utilisé pour montrer les images des auteurs, et le nœud lui-même représente leur page de profil sur le site.
Si cela ne vous dérange pas que votre carte devienne énorme, vous pouvez même insérer des instantanés de prévisualisation des pages, des images que vous estimez représenter l'objectif de la page ou toute autre utilisation pour les images de nœuds que vous pouvez créer. Personnellement, j'aime utiliser les images dans ma carte mentale de conception Web parce que cela donne plus de caractère et offre un aperçu du contenu de la page pour quiconque peut voir la carte pour la première fois.
Une autre fonctionnalité vraiment géniale de FreeMind qui s'intègre parfaitement dans le jeu d'outils de conception Web est l'outil de gestion du temps intégré à FreeMind. Vous pouvez vous y rendre en allant dans "Outils", puis choisissez "Afficher le calendrier". Cela fera apparaître une grande fenêtre "Gestion du temps" du calendrier.
Vous pouvez appliquer des dates aux nœuds en cliquant sur "Ajouter la date aux nœuds sélectionnés". C'est un moyen cool de contrôler la version sur vos pages, en horodatant le noeud avec la date à laquelle cette page a été créée ou mise à jour.
La date que vous avez choisie sera ajoutée à la fin du texte du noeud.
Mieux encore, pourquoi ne pas mettre en place un calendrier afin qu'une fois votre site terminé, vous pouvez recevoir un rappel quand il est temps de mettre à jour une page sur le site. C'est un moyen génial de planifier systématiquement un calendrier de mise à jour pour un site, en programmant des mises à jour de page spécifiques au fil du temps, de sorte que la mise à jour d'un site Web ne devienne pas une corvée accablante et chaotique.
Pour ce faire, il suffit de sélectionner le noeud, aller dans le calendrier de gestion du temps, choisissez la date à laquelle vous souhaitez mettre à jour la page suivante, puis cliquez sur "Rappeler-moi à cette date".
Une petite icône d'une horloge apparaîtra sur ce nœud. Cela vous indique qu'une alarme y est associée et que vous recevez une notification contextuelle sur votre ordinateur lorsqu'il est temps de mettre à jour cette page. Je n'ai jamais pensé que vous utiliseriez un outil de mindmapping pour la gestion de projet de design web, n'est-ce pas?
De plus, si vous voulez voir l'ensemble de votre calendrier de mise à jour, répertorié par page, allez simplement dans Outils, et sélectionnez «Afficher la liste du planificateur horaire».
Vous obtiendrez un rapport complet de toutes les pages que vous avez planifiées, lorsque vous les avez planifiées (créées) et la date à laquelle cette page particulière doit être mise à jour ensuite.
Le seul endroit où ce système pourrait échouer est si vous mettez à jour la page et oubliez de revenir et mettre à jour le nœud avec une nouvelle date et heure de mise à jour. Donc, essayez de prendre l'habitude de le faire, et vous garderez votre système de mise à jour de la page entière en douceur.
Oh, et il y a une dernière caractéristique importante que j'ai presque oubliée. C'est en fait un très important si vous avez tendance à être l'un de ces programmeurs qui perd la trace de l'endroit où vous stockez vos fichiers de projet.
FreeMind a la capacité de créer un lien hypertexte vers des fichiers sur votre PC, de sorte que vous pouvez utiliser cette fonctionnalité pour lier les nœuds de la page au code réel qui est enregistré sur votre ordinateur. Vous allez simplement à "Insérer", choisissez "Lien hypertexte (sélecteur de fichier)", puis il suffit de parcourir le fichier que vous souhaitez lier à ce nœud.
Le lien de fichier pour ce nœud apparaît sous la forme d'une flèche rouge. Chaque fois que vous voulez faire des changements de code, il suffit de cliquer sur le lien du fichier, et il s'ouvrira instantanément pour vous - pas besoin d'aller creuser en essayant de le trouver. Assurez-vous simplement que vous vous souvenez où vous l'avez enregistré afin de pouvoir télécharger les modifications sur votre serveur Web.
Comme vous pouvez le voir, l'utilisation d'un outil de mindmapping comme FreeMind vous aide non seulement à concevoir la mise en page et le flux de votre site, mais il peut même vous aider à gérer l'ensemble de votre projet de conception Web du début à la fin.
Quels outils utilisez-vous pour gérer vos projets de conception de sites Web? Envisageriez-vous d'essayer FreeMind à la place? Avez-vous d'autres idées créatives pour utiliser un outil de mindmapping dans le cadre d'un projet de conception web? Partagez vos pensées dans la section des commentaires ci-dessous.