RE: [WSG] [on-topic]wireframes - Prototype and IA not the Same

[Chris Rizzo]

I think we're mixing up the conversation here. A prototype and an IA
diagrams (site flow) are two very different things with different
purposes. The IA diagrams would be worked out before the prototype and
shows the logical relationship between pages (the IF THENS). It's a
planning tool. On the other hand, if you've got a prototype then that
would mean all of your planning is completed, it's a working version of
the site, before it goes live. But, yes, I would agree that a prototype
can be done using CSS and should through iteration turn into the final
site. 

What is useful, in my opinion, for showing how the click throughs on a
site works is what I would consider a true wireframe. That isn't the
site mockups that look like a site made up of black lines. It's a
navigable version of a site without *any* design or layout. Its purpose
is to determine what should be accomplished on each page, what messaging
should appear on each page and who is it written for, as well as what
inbound and outbound links there are and how each page fits into the
various user paths on the 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. :)

Chris

-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Iva Koberg
Sent: Friday, February 25, 2005 12:19 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] [on-topic]wireframes

David R wrote: 

 /Should lead to yet another tool, Visio or OmniGraffle, if so what is

 recommended on the MAC OS side?

 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

best,
Iva


**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**

Re: [WSG] [on-topic]wireframes - Prototype and IA not the Same

[Iva Koberg]

Chris Rizzo wrote:
I think we're mixing up the conversation here.
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.

But, yes, I would agree that a prototype
can be done using CSS and should through iteration turn into the final
site. 
 

ik: 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).

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: 

 

/Should lead to yet another tool, Visio or OmniGraffle, if so what 

recommended on the MAC OS side?
 

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