6 ms·

Some thoughts: I heard about this a couple months ago at a conference on rapid prototyping, and I've been waiting for it to come out in the hopes that we would

by jeremyt 13y ago

Some thoughts: I heard about this a couple months ago at a conference on rapid prototyping, and I've been waiting for it to come out in the hopes that we would finally have a rapid prototyping solution for user interface designs. I'm basically looking for a balsamiq with lots of built-in animations and UI interaction patterns. Unfortunately, it looks like this product is geared more towards being a full-featured WYSIWYG for webpages rather than a prototyping tool for UI. I need something that will allow me to say "when the user clicks on this, this other element slides down"... Preferably without having to do the HTML and JavaScript myself. I don't need it to be production worthy, as my developers will insist on doing the code themselves anyway. It looks to me like this is a great tool for either people who don't know HTML/CSS or firms that need to kick out webpages quickly where the designers don't want to hand code the HTML/CSS. Not saying that isn't a huge market, it's just not targeted toward UI prototyping. That said, if the goal here is to provide a Dreamweaver 2.0 that spits out much better quality code, then this option looks really solid and slick.

marknadal 13y ago
Jeremy, you may be looking for something like this - http://www.screenr.com/HTQH http://www.screenr.com/HTQH . I'd love to hear your thoughts on this topic. The Macaw guys are doing great, though!
- jeremyt 13y ago
  Thanks for the link. With the caveat that I just watched the video and didn't do any further digging... It looks really cool, but it may be for people who need a lot more freedom with their animations. Honestly, my needs could be met with just a handful of interactions (slide up, slide down, modal, tooltip, show, hide) with a handful of events (mouse in, mouse out, click, etc)
  - marknadal 13y ago
    Why not just rig up and expose jQuery slide animations as buttons to your designers? Could be as simple as they click on the container they want to animate -> click on an event -> click on an animation.
    - jeremyt 13y ago
      Because the elements only exist in my wireframes :)
tericho 13y ago
Sounds like you're looking for something completely different than what this tool has been marketed as since the beginning. As a full-stack developer it interests me because it lets me visually create the visual part of a site. I don't like writing CSS when I have so much other development to do, but at the same time I don't want some shitty, bloated WYSIWYG editor that spits out garbage code. Macaw's authors have emphasized the quality of the generated code since the beginning so even if it's not perfect right away it's certainly comforting to know it's a priority for them.
- jeremyt 13y ago
  Yes, it looks like it's not what I'm looking for. Just wanted to post in case there were others out there like me who were confused.
  - Haywain 13y ago
    Have you considered using Quartz Composer? Particularly with the Origami plugin (by Facebook)?
- philgr 13y ago
  Antetype for Mac => http://www.antetype.com/ http://www.antetype.com/ May solve your problems.
ZitchDog 13y ago
I've used keynote for this, with some success. I'm a developer, but I love using keynote to prototype interfaces before I start coding.
iambateman 13y ago
There are some pretty sweet pencil & paper + app solutions out there, that allow you to draw the UI and take pictures of it. http://maniacdev.com/2013/06/nifty-iphone-app-allowing-you-to-turn-hand-drawn-app-mockups-into-interactive-prototypes http://maniacdev.com/2013/06/nifty-iphone-app-allowing-you-t...
radiorental 13y ago
take a look at Indigo Studio http://www.infragistics.com/products/indigo-studio http://www.infragistics.com/products/indigo-studio We evaluated it and liked it for pure interaction design.
- jeremyt 13y ago
  Thanks for the recommendation. It looks like a really solid option.
