Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm developing some user interfaces for big displays. A lot of them support multi-touch interaction. I started to draw some mockups manually with pen & paper. For various reasons I want to do it with a computer in the future. First of all, it is easier to store it and I hope that there are some programs that support me in copying various user interface elements that I need multiple times.

So my question is: are there any good programs that can support me in the creation of mockups of "non-traditional" user interfaces?

share|improve this question

closed as too broad by JonW Oct 21 '13 at 22:18

There are either too many possible answers, or good answers would be too long for this format. Please add details to narrow the answer set or to isolate an issue that can be answered in a few paragraphs.If this question can be reworded to fit the rules in the help center, please edit the question.

3  
mockups or prototypes? –  Jon White Nov 27 '11 at 3:15
    
Sorry for the late answers, but I'm talking about mockups. –  RoflcoptrException Nov 28 '11 at 8:56

14 Answers 14

up vote 15 down vote accepted

Yes. You'll like Balsamiq Markups. You can even make it a little bit interactive.

share|improve this answer
2  
Basalmiq is great for mockup up TRADITIONAL GUI interfaces. It is not designed for touch apps or Natural User Interfaces (or NUIs) as they are known. –  Karl Fast Nov 26 '11 at 22:35
2  
@Karl, that is not correct. See blogs.balsamiq.com/product/2009/03/01/… (from over 2 years ago). –  Matt Nov 27 '11 at 0:17
1  
You're correct. It shows widgets for iOS. I was thinking more about multitouch gestures for large displays, as the question started by talking about large displays. –  Karl Fast Nov 27 '11 at 2:39
    
The widgets are designed after iOS but a creative developer such as yourself can use the principles of those designs across any UI. I don't mean to "sell" you on Markups, but I suggest you look into it a little further on your own. I simply posted a few links to get you started. You can model just about any practical (NUI or not) UI in it, I believe (at least, from my experience). –  Matt Nov 27 '11 at 5:00
5  
Balsamiq is good for wireframing, but, as it should, it's UI library is generic. Its meant to represent functionality of a UI but not meant to represent the UI itself (which I don't think wireframes should do anyways) –  DA01 Nov 28 '11 at 8:19

SketchFlow which is part of Expression Blend Studio by Microsoft is really, really good...

There's also

share|improve this answer

After testing many programs and websites i found that Fireworks is a very good options in case you have it, and if you need to export the sketch to html or pdf.

But the best in my point of view and what I do most of the the time is using a pencil and papers without using the computer.

share|improve this answer
1  
+1 pencil and paper always win! ;) –  DA01 Nov 28 '11 at 8:17

Everyone is tossing out various wireframing software options. Which is fine. But that's not really getting to the bigger issues.

IMHO, wireframes are abused and asked to do things wireframes should never have to do. One of those things is defining the UI. Wireframes are great for brainstorming and can help determine page layouts, content areas, and overall user flows, but they are not designed for fully fleshed out user interfaces.

I'd strongly encourage you to stick with pencil and paper for general wireframing. For detailed UI, get into prototyping sooner than later and use the tools you'd normally use to create your UI elements (Such as PhotoShop, Illustrator, etc.)

share|improve this answer

I like Scetchflow. Mozilla has a free prototyping tool "Evolus pencil". This app is available as Firefox Extension or as an standalone app and has several Widgets. You can even create your own widgets with XML (but it's a little bit complicated).

Mozilla Evolus Pencil

share|improve this answer

You can make your sketches digital easily with JotNot Pro: http://drawingdownthevision.com/virtual-office-sharing-sketches-instantly-digitally/

If you want digital-only mockups / prototypes... the best tool IMO is Protoshare. (We use it internally at P&G.)

However, I strongly advise you to check this out to see the bigger creative process before you go solely digital: http://atsiem.com/wp-content/uploads/2011/04/FromPaperToPixels.pdf

To keep your mind open, and ensure the digital mockups you do save are worth their bytesize... grab a pen and some templates and focus just on sketching. Try to get 10 sketches of your top level pages, only then should you consider going digital.

share|improve this answer

Another option is to use a graphics tablet with an image editing application like Photoshop or The Gimp. This gives you the advantages of speedy prototyping and freedom of movement, with the ability to recolor, remove, and re-arrange objects at will.

share|improve this answer

I prefer not using the 'screen' approach until I have to use my wireframes to communicate with your client, and when I do I make them interactive so the client can have an idea of what's happening.

When I am design the UI, I use a pencil and tons of paper but also SCISSORS and GLUE to test everything I can. Taking pictures of each state/revision so that I can make the final wireframes.

share|improve this answer

I prefer Axure, because it is easy to learn and use. You can find various help documents and videos on their webpage.

I recently evaluated it for my company and we now purchased a license. We design a complete prototype within Axure of one of our new products (Web-Client) before coding. It is very cost efficient to produce these mockups and they can be connected with a bit business logic, which ist highly preferred by managers to "feel" and see how the user will use the software.

We managed to notice many problems and got several new ideas before we developed the real product. Now we have a prototype of what we want to build and the developers can transfer the images to code. They save immersive time and energy because they don't need to think over every design aspect.

It is also multi-OS (Mac and Win) with one license. Sadly the license fee is a bit high and the software lacks an autoupdate process. If you are a member of the UPA you get the license 89$ cheaper.

You can download an 30-day evaluation version directly from their page. If you have further question I will be happy to answer them.

share|improve this answer
    
For mobile and touch design you can get further stencils on this page axure.com/widgetlibraries –  suzhi Nov 28 '11 at 9:26

As already mentioned ... JustInMind is a great tool to use and create interactive wireframes. I just used it to create an interactive iPhone mock up of an APP my CEO wanted to suggest building. Downside to this software is that it is 500 dollars for a single license; they do offer discounts if you qualify, but offer a 30 day trial.

Balsamiq is also a fun and quick tool to use, but is not very interactive.

share|improve this answer

I would agree that Omnigraffle would be your best option here (if you're a mac user). You can work across multiple pages, and it's quite easy to create reusable elements. With the Konigi Wireframe Stencils, you can build a decent low-fi mockup.

Another good mac option that I quite like is Antetype (although it's more suited to prototyping). If you're not on a Mac, then I'd recommend Balsamiq, as others have.

share|improve this answer

If you have a Mac, I'm really enjoying OmniGraffle for UI mock-ups. It's general purpose, but you can find additional 'stencils' from Graffletopia. Usually, I find the stencils that need little editing before adding them to a mock-up. For example, here're some touch and body gesture stencils

However, I've always found it's much better to get the rough idea down on paper first just to handle larger issues before making a digital mock-up.

share|improve this answer

I use the three below:

  1. Balsamiq mockups (for quick wiggly sketches)
  2. Visio (for specifications)
  3. Expression Blend (for interactive mockups / prototyping)
share|improve this answer

If you are using an iPad then App Cooker is pretty easy to use with some nice features.

share|improve this answer
3  
Why is it easy to use? What are the nice features? –  Rahul Jan 17 '12 at 18:27

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