Tag Info

Hot answers tagged

44

Balsamiq Mockups So, since you mentioned it, I'll add Balsamiq to start the list :) The Web version isn't in full release yet, but the desktop app is pretty nifty. When it does go live, the product will exist here: Balsamiq Web app project page Otherwise, there's always the desktop app (at the same URL, just click the "Desktop App" link).


37

HTML + CSS + JS That's pretty much the only option if you're looking at high fidelity prototyping. I'm an advocate of going hi-fi (code it) or stick very lo-fi (sketchy apps like Balsamiq). Unless you're testing relatively tame interactions, I find solutions like Axure and the like a bit dangerous. It implies hi-fidelity, but you can't finesse the ...


25

It's important for me to keep my prototyping in at least two threads, and three if I am trying to understand detailed interactions with animation. Thread 1: Flow, function, form, and data Starting on paper (actually usually a whiteboard design session with others). Focus on screen flow, then major functions and potential layouts of particularly important ...


24

I'm sure different people will have different views on how much or how little wireframes and prototypes overlap. What follows is how I approach the two: If you are considering an application or a website, and you look at the page level for example, a wireframe and a prototype are superficially the same things, from a physical perspective. They can both be ...


16

If you're building a web site or application, HTML mockups are far superior because you're designing the mockup in the format as close to the final product as possible. This allows you to set expectations much more easily, it constrains you to just what's possible in the final product, and it affords much greater flexibility. This convention is gradually ...


15

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


11

For prototypes I'd say that you need to get to the level of detail where you are able to explain and illustrate the functionality in a way that is easy to understand. However, it is also of major importance that no-one believes your prototype to be a finished (or nearly finished) product. In that case you run the risk that your customer either thinks that ...


11

Yes, they do. Low fidelity tends to get people to focus on the higher level aspects of the mockups, like the overall layout and concept. While with high fidelity mockups people tend to focus on the lower level details like "this should be two pixels to the left", or "this needs to be a different shade". That is one of the reasons that I recommend ...


10

As the User Experience Director for a company of around 175 employees, I'm often challenged with getting department managers to articulate their ideas without the knowlege of a designer. The best tool I have found (for us) is the web version of Balsamiq. Give it a try, although their server seems to be down right now which I haven't seen before: ...


10

I've found the most important thing is to set expectations. Stakeholders, especially those who are decision makers, tend to expect polished presentations, and so the idea of something being presented that looks rough and full of caveats simply seems wrong. In addition, make sure to: Put it in their terms, and make the purpose clear. Wait until you have ...


10

It doesn't make any sense to measure a UX designer's progress at making wireframes. Wireframes are just a way to communicate with other people and can take many forms, from sketches to mockups to "interactive" wireframes produced with software like Axure. Their purpose is to represent ideas in a form that can be discussed with stakeholders, team members and ...


9

I've read a very interesting article some time ago that was called "To sketch or not to sketch" - you should have a look: sketch question Whenever creativity is needed you should not limit your thoughts with tools you use. My personal choice for later cleanups is a tool close to the area I'm handling with. For HTML/CSS I usually start with simple layouts and ...


9

It's a fidelity issue. The catch is that either document can be higher fidelity than the other depending on what you are focusing on. An HTML prototype is really the only way to truly mock up any interaction of even moderate complexity. There's simply no way to fully document interaction design within a PSD file. Conversely, if you're in an environment ...


8

Interesting that Adobe Fireworks has gotten little love on this site. Among other things, I've enjoyed Building in different states Master pages HTML objects, like links and icons, can be given markup that will export (internal & external links, metadata, all that goodness) Exports standards-compliant, CSS-based layouts with actual stylesheets Native ...


8

I personally use Balsamiq for the first few revisions, and then go straight to an HTML prototype using a CSS framework like Blueprint.


8

SketchFlow which is part of Expression Blend Studio by Microsoft is really, really good... There's also Sketchify Justproto App Sketcher PowerMockup JustinMind


8

This open source library is pretty good to start with and covers many types of common gestures: http://gestureworks.com/icons-fonts Alternatively, this one is pretty good as well: http://gesturecons.com You could also try a short video or animated GIF images to make the gestures more explicit, VideoHive offers many footages you could use to that ...


7

Pencil is a good tool for creating UI mockups. It is available as a Firefox addon or a standalone application. It has an advantage over some of the other tools mentioned because it if free and open source.


7

When selecting a testing method you should always first ask what the goal of the testing is, for no one method will suit all possible purposes. At the most basic level, different methods are good for discovery, while others are good for validation. Paper-prototyping is a testing method for discovery and understanding, and is ideally used early in the design ...


7

The straight-out answer to that is pretty simple: It's in the nature of a prototype to be beneficial. If it's not beneficial, then you're doing it wrong... If it's not beneficial, then it's not prototyping by definition... When you start prototyping, you need to know why you are prototyping. You need to know what the benefits will be. If you don't ...


7

First, I applaud anyone showing an interest in focusing on the interaction side of design. In corporate UX groups, I find that the one thing that often does fall through the cracks is the interaction design (often due to waterfall development processes). The UI may look stunning, the back end, tight and responsive, but then you put them together and things ...


6

The nature of your deliverables honestly depends on the scope of the project, the work you're doing, and what kind of client you're dealing with. The biggest challenge you have to face is determining what the client expects and then providing them with that (or adjusting their expectations where necessary). For instance, a colleague of mine recently created ...


6

The reason why we do prototypes is to convey ideas/concepts/solutions that can't be conveyed through showing static screens. I always use the rule that whenever you want to give a feel or an understanding of the flow in your application/web service you should do prototypes. It is with the prototypes that you can simulate how something might feel like. For ...


6

Flash is a great prototyping tool, if you're producing a Flash website. If you're prototyping a HTML website it is less effective because you're presenting a model to the stakeholders that can't be realised in practice. Matt


6

Wireframe - Basically Skelton of interface, something we can compare with our BLUE PRINT Prototyping - Workable dummy out put. combination of wireframe, interaction, scenarios, stories


6

SVN isn't great because it has a high learning curve and is primarily used by developers. If you don't have a problem with that, go ahead and use it (or git, or hg, or whatever), but I think there's a better way. Handcraft (which I build) was designed with this problem in mind. Instead of using version control, you have distinct prototypes in your account. ...


6

Paper prototyping lets you forget about the constraints of the tool that you are using, and forget about the fine details so that you can focus on the bigger picture. That said, there are other tools that work well as substitutes. I often use Draft on my iPad as a replacement, and I'm sure there are other similar tools out there. The key is that when you ...



Only top voted, non community-wiki answers of a minimum length are eligible