Lately there has been a lot of chatter among my colleagues and on the web about which tools are good for UI / UX mockup creation, and the truth is that there is no “one-size-fits-all” solution. Below is a list of my top 5 favorite user interface (UI) / user interaction (UX) tools (apps) for creating digital media mockups: websites, apps, video storyboards and more. I have simply chosen the list based on tools I have used in the past and how effective I have found them for past projects.
Adobe Photoshop: OH SNAP! I just put Photoshop at the top of my list for a UI / UX tools for mockups. I probably just pissed off every UI / UX desginer on the planet… Anyway, Adobe Photoshop is a graphics editing program developed and published by Adobe Systems. Many UI / UX designers will frown upon using Photoshop as a tool for mockups because it may take to long to create the mockups, and may provide too much high-level detail in the mockup such as color, shadow, gradient and other effects which lead to the wrong discussion when presented. But the truth is you can scale down you mockup to be as simple as a wireframe. This requires a higher level of understanding of Photoshop, if your just stepping into the world of UI / UX and maybe a harder tool to learn and use then the others on my list.
Axure: Axure is a wireframing, rapid prototyping, and specification software tool aimed at web and desktop applications. It offers capabilities typically found in diagramming tools like drag and drop placement, resizing, and formatting of widgets. In addition, it has features for annotating widgets and defining interactions such as linking, conditional linking, simulating tab controls, show/hide element etc. Unlike Photoshop you can quickly interactivity to better show workflow of application to hash out with client (or end-user) are you getting it right? As far as complexity goes, it’s not terrible to learn but certain things can be frustrating especially if you know how to code basic HTML/CSS. I say this because at times when I am using Axure, I feel like I can write code mucj quicker than fiddling with Axure to get the interactivity I am looking for.
Balsamiq Mockups: Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets using a drag-and-drop WYSIWYG editor. The application is offered in a desktop version as well as a plug-in for Google Drive, Confluence, JIRA, FogBugz and XWiki. To me Balsamiq is simply beautiful tool for rapid mockup development. This tool is extremely easy to pick up, in minutes you crank out simple one two screens of what you are thinking.
Moqups: Moqups is an online vector based mockup & wireframing tool. It’s a HTML5 App for creating high fidelity, resolution independent SVG mockups and wireframes. Things are simple and fairly intuitive to use, so you can unleash your creativity without any obstacles. And the beauty it’s all in the “cloud,” so no more worrying about where did you put the mockup, plus share and collaborate with colleagues easily.
Google Web Designer: Google does it again, making the complex simple enough for “the-average-bear,” sort off. With a little reading, educating and trial & error you can create full-fledged websites/apps or simple mockups. When I first stumbled across Google Web Designer, I thought yet another tool for mockups. Haven’t used this tool whole lot to determine its effectiveness but I’m sure it will be useful.
As I said before, there is no “one-size-fits-all.” In addition to these resources, I don’t want to rule out good old fashion pen and paper, whiteboards and even napkins in the heat of the moment.
Sure, Photoshop can do the work of UX wires for mobile, but if your going to be making a mock-up DOCUMENT (like .pdf or whatever) and NOT making a mock-up that’s a PROTOTYPE (like Axure… which is, my favorite) …then don’t over look InDesign. Yes, I said InDesign… take all those parts and pieces you drew in Photoshop or Illustrator and make an InDesign library. With a good InDesign library, you can get high or low fidelity design going really fast, because once you make a page from your library… you’ll never have to make it again, just copy and go! http://dribbble.com/shots/915605-Wires?list=users
I am really liking this technique. Going to have to try it out sometime.