Creating mockups at OTRS with WireframeSketcher
Marc Bonsels30. Jan 2013 | Development
Disclaimer:
The practical examples presented in our technical blog (blog.otrs.com) and now in the expert category in our FAQ blog section serve as a source of ideas and documentation to show what is theoretically possible with OTRS in concrete scenarios or sometimes even for more exotic configurations. All configurations presented here were developed under laboratory conditions as a proof of concept.
We can only guarantee testing and implementation of these concepts to be error-free and productive if implemented in a workshop with one of our OTRS consultants. Without this, the responsibility lies with the customer himself. Please note that configurations from older OTRS versions may not work in the newer ones.
Today I want to share some thoughts with you about the wireframe sketching tool we use in the development compartment here at OTRS. Nearly every time we create a whole new screen (or a series of screens) for the OTRS framework, we use WireframeSketcher. WireframeSketcher is a wireframing tool to create mockups, wireframes and prototypes for desktop, web and mobile applications. It is available as a standalone desktop app, as well as as an eclipse plugin (also available for other eclipse-based IDEs).
With WireframeSketcher, we are able to create mockups with standard elements such as buttons and other generic form elements, boxes, accordeons, link lists, text boxes and notes in a very easy and comfortable way. Another great feature of WireframeSketcher is its ability to create so-called “stories”. A story is a series of mockups which are connected to each other on a storyboard. In this way, we are able to create clickable screen series without creating any HTML dummies. This is very helpful for us to share our understandings about new screens with the team and to create a first experience of how the new screens are to be used.
After finishing your work, you can export the mockups as images (such as png), HTML or PDF. Make sure to check out http://www.wireframesketcher.com/ for more information.