[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


website structure design tool

Posted on 2007-11-29
Medium Priority
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 760 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.
Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.


Assisted Solution

LocoTechCJ earned 756 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.  :)  

...no, 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses
Course of the Month19 days, 15 hours left to enroll

873 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