Accelerate and Simplify Embedded GUI Development

Image

Easily design, develop, simulate, validate, 

                     and deploy beautiful graphical interfaces.

 

Crank Storyboard™ Designer enables user interface (UI) designers to easily design the look and feel of a product, and then deploy a production-ready interface directly to the embedded target. Designers maintain full control over the UI and user experience (UX) without having to perform a hand off to an embedded systems engineer for implementation.

 

ImageFrom Design to Implementation. Fast

Getting a product out to market on time and on budget is no easy feat. Storyboard Designer helps make this a reality by enabling a rapid development environment. Graphic Designers can easily import Adobe Photoshop PSD files into Storyboard Designer. Using the imported PSD file the embedded engineer can quickly start applying actions and events to controls of the application.

 

 

ImageSmarter, Collaborative Workflow

What Storyboard Suite brings to the table is its abliity to be used throughout the entire development cycle. PSD files from your design team can be easily imported as a foundation for your application. System Engineers and Graphic Designers can then work together to add functionality or other image assets to your application. Without the need to compile your application, you can very quickly simulate the application on your desktop to immediately see the changes that were made.   

 

ImageFrom Functional Prototype to Real-World Production

Testing your application prototype on your desktop is simple with the simulator that is built into Storyboard Designer. Because the simulator in Storyboard Designer is the same as the engine used in the production environment, you get an accurate simulation of the final application look and feel. This provides ease-of-mind during the design and development process that the final application in production will look and behave as expected, creating less churn at the end of the development cycle.

 

 

 

Bring Design to Life with the Photoshop Import Feature


Design in Photoshop

Storyboard Designer integrates beautifully into the User Interface development lifecycle. UI design tends to begin in a graphics application, with Adobe Photoshop usually being the defacto choice. A Graphic Designer will start by sketching and refining their ideas in Photoshop. We wanted to keep the Designer within their comfort zone by allowing them to continue using a graphics application they are very familiar with, but also provide as easy way of enabling the Designer and Systems Engineer to work more closely together.


Import Your Photoshop Design to Storyboard

In the past, the Graphics Designer would hand off their prototype UI design to the Systems Engineer to reproduce within their development environment of choice. Unfortunately much time and resources were wasted reproducing the UI prototype this way. The Storyboard way is to seamlessly transition from prototype to development with a simple import. We wanted to make the process of transitioning into developing the UI as easy and seamless as possible, while keeping the integrity of the design intact.

ImageIterate the Design. Re-import Changed Graphics

Once the PSD file has been imported into Storyboard Designer, the engineer can quickly start applying actions and events to controls of the UI application. We went a step further and provided naming conventions that the Graphic Designer can use in Photoshop to make the import even easier. During the import process, Storyboard Designer looks for these naming conventions and automatically adds events, actions, and variables to the controls. Because we know that image and graphic assets change frequently during the application lifecycle, we made the import process flexible for re-importing PSD files as the designer evolves the UI.

Videos

 

ImageImageImage

Create, View, and Refine Animations With Ease 

Image

 

ImageRecording Animations

The Animation Recorder tracks all changes made to to the application and automatically creates a new animation reflecting the activity between the start and end points of the changed items.

 

 

 

 

 

Image

 

Multi-Step Animation Recording

Create multi-frame animations with the animation snapshot action capability. Record content with greater detail by capturing multiple keyframes within an animation.

 

 

 

 

  

 

ImageAnimation Timeline

The animation timeline helps you quickly create the perfect UI. Creating and editing animations is simple with animation scaling and reverse animation. With animation scaling you can easily adjust the overall duration of an animation in milliseconds or by percentage instead of changing the values of each step. The reverse animation feature carries out the same steps in the opposite direction, providing a slick way of rolling out changes made by an existing animation.

 

 

ImageAnimation Preview

Animations often require multiple edits and iterations to get them looking just the way you want them. The Animation Preview allows designers to preview animation refinements directly within Storyboard Designer in an easy-to-use playback window that can show an animation in full, or frame-by-frame. This preview allows animations to be perfected efficiently, without interrupting workflow.

  

 

Test out Designs Immediately

 Image
When designing and refining a User Interface, you need to be able to see your changes reflected in real time. Storyboard Designer includes a simulator to allow you to easily test the look and feel of the application as you make updates. Using the simulator, you can click buttons, enter text, and interact with the application to get a feel for how it will perform before you export it to the target device. Because the simulator in Storyboard Designer is the same as the engine used in the production environment, you get an accurate simulation of the final application look and feel. This provides ease-of-mind during the design and development process that the final application will look and behave as expected, creating less churn at the end of the development cycle.
Image

Rapid Prototyping

To prototype effectively, testing is essential. Interactions between users and applications become more natural with every iteration. As an application is developed, the desktop simulator provides an instant feedback cycle to drive how various components should look and behave. Being able to perform these feedback cycles frequently guides the interface to become more intuitive and inline with the users' expectations.  

Easily Make Your UI Ready for the World

The ability to easily translate content in user interfaces supports international business growth. Storyboard makes translating and internationalizing the text content of your application a straightforward activity. Translated text content is treated the same as any other dynamic content that is rendered to the display. Storyboard provides two editor functions that allow translations to be quickly prototyped in the design environment.

 

ImageCreating translation strings in Storyboard is made simple with the Create Translation function. The function scans through the application and identifies all of the text variables that are used and extracts them to a user editable translation file containing the Storyboard variable key and the translated text string. You can use the translation file as the basis for performing a dynamic load of translated content, or to ensure that the UI is appropriate for different language configurations. 

 

 

 

 

Image

The Apply Translation function scans the project for suitable translation files and presents you with a dialog that allows you to immediately change all of the variable definitions in a project to the values declared in the translation file. Previewing the UI with the translated content allows you to easily make UI changes or adjustments to suit the changed content.

 

Image

Video - Create and Apply a Translation

See how simple and fast it is to create and apply a translation to a project.

Share the Workload. Work as a Team

Embedded application projects usually involve a team of people, rather than a solitary designer seeing an entire project through to completion. With traditional linear methodologies taking a backseat to more agile and lean models, features and functionality are often developed in parallel, rather than in an assembly line fashion. Storyboard Designer enables a parallel approach where multiple team members can collaborate and work seamlessly together throughout the entire product development cycle.

 

Image 

Using a collaborative approach, the graphic designer can create the initial UI and import the images into Storyboard Designer. The embedded UI developer can then start on attaching actions and events to the imported files. As the project progresses the artwork is likely to change, so the graphics artist can continue evolving the UI while the embedded engineer adds complexity to the underlying software foundation of the product. 

 Image

 

Designers and developers can stay in sync by using the Collaboration view within Storyboard Designer to compare changes and merge the individual components they require. This collaborative process leads to a final application that is a product of the best of the skillsets of the entire team. 

Image