Workflow for website design
 

I'm wondering how many people out there are using OG as a website design tool and in particular what sort of workflow you've developed to make the prototype as useful as possible to the person creating the actual HTML/etc. Best I've come to so far is to just export a .psd file but then my photoshop artist pretty much ends up re-creating a lot of things related to the placement of text (not to mention fonts and fontsizes), etc. Actually it's even worse than that since they have to completely re-type any text by hand. Is there a better way to do any of this? I suppose exporting to .pdf files would at least preserve the text as a text entity as opposed to converting it to an image map? Multiple .pdf's on a per-layer basis? Is there a translator that does a better job? Export to Visio and use some additional translator on THAT file?

Any thoughts/ramblings/musings would be greatly appreciated!

I create large diagrams for websites directly from OG, with none of that re-entry or re-tooling. But then, I deal with the business and the developers directly, there is no art department.

• do not try to do too much; the lower level details are forever changing anyway; focus on the structure, not the content
• one tree diagram at the top, identifying every page (you can link as well)
• Each page constrained to one webpage; each page equals one canvas
• printed on A4 only, self-contained piece of the universe that can be evaluated together; with no lines running off the page
• this will allow you to change one page without affecting the whole diagram

I ship a single PDF, multi-page; but the pages can be printed, punched, and placed in a binder. Produced via OG Export, not PrintAsPDF.

• for intense diagrams, I use the A4 as well; pack more technical info into it; and print on A3.

Not an OG rule, but a very important one for avoiding avoidable extra work: Never Duplicate Anything. That forces you back to changing the tree structure sometimes, but that is what is called for. the principle is Normalisation, but young people these days may be familiar with the concept as "Don't Repeat Yourself".

Obviously, use a Template that is well thought out; mine took about six months to settle down as final. I now have very few A4 Portrait & Landscape, rulers, page headers/footers and master objects set up.

Use layers (one of OG's great strengths). But same again, do not use too many. Personally I like the simplicity of OG 4 Master handling, but OG 5 is much more powerful with Shared Layers. Never duplicate layers (yes, sure, to start with, before changing it, but not to finish with)

The work I do is for banks mostly, and therefore I cannot publish it. Here is a simple (smaller!) diagram re another subject, that is not confidential, but that will give you an idea of all the concepts I discuss above. Make sure you follow the hot links (blue glass buttons; shaded shapes as per notes; etc). That was drawn in OG4. For you, imagine that each page (except the first) is a wireframe for a single webpage.

[B][URL="http://www.softwaregems.com.au/Documents/Documentary%20Examples/Order%20DM%20Advanced.pdf"]Example organised and hot-linked Diagram[/URL][/B]

You may be interested in [B][URL="http://forums.omnigroup.com/showpost.php?p=89627&postcount=3"]this post[/URL][/B].

Thanks Derek - great info.

I guess I was also hoping for something where I could do actual website layout and finished artwork that could easily be converted into HTML/CSS without needing someone to manually cut/slice/whatever in Photoshop. Was hoping that maybe the Visio export would help with this but I've had terrible luck getting a Visio export that accurately matches what I've done in OG. I'll post a separate thread on that issue...