Bringing Sketch designs to Storyboard

Sketch to Storyboard Suite

We talk a lot about removing barriers to embedded development for Graphic Designers, keeping them engaged and supported throughout the lifecycle, and enabling them to work in popular 2D and 3D design tools. Adobe Photoshop has been the most popular in the design toolkit, so we’ve worked hard to ensure that designers could leverage the best of Photoshop when creating artwork for import into Storyboard. Because of this, importing PSDs into Storyboard is a quick and easy way to create applications.

Growing adoption of Sketch for user interface design

So, have you heard about Sketch? If you’re a designer, we are willing to bet you’ve either heard of it, work with it currently, or are planning to evaluate it. Sketch has garnered rapid adoption for UI design.

“It has grown in popularity like I’ve rarely seen an app do in the recent past, and for a good reason: The developers of Sketch have figured out exactly what interface designers have been looking for and have steadily added functionality to address those needs.”
Why I Switched To Sketch For UI Design (And Never Looked Back), Smashing Magazine

While we aren’t advocating the use of one design tool over another, we always work to stay educated on industry trends, tool adoption, and how to best support our customers. In fact, we have several in-house UI designers, so they have their finger on the pulse of the design industry and provide valuable feedback to our R&D team so that we can improve Storyboard release-over-release.

With the growing adoption of Sketch as a UI design tool, we’ve started working with it here at Crank, and have committed to supporting it as another source for importing content into  Storyboard applications. In our next release, you will be able to export your UI design from Sketch to be packaged for import into Storyboard. This feature is still in development being tested and refined, but if you are currently working with Sketch and Storyboard and want to get early access to the functionality, contact our Support team and we will hook you up.

You aren’t using Storyboard Suite? Take it for a spin. Download our FREE 30-day trial.

Creating a medical HMI with Storyboard Suite

The following is a post from Nik, our awesomely bearded and multi-talented Field Application Engineer. Nik recently attended the Microchip MASTERs event in Phoenix, Arizona, and describes the making of the medical demo that we brought to the show.

Storyboard Suite medical demo for the Microchip sama5d2

If you were at Microchip MASTERs 2017, you might have seen the Patient Monitor demo at the “Ask the Experts” table. Perhaps you saw the demo at the Crank Software booth and spoke to Jason Clarke or me about it. If you didn’t get the opportunity to see it live, read on to learn more. This medical HMI, created in collaboration with the fine folks at Microchip, showcases how Storyboard Suite can help you quickly prototype your UI, foster collaboration between designers and engineers, and deliver a polished product to market faster.

The goal of this medical demo was to take real data from medical devices and display it in an aesthetically pleasing, feather-rich, and user-friendly UI. The system powering this demo is the Microchip SAMA5D2 Xplained board running Linux. The following Microchip medical breakout boards are connected to the SAMA5D2:

With multiple pieces of hardware communicating to the UI, we needed a couple of design iterations to create the UI we envisioned for this setup. Storyboard allowed us to iterate designs quickly and easily by importing and reimporting content from Photoshop. We did not have to start from scratch each time the design changed. The application logic and event bindings that were previously declared stayed in place and Storyboard took care of managing the new assets. When we had a design that we were happy with, we moved on to integration.

In the integration phase, UI and engineering teams come together and connect the UI to real data. Storyboard IO enables this merger by allowing an IO interface to and from the UI. Defining a structured event and data protocol over Storyboard IO has a number of benefits. It forces a clean separation between low-level business logic and UI logic and it allows the UI to be developed in parallel to any back-end systems. The event protocol was defined early on in the design, which made the integration cycle fairly seamless. I was able to work on the C application which handled all the interfacing to hardware devices while one of our designers built the UI in parallel. When implementing features like live trend data in the UI, we were able to easily inject simulation data via Storyboard IO without needing to connect to actual hardware. With the hardware interface completed, it was simply a matter of dropping it in place. Many bugs had already been ironed out due to the ability to use simulated data, so the final stage of this project was focused on fine-tuning and tweaking the experience.

When I hooked up the UI to real data we were finally able to polish and stress test the system. The final phase was to ensure that the UI was smooth and responsive under heavy load before demo completion. Initially, there was some event flooding when all four breakout boards started sending event data at the same time. Having four active data streams also highlighted some areas for optimization in the UI which led to faster redraw times. While the designer worked on tweaking the UI, I was able to modify how frequently the back end sent data. After a few quick iteration cycles, we were able to finalize the Medical demo that shipped to Microchip MASTERs.

This easy iteration and Storyboard’s collaboration support meant we were able to work in parallel without compromising the design or underlying code in the process. The end product is a user-friendly, aesthetically pleasing, and high-performance medical UI.

To try a Storyboard application on a Microchip platform, download one of our pre-packaged and easy-to-install demo images.

If you aren’t using Storyboard, start your free trial now and see how easy it is to create beautiful embedded UIs from concept to production.

StoryboardTrialBtn

Try it now: BeagleBone Black demo image

Curious to see Storyboard Suite in action on your hardware? Our pre-built and packaged demos make it easy for you to test drive different types of applications designed for specific hardware platforms, letting you experience the powerful controls and smooth animations that create beautiful UIs and rich user experiences.

BeagleBone Black demo for medical, white goods, and home automation

The BeagleBone Black, powered by a Texas Instruments AM335x processor, is a popular platform with a rich development community and is small, easy-to-use, and powerful for creating innovative applications.

This demo image includes the following applications:

  • Smart washing machine – drill down into operational settings and track progress through cycles
  • Medical – browse through typical patient diagnostics, electronic health records (EHR), and security verification
  • Home automation – play with temperature controls, check out local weather, and customize lighting throughout the floor plan

Also included are the instructions you need to easily and quickly get the demo running on your own BeagleBone Black platform.

Download the Storyboard BeagleBone Black demo image

To try Storyboard Suite for yourself, start your free trial now and see how easy it is to create beautiful embedded UIs from concept to production.

StoryboardTrialBtn

5 capabilities that entrench embedded UI designers in the development process

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. I asked him to share the top 5 features that make his job easier and his designs awesome.

Storyboard Suite top features

Dan’s top 5 list

  1. Integrate content from Adobe Photoshop » Storyboard brings a .psd file to life
  2. Add and refine motion easily » Easy to use, but do a lot
  3. Layout and position content precisely » Subtle features that go a long way
  4. Enhance user experience with actions » The combination of trigger events, actions, and parameters
  5. Make it real. Touch the design. » From simulator to target

Integrate content from Adobe Photoshop

As a designer, I find working in Storyboard to be a great experience, and a major contributing factor for this is the Photoshop integration. Photoshop has been around for decades, and it plays nicely with Adobe Illustrator, two tools that I use to design and plan a UI. Many of the design-based decisions I make in Photoshop, such as organization, naming, and planning, are brought forward to Storyboard when I import my .psd. When I start working in Storyboard, I’m working on a project that I already have a good handle on because the Application Model in Storyboard is based on the content from my layers view in Photoshop.

With Smart Objects, I’m able to go back into Photoshop and make edits to my Illustrator content or layer effects and bring them back into Storyboard. Because I can import multiple Photoshop files into Storyboard, when I complete one section of the UI design I can bring it into Storyboard and start adding functionality. At the same time, I can continue to work on the UI design for the next section and bring the UI together in Storyboard as each part is ready for import.

What’s extra great?

The Photoshop re-import process. If I change the look and layout of an existing design in Photoshop, I can re-import the artwork into my Storyboard project. The project compares itself to the new Photoshop file and allows me to replace existing content with the new designs and updates the look, size, and positioning from my redesign and retain existing functionality.

Add and refine motion easily

animation_timelineMotion makes a UI come to life, so it’s important to have a workflow that includes working with animations. In Storyboard, working with animations isn’t convoluted. If I want to create, edit, or preview an animation, it’s pretty straightforward. When recording an animation, changes made to the UI are recorded as animation steps and saved. The animation timeline view shows the saved steps. Here I can see the steps in relation to one another and make further edits to the timing, easing rates, and values. Using the animation preview, the animation can be played back, paused, and scrubbed through so that I can see how all of the movements work together.

What’s extra great?

I can quickly create a reversed version of an existing animation, finely tune the ease rate of motion, and apply a single animation to multiple model objects. These capabilities allow me to easily control how things move without having to touch any code.

Layout and position content precisely

When the design is complete, most of the UI layout has been established. Further refinement like adding logic, motion, and additional content is easy with the layout and positioning options in Storyboard.

reference_calculator

Reference point location – The reference point location might appear to be a small detail, but it does a lot for controlling the position and transformation of an object. The reference point location icon is available in the Properties view for dimensions. The top-left reference point shows the x,y location of an object, but selecting another reference point shows and applies transformations based on that relative point. If I want to increase the width of a control by 50 pixels, and have the center point remain the same, I shouldn’t have to move the control 25 pixels to the left and then add 50 pixels to the width. I simply want to add 50 pixels to the width that expands from the middle and let the software figure out the rest.

Property value calculator – An easy way to control the values of a property is to calculate that number in the property field. If I want to move a control 20 pixels left to a third of the way across a screen designed at 720p, I could go to the properties view X: positioning and enter 1280/3-20 (which is the screen width divided by 3, then subtract 20) or enter 1280*.333-20 (which is the screen width multiplied by one-third and then subtract 20) and the X value will automatically calculate 406. If I want a circular progress bar to fill up 43%, I can enter 360*.43 in the Rotation field and the angle will calculate to 154.8º.

Applying some quick math makes it easy to land content in a specific spot. I can apply it to an alpha value, apply it to an offset, or apply it to the timing in an animation. It saves me from going to a separate calculator app, writing it out, or doing it on my phone.

What’s extra great?

Q: Does it use BEDMAS? A: Yes, it does.
Q: What the heck is BEDMAS?

Enhance user experience with actions

It becomes increasingly engaging to work on a UI as it takes on more functionality. Adding actions to the UI improves functionality. There are a lot of combinations and triggers that make actions happen so I’m not limited by what I can do.

Storyboard provides an extensive list of trigger events that goes beyond the basic taps and gestures that are available in most prototyping tools. Many things can trigger an action, such as the completion of an animation, arriving at a particular screen, completed timers, scrolling starts or stops, etc. With a trigger in place, I can select an action. Actions can call an animation, stop an animation, go to a new screen, change some data, start a timer, or, for those who are are scripting savvy, call a Lua event. Depending upon the type, an action’s parameters can vary. An action parameter might cause something to loop, indicate a direction, set a duration, or select an external file. Events can happen any number of ways, to any of the model objects that trigger an event.

What’s extra great?

I can copy an action from one control to other controls. For example, I can copy a screen change action from one button and paste it to other buttons to give them the same functionality.

Make it real. Touch the design.

Working in design, sometimes your work is used only as a representation of the UI. This isn’t limited to UI design. Mock-ups, presenting artboards, and showing prototypes for apps or websites are great, but at the end of the day, seeing the design in the real world and its surrounding context is awesome.

Storyboard keeps the design in the designer’s hands, which enables me to deliver my design vision to the final product. In traditional workflows, this often isn’t the case, and instead, the UI on the embedded device isn’t a reflection of the designer’s work. It’s common for designers to create prototypes that demonstrate how the UI should look and behave, and then provide the development team with the UI assets to create the UI in code. It’s an inefficient workflow to have the development team recreate what the designer has already solved.

Storyboard provides tools that make it easy to quickly export applications directly to hardware for testing. Seeing how an animation runs or how a transition looks on an embedded device gives me insight and confidence that the UI performs as intended. Good design principles value function over form. Using Storyboard, I have everything I need to test how my design will function on an actual target device.

What’s extra great?

I can test my application on an embedded board, make changes to the UI, and then export the app back to the board in under a minute.
*Drops Microphone*

To try Storyboard Suite for yourself (and to feel like a design rockstar), start your free trial now and see how easy it is to create beautiful embedded UIs from concept to production.

StoryboardTrialBtn