SVG Wireframe For Your Website Design
Part of Tools
Author(s) and publish date
- By:
-
-
Karl Dubost
-
- Published:
Very often, when you are negociating a new Web site for your organization or company, the Web designer will hand over a photoshop mockup of your Web site. Personally, I have a tendency to ban this practice. I prefer to receive a solid xhtml/css mockup and sees how it is handled in different devices.
The community around SVG is building up a new Web site. They decided to use SVG for the wireframe mockup of their Web site.
<p>Interesting. What software did they use to make the SVG ? </p><p>I made a website using Inkscape (on Linux Ubuntu), and when I opened the original SVG in Firefox, most of the text was simply gone. The same happened when I saved it as "plain svg". So I was wondering how they did it.</p>
<p>About my previous comment: I found the solution to my problem. To "unflow" all text blocks (Inkscape menu Text > Unflow) will make the text appear normally in a browser. Unflowing has the effect of loosing transformations to the text, though. Better start with unflowed text in the first place I suppose.</p>
<p>Hi,</p><p>I did the wireframe over at the SVG IG site. I used Inkscape and FF3 and Opera for the preview.</p><p>Actually, I, too, ran into this "text does not what I want" thingy. There seem to be some inconsistencies in how Opera, FF and Inkscape handle nested definitions of the x and y attribute on texts and tspans.</p><p>However, after some experimenting and repositioning, entering and removing spare linebreaks and so on, the text was finally consistent over browsers.</p><p>And yes, neither FF3 nor Opera understand the flowing text property of Inkscape and SVG 1.2.</p><p>What I think of as very nice advantage is, that you can embed JavaScript in the SVG and can with that create a wireframe <i>and</i> a prototype <i>at the same time</i> (of course, it's not an HTML prototype, but the customer is likely to not noticing this ;-) ).</p><p>Best,<br />Manuel</p>
<p>Very nice suggestions enjoyed the article. Nice basic thoughts and information, ideas communicated well. </p>
<p>I would like Inkscape to be extended for wireframing.<br />Yes, you could make SVG mockups and hope the client is only using a capable browser to view it, or export to PNG.<br />For this a "librairy" function would be great, where standard elements can be stored, reused and distributed.<br />For now I stick to "Pencil".</p><p>Thanks,</p><p>Kees</p>