Solved

website structure design tool

Posted on 2007-11-29
10
1,827 Views
Last Modified: 2012-08-14
Hi,
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
TOP PAGE:
  -ABOUT US
  -CONTACT US
  -PAGE 1 etc

PAGE 1
  -CONTENT PIECE 1
  -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?

Thanks

0
Comment
Question by:ussher
  • 3
  • 3
  • 2
  • +1
10 Comments
 
LVL 6

Accepted Solution

by:
gxp071 earned 190 total points
ID: 20381084
Hi

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.
http://www.osalt.com/visio

:D
0
 
LVL 1

Author Comment

by:ussher
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....
0
 
LVL 6

Expert Comment

by:gxp071
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.
0
 
LVL 8

Assisted Solution

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

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

LTCJ

- - Don't complicate technology with more technology.  --Unknown
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 1

Author Comment

by:ussher
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.
INDEX, ABOUT US, SEARCH, etc...
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.

0
 
LVL 8

Expert Comment

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

http://webstyleguide.com/site/diagrams.html
0
 
LVL 1

Author Comment

by:ussher
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.
0
 
LVL 1

Expert Comment

by:Computer101
ID: 20729535
Forced accept.

Computer101
EE Admin
0
 
LVL 8

Expert Comment

by:LocoTechCJ
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.

LTCJ
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

If I have to fix slow responding website my first thoughts are server side optimizations: the database may not be optimized or caching is not enabled, or things like that. We often overlook another major part of our web application: the client. We o…
A publishing tool, a Version Control System, or a Collaboration Platform! These can be some of the defining words for the two very famous web-hosting Git repositories: Bitbucket and Github. Git is widely used amongst the programmers and developers f…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

708 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

17 Experts available now in Live!

Get 1:1 Help Now