SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member volomike's Avatar
    Join Date
    Jan 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  2. #2
    SitePoint Member aliceslipped's Avatar
    Join Date
    Dec 2008
    Location
    Massillon, OH
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I trialed Balsamiq (you couldn't export to JPEG or PDF) and I liked it. It was easy to use and I thought the sketchy designs made it more fun than, like you said, "typical dry, black-and-white, 'boxes and lines' wireframe."

    So yeah, I liked it. And it's a lot cheaper than some of the alternatives. :)

  3. #3
    Robert Foster
    SitePoint Community Guest
    What I really need is a wireframe tool that could then output CSS for the actual pages. In other words, live page design.

  4. #4
    SitePoint Zealot
    Join Date
    Oct 1999
    Location
    France
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Robert Foster View Post
    What I really need is a wireframe tool that could then output CSS for the actual pages. In other words, live page design.
    It's called HTML We do all our wireframes in static HTML/CSS. The big plus from our point of view is that once the client has signed off on the wireframe we can use it as a basis for the site, no need to throw it away and start from scratch as you do with graphical tools. Note, all our sites are dynamic ones; on the wireframed pages we include notes explaining required functionality, so they are to hand when we start doing coding -- no need to go and look somewhere else (and possibly miss something).

    An HTML wireframe is easy to edit and can be put online for the client to view, no need to be in the same room. No expensive software required either, just use whatever you normally use to code HTML.
    --
    Veronica Yuill
    Archetype IT

  5. #5
    Geoff Bowers
    SitePoint Community Guest
    The hunt is on at Balsamiq for a Comic Sans replacement: getsatisfaction.com/balsamiq/topics/feedback_needed_on_comic_sans_replacement

    In any event, it's simple to change by selecting View > Use System Fonts. Mockups will then pick up the system font for your installation.

  6. #6
    SitePoint Member fishoutoforder's Avatar
    Join Date
    May 2009
    Location
    Western Australia
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for this post. I applied for a free license key for my employer, a not for profit organisation, and they responded within 24 hours.

    I then knocked together a few diagrams to show our our in-house designers who are going to be re-imagining our main website to integrate some new features we're adding. I found it to be a great tool for rapid prototyping and it has sped up our redesign process!

  7. #7
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I think you should mention Justinmind Prototyper as another tool to make high interactive prototypes and also as a natural step when someone finish the sketching phase.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •