Crank at Automotive Cockpit HMI USA 2015

It’s nearly mid-May which means a couple of things:

  1. Spring has FINALLY hit (Go Canada!) so we are starting to thaw.
  2. It’s time to load up our GUI demos and hit the road (airports) for some of our favourite embedded industry shows!

First stop – Automotive Cockpit HMI USA 2015, May 19-21

Crank Software at HMI USA 2015

We love automotive technology. And we love making it look better and more user friendly. Visit Crank Software at the Automotive Cockpit HMI USA 2015 show next week to check out some demos of automotive HMIs we’ve built with Storyboard Suite. Of course, you’ll be able to touch and interact with the automotive demos so that you can experience first-hand the beauty and user-focused refinements that can be created with a GUI design tool that keeps graphic designers involved throughout the entire development cycle.

For some other examples of HMI applications designed with Storyboard Suite, check out the QNX Bentley Concept Car and the Mississippi State University EcoCAR.

Crank Software goes from design to develop

We will also be showcasing the latest features and enhancements in Storyboard Suite, and providing quick demos to highlight some key features that make designing GUIs for automotive fast and painless, without sacrificing quality or function. Here are a couple of examples of demos you might want to catch:

  • Photoshop Import – There’s no faster way to kickstart GUI design in Storyboard Suite than starting with your existing artwork. Also, here are some PSD to Storyboard tips!
  • Animation Timeline – The Animation Timeline helps you quickly create the perfect UI by providing a quick and visual editing environment for creating GUI animations
  • Photoshop Re-import – Design change is inevitable, so we developed a way to easily update artwork–without causing design churn and throwaway code

This is just the tip of the iceberg, so if you are at the show make sure you come find us because we are super friendly Canadians and we love talking to industry folks. If you aren’t going to the show, you can always download the 30-day trial and try your hand at making awesome GUIs.

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.

Iterative UI design with Storyboard Suite’s Photoshop Re-import feature

“We nailed the UI design in one take!”
Said no user interface design team. Ever. Nor should they. Design takes time.

User Interface (UI) design process isn’t linear, and design and graphics aren’t finalized and locked down after the initial creation. Initial embedded UI designs can be a bit of a stab in the dark. At best, they are an intelligent guess based on what we know about the customer requirements in the early stages of development. It’s possible that the hardware hasn’t even been selected for the final product when the design process starts. With Crank’s Storyboard Suite, that’s ok.

Crank Storyboard Suite for a better way to do embedded user interface design and development 

Storyboard provides a change-friendly solution to modifying an application with the Photoshop re-import feature, allowing designers and developers to continually improve prototypes in parallel, without negatively impacting existing functionality.

Photoshop Re-import Design Iteration

Following the principles of Lean UX, teams iterate through assumptions and designs. What we think we know at the beginning of a project evolves into something entirely different by the time a product goes to market. Storyboard allows teams to follow agile processes to quickly create UI iterations to test assumptions.

After creating your prototype in Storyboard, you can simulate the application on your desktop to immediately see the changes that were made. Taking hands-on testing a step further–because you never really know how a product feels until you get to interact with it–you can export the application and run it on an Android tablet to get a real feel of the UX and verify that the workflow makes sense. When refinements are required, you can easily update the project in Storyboard using the Photoshop re-import feature, and re-export the application. Ultimately, this testing and refinement leads to a beautiful final design that meets customer needs.

So how simple is it to import design changes into a Crank Storyboard application that’s already in the midst of development? Check out the video to see for yourself.

Using Storyboard for the First Time…

My background is in print design. If I could describe myself with software I’d say Adobe Illustrator, InDesign, Photoshop, before delving into programs I used less often like Dreamweaver, Flash and AfterEffects. So hooray for all those Adobe products, they are the tools of a graphic designer, but what to do about designing a functional app? How do you do that with Photoshop? You do not. This is the story of my first time using Storyboard Designer.Storyboard Designer is Brilliant

With my background in print design I’m the sort of guy that felt special when I made buttons with rollovers. The idea of me creating is almost ridiculous. Starting was easy, I downloaded a 30-Day Trial and installed Storyboard Designer. Then I opened Storyboard Designer… *GASP Different Software Splash Screen! entering the unknown.

