Re: [WSG] [on-topic]wireframes
Chris Kennon 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. -- -David R ** 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
To my knowledge Visio is only available for Windows. OmniGraffle is an outstanding tool for Mac OS X. I use it extensively in plotting out my site designs in both Flow and UML methodologies. I often have to interoperate with multiple OS and mutliple RDBMS, and charting the connectors is invaluable. Chris Van Cleve Quoting Chris Kennon <[EMAIL PROTECTED]>: > Hi, > > After browsing several standards related sites, and incorporating the > colored-box(wireframe) prototyping method, as suggested by Russ into my > design process. I'm wondering if the following passage > from(http://www.digital-web.com/articles/ > ia_as_an_extension_of_web_design/): > > Heres how to make the extension. Before you start designing a layout > in Photoshop, create a wireframe using software such as Visio or > OmniGraffle. Youll find that it will help you to think more > analytically about the content before deciding what color it should be. > > Should lead to yet another tool, Visio or OmniGraffle, if so what is > recommended on the MAC OS side? > > > > > CK > ___ > "An ideal is merely the projection, on an enormously > enlarged scale, of some aspect of personality." > -- Aldus Huxley ** 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
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 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
RE: [WSG] [on-topic]wireframes
> Should lead to yet another tool, Visio or OmniGraffle, if so what is recommended on the MAC OS side? Chris, You might want to look into this article by Andy Clarke (And all that Malarkey): http://www.stuffandnonsense.co.uk/archives/css_markup_guides.html He uses Macromedia Fireworks to construct layout wireframes and "CSS mark-up guides" before adding any color to his design. Then, to build on those layouts, he suggests using the multiple frames feature of Fireworks so that you can go back to any design point whenever you like. Up until recently, I had been using Photoshop exclusively for web design. But once I read this article, I decided to give it a try and find it a better method overall. Check out the article when you get a chance. Patrick Patrick Haney Not a sausage http://patrickhaney.com [EMAIL PROTECTED]
Re: [WSG] [on-topic]wireframes
Iva Koberg wrote: 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. One of the points of using prototypes is that they are fast to build and thus desposable. If you're using XHTML/CSS prototypes there is the temptation to turn it into the final template. This either means that you spend too long thinking about the code/structure of a prototype that is likely to change, or you end up building in issues due to the fact that the prototype was built rapidly. I tend to use low-fi wireframes then hi-fi prototypes, usually output from the Phtoshop/Fireworks templates as regular table based HTML. Andy Budd http://www.message.uk.com/ ** 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
By chance, I've just finished building wireframes for a project in XHTML & CSS. I found it a little more time consuming and as Andy mentioned you can sit there and spend too long thinking about it. I mean wireframes should be addressed separately from any visual / production stages - your attention should be on boxing out the page in a usable, accessible layout and not on why the content area sits 50 pixels below the side navigation. The complications of writing the XHTML/CSS can stagnant the process. Having said that, I now have the layout pretty much built and ready to hang some visuals off it and a protosite there for testing and content. I also now have the stylesheet set so I can adjust the values for future use and the client was impressed. I think in future I will sketch out the wireframes separately and then apply it to the XHTML/CSS to use as a protosite. Dave O'Brien On Mon, 28 Feb 2005 09:54:38 +, Andy Budd <[EMAIL PROTECTED]> wrote: > Iva Koberg wrote: > > > 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. > > One of the points of using prototypes is that they are fast to build > and thus desposable. If you're using XHTML/CSS prototypes there is the > temptation to turn it into the final template. This either means that > you spend too long thinking about the code/structure of a prototype > that is likely to change, or you end up building in issues due to the > fact that the prototype was built rapidly. > > I tend to use low-fi wireframes then hi-fi prototypes, usually output > from the Phtoshop/Fireworks templates as regular table based HTML. > > Andy Budd > > http://www.message.uk.com/ > > ** > The discussion list for http://webstandardsgroup.org/ > > See http://webstandardsgroup.org/mail/guidelines.cfm > for some hints on posting to the list & getting help > ** > > -- Dave O'Brien Venting my spleen at: http://www.ventingspleen.co.uk Develop the web at: http://www.thewebdeveloper.net ** 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 - Inkscape
My favorite app for this kind of thing is a free one. Inkscape. It's also easy to use and uses standard SVG. http://inkscape.org/ Also very useful for creating AI maps (site flow diagrams). If anyone is interested I can email you a copy of my svg template file with the template site flow elements. Just email me off list. Chris [EMAIL PROTECTED] -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Thursday, February 24, 2005 2:16 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] [on-topic]wireframes To my knowledge Visio is only available for Windows. OmniGraffle is an outstanding tool for Mac OS X. I use it extensively in plotting out my site designs in both Flow and UML methodologies. I often have to interoperate with multiple OS and mutliple RDBMS, and charting the connectors is invaluable. Chris Van Cleve Quoting Chris Kennon <[EMAIL PROTECTED]>: > Hi, > > After browsing several standards related sites, and incorporating the > colored-box(wireframe) prototyping method, as suggested by Russ into my > design process. I'm wondering if the following passage > from(http://www.digital-web.com/articles/ > ia_as_an_extension_of_web_design/): > > Here's how to make the extension. Before you start designing a layout > in Photoshop, create a wireframe using software such as Visio or > OmniGraffle. You'll find that it will help you to think more > analytically about the content before deciding what color it should be. > > Should lead to yet another tool, Visio or OmniGraffle, if so what is > recommended on the MAC OS side? > > > > > CK > ___ > "An ideal is merely the projection, on an enormously > enlarged scale, of some aspect of personality." > -- Aldus Huxley ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** 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
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
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
