website structure design tool

Im looking for a tool to help design the structure of a website to be built.  I want to be able to clearly communicate what will be contained in the site when it is finished with the use of diagrams.

This tool will show what pages are in the site and their relation to each other. right now i use memo pad
  -PAGE 1 etc

  -EXTRA BIT 2 etc.

This is ok when it is only for me but there must be a better way of connecting all the links to come up with a way to communicate it to the client.

I have VPUML (a tool for creating uml) which is great for showing diagrams of flow in an activity diagram but i am looking for a way to create a quick sketch of the whole site that i can use when talking with a client  so that when we have finished talking we both know what the finished site will contain and i will know how to build it.

is there any tools that help in this area?


Who is Participating?

Improve company productivity with a Business Account.Sign Up

gxp071Connect With a Mentor Commented:

we regularly use MS visio to explain struture and navigation to cilents for both web and interactive cd/dvd roms and even games.

Its great for all round story boarding.

you can get a list of open source alternatives to visio here.

ussherAuthor Commented:
cheers gxp071

Ive got VP-UML Visual Paradigm UML  which is like visio but the only diagram i really use is the action diagram.

How do you create your diagrams?  which diagrams do you use to demonstrate a website?

the pages that need to be made, the components that need to go into each page....
Visio supports a lot of different drawing models that just UML including floor plans extra,  we tend to start with an organizeation chart to create a site map,

its hierarchy and levels etc..

If a particular page has a custom component or something that needs extra explanation we would create a story board of the screen, at different stages.

usually just boxes with comments to illustrate, and if possible screen shots of similar pages, break outs with close ups on specific features.

But it all really boils down to the client and how much they actually understand and how much they drive their own brief.

Generally as a rule though we start with just the site schematic and then take it form there.
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

LocoTechCJConnect With a Mentor Commented:
You know what the big boys use to present web design ?  Post-IT notes, string, and push pins (or tacky tape), and a flip chart.  :), really!

Another way we've presented site designs is by drawing pictures in fireworks or photoshop and projecting them on a wall, but the funny thing is that it just looks like digital post-its.   Who would have guessed.

Best of all, the clients like being able to move stuff around.  


- - Don't complicate technology with more technology.  --Unknown
ussherAuthor Commented:
cheers guys.

Awesome info.  What do you do when it is you who wants a site built and wants to outsource to india.

Lets say i wanted a music download site built in super rush time, say 10 days and i want to give them all  the info of how i want the site to work so that there is very little that has to be redone.

i would need a site diagram to show the pages in the site.
it would need an outside area for the public, a members area and an admin area.  
     What is going to be displayed on the front page.   Do these things on the front page change each day, are they random, how are the random sections selected from the database, or can the admin select the random stuff from a list in the admin area.

This would be a large site and the speed of it would probably cause the people i hired to build what they thought was necessary not what i wanted.

If i was able to build a plan of how the site worked then i could always get a different person to build the same site if necessary.

Pictures are worth a thousand words.  Look at these site diagrams... simple but effective:
ussherAuthor Commented:
split the points is ok, but i was waiting to see if anybody would come up with an answer.

Pick any of the major sites Yahoo, CNN and try to create a diagram using the methods described above that would allow the site to be reproduced.  

I cant see the answer above.
Forced accept.

EE Admin
You have to understand that CNN has one or two basic design layouts that cover ALL of it's major sections.  That means that they drew a few pages on a fipchart or drew a mockup in a graphics program at most to create the layout of the pages.  It is not a complex layout.  It is almost completely database driven, full of articles and such, each page being very dynamic, links always pointing to different places other than the main headers.  There is no way to draw a specific diagram because their links are dynamic.  The header is always the same with a small exception where it may link to a different website, which is actually run by someone differet.

As far a Yahoo goes, you are talking about close to the same thing for their homepage, a lot of dynamic pages.  What's not dynamic is acutally linking to various web applications(services), all managed and designed by different teams.  Again, I doubt there is a "drawing" describing the layout of yahoo with lines going from page to page.

What is important is to get a general, consistent design for a page or a few pages if there are specific needs to alter the layout of some pages, and then maybe an Outline of your content to give you and your clients a sense of what should be main headers, subheaders, etc and how the navigation will feel.  Create the skeleton of the database processes, without design.  Then add CSS/graphics and bells and wistles (AJAX or just javascript) to make it look the way you want.

I hope this helps.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.