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.

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
Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!


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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
SharePoint 2013 6 26
Compare site how does it work 4 72
Hovering effect 9 47
get multiple images to align right 5 44
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP. provides powerful tools for surveying targeted groups, and utilizing data from completed surveys to find trends, discover areas of demand or customer expectation, and make business decisions on products or services.

896 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now