Which UI/UX sketching software do you use and would recommend? Why?
Sketching Is Way Better To Start With
Nothing beats sketching for getting your ideas out quickly, iterating easily, and not feeling too "in love" with creations that need to die.
Tools for Sketching
These are the tools I use, Ultra Fine Sharpies in black, red, and blue, a Fine Point Sharpie in black, and a Prismacolor Warm Grey 40% marker with broad and fine tips. That warm grey marker will take your sketching to another level in terms of communicating clearly what you mean.
Tips for Sketching
Sketching doesn't have to be fancy. Straight lines, text, a little shading … that's all you need to communicate volumes that can't be written. That said, I'll let my sketches tell the rest of the story.
Leah Buley has terrific resources on sketching and has influenced what I know. She works at Adaptive Path as a UX Designer.
And check out Slides 16 & 25 of Leah Buley's Good Design Faster presentation.
In order to be able to collaborate better with co-workers, and give everyone a fair shot at drawing out their ideas who might not otherwise feel artistically inclined, we use myBalsamiq and love it.
For exploring loose ideas (alone or in person), I use paper or whiteboard. When I'm preparing low fidelity wireframes for presentation, I use Balsamiq Mockups.
Things I like about Balsamiq:
- Lots of existing drop in UI components (including community created)
- I can easily save custom symbols for reuse
- Keyboard shortcuts make adding components fast (for me)
- Some (limited) click-through support for connecting wireframes in a pseudo-prototype form
- Saves sketches in a custom XML syntax (BMML) that I can parse with my own tools
They've deployed an online, collaboration focused version called myBalsamiq, but I have not tried it yet so I cannot offer an opinion.
Leading industry ui/ux prototyping or sketching software's are many in the market. Both online/desktop. It mainly depends on to what level of fidelity/interactions you want to capture on the interface.
Just for Basic - Medium fidelity i suggest you can use Axure with all different libraries/widgets loaded, otherwise your prototyping life is miserable in that.
For Medium - Advanced you can use iRise which has all the features including even dynamic data showing from database on the inteface. BTW, license is seriously very costly where only enterprises can afford
Other than above, here are listing of popluar tools
- ConceptDraw Pro Type: Windows App
- Pidoco Type: Online
- Mockups Type: AIR App
- Mockingbird Type: Online
- Pencil Type: Firefox Addon
- iPlotz Type:Online / Flash-Flex
- ProtoShare Type: Online
- HotGloo Type: Online
- Lumzy.com Type: online
- MockFlow Type: Online
- Gliffy Type: Online
- Cacoo Type: Online
- Creately Type: Online / Flash-Flex
- Lovely Charts Type: Online
- Mockup Builder Type: Online / Silverlight
- Lucid Chart Type:Online
The most important part is to understand when you need to sketch in different mediums and styles. Learning when to create the ugly dirty sketches that are simple explorations versus creating actual interactive wireframes.
There are many people who draw using illustrator and a tablet, and they are super quick. The nice thing about that medium for instance is that it can be easily modified and sent to others for manipulation.
So you see, the medium and software depends on where you are in your process but also the habits of whoever creates those sketches.
I use in order of process and fidelity, starting at rough explorations:
- Paper + Black pen
- Paper + Thicker Sharpie, Black pen ,Grey marker for nicer highlights
- Illustrator for one of wires that might need to be modified
- Axure (but this is not sketching in my mind, it's wireframing and is used because we need interactivity somehow)
As an alternative to pencil and paper sketching, I recommend using a Wacom tablet + MyPaint. MyPaint is a drawing opensource software with the following features that make it a good choice for sketching:
- Infinite canvas. You can always draw at any side of your current sketch since there are no margins.
- Lots of brushes You can use lots of different brushes and create your custom collection.
- Layer support. You can use different layers for the drawing, the shading or the annotations and change the active layer with a simple keyboard shortcut.
- Clean UI. Provides full-screen mode with keyboard shortcuts for showing/hiding UI elements.
- Save drafts. Easily save intermediate states and navigate back and forward to experiment variations of your sketches.
MyPaint provides the above features (which are not available on paper) without introducing much of the complexity of most drawing packages (e.g., Fireworks) or prototyping tools (e.g., Axure) which are better suited for other deliverables (such as wireframes or prototypes).
I have created a replica of the hand-drawn sketch by @tajmo to illustrate the use:
Pen and paper cannot be mentioned often enough. The flexibility in the early fases is a must-have.
After that: Axure is what I use, but I've also heard good things about Balsamic.
Nothing will better replace pencil and paper. And for this, I would recommend the Action Method paper tools from the Behance Network. I use their dot grid cahier and notebook everyday and it's really professional and beautiful.
What's cool is that they have adapted this Paper Action method to web, ipad and mobile. You should check it out.
As of prototyping/wireframing tools (and not sketching), I personaly use Balsamiq. Fast, instinctive and efficient. They also have a myBalsamiq website in beta to handle personal project. But this is not free.
In my company, we handle knowledge management via a Confluence wiki. We added the balsamiq plugin and this is a very powerful way to handle wireframe within a context.
Finally, for an intermediate way, you can buy a Wacom Bamboo tablet and use UI block and template in Photoshop for the best of all worlds.
Hope all those advises will be helpful.
I'll recommend Adobe Fireworks. It's great because:
- It's designed for web design so it is really fast
- You could use symbols for resuable elements such as buttons, windows etc
- It supports 9-slice scaling
- You could build fully interactive prototypes without coding
- With this wireframe kit you could quickly build pages to test without distracting design
And when you are ready you could quickly start to design on top of the sketches and export everything as css and images.
I've used Fireworks for 7 years and it has saved me a lot of time.
Yup. Paper and pencil and pen wins hands-down. All your hand sketching experience will inform any screen "drawing" you do and make it better. I also second the hands-on simplicity of sending scans and photos of your sketches. Design is thinking and form-making. Screen tools that make it too easy to make images do not contribute to thoughtful design. If you just want images per hour efficiency, then any of the drawing tools mentioned will do.
For wireframes, I looked hard at Balsamiq, Mockflow, Mockingbird, Hotgoo, Protoshare and othes. I choose Mockflow and am happy with it for price, power, UI and results.
my opinion ... Balsamiq is to limiting. As the only UX person in a fortune 100 company tasked with many web applications/portals ... i simply don't have time/luxury of sketching wireframes in Balsamiq with their limited palette. Having gone down that road, I've found that Development teams need more definition to wireframes, hence why i've moved into Illustrator which allows complete control and provides a hybrid to photoshop design files. Prior to Illustrator, Thin sharpy pens and grid paper is essential to work out business requirements and build the gap between requirements and agile development teams. Looking into interactive mockup tools, ie ... fireworks, iRIse, and Axure, but don't want to be limited to their predefined widgets and don't have the time to code.