1

I want a tool that allows me to design the screens pixel-by-pixel (almost like i took a screencap of the webpage) and gives me the option to export the entire screen into XHTML/CSS.
Does anybody know of such a tool?
As a note, I am NOT looking for something like Balsamiq. I want to create very detailed UIs--NOT wireframes.

yeahumok
  • 2,940
  • 19
  • 52
  • 63
  • 1
    Not really - there are tools on a mac and I think photoshop and dreamweaver have options to export to html, but they create some horrendous code. I'd suggest the better thing to do is learn enough about how you want to code it up - learn some re-usable css and tackle it the hard way. If you're pressed on time - try dreamweaver? – MyStream Mar 04 '12 at 01:52
  • Microsoft FrontPage? :-P – Klaus Byskov Pedersen Mar 04 '12 at 01:52
  • Erm… Dreamweaver and [competitors](http://en.wikipedia.org/wiki/Comparison_of_HTML_editors)? – Andrew Marshall Mar 04 '12 at 01:53
  • no no...i don't mean a WYSIWYG. I actually mean a tool that allows a Interaction designer or a User Experience person to create a mockup and then have it render into a demo-friendly prototype. I'm looking for something similar to Axure. Does anybody know any other tools besides that? – yeahumok Mar 04 '12 at 01:59
  • I think you mean something like Adobe Fireworks? a hybrid of a photo-editing software and IDE. As far as i know, it works like photoshop but has HTML exporting capabilities. Haven't found an open-source or free alternative though. GIMP would be the closest, but it's more of photo-editing. – Joseph Mar 04 '12 at 02:38

4 Answers4

0

You may take a look at ForeUI: http://www.foreui.com/

You can design the GUI with any fidelity, and define the interaction like a flowchart. The UI and interaction can be exported to HTML+CSS+Javascript.

Xavier Young
  • 368
  • 3
  • 8
0

Axure - mockup tool but very detailed.

Microsoft Sketchflow - haven't tried it, but if I understand correctly it's designed for round-trip-engineering, so it probably does what you want

IgorJ
  • 418
  • 4
  • 8
0

Axure RP is the program that you're looking for. It allows you to create advanced mockups with the ability to add interaction to it. You can also export your mockup as a HTML-document to get a full interactive experience looking just like a "real" website. If you're a student, you should be able to get a free license.

I've used "Axure RP pro" for every interaction design project I've worked on (and with great results), I would really recommend it.

And no, I'm not working for the company.

sand
  • 15
  • 6
0

I think Axure is probably the closest to what you are after. It's designed for the tasks you want whereas the other tools mentioned are more focused on the needs of developers and designers. Is there any specific reason why you are not going with Axure? Cost?

I am using Omnigraffle Professional and I'd like to create prototypes so I am thinking about diving into Axure (I have the Axure RP beta 6.5 installed but barely touched yet) but I'm not sure the cost / benefit is there for me but I do worry about suggesting solutions and then after the first build realising they are not right.

There are many simple UI/Wireframing tools created by single developers or small teams, but I suspect as you add in complex functionality like the prototyping you get in Axure, the list of options reduces - to a list of one in this case unless there is one I've missed?

Added:

http://uxpin.com/ - there is an export feature.

Brian MacSweeney
  • 1
  • 1