Member Avatar for marcosjp

Hi,

I haven't found any forum where I felt this woud fit so I hope this is not too much off-topic.

I'm 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.

Thanks for any hints! :)

  • 9 Contributors
  • 11 Replies
  • 387 Views
  • 7 Months Discussion Span
  • Latest Post Latest Post by stevenpetersen

Dani AI

Generated

A concise, content-first workflow makes a site-structure diagram actually useful — both as a personal guide and as a client-facing deliverable. already uses models for those exact purposes; the sequence below turns that habit into repeatable artifacts so the structure is stable before the visual design or code begins.

  1. Content inventory (spreadsheet): Page ID, URL (planned), Template, Purpose, Primary fields (title, intro, body, CTAs), SEO/meta, Owner, Status.
  2. Sitemap (annotated): hierarchical list with priority and a simple ID system (1, 1.1, 2.1). Note which pages are template instances vs unique pages.
  3. Template families: list each template (home, listing, detail, form, account) and map required fields and optional regions. Reuse templates instead of creating one-off pages.
  4. Low-fidelity wireframes: one sketch per template, annotated with content sources and interaction notes (what’s dynamic, required, optional). Keep these grayscale and focused on content placement.
  5. Key user flows: diagram the main tasks (signup, find product, contact). Add acceptance criteria (what must happen on success/failure).
  6. Handoff package: annotated sitemap (PDF), content CSV, template wireframes (PNGs), user-flow diagrams, asset list with naming and sizes, and a small style baseline (grid, font scale, breakpoints).

Deliverable tips: use CSV or XLSX for the inventory so it can be imported; export the sitemap and flows as PDFs for client sign-off; name files with a clear convention like template-name_v1_YYYYMMDD and keep a changelog. For assets include formats and exact pixel expectations (for example: logo.svg, hero-1920x700.jpg, icon-search.svg).

Common pitfalls and fixes: don’t confuse visual mockups with structure — delay pixel work until the sitemap and templates are signed off. As and hinted, prototyping and wireframes are complementary: wireframes solve "what goes where" while later mockups solve "how it looks." When time or budget is tight, flatten the architecture, favor template reuse, and insist on sitemap approval before coding.

Recommended Answers

All 11 Replies

Member Avatar for roryt

Well, I would do it all with photoshop and have everything else (like css and html) vaguely in my head to start with. It is a very lengthy process though just to show how you want it to be built.

Is it so you can pass this on to somebody else who will then build the site or will you be building it yourself using this as a guide line?

Something like fireworks might be a bit quicker at this actually if you learn how to use it well.

Member Avatar for Joyce Sullivan

You should use dream weaver..

Member Avatar for marcosjp

Fireworks and Photoshop are definitely not good for this purpose.

What I'm looking for is a simpler (cheaper) option for MS Visio 2007, this one really rocks.

The sites are built by myself.
I use the models both as a guide to myself (good systems require good models) and to discuss the overall thing with the client before starting to code (usually I use a simpler version for this).

For DB modelling I use MySQL Workbench 5.0 OSS.

Thanks!

Member Avatar for roryt

Fireworks and Photoshop are definitely not good for this purpose.

Dreamweaver is definitely not the answer. I'm not sure microsoft visio is intended for web design style things?

Oh now i get it!

I wasn't to sure what you meant by structure? Do you mean physically structure (design wise) or the data flow structure / coding structure? By the looks of it, you have posted this in the wrong forum. May I suggest you repost in one of the coding based forums on this page

I was more refering towards the interface design with photoshop. I see what you mean now though.

After a quick google:

Try this link: http://www.osalt.com/visio and http://dia-installer.de/index_en.html

Let us know how you get on.

Member Avatar for MidiMagic

The real tools are xhtml and css. Everything else just comes up with approximations of what you want, and tries to write code in these two languages. The code is not always good.

Even Microsoft Word can make web pages. But the code is horrible.

Member Avatar for roryt

MidiMagic:

I don't think he wants to create the webpage from visio (or an equivalent) just a design of the data flow and possibly page structure. Not actually export any of this into a web page.

Member Avatar for seanansari

Use Wireframes , it helps you draw the skeleton of the website

Member Avatar for rashmgup

Download a good dreamweaver template as per ur need and edit it.
U can use photoshop as a picture editing tool.This will quicken your website designing.

Member Avatar for gurshan

I think you should try vectrasys.com for structure design tool.I am not sure but hope this is useful link for you..

Member Avatar for cyberduck

You need to use Rapid Prototyping Tools to wireframe the layout and content of the pages... Many tools available, some web-based, some desktop application... how big is the site?

Member Avatar for stevenpetersen

Front Page is super easy

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.