I think I had a fairly typical reaction to Storyboard if you consider that I’m afraid of change. I started a new project and I messed around until I got to a point where I didn’t know what I was doing anymore and then I ran away, not literally, just to reddit and watched some new movie trailers.

When I decided that I would Storyboard a second time, I went back to the Crank Software website and procrastinated by watching videos. One video that stood out to me was how to import a Photoshop file. That sounded promising because:
a) I know how to use Photoshop; and
b) it showed me how Storyboard integrates with Photoshop

There was also an Animation video which was interesting because:
a) it was quick and not all that complicated; and
b) it sounds super impressive to print-designer friends1 if you can make an app AND it has animations

With these videos I was just copying everything I saw. I would reload the videos, pause them while I caught up following along, then continue, pause, catch up etc. Things were going much better than my first attempt. Overall it was smooth sailing, but it was a little awkward being in a new place for the first time.

A new software environment had all these new views…

  • Properties View
  • Actions View
  • Variables View
  • Application Model

I made the transition from confused individual to self-proclaimed genius when I grasped that a layer in Photoshop isn’t a layer in Storyboard. These were some slow realizations that came to me:

  • A Layer in Storyboard is kind of like a Group Folder in Photoshop that you use to keep stuff together
  • A Control in Storyboard is kind of like a Layer in Photoshop.
  • Controls were just boxes that had images or text in them which is a lot like working with InDesign or Quark.
  • To plan and organize an app is similar to how you would plan and organize for a website.
  • A project folder in Storyboard is really similar to how InDesign projects are structured with a folder for images, fonts etc.
  • The Application Model is basically like a giant Photoshop Layer Palette
  • • All of the above… enlightenment.

The Application Model in Storyboard made me think about the Layers Palette in Photoshop. They’re very similar except in Storyboard you could put more types of ‘stuff’ in there, Screens, Layers, Controls, Actions, Variables and Animations. You can change the order of ‘stuff’ by dragging it up and down in the stack.

At the time, my brain was overheating with all of this new material. I would compare it to going to party when you meet 10 people for the first time and you try to remember all their names… difficult. If there was an inner monologue of me trying to keep track of what I was working on it would have sounded something like this:

… so I just made a variable, and the variable belongs to that control… which is kind of like a photoshop layer. If I have one of these action/event things happen… like touching that button control thing, it’s going to change the value of the variable and that’s going to make that control thing change.

I’m happy to report that after spending more time using this tool, that everything is more familiar and less awkward. If my Present Day Self had to show my First Time Storyboard Self how to use Storyboard I would start by saying…

Storyboard Designer = WYSIWYG design of user interfaces.

Then I would explain how everything goes together in Storyboard’s Application Model: Application – Screens – Layers – Controls. Then I would show how to organize a Photoshop file before importing into Storyboard.

After that, I would spend a lot of time looking at the Properties View and talk about Variables. Understanding properties and variables makes it easy to show how those co-relate to actions and animations. All of that makes it easier to see what’s happening on a whole when you do something like pressing a button to move to a new screen with other content. It was pretty simple after I understood how these things were connected.

The more time I spent with Storyboard the more it made sense. On, there’s documentation and a forum that can answer a lot of questions you may have. Another thing that I found really helpful were demos. You’re just looking at how someone else has done something and can learn from it as an example and apply it to your own work accordingly.

In my opinion there’s no such thing as a stupid question when you’re learning how to use Storyboard. Of course I would say that because I had a lot of questions starting out…
…how can i
…where is the
…why does the
…are you able to

Storyboard has similarities to programs you may have used, and it is different in several ways too of course. The more time you spend with this tool the better it gets. To export a finished project and run it as an app on an Android tablet is a satisfying feeling. Being able to achieve this sounds like a lot of work, but it doesn’t take as long as you might expect.

Try the 30-Day Trial, and install Storyboard Designer and see what you come up with.

1 print-designer-friends — realize it’s possible to create apps with dynamic content, but they think it requires magic and science working in harmony, because they spend most of their time with paper.