It’s now available on humaneinterface.net a highly interactive prototype created with Axure RP Pro, the powerful software for generating clickable wireframes and dynamic patterns similar to those of rich internet applications.
The HTML prototype contains examples of advanced protoyping techniques and some brief notes in a green backgroud to explain the structure of each page and the algorithms. I am planning to create more thorough exaplanations in the future.
The code is quite heavy, Safari or Firefox are recommended
Axure in action: HTML version
Axure in action: original Axure RP Pro 5.6 file (3 MB)
Any feedback will be strongly appreciated.
Axure in action by Luca Benazzi is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.0 UK: England & Wales License.
12 Comments
bravo! best use of Axure’s powerful but increasingly difficult to use prototyping capabilities i’ve seen.
This is great! Thank you for sharing. I just sat down to go through the RP files and immediately came up against a question:
On the home page in the green block (text “Axure RP Pro…”) it looks like you did the entire 1st para as a link, then masked out the parts you didn’t want to have the link behavior. Is that right? Where is that “mask” object?
I have sometimes used a ~reverse process to get links in the midst of copy blocks: Make the copy block in plain text, then superimpose a duplicate word (as a link) on top, wherever needed.
Hi Weston, thanks for appreciating my work. Yes you are right, the mask is used to make that area unactive. Clearly a trick that nobody would do anywhere else than a prototype. And yes you can do it the other way round, and the way you suggest is probably a bit more elegant. But I like masks, they are more fun! I wonder which way is better when the text is resized. I didn’t try so I don’t know
Oh yes, I forgot: or superimpose an image map region over plain text that has link styling (which it looks like you used in some other places). This one of my main gripes about Axure – how something so basic requires work-arounds: putting a link inside a copy block.
Well done! I was always hoping someone would put one of these together. The “Show Index” on the side is a cool idea, Axure still needs to implement a way to do that. Nice workaround.
Thanks for creating and sharing such a deep prototype! The explanations are great. I especially like the use of variables (in the search results and employee directory) and all the transitions you included, especially the sketchbook fly in/out. The variables and transitions really further the simulation. Why do you suspect the sketchbook fly in/ou doesn’t work in Firefox?
(BTW, on the Albums Catalogue page the bottom 4 links, Jazz Standard – Hard Rock, activate the panels of the top 4 links.)
Hi Kevin, thanks for the comments. For some reason I didn’t notice the bug on the album covers! I have no time to fix it now but I will take a note of it. The sketchbook does not always work as it should on Firefox, sometimes it does, sometimes it doesn’t (there is no flow in/out)
is great….excellent….
On the Computers landing page viewing the Initial (Computers) state of the DecisionTreePanel, I see a “transition A3″. Since A3 doesn’t appear as a program-provided option, I’m assuming it’s home-grown.
How did you make the A1, A2, and A3 transitions?
Hi Sigo, sorry for the late reply. I am not sure of what you mean but anyway, I created A1, A2 and A3 as sort of “states among states”, in order to simulate a more fluid transition between one state and the other. The box on the top becomes smaller and dims out, while the box at the bottom becomes bigger and bolder. You do this by setting the panel to these different states and leaving a few milliseconds in between one and the other, so it’s not too quick and not too slow. I hope this makes it clear. I am going to upload a new version in Axure 6 format now, but there’s no relevant changes to this page. Thanks
This is great work, Luca!
I’m wondering whether you could solve the transitions with Axure 6′s panel state “animate in and out” options instead of additional panel states. What do you think?
I am sure there’s more that can be done with the new interactions in Axure 6. Which page are you talking about, in particular?
One Trackback
[...] This post was mentioned on Twitter by JosephDickerson and Mauricio Candamil . Mauricio Candamil said: RT @axurerp: Ever wanted to see all the things Axure can do in 1 file? : http://bit.ly/n12SK [...]