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

Adding 3D content to embedded UIs: Importing FBX models into Storyboard

3D elements add movement, dimension, and life to embedded applications. Aesthetics aside, they also enhance user experience and improve findability of information with a visual perspective that 2D graphics lack. As processors and GPUs evolve, embedded applications are becoming richer and 3D content more prevalent.

3d

We developed features for Storyboard Suite and a workflow that supports 3D artists, with the following in mind:

  1. Most designers already have 3D design tools that they are comfortable with and use regularly
  2. Designers want to be able to update their models in their 3D design software and easily re-add them to their project
  3. Designers may want to do minor tweaks to their 3D content in Storyboard after they’ve incorporated it into their application

Import FBX 3D models in Storyboard

With FBX 3D model import functionality, Storyboard allows designers to work in popular 3D design software that they already have familiarity with and can work efficiently in. A widely adopted industry standard, FBX models are imported into Storyboard with animations, textures, lighting, and other properties that make up the 3D model. The model isn’t static after the import. Designers can tweak the animations and make adjustments to fit their application.

Iterate until perfect

Iteration is a major part of UI design, and 3D content is no exception. Using the built-in simulator in Storyboard, designers can test their application with the imported 3D content and determine what changes need to be made to the underlying model. Updated models can be iteratively imported back into the Storyboard project until the team is happy with the final 3D content.

Change lighting and camera angles

When the designer is happy with the 3D model, they might want to make some tweaks and adjustments to things like animations, camera angles, and lighting to adjust how it behaves in the Storyboard application. These properties can be refined directly in Storyboard Designer, making it easy to create a well-integrated 3D/2D user experience.

Meet Ahren, a Crank Software 3D Designer

Ahren is a 3D designer here at Crank, working on Storyboard Suite applications that span automotive, medical, home automation, and other cool markets. Ahren chooses to work in Autodesk 3DS Max because it’s a tool he’s invested a lot of hours in, which means he can work in it efficiently and confidently. Having FBX 3D model support in Storyboard optimizes Ahren’s workflow. “It’s quick and easy to import. I can test the 3D content in Storyboard and update the model as needed. Textures, materials, and animations are all baked into the model which means the behavior is the same in the Storyboard application. I can also tweak lighting and camera angles directly in Storyboard until I am happy with it.”

Learn more about working with FBX 3D models in Storyboard from Fancy Dan in this awesome demo video.

If you aren’t using Storyboard yet, download a free 30-day trial and test-drive the functionality you learned about in this post.

StoryboardTrialBtn

Webinar Series: Storyboard Suite for Embedded GUI Development

We’ve always worked hard to deliver videos that showcase Storyboard Suite features, teach tips & tricks, and provide a more in-depth look at technical functionality. Video gives us an opportunity to visually showcase Storyboard, rather than just talk about it. If a picture is worth a thousand words, a video must be worth a million? My math might be a bit off, so don’t quote me on that.

crank_software_webinar

Videos are useful because they are short, concise, and don’t require much time to consume, but because of this they can only begin to scratch the surface when it comes to showcasing the depth and breadth of functionality. To increase visibility into Storyboard Suite features, we’ve started running webinars that dive deeper and focus on different topics, capabilities and target audiences. For example, our recent webinar (now available on-demand) was geared toward designers responsible for the look and feel of the GUIs for embedded applications. We wanted to demonstrate Storyboard Suite from the perspective of the designer, so our presenter was our UI designer, Fancy Dan, who uses Storyboard daily to create embedded GUIs.

