Tag Info

Hot answers tagged

71

I hope the answer to the question is never. A prototype is meant to be a test. Built using the most "hacky" approach with the least amount of time to get initial feedback on whether a concept is viable. The alpha is something you give to actual users. This is the version, if successful, you hope to build upon to become the beta and eventually the product ...


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


27

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


27

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


17

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.


12

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


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


10

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


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

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


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

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


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

Mostly working self employed / freelancing on website related projects I would say it's the developer/designer's decision if it's a (working) prototype or a (buggy) alpha version. A prototype is never ment to be public while an alpha version robably is. The line between those two is difficult to draw – but for me / with web projects it's the moment when I ...


6

One potential drawback of using HTML mockups are that the client could think that you've finished the application - even if you've told them what it is. Seriously, I've known people - both clients and managers - who on seeing a mockup using the tools you normally use to build the actual product think that you've done most of the work and are surprised when ...


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



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