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 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.


Windows 8 Review

Over the week-end I installed Windows 8 on my laptop.  For the most part it was a pleasant experience.  Setting it up  was quick and painless. For me, this is the first installation of Windows that felt new since Windows 95.  Most of the Windows versions since 95 have been the same implementation, with just some tweaks or superficial changes.  Windows 8 attempts to break the mold that it’s predecessors created.  For proof of this look no further than the removal of the start button, the once iconic symbol of the Windows OS line.

That break from the norm does come with a cost however.  The system does feel a little disjointed.  Having some applications run in a desktop view, while others run in a full screen metro view contributes to this feeling.  There are reasons why desktop apps had to be designed this way based on the current desktop application architecture, which are  mainly centered around accessing system resources.  However it would be nice if in the future they could come up with a solution that allowed desktop applications to run in their own Metro view, and just remove the desktop all together.  The start screen would be considered the new desktop, and you would work with your applications within this environment.  I believe that would give the workflow a more unified feel.

The look and feel of the system is nice.  It has adopted a minimalist approach, with a very concise use of space.  The data that an app considers to be the most important is presented foremost at the left of an application.  Extraneous information that needs to be accessed a little less frequently is typically off screen, and can be accessed by scrolling the view.  The interface does take some getting used to, but once you memorize where to put your mouse to invoke menus like the systems menu, it becomes fairly easy to use.  The metro apps do have a bit of an Android feel to them, as they explain the resources that they will be using while they are running.  The nice added feature to this is you can actually disable access to unnecessary services.

Overall my experience with Windows 8 has been fairly positive.  I am enjoying exploring this new take on their OS.  I look forward to seeing where they take this down the road.

– Rodney

Are you buying a new iPhone 5?

Many of you are aware that Apple held a press conference last week where they announced the new iPhone 5. If you didn’t, you must be living in a cave in Siberia or something. The announcement wasn’t mind blowing. There had been rumours circulating for a couple of weeks prior to the press conference which were pretty bang on. Besides being a little thinner, getting a larger display, and some hardware performance enhancements, the UI and functionality as a whole remained pretty much the same.

I was hoping Apple had “one more thing” before the conference was over but to my shagrin they did not. So then I started thinking that maybe Apple was starting to loose some of its steam (what ?!?!? blasphemy). Don’t get me wrong, the new iPhone 5 is a sweet looking piece of hardware but was that enough for individuals to dish out another chunk of change being the iPhone 4S is still relatively new? Well apparently it is enough … “AT&T says it set a sales record for the iPhone 5, with customers ordering more of them than any previous iPhone model on the first day of preorders and over the weekend”.

So what is attracting people to fork out all this dough or to break contracts and paying stupid penalties to get their hands on the latest and greatest iPhone? Is it just the “me too” effect or the Apple fanboys (you can’t tell me there are that many of you out there 😉 ) creating all this buzz? Or were the minor hardware tweaks enough to satisfy everyone out there on the verge of buying an Android or Windows phone? You can’t come and tell me it is the UI. It has been pretty stale since it was first introduced in 2007. Wicked at the time but now that functionality or that way of interacting with the mobile device is expected.

That brings up a good question … what will be the next or new expected way of interacting with mobile devices? Will the UI be there to be physically manipulated with or will it be more of a feedback mechanize to display requested information by some other means? Will speech be the new way of communicating with the device like we are starting to see with Siri and other Android devices? Maybe it will be via facial expressions or maybe we will skip all that and plug the sucker directly into our foreheads 😉 A discussion for another blog post I guess … “Plugging Stuff Into Our Foreheads”

It just frightens me when a company has such loyal followers that they can change the colour of a button on a device and individuals storm out to buy it 🙂 This all coming from a fella who still owns an iPhone 3GS which got discontinued last week … sigh.