What kind of program has been used to produce this mock-up image?

browser screen

  • To create this image look at Balsamiq – Benny Skogberg Jan 28 '13 at 13:17
  • And for the first question: it's Wireframing Tool or Mockup Tool and there's great variety of both free and commercial programs out there – tillinberlin Jan 28 '13 at 13:28
  • 4
    To comment the close votes: To me this seems like a trivial but valid question for someone new to the creation of wireframe mockups. It will have informative answers to future readers, and the question is not asking for tool specific usage advice or the like. – kontur Jan 28 '13 at 13:45

I would have instantly said this was created using balsamiq.

Balsamiq is a wireframing mockup tool that you can use to design prototype interfaces using building block elements such as an empty browser window as a foundation and then gradually add finer grained components in order to produce a design.

You can also use Balsamiq to add drawings to your posts here in stack exchange.

Except... the yellow comment areas, I don't recognise them as being the balsamiq 'taped on' style of note - and to be honest, the lines look a little too straight and the search box is too straight as well.

I don't think this is balsamiq. There are quite a few similar tools for mockups / wireframes / prototypes, but if this was not created using one of those, then it was probably a drawing package rather than a paint package.

Even using a drawing package such as OmniGraffle, Adobe Illustrator, or Inkscape (free), a designer can produce and import their own snippets of elements in a similar fashion to the tailor-made tools.

Typically the popular prototyping tools tend to deliberately use lines that are not straight in order to promote a sketchy feel in order that clients etc do not focus on the detail, but on the overall design and layout.

The fact that the lines in this image are so straight, and the last column in the table does not have the emails aligned with the header, leads me to think this was probably not from a dedicated prototyping tool, but from the image alone, it's very hard to tell.

| improve this answer | |
  • 1
    Just to be nit-pickity but this helps identify what the program itself may be, but the actual question is what type of program is this. – JonW Jan 28 '13 at 13:54
  • @JonW: if we're going to nickpick, that is exactly what Roger Attrill did: he determined that the image was probably made using a general paint package, and not a prototyping tool. – André Jan 28 '13 at 14:44

a bit longer answer than in my previous comment: the image is a wireframe, typically made with a Wireframing Tool or Mockup Tool such as Balsamiq (http://www.balsamiq.com/).

There's great variety of both free and commercial programs out there. Balsamiq is rather mid-range regarding the features and the prize.

Alternatives: AXURE (http://www.axure.com/) would be rather complex and that also shows in the price tag. OmniGraffle (http://www.omnigroup.com/products/omnigraffle/) less complex and more affordable.

Here's also a list of 10 free tools: http://mashable.com/2010/07/15/wireframing-tools/ but you'll find many more when you look for "mockup tools" or "wireframe tools".

You could however use any other drawing / graphics program to generate similar wireframe sketches.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.