Which tool should I use to create mockups of user interfaces for big displays? [closed]

Question

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?

Answer 1

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

Answer 2

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

There's also

• Sketchify
• Justproto
• App Sketcher
• PowerMockup
• JustinMind

Answer 3

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.

Answer 4

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.)

Answer 5

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

Answer 6

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.

Answer 7

I prefer not using the 'screen' approach until I have to use wireframes to communicate with the 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.

Answer 8

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.

Answer 9

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.

Answer 10

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.

Answer 11

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.

Answer 12

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 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 for less.

Answer 13

I use the three below:

1. Balsamiq mockups (for quick wiggly sketches)
2. Visio (for specifications)
3. Expression Blend (for interactive mockups / prototyping)

Answer 14

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