3 min read

Embrace design change with UI resizing and rebranding

Featured Image

The following is a post from Fancy Dan, one of our creative and talented in-house designers. Dan uses Storyboard Suite on a daily basis to create awesome user experiences for embedded applications. He's also the dulcet voice behind our Storyboard videos.

There are a lot of moving parts involved in building embedded applications. Every step in the product development process can influence the UI and contribute to changes, which is why it’s essential to be able to manage design iteration. Some products are turnkey applications that are delivered to companies with custom branding and a unique look. Other applications require a reskin to be modernized, use different modes, or introduce new features. The best product experience is a result of design iteration, but development can’t always wait for the design process to be completed before starting. A change in the supply chain could result in having to use a new display with dimensions that don’t match the original design.

Support UI rebranding and resizing and build better products

Storyboard Suite uses workflows to keep the design process flexible while preserving the application’s functionality. Changing the design of the UI is a reality, but it can’t come at the expense of development progress, which is why we built and continue to refine the re-import feature. Storyboard takes advantage of the comparator that looks at a new design from a Photoshop file and compares it an existing application.



The new re-import view provides the user with a view of their Photoshop file in the context of the application model, a preview of the different screens from their application, and a side-by-side comparison of existing project content and items that have been redesigned. With this new view, users can preview how their re-design is being applied to their project and with more control.

Individual attributes like positioning and size can be applied. Incorporating new fonts with different colors, replacing old images with new ones, and adding content are all options that are provided to users. In addition, variables and actions associated with the original content are maintained, so that animations, Lua functions, and other functionality is carried forward with the new content look.

In an ideal workflow, refining the UI shouldn’t interrupt or halt development work that’s in progress, and ongoing development shouldn’t exist in a vacuum or keep the design team out of the loop. Products with a solid design come from teams that can accommodate changes that were never planned for without putting the brakes on all aspects of the workflow. UI solutions that rely on a rigid development process introduce design limitations and lead to products with compromised usability.

Bad design will always result in frustrated users which means that everyone loses. Users care about the usability and look and feel of the final product, so a design that functions optimally matters. Being able to manage UI change helps teams deliver applications that don’t compromise on design or development, which results in products that are more likely succeed than those with poorly executed product design.

As always, we provide a full-featured 30-day evaluation for you to try out Storyboard Suite first hand. The evaluation contains our latest release, Storyboard 5.2.