splatcollision 13y ago
I like the way you describe your ideal ux prototyping flow - I happen to have created something that works quite similarly: https://github.com/splatcollision/shorthand.js https://github.com/splatcollision/shorthand.js Would appreciate your thoughts on the syntax, etc. I describe it as "Like markdown for jQuery"
- jeremyt 13y ago
  Thanks for the link. It's an interesting idea, and if I spent very much time messing with HTML and jquery, it looks like it could save me a lot of time. My specific case is that I don't really have any HTML to work with, just wireframes. Of course, I could use a tool like Macaw to spit the HTML out and then put the shorthand into the code, but ideally I don't have to work with HTML/CSS/JavaScript at all. I'm actually looking at indigo studio that was recommended below, and it looks like it nails my use case.
camus2 13y ago
Fireworks was an excellent prototyping tool,and when I say excellent i mean the best and the easiest to use out there.It was infortunatly "depreacated" by Adobe.

by jeremyt 13y ago

marknadal 13y ago

Jeremy, you may be looking for something like this - http://www.screenr.com/HTQH http://www.screenr.com/HTQH . I'd love to hear your thoughts on this topic. The Macaw guys are doing great, though!

jeremyt 13y ago
Thanks for the link. With the caveat that I just watched the video and didn't do any further digging... It looks really cool, but it may be for people who need a lot more freedom with their animations. Honestly, my needs could be met with just a handful of interactions (slide up, slide down, modal, tooltip, show, hide) with a handful of events (mouse in, mouse out, click, etc)
- marknadal 13y ago
  Why not just rig up and expose jQuery slide animations as buttons to your designers? Could be as simple as they click on the container they want to animate -> click on an event -> click on an animation.
  - jeremyt 13y ago
    Because the elements only exist in my wireframes :)

tericho 13y ago

Sounds like you're looking for something completely different than what this tool has been marketed as since the beginning. As a full-stack developer it interests me because it lets me visually create the visual part of a site. I don't like writing CSS when I have so much other development to do, but at the same time I don't want some shitty, bloated WYSIWYG editor that spits out garbage code. Macaw's authors have emphasized the quality of the generated code since the beginning so even if it's not perfect right away it's certainly comforting to know it's a priority for them.

jeremyt 13y ago
Yes, it looks like it's not what I'm looking for. Just wanted to post in case there were others out there like me who were confused.
- Haywain 13y ago
  Have you considered using Quartz Composer? Particularly with the Origami plugin (by Facebook)?
philgr 13y ago
Antetype for Mac => http://www.antetype.com/ http://www.antetype.com/ May solve your problems.

ZitchDog 13y ago

I've used keynote for this, with some success. I'm a developer, but I love using keynote to prototype interfaces before I start coding.

iambateman 13y ago

There are some pretty sweet pencil & paper + app solutions out there, that allow you to draw the UI and take pictures of it. http://maniacdev.com/2013/06/nifty-iphone-app-allowing-you-to-turn-hand-drawn-app-mockups-into-interactive-prototypes http://maniacdev.com/2013/06/nifty-iphone-app-allowing-you-t...

radiorental 13y ago

take a look at Indigo Studio http://www.infragistics.com/products/indigo-studio http://www.infragistics.com/products/indigo-studio We evaluated it and liked it for pure interaction design.

jeremyt 13y ago
Thanks for the recommendation. It looks like a really solid option.

splatcollision 13y ago

I like the way you describe your ideal ux prototyping flow - I happen to have created something that works quite similarly: https://github.com/splatcollision/shorthand.js https://github.com/splatcollision/shorthand.js Would appreciate your thoughts on the syntax, etc. I describe it as "Like markdown for jQuery"

jeremyt 13y ago
Thanks for the link. It's an interesting idea, and if I spent very much time messing with HTML and jquery, it looks like it could save me a lot of time. My specific case is that I don't really have any HTML to work with, just wireframes. Of course, I could use a tool like Macaw to spit the HTML out and then put the shorthand into the code, but ideally I don't have to work with HTML/CSS/JavaScript at all. I'm actually looking at indigo studio that was recommended below, and it looks like it nails my use case.

camus2 13y ago

Fireworks was an excellent prototyping tool,and when I say excellent i mean the best and the easiest to use out there.It was infortunatly "depreacated" by Adobe.