Designer/Developer Workflow

One of Maqetta’s key design goals is to create developer-ready UI mockups that promote efficient hand-off from designers to developers. The user interfaces created by Maqetta are real-life web applications that can be handed off to developers, who can then transform the application incrementally from UI mockup into final shipping application. While we expect the Maqetta-created mockups often will go through major code changes, Maqetta is designed to promote preservation of visual assets, particularly the CSS style sheets, across the development life cycle. As a result, the careful pixel-level styling efforts by the UI team will carry through into the final shipping application.

To help with the designer/developer hand-off, Maqetta includes the following features:

• Simultaneous editing in design, source or split view - Maqetta allows users to modify HTML pages using the visual page editor, a source code editor, or simultaneous edit HTML pages in split view, where design view and source view appear simultaneously. In split view, any change in design view automatically updates source view and vice versa.
• Download as ZIP, with library relocation - a “download into ZIP” feature to create a ZIP image that can be imported into a developer tool workspace (e.g., Eclipse IDE). Upon clicking on one of the download icons (on the Files palette toolbar), the user is presented with a dialog that allows the user to decide whether JavaScript libraries (e.g., Dojo) should be included in the ZIP and whether Maqetta should move the JavaScript libraries to a different folder location within the ZIP. Users might want to include JavaScript libraries in the ZIP if they want a fully functional stand-alone package that can run in the browser on its own. (Note: the JavaScript libraries can be large and dwarf the size of the other code.) Users might not want to include JavaScript libraries in the ZIP if the ultimately objective is to import the code into a developer tool such as IBM Rational Application Developer that includes options for setting up JavaScript libraries such as Dojo, in which these libraries might be pre-existing within the IDE’s workspace. User might want to change the location of JavaScript libraries at ZIP creation time because the target environment might expect JavaScript libraries at different locations than how Maqetta is set up. For example, default location for Dojo in Maqetta is lib/dojo whereas the IDE might expect Dojo to be at location dojo.
• Relocate libraries in the workspace - Instead of relocating JavaScript libraries at ZIP creation time, the Maqetta user can relocate JavaScript libraries in his workspace to a different, preferred location. To relocate libraries within the workspace, users can click on the Modify Libraries icon found in the Files palette.