website structure design tool

Posted on 2007-11-29
Last Modified: 2012-08-14
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?


Question by:ussher
  • 3
  • 3
  • 2
  • +1

Accepted Solution

gxp071 earned 190 total points
ID: 20381084

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.


Author Comment

ID: 20381115
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....

Expert Comment

ID: 20381245
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.
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.


Assisted Solution

LocoTechCJ earned 189 total points
ID: 20382834
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

Author Comment

ID: 20386441
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.


Expert Comment

ID: 20403693
Pictures are worth a thousand words.  Look at these site diagrams... simple but effective:

Author Comment

ID: 20700094
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.

Expert Comment

ID: 20729535
Forced accept.

EE Admin

Expert Comment

ID: 20733616
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.


Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

It’s a strangely common occurrence that when you send someone their login details for a system, they can’t get in. This article will help you understand why it happens, and what you can do about it.
These days, all we hear about hacktivists took down so and so websites and retrieved thousands of user’s data. One of the techniques to get unauthorized access to database is by performing SQL injection. This article is quite lengthy which gives bas…
The viewer will learn how to count occurrences of each item in an array.
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question