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

GUI Designers: 3 Reasons You Should Register for the Storyboard Suite 4.x Webinar

***Now available On-Demand!***

Crank_webinar

This webinar is now available on demand. To watch or download the recording, register below.
Register for Storyboard Suite October 29 webinarWhy watch the webinar? Because everyone loves a good list, here are:

3 reasons to register for the Crank Software Storyboard Suite 4.x webinar for GUI design

  1. You haven’t used Storyboard Suite. Yet. What? That’s sad. If you haven’t used Storyboard Suite for GUI design and development for your embedded application projects, you’ve been missing out on such great features as:
    • Photoshop import to kickstart your GUI design
    • Built-in simulator for prototyping
    • Animation Timeline to quickly and easily create and edit animations
  2. You are using an earlier version of Storyboard Suite. That’s awesome. But your design process could be even further optimized with some of the new features and enhancements we’ve added in 4.0 and 4.1, for example:
    • Support for collaborative, team-based design and development
    • Improvements to the Storyboard Designer UI for a more intuitive and streamlined workflow
  3. You already use Storyboard Suite 4.x but are hungry for more information. You might already be a Storyboard Suite 4.x champion, but you:
    • are curious to see if you’ve been missing out on features you aren’t aware of
    • want to ask questions to our ever-enthusiastic VP of R&D
    • are excited to find out what we’ve been working on lately

Whether you’ve never used Storyboard Suite for your GUI design projects, or you are a long-time Crank customer, our October 29th webinar will be useful for you. If your job description includes designing GUIs for embedded devices, building applications for the IoT, or creating awesome user experiences for stuff with screens, you should attend. We promise not to assault you with slides. After a quick high-level overview of Storyboard Suite for those new to our software, we will dive into some engaging demos of the tool suite.

register_btn

If you haven’t had a chance to use Storyboard Suite yet, feel free to download the fully functional free 30-day trial.

Eval

See you on the 29th!

Creating GUIs for the Connected Home with Storyboard Suite and Freescale

This past Spring Crank Software participated in a project with Freescale (and other fine Freescale partners) to deliver the ultimate connected home experience at Freescale Technology Forum (FTF) 2015.

There can be a wide variety of devices and sensors communicating data in today’s connected home. So how do we visualize all of that data?

IoT Connected Home Freescale Crank Software

How do we best help home owners interact with all of the information coming from their homes, without turning the promise of convenience into an overwhelming and inconvenient reality? The answer is iterative user experience design, teamwork, and flexible tools.

The Crank and Freescale teams collaborated to deliver a solid user experience and stunning, intuitive visuals for the FTF 2015 connected home. Using Crank Storyboard Suite, the teams were able to design a GUI that could provide home owners the ability to manage temperature, monitor and control security, maximize energy savings, control lights and appliances, and even…

…wait for it…

…make coffee. Well, not robotically deliver coffee. Yet.

While I continue to sit here daydreaming about coffee magically showing up on my desk on-demand, you go ahead and watch this awesome video from Freescale, that takes you on a tour through the connected home application from FTF 2015.

Why use Storyboard Suite to design GUIs for the connected home?

The best home automation interfaces are designed with users in mind. Simplicity is key, but intuitive and easy-to-use GUIs require elegant design, exhaustive testing, and multiple iterations – which can be time intensive (and expensive). Designing with Storyboard Suite allows teams to keep UX and UI designers engaged in the entire development process, resulting in systems that are finely tuned and highly functional, without dragging out timelines. Built-in collaboration tools in Storyboard also allow multiple designers and developers to work in parallel and merge designs without impacting quality or creating a fragmented user experience. This can dramatically reduce development cycles and speed time to market.

StoryboardTrialBtn

HMI demos and Storyboard Suite at TU-Automotive Detroit 2015

TU-Automotive Detroit is just around the corner, June 3-4 in Novi, Michigan, so we are getting the Storyboard Suite demos ready to hit the road. This is a great automotive show to check out the latest in connected car technology, autonomous driving, safety & security, mobility, and more!

Crank Software is at the Detroit Auto Show

See us at TU-Automotive Detroit, June 3-4

HMI & Storyboard Suite demos in the Crank booth, C113

Stop by the Crank Software booth (C113) to see some cool automotive HMI cluster and infotainment demos on a variety of platforms, created by our talented design team using Storyboard Suite. In addition, we will be demoing the ease of designing, developing, and deploying rich HMIs with the latest features in Storyboard, so be sure to talk to us about taking a tour of our tool suite.

Partner demos

While cruising the show floor, visit the QNX Software Systems booth, #C92, to see a digital instrument cluster developed with Storyboard Suite.
Speaking of QNX, check out a recent guest post we contributed to the QNX Auto blog, to learn more about designing automotive clusters.

Storyboard Suite Free Trial

 Previous automotive HMIs developed with Storyboard Suite

QNX_concept_car_Bentley_center_stack_virtual_mechanic_nav

QNX Concept Car – Bentley Center Stack created with Storyboard Suite

From Photoshop PSD to iOS application

The best tool for any job is the one that allows you to work most efficiently and effectively, and when it comes to creating stunning graphics and interfaces, Photoshop is the design tool of choice for many user interface (UI) designers.

In traditional application development, designers create original UIs in Photoshop and then hand them off to developers who are tasked with recreating the original design with a different tool or framework. This disconnect can lead to developers spending countless hours trying to skin the application to look like the original PSD file. In many cases the final application UI isn’t brought to life as intended by the UI designer.

Storyboard Suite removes this disconnect and makes the transition from design to development easier and faster. The Photoshop import feature allows you to easily import a PSD file and begin working immediately with all your graphics and layers already in place.

Check out this video to see how quickly you can move from a PSD file to an application that is ready to run on an iOS device:

Supporting iterative interface design

In the (very likely) event that the application doesn’t look exactly the way you want the final product to appear the first time your run it on your device, the Photoshop Re-import makes it simple to refine the graphics and layers in Photoshop and re-import them back into Storyboard.

Want to try out Storyboard Suite for yourself to get a first-hand experience? Check out our 30-day Storyboard Suite evaluation.