The blog

Fairy Dust – a hack to let your Axure prototypes indicate their interactive elements

fairy_previewOne feature I always thought Axure prototypes were lacking is the ability to highlight their (inter)active UI elements. After creating a prototype you always have to tell people where to click to ensure that they’d experience the full prototype.

A smart way to indicate interactive elements is to give them a glow – both Pop and Protosketch use this technique. So I looked ‘under the hood’ of a typical Axure prototype to see if I could “convince” Axure to offer the same functionality.

(In case you hate cliffhangers: yes, it worked. Here is the link to an example…)

Read more..

2 thoughts on “Fairy Dust – a hack to let your Axure prototypes indicate their interactive elements

  1. Ildikó / Reply 15. April 2013 at 10:00

    This is brilliant, thanks Lennart!

  2. gejoreni / Reply 17. April 2013 at 06:47

    Lennart, once again great work. I made some small edits to your work to allow easy copy and paste from one document to another (basically it can be made into a library widget). It will also work in Axeshare. I also tied the hideglow() showglow() to a dynamic panel hide/show status – to make it easier for axure users to use. Again – great job! another thought I had that could be cool, would be to use the label to set glow, not just cursor i.e., [data-label$=glow] , that if a user wants something to glow that would just append _glow to the end of the label. anyway – I am posting my edits below

    http://share.axure.com/98TQL6/

    http://www.axure.com/forum/attachments/tips-tricks-examples/1751d1366176929-fairy-dust-hack-let-your-axure-prototypes-indicate-their-interactive-elements-lennart_fairydust_gejoreni.rp

    *edits*
    javascript:var style = $(‘.glowing { transition: background 1s ease-out; box-shadow: 0 0 10px #01DF01; -webkit-box-shadow:0 0 10px #01DF01; -moz-box-shadow: 0 0 10px #01DF01; background-color: #01DF01; opacity: 0.6; filter: alpha(opacity=60); }’)

    javascript:$(‘html > head’).append(style);

    javascript:function showGlow() {
    $(“div [style*=’cursor’]”).each(function() {
    $(this).addClass(“glowing”);
    });
    }
    function hideGlow() {
    $(“div [style*=’cursor’]”).each(function() {
    $(this).removeClass(“glowing”);
    });
    }

Leave a Reply

Your email address will not be published. Required fields are marked *