Chris Rizzo wrote:
ik: Agree with Chris about mixing up the conversation and the differences between site flow diagrams and wireframes/storyboards. I suppose, as the original message was titled "wireframes" I assumed it was with regards to the latter. Yes, IA diagrams have a valuable role and purpose. The XHTML/CSS process I was advocating was for the next step of wireframing, followed by storyboarding, pretty much as the Grok suggests.I think we're mixing up the conversation here.
But, yes, I would agree that a prototypeik: Exactly, and that's where the benefits of this approach kick in. My intended point was: after basic site diagrams, start with *no design* to get the content goals, site structure, navigation schemes nailed, add design (through XHTML/CSS addition and tweaks) gradually at the end of the planning in the storyboarding phase (ideally IA Diagrams > Wireframes > Storyboards > Design > Final Site).
can be done using CSS and should through iteration turn into the final
site.
Example and more details: http://www.grokdotcom.com/wireframing.htm
Careful visiting the link above you may learn way more than you expect
to. :)
ik: So true, GrokDotCom never ceases to inform/educate on subjects like wireframes, storyboards, effective copy, marketing, design, usability, etc. While not directly on the subject of web standards, it's a great read for anyone building web sites - http://www.grokdotcom.com/Volumes/archivefull.htm. The folks behind Grok are not new to web standards either, they use liveSTORYBOARD CMS to separate content, structure and presentation, update the site easily and publish to multiple formats (XHTML+CSS/HTML and text email/RSS/Atom).
best, Iva.
David R wrote:
recommended on the MAC OS side?/Should lead to yet another tool, Visio or OmniGraffle, if so what
What's stopping you from creating the prototype boxes in XHTML + CSS? It has the added advantage of meaning that once you've got your layout, you've also got your document structure. Just add the content and remove the "border: 1px solid black;" properties and you're done.
Agree with David completely. Additional benefits of the XHTML/CSS prototype approach:
- you end up with a fully navigable prototype that IMO is more effective
in getting clients to understand and approve the deliverable - a functional prototype is also more effective in figuring out the most
appropriate navigation schemes
- if you are the ia and are working with a designer, you will provide clearer design input
- once you are done, you don't have to throw away your work and move on to creating the site, the site is a living prototype, like David said - add content and CSS and you're done
- prototypes are meant to change and be refined in iterations - it certainly is much easier, faster and reliable if you are using XHTML/CSS, preferably with a templating system or ideally a CMS (see http://www.livestoryboard.com/Tour/storyboarding-prototyping-for-the-web
.html for example), which would update all navigation, links, etc.
Take a look at this presentation - slide 44 specifically discusses "the ideal process" - First Things First: IA and CSS http://natek.typepad.com/blog/2004/07/web_visions_pre.html
begin:vcard fn:Iva Koberg n:Koberg;Iva org:liveSTORYBOARD Inc. adr:#5;;2 Clarence Place;San Francisco;CA;94107;USA email;internet:[EMAIL PROTECTED] tel;work:415-615-9079 tel;fax:415-615-9036 tel;cell:415-823-5746 x-mozilla-html:FALSE url:http://www.livestoryboard.com version:2.1 end:vcard
