10.06.2009
Sketchy Axure Widget Library 

v2 Is Available!

I've been using the library on a couple projects and made some improvements to the library (dogfooding is good ;).  I've also updated based on some suggestions (thanks, keep 'em coming!) including one from Jacob Hage (below) to use "preserve corners".

What's new in v2:

  • Lightbox
  • Working scrollbar (up/down)
  • Konveyor (nod to Windows 7)
  • Shapes: (nod to Dan Roam's The Back of the Napkin) circle, triangle, diagonal lines, changed to preserve corners
  • Hyperlink
  • Improved widget icons
  • Improved button highlighting

Download the Sketchy Axure Widget Library (free)

Also, I created an Excel workbook to help define easing in animations.  I used the workbook in the Konveyor widget. 
Download the Easing Workbook (Excel, free)

Tweet @wickkevin with questions, comments, and suggestions.


---------------------------------------------------------------------------------
October 6, 2009
Sketching solutions in pencil or on a whiteboard is an effective way to involve clients and users in the design process.  Seeing a sketch invites suggestions and discussion in a way that clean-lined wireframes sometimes inhibits.  After all, it's a sketch and not a final design, right?

In addition, sketches can help focus discussions to be about information architecture and interaction design and not about visual design. 

Axure is a great tool to help stakeholders and users understand the experience of web sites and applications.  The prototype simulations far exceed what static wireframes can communicate.  Sometimes, Axure prototypes can be mistaken for the end product.
Sketchy Axure widget library thumbnail image
We created an Axure widget library with pencil-sketchy-looking widgets so that the prototypes can look like they are sketches.  Included are the basic Axure widgets re-done in a sketchy look.  Also included are some interactive widgets, including:

  • a 5-tab panel
  • a "help-on-hover" panel
  • star ratings (hover and click to rate)
  • a show/hide panel
See a demo prototype to see which widgets are included and to play around with the interactive widgets.  Here is an inventory of sketchy widgets (as an image).

Credits!  The widgets are based on the Visio stencil that Niklas Wolkert created and the Scoder Hand font created by MrLuigiFreak101 (this font is available on many sites). Thanks also to Loren Baxter for the loading GIFs images.  (Related: the sketchy Omnigraffle stencil by radiorental)

Notes:
  • Youll want to install the Scoder Hand font (it's included in the .zip).  Your stakeholders will not have it installed, so button shapes are used instead of text panels to create widgets.  Button shapes are rendered as images in the HTML prototype, so even if a stakeholder or user doesn't have the font installed (a likely case), the font will still render as designed. 
  • Droplists work, although there's an extra step involved.  The extra step isn't onerous and it's detailed in the widget itself.
  • Radio buttons and checkboxes work, but slightly differently than the Axure default widgets.  The main difference is that radio buttons cannot be added to groups.  So, the default radio buttons and checkboxes, with some sketchy styling, are included too.
  • 5 box sizes and 2 droplist sizes are included to handle scaling issues.  The boxes are images, so as you increase or decrease their size, the edge lines get very wide or disappear.  The multiple sizes gets around this problem.

Bonus!  The widgets are labeled.  When you're adding and editing interactions, you will not see a list of "unlabeled" widgets ;)

Download Sketchy Axure Widgets and Scobey Hand font

(from Axure.com "To load a library, download the .rplib file and save it to your computer. Library files saved to the "My Documents/My Axure RP Libraries" folder will be automatically loaded the next time you start Axure RP. To load a library file manually, select "Load Library" in the dropdown menu in the Widgets pane. You can learn more about widgets and creating widget libraries".)

Plans for future versions:

  • light box
  • accordian
  • carousels
  • iframe with embedded video
  • video player
  • sharing tools
  • thumbs up / down rating
  • icons
  • print-oriented backgrounds

I will be discussing static wireframes vs. interactive prototypes at InfoCamp Seattle 2009 this weekend.

Please share your thoughts and suggestions!

posted at: 4:15 PM by Kevin Wick
Comments
Wednesday 10/7/2009 5:15 PM by Loren Baxter
YES! I've been wanting these for so long. Thank you for putting them together.
Wednesday 10/7/2009 5:49 PM by Andrea
This is very impressive, Kevin! Love that you were so thorough with all the widgets and went through the effort to add interactions and variables when useful. We really appreciate it and can't thank you enough for doing this!
Wednesday 10/7/2009 6:02 PM by Christian Martin
Very cool! Looking forward to using a more 'hand-crafted' look.
Thursday 10/8/2009 3:19 AM by Johan
Looks really nice indeed
Thursday 10/8/2009 2:46 PM by wickkevin
Thanks @LorenBaxter and @axurerp for spreading the word about this library!
- Kevin
Friday 10/9/2009 5:35 AM by Jacob Hage
This is great! Thanks :)

Have you considered the preserve corner-feature? Using that you would be able to stretch a scrollbar without distorting the corners or drag handle.

- Jacob
Friday 10/9/2009 1:10 PM by Loren Baxter
Jacob is right, the preserve-corners feature can help out some of these widgets. For instance, you probably only need one size of each box type, with preserved corners. Should save you some space and minimize the number of repeat objects!

Keep up the hard work,
Loren
Friday 10/9/2009 2:38 PM by Kevin Wick
Jacob, thanks for the insight! I didn't know about the preserve corner feature. Coming soon, v2 of the library ;)
Monday 10/12/2009 9:04 AM by Kris
Hey Kevin - thanks for these, Downloaded and installed. And good to see you yesterday at InfoCamp. Thanks for coming and the support....
Tuesday 10/13/2009 10:46 AM by Jamie Kravitz
hi kevin i enjoyed the panel at infocamp and was good chatting with you afterwards about using Axure for WFs. these look really cool i'll download and check them out. would love to follow up more re - the "deliverable" aspet of Axure.
cheers, jamie
Wednesday 10/14/2009 8:07 AM by So Frei
Looking forward to using this, I've previously gotten such better results from clients using "rough" wireframes vs "clean lines" ones! No more "is it really going to look like all these boxes?" thanks a lot
@wickedgeekie
Thursday 10/22/2009 11:33 PM by Jacob Hage
Great update! :)

Another suggestion: Use styles for defining the typography.
I used the library for a project, but was not interested in using the handwritten font, so I had to manually change the font of all my widgets to Arial.

I think you might be able to create a custom style for all your text instances (using the handwritten font) and is somebody (like me) wants to chance the font, it's just a matter of redefining that style...

Thanks for doing a good job!

/Jacob
Wednesday 10/28/2009 4:04 PM by Mark Johnston
It would be great if Victor could implement web fonts into CSS for Axure prototypes and then we could ship the prototypes without having to worry about our viewers needed the sketchie font in this case...
Thursday 10/29/2009 12:06 PM by Jerry Gennaria
This is really cool. Great concept. Is it possible to use this library for initial wireframes and then easily switch to a different "clean" line style?

I'm envisioning using the sketch style for initial versions and then something more polished as it get's closer to being finished (or for presenting to the CEO, etc.)

jerry
Thursday 10/29/2009 5:17 PM by Kevin Wick
Jamie, good meeting you too. Delivery of Axure files deserves its own post ;)

