Does anyone know how this sketchy UI image is made? Is it Balsamiq Mockups?
-
Yep, you can use Balsamiq for that.– Marjan VenemaCommented Jan 6, 2012 at 8:51
Add a comment
|
4 Answers
As stated by them (androidpatterns.com), it’s done in Fireworks (see quote below) using their own custom Toolkit. You can download the toolkit.
By comparing and analyzing all the screenshots that make up this pattern, a choice can be made for the generic appearance of the pattern. We use Fireworks (CS5) to make the wireframe. For this we use a 600 pixels wide document, opened from a template, and an other template with graphical elements. If an element is not in this template yet, we create it, and add it to the template. We also use a third template (when necessary) with gestures. A maximum of 3 frames can be placed in one row. Numbered annotation marks can be used in the wireframes, that direct to the annotated text under the wireframe. The numbers highlight important sections and steps. We also use ellipses for focus on a particular screen section, rectangles for taps and/or selection and sometimes arrows and dotted lines, all to be found in the wireframe template.
Evolus pencil includes a set of sketchy stencils. I am not sure whether Pencil was used or not, but you could achieve a similar result. Here is an example from their screenshot gallery:
-
1Pencil has changed their UI (to something far less user-friendly) since then. But it's still a good free tool.– dnbrvCommented Jan 6, 2012 at 13:18
-
To be exact, it is Android Sketching stencil set. Commented May 18, 2012 at 21:42
Yep, looks exactly like Balsamiq Mockups to me.
answered Jan 6, 2012 at 10:19
You can use any drawing tool that allows that style. I use InkScape. It's less about the tool and more about the aesthetic. The key is to make it look hand drawn to communicate that it isn't the finished UI.
In fact, I usually prefer hand drawn wireframes. Pencil + paper.
