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


26

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


17

There's a spectacularly cool desktop app for Windows, Mac and Linux called Color Oracle which is really nifty and adjusts everything you see to mimic many various types of colour blindness in real time and isn't limited to static images or websites. Here are some screenshots showing the UX website under Deuteranopia, Protanopia and Tritanopia respectively: ...


15

If you are going to be prototyping for iPhone, there is a very interesting iPhone Mockup tool I found recently. You might also want to consider the listing provided by this article, it has a lot of stencils and tools on the subject.


13

You're in luck. There are a number of websites that do this. Here are two I use: http://www.vischeck.com/vischeck/vischeckURL.php -- tests any website you point it at. You could take a snapshot and put it on a webserver. (I don't think it'll work with the Processing applet.) http://colorfilter.wickline.org/ -- similar idea, with even more options.


11

I have to agree with some of the other posters here. Paper and pencil (or pen or marker) is the best, cheapest way to start your prototyping. There's no reason to use something like Photoshop, because you aren't doing a full-blown design. The various software packages specifically for mockups and prototypes are all nice, but can become very expensive, and ...


11

This is what I like to call reverse wireframes. It's very useful to see how your site has evolved over time OR to take a preexisting website and deconstruct it and pick it apart. The tool I use is: Wirify and can be used on most any page buy just clicking the bookmarklet. Just drag the below code to your bookmark bar and click it to turn the page into a ...


10

Carnegie Mellon's Open Learning Initiative offers free distance/online courses, some of which (Visual Communication Design, statistics, etc) are applicable to the ux field. The Learning IA section of the IAI's site is also rich in resources on this topic. Feb 16/10 update: Recently also came across the AMA's Interactive Webcasts which have some topics you ...


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

A free online course in Web Usability is available from the San Jose State University's School of Library and Information Science. You can get the course on iTunes U through the iTunes Music Store, but it's also on YouTube (search for LIBR-251) and the School's website. I'm sure there are many similar courses, but this is just one I found recently.


9

We use UserVoice for Handcraft. Before launch we looked around at various tools and were ultimately looking for something that was quick and easy to integrate, relatively unobtrusive, and really easy to use. Uservoice meets those goals because you can start voting straight away, it has sign-in integration with services like Twitter, and you can hook it into ...


9

I think that they are reliable as what they are - cursor mapping heatmaps. They indicate where the user is positioning the cursor. In the same way, eye-tracking heatmaps indicate where the users eyes rest. Neither of them actually indicate what the user is doing when their eyes or the cursor rest there. So I think that they are useful for some sorts of ...


9

Here is a bookmarklet that will make all the text transparent: javascript:(function(){var tag=document.createElement("style");tag.type="text/css";document.getElementsByTagName("head")[0].appendChild(tag);tag[(typeof document.body.style.WebkitAppearance=="string")?"innerText":"innerHTML"]='* { color:transparent!important; }'})(); To get this to work, add a ...


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

Good question - Balsamiq Mockups may be your best bet. They have iPhone controls built in, and someone has contributed controls for Windows Phone 7. They also have stuff for Nokia platforms, etc. Not sure about Android options here. Keep your eye on Balsamiq's Mockups To Go blog for further contributions from the Balsamiq community. I also created two lists ...


8

At UPA conference a half year ago, I was in a session in which people discussed tools: HTML vs Axure vs Balsamiq vs FlairBuilder for prototyping. Axure and Balsamiq got some votes. FlairBuilder gets my vote. I was live-twittering, and someone outside the session suggested we download and try the FlairBuilder demo. We did so on the fly, and were immediately ...


8

Gives me problems recommending Microsoft products, however, give the 30 day trial of Visio a go. Visio was awesome when Microsoft bought it 15+ years ago, it also enables you to do clever things with data sources such as Excel spreadsheets. One feature I particularly like is how you can neatly arrange your diagram elements and then get them to fit onto a ...


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

Dia - this is the best diagramming tool I've ever used. Kivio - a similar diagramming tool that is part of KOffice.


7

I've given talks with: FlairBuilder Balsmiq Axure SketchFlow PowerPoint Fireworks Personally, I start on a white-board. I think FlairBuilder & Balsmiq are both extremely easy to use - perhaps the easiest. I think Axure is really powerful, but not as friendly. I think PowerPoint works when you are trying to do something really fast on a random PC. ...



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