Jacob & Mark, thanks for the comments. This afternoon I've had chance to look into the font limitations. Tomorrow I'll post a work-around for the situation when someone doesn't have the Scoder Hand font installed (the gist is to insert cascading to other fonts within one of the .css files).

This work-around will affect generated HTML files and not fonts within Axure, so this may not be a solution for you, Jacob.

Jerry, I've been wondering how to do the same thing you suggest - creating a quick "flip to hi-fidelity" button. I'm currently getting it done via panels and states, but the downside is maintaining multiple versions of the same widgets (can't use masters if the font face or line qualities change). I'll troll around for ideas, and if you find some, please share!

- Kevin
p.s. Kris, always good to see you ;)
Friday 10/30/2009 12:32 AM by los angeles seo
Looks nice!!!!
Monday 11/2/2009 5:12 AM by CRM service
Very nice & useful post.Thx for sharing the information.
Monday 11/2/2009 5:17 AM by Website maintenance
Very Nice & Informative Post.Thx for sharing.
Tuesday 11/3/2009 3:43 PM by marianne
very nice post Kevin! Thank you for sharing the experience
Add a New Comment
Name

Email Address
Url

Comment
Blog Search
Keywords:
Author:
Posted Between ...
and ...
Archive by Month
Archive by Author
© 2009 Ascentium Corporation. All rights reserved.