Embrace design change and simplify embedded UI resizing and rebranding

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.

Innovation in voice-controlled HMI experience at Embedded World

Voice controlled Storyboard GUI with Snips AI

Sometimes I yell at my oven in hopes that it will sense my desperation and cook dinner faster. Sadly, my oven doesn’t listen to me. Perhaps it needs a technology upgrade. Like our new Crank smart oven.

We debuted a couple of new Storyboard multimodal HMI demos at Embedded World last week that incorporate voice as an input option, including the Crank smart oven. Snips voice technology runs completely on-device which keeps data private and allows for offline functionality. Combining Storyboard’s scalable, beautiful GUIs with Snips innovative voice platform on the high-performing NXP i.MX 8M is a recipe (that’s kind of punny) for a successful HMI experience. Check out the following video from Embedded World to see this demo in action.

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.


Visit Crank Software at Embedded World 2018

We are putting the finishing touches on the last of the demos and getting ready to head to Embedded World 2018 in Nuremberg, Germany, February 27 – March 1. This year, we will be filling our booth with embedded application UI demos built in Storyboard Suite across a number of platforms. Our UI design gurus will be on hand to showcase the latest features and capabilities in Storyboard Suite, our design-centric development framework for building beautiful UIs for embedded systems. Stop by 4-459 to say Hi! and check out the demo applications we’ve designed. While there, ask us to show you what’s new in Storyboard Suite for designers and embedded systems developers.

Try out Storyboard GUI demos on embedded platforms

Visit our booth to see multi-market Storyboard demos on an incredible range of platforms, including:

Our UI demos cover a wide range of markets and embedded applications, including automotive, home automation, white goods, medical, and kiosk solutions. All demos have been designed and developed in Storyboard Suite, using the latest features from our upcoming 5.2 release.

You’ll also find Storyboard demos in other booths at the show, including:

Follow us on Twitter to see photos and videos from the exhibition floor throughout the week. We’ve equipped Jason with a new video gadget, so we are aiming for 78% less shaking in our videos!

Check out the NEW!! Storyboard Suite 5.2

We are thiiiiiiiis close to releasing Storyboard Suite 5.2, so we are excited to show off the features and capabilities we’ve added for the entire embedded UI design team. Stop by the booth and ask to see it in action. Check out our new artboard import, Sketch integration, Storyboard Connector, compare and merge tool, and other exciting functionality.

If you want to get together with us at Embedded World, please contact us to set up a meeting. Alternatively, just drop by our booth and chat with us. We are friendly Canadians and we’d be happy to talk with you about embedded UI design,

As always, we provide a full-featured 30-day evaluation for you to try out Storyboard Suite first hand.

StoryboardTrialBtnSee you at the show!


Kickstart embedded UI development with Photoshop artboards

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 also test-drives all of our new features, like this one!

***Spoiler alert! Awesome feature ahead!***

In the upcoming Storyboard Suite 5.2 release, designers will be able to make better use of Photoshop artboards. The benefit of artboards is they give designers the ability to see the application design on the whole within a single Photoshop file. It’s easy to copy content between artboards, view everything all together, and keep designs organized.

Sketch to Storyboard Suite

With the Photoshop Import Feature in Storyboard 5.2, artboards can be imported into Storyboard Designer as screens. Not only do artboards give designers a better way to view and design their embedded applications, but they also serve as a way to start building Storyboard applications quickly.

What are Artboards?

The artboard basics are fairly straightforward. Artboards allow multiple designs to be viewed and worked on in a single document. A five-screen application can be designed in Photoshop using five artboards. Instead of having to turn on and off combinations of different layers to present different views of an application, or having to manage multiple windows, designers can use artboards, which act as independent designs kept together.

The New Photoshop Import Feature

Most applications use items that are common between multiple screens throughout the UI. The same background layers or menu items often appear on multiple screens. To prevent importing multiple instances of the same content into a project, the Photoshop Import feature now uses the Storyboard comparator. The comparator detects duplicate content in the PSD file and consolidates that content into one object that’s shared across the application. Smart, right?

The name given to the artboard in Photoshop will also be the name of the screen in Storyboard. If your design uses multiple design grids, you can use different guide layouts on different artboards. You don’t have to start out a project using artboards. It’s easy to create artboards from groups and layers after the fact to better design and organize content.
Artboards make it easier for designers to visualize their application look and feel in its entirety throughout the entire process. Stay tuned for this awesome feature in our Storyboard Suite 5.2 release.

If you aren’t using Storyboard Suite for your embedded UI development, try version 5.1 today.


On-demand webinar: Creating stunning UIs for MCUs

Storyboard Suite applications scale a range of MCU to MPU hardware targets. We traditionally discuss MCUs in terms of low power, low-cost real-time operation, and MPUs as delivering high-performance and an impressive user experience. But is there a happy compromise in the middle of that range? Is there a way to get high performance without highly impacting cost and resources? Can you get low power while keeping a tight focus on usability and a modern design aesthetic?

Closing the gap with the i.MX RT MCU series and Storyboard Suite

Storyboard is tailored to run optimally and as efficiently as possible on specific hardware targets, so we are always able to take full advantage of each platform’s unique performance capabilities and limitations. We recently hosted a webinar with our friends from NXP to discuss UI development for the i.MX RT series of Cortex-M7 crossover MCUs.

Check out this short clip from the webinar, where Brian, Crank’s president, discusses performance considerations when it comes to working with frame rate and optimization:

Missed the live webinar? Now living with the deep pangs of FOMO (fear of missing out)?

You can sign up for the on-demand recording of the webinar and watch the entire thing over your daily coffee in your PJs. We won’t judge.

Stunning Storyboard UIs on the i.MX RT MCU

Here’s a detailed list of the content that you can expect to see in the webinar:

  • Overview of RT family of NXP processors
  • Highlighted features of the i.MX RT1050
  • About the i.MX RT105 development evaluation kit
  • State of embedded product industry
  • Live Storyboard Suite demo
  • Storyboard architecture and scalability
  • Memory requirements
  • Performance considerations
  • Running an app on real hardware
  • Quickly testing out a design update
  • Comparing differences between two design iterations
  • Q&A

We also created a Storyboard demo image for the i.MX RT1050, so check that out as well if you are working with the i.MX RT1050.

Download our full-featured 30-day FREE trial today so that you can try out some of what you learn in our webinars.