How to Design a Website With Mind Maps

The Mind maps are a tool to represent knowledge and its use is expanding very quickly to areas that were not initially identified. One of these is, in fact, the creation of websites .

In this event we will see how to build a mental map with the free FreeMind to design the structure and content of a website, but rather complex.

Introduction to Freemind

Freemind is one of the first free software for creating mind maps, is also written in Java and can therefore be used on many systems.

Unfortunately, the development activity has slowed a lot in the past, but the program works well and has all the features necessary to create mind maps and export them to different formats, so you can create presentations or prints.

Here’s what the workspace, when launched the program:

mind maps

The organization of the interface is rather classical and recalls the old editions of PowerPoint, OpenOffice Impress or a graphics program:

We have the top toolbar:
centered on the mind map;
Below that there is space for text notes .

The notes are the contents of text too long to be displayed directly on the map, are then associated with an existing node; left the labels , which are applicable to the nodes of graphic symbols , useful to identify the function in an intuitive and immediate.

There are also many keyboard shortcuts that help speed the creation and editing of maps, limiting the use of the mouse (and the resulting “dead time”) and facilitating the development of creativity. Here are the most useful:

INS : create a child node:

ENTER : Create a node “brother”, located after the current one. If you press SHIFT, is placed first;
F2 : Edit node:

CTRL-< ( CTRL-LESS ): editor of the notes;

SPACE : opens and closes the hierarchy below a node;

the canons DEL (delete), CTRL-C (copy) and Ctrl-V (paste);

CTRL-ARROW (where ARROW is ON , June , RIGHT or LEFT ): a node moving in different directions, if necessary by changing the hierarchy;

SHIFT-INS : Inserts a parent node. Very useful to group several nodes in a node-father, just select it (must be at the same level) and press SHIFT-INS .

Map Creation
The first step in the design of our site will decide the navigation structure . Then perform these changes:

Edit (F2) the text of the root node in Web Agency XYZ ;
save the file, the program automatically propose the name Web Agency , the extension . mm is in fact for Mind Map ;

Add these nodes to child: Home , Company , Services , Contact , Blog , Portfolio , Site map .
The map will now have more or less like this:

We now want to gather information in a different way, adding two new nodes: the node “Pages” , which contains the list of pages, and the node “Template” with information about the visual structure common to the entire website.

We create first node Pages :

Select all nodes created before clicking on them while holding down the CTRL key;
Press SHIFT-INSERT to create a node-father who collect them all;

Press F2 on the new node and type “Pages” ;
enter the node template .

The structure of a website rarely has a single level , indeed very often the pages serve as a liaison to other content .

The page services such as several sub-sections will explain in detail the various services provided by the company, the arrangements, success stories, and so on.

At this point it becomes crucial to identify, we are creating the map, the actual pages from other concepts.

To do this we use a lot of icons available to the program, one that seems most suitable is the classic white sheet with a pencil, you can find by scrolling down on the toolbar on the left:

Create this page to the various sub-services nodes and then apply the icon to all the nodes that represent pages. The result should look like this:

The wonders of mental maps, however, does not end here, Freemind (and other similar software) in fact provide us with other useful tools:

The links : they are willing to associate nodes in distant places in the same map, or even in other maps (on the internet, file system, etc.)

The clouds , a very effective way to visually group together the nodes of a hierarchy.
Let us also to use these tools, applying them to our mental map of the site.

Add node to the home of these children: Latest work done , Last 5 posts from the blog , contact Box ;

Select the node Last 5 posts from the blog just created, and (hold CTRL) node Blog ;
press Ctrl-L to insert a graphic link ;

Select the node Services and then the balloon symbol in the toolbar at the top (next to the symbol of “bold”).
And here’s the result:


We have seen mind maps are really a great tool for the design of websites, but we would like to give you further advice, or not to limit yourself to follow the instructions in this guide but to find your “style”. What do you think of our mind map post? Did it help you get some ideas going?

Leave a Reply

Your email address will not be published. Required fields are marked *

  • business
  • blogger
  • lifehack
Unlimited Disk Space
Unlimited Bandwidth
Free Domain Name