3 Reasons to check out our Storyboard Webinars

  1. You haven’t used Storyboard yet. What? We can fix this. Go ahead and download the 30-day trial, but while you are waiting for your evaluation license, check out our first webinar which provided an overview of what Storyboard is, who it’s for, and why it’s easy to use for GUI development. This is one of the easiest ways to learn about using Storyboard to create GUIs for embedded applications.
  2. You like getting a sneak preview of upcoming features. We aren’t secretive and we are proud to preview capabilities before a release. A lot of the functionality and features that go into each version happen because we value feedback from our customers. Webinars give us an opportunity to test drive these features before development wraps up. For example, our Storyboard Suite 4.2 sneak peek webinar provided a preview of upcoming features a couple of months before the official release. Customers were excited to see what was coming down the pipe.
  3. You learn from demos, not slides. Demos say a lot about a product, especially when performed in real-time and unedited. We know you’ll learn more about what you can do with Storyboard if you see it in use. We’ll probably throw in a couple of slides for entertainment value. In a recent designer-focused webinar, our UI designer walked through his process and workflow for working in Photoshop and Storyboard to create the visual design of an embedded application, including screen transitions, animations, and design iteration.

All of our webinars are presented live, but also recorded for on-demand viewing if you miss out.

If you haven’t tried Storyboard yet and some of the features in our webinars spark an interest, we provide a full-featured 30-day evaluation for you to try out Storyboard first hand.

StoryboardTrialBtn

Storyboard Suite GUIs at CES 2016

Crank Storyboard Suite at CES 2016

With 2015 winding down, we are busy preparing for an exciting start to 2016 with our much-anticipated Storyboard Suite 4.2 release and a number of technology shows. First up is CES, the Consumer Electronics Show, in Las Vegas, January 6-9. If you are planning to be at the show and want to connect with us, send us an email. We’d be happy to show you demos of GUIs built with Storyboard Suite and give you a sneak peek at features we’ve been working on for our upcoming release.

Storyboard Suite GUI demos at CES

CES is an opportunity for companies to show off the latest in tech, so you’ll see a lot of cool products and cutting-edge concepts at the show. We are excited that Storyboard is the graphic design tool suite behind a number of rich embedded GUIs and HMI experiences to be showcased at CES.

From Automotive HMI Experiences to the Connected Home

Modern automotive HMI experiences require intuitive, high-performance GUIs to ensure convenience and safety. From innovative digital instrument cluster design to in-vehicle infotainment (IVI) systems, you’ll see examples of Storyboard Suite automotive HMI demos from many companies at CES, including VisteonTexas InstrumentsGreen Hills Software, and more.

Our homes are rapidly becoming smarter and more connected, leading to increased comfort, convenience, and security. CES provides a great opportunity to showcase smart home technologies, and Storyboard Suite is behind exciting home automation demos at the event. NXP’s Internet of Tomorrow Tour will be rolling into Las Vegas, and will be hard to miss, given it’s a massive trailer housing over 100 demos. On board is the home automation demo designed for FTF2015 by Crank Software and Freescale. Atmel will also be demoing a home automation application designed with Storyboard Suite.

This isn’t an exhaustive list of Storyboard demos at CES. You’ll find other applications and exciting projects at the show with stunning GUIs designed and developed with Storyboard Suite.

We hope to see you at the show.

Demo: Storyboard Suite application demo on an STM32F429 MCU

Lately we’ve been busy crankin’ out demo videos to show off Storyboard Suite on a variety of MCUs/MPUs and Operating Systems. The tool to design and develop the UIs behind these embedded application demos–Storyboard Suite–stay the same, but the variety of hardware used for deployment speaks to the reach of our supported targets.

The following Storyboard demo showcases two applications that you’ve probably seen running on other high-performance MPUs. This demo features the STM32F429 MCU with an ARM Cortex-M4 core running FreeRTOS.

***Updated with new demos***

We’ve been updating our video library with new demos and videos. Check out our most recent STMicroelectronics demo featuring a number of Storyboard demos. We’ve taken advantage of Chrom-ART Accelerator to boost the UI graphics without robbing the core of processing power that can be best utilized for the rest of the application.

Other Storyboard demos and videos are available on our YouTube channel.

To try Crank Storyboard Suite yourself, try our 30-day trial.