Computer Based Sketchy Wireframes

March 2nd, 2009


Jumping over to the computer does not necessarily mean that the wireframe ought to look rigid and clean, suggesting a higher degree of completion. Occasionally, the designer still feels the need to communicate the interface with a style which invites change by suggesting incompletion. One way of doing this is by means of a more sketchy style. Here is a sample of Hans using Visio loaded with a sketchy stencil designed by Niklas Wolkert. Jonathan Abbett has later on revised the stencil here.

Credits: Hans Nieuwenburg

Need UI Inspiration?

Hi I'm Jakub and I wanted to share with you some of my better UI sketches to inspire your line of work. I've been sketching user interfaces with paper/electronically for over a decade. Subscribe today, and I'll share 5 of my better sketches with you over the next 5 days. How is that? :)

I will send you 5 pieces of inspiration over the next 5 days. You can unubscribe whenever you like. Powered by ConvertKit

11 Responses to “Computer Based Sketchy Wireframes”

  1. peldi Says:

    Hi there. My little wireframing tool (Balsamiq Mockups, http://www.balsamiq.com/products/mockups ) uses a sketchy stencil exactly to avoid the perception that the wireframe is a working prototype, and to help stakeholders focus on the app or site's structure instead of gradient colors, icons etc. I'd love to hear your thoughts about it. I've been following your blog since it started, excellent work, thank you!

  2. alteredeye Says:

    Omnigraffle users can also install a stencil to enable sketchy wireframing http://www.graffletopia.com/stencils/414

  3. Noah Says:

    that looks like a great tool! If it weren't $79 dollars I would consider buying it, but the free version could work for now. Keep in mind there are lots of student designers out there! <– :-P

  4. mahalie Says:

    I would love to see a roundup of wire frame tools – web based especially, from free to $$$.

  5. Jakub Linowski Says:

    Thanks for the suggestion. I might have a try at something like this in the future.

  6. Tyeshasnow Says:

    Yes! The 414 stencil is wonderful. It's neat, inviting and I get a great response when I use it. I put some examples up on my blog: http://uxpillow.blogspot.com/

  7. Rose Says:

    Every time i come here I am not dissapointed, nice post

  8. Sean Says:

    There are excellent sketchy wireframe templates available at no cost from http://graffletopia.com/ for IAs who –like me– use OmniGraffle.

    (I have no associate with the website; I just put those free stencils to work for my clients.)