SitePoint.com

volomike · May 21, 2009, 09:41

Notice: This is a discussion thread for comments about the SitePoint article, Wireframing with Balsamiq Mockups.
__________

What I do now, as of a week ago, is use Inkscape, instead. I first started by taking screenshots of all the common controls I used on the last 10 projects I've done. Next, I imported into Gimp and reverted them to greyscale and increased their contrast. I then imported these controls into Inkscape and converted the bitmaps into vector images. In some cases that worked. In other cases I had to trace over the control (painfully) to make a vectorized version of the control. Last, I merely combined the controls on a greyscale mockup.

So, from here on out, I merely start with my base Inkscape file that's already designed for a 960px page width, which already has my guides (those margin things you drag onto the page) setting text margins and "foldspace" margin (you know, above the fold, below the fold -- a common discussion these days). I start by drawing a basic approximation of the site template, save that off in two versions usually (one for the home page version and one for every other page), and then start customizing per item in my functional spec. Sometimes in my functional spec it's just easier for me to draw the set of controls per the discussion topic and do a snapshot of just that part of the screen, rather than redraw the whole page. Last, I make certain that the final result is greyscale to get the point across that this is a wireframe mockup.

This gave my wireframe mockups a more professional look. However, I do preface this with my clients and say that my wireframes are not the final result by any means, but concepts to help move along the functional spec outline.

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Switch to Hybrid Mode Threaded Mode

May 21, 2009, 09:41	#1
volomike SitePoint Member Join Date: Jan 2008 Posts: 10	Notice: This is a discussion thread for comments about the SitePoint article, Wireframing with Balsamiq Mockups. __________ What I do now, as of a week ago, is use Inkscape, instead. I first started by taking screenshots of all the common controls I used on the last 10 projects I've done. Next, I imported into Gimp and reverted them to greyscale and increased their contrast. I then imported these controls into Inkscape and converted the bitmaps into vector images. In some cases that worked. In other cases I had to trace over the control (painfully) to make a vectorized version of the control. Last, I merely combined the controls on a greyscale mockup. So, from here on out, I merely start with my base Inkscape file that's already designed for a 960px page width, which already has my guides (those margin things you drag onto the page) setting text margins and "foldspace" margin (you know, above the fold, below the fold -- a common discussion these days). I start by drawing a basic approximation of the site template, save that off in two versions usually (one for the home page version and one for every other page), and then start customizing per item in my functional spec. Sometimes in my functional spec it's just easier for me to draw the set of controls per the discussion topic and do a snapshot of just that part of the screen, rather than redraw the whole page. Last, I make certain that the final result is greyscale to get the point across that this is a wireframe mockup. This gave my wireframe mockups a more professional look. However, I do preface this with my clients and say that my wireframes are not the final result by any means, but concepts to help move along the functional spec outline.