The perks of UI design and development in Storyboard

The following is a post from Vanessa, one of our multi-talented and insanely busy in-house Storyboard application developers. Vanessa uses Storyboard Engine, Storyboard IO, Adobe Photoshop, and many other tools to bring custom UI applications to life for many of our major customers.

User interface (UI) development can be tricky, even more so when you’re building apps for embedded devices like kitchen appliances and vending machines. As an application developer with a background in interactive media design, I’m constantly amazed at how much we can create based on such little information. It seems that every project starts with a rough sketch with many holes to fill, and somehow we get amazing experiences delivered on time.

I’ve been using Storyboard Suite for over two years and it’s pretty incredible what it can do. Compared to other design tools I’ve used, I feel really spoiled with how easy Storyboard makes things.

Here are some of the things it does that make my life easier and will hopefully make your life easier too.

Develop without knowing the details

With Storyboard, I can develop the application without knowing all the details, big or small. I’ve worked on customer projects where we only had a rough outline of the UI to work with. With a basic understanding of what the application needed, I started developing the preliminary navigation, followed by the backend functionality. Because Storyboard keeps the UI separate from the backend, it was easy to abstract the development of these key pieces. Then, once the design decisions were made, I added the graphics and interactions to complete the application.

All things considered, it’s pretty hard to be stalled when using Storyboard, which helps get products out the door, and into the hands of users quicker -- without sacrificing quality or performance.

Develop without knowing the platform

Storyboard UI development is totally platform independent, letting you develop the app you want without knowing what target you are developing for. You can test the communication with the backend using Storyboard’s iogen and iorcv tools, or use a compiled C program, and then transfer your UI files onto your target via USB once you decide on specific hardware.

Once again, there’s no reason to wait to start creating your UI. This reduces the delays and holdups that tend to happen with traditional UI development.

Easy to test

Maybe worse than not deciding on a platform is not having any hardware at all! But with Storyboard, it’s easy to test your app with the desktop ‘simulator’, which isn’t actually a simulator, but our actual Storyboard Engine runtime, just designed for the operating system and graphics renderer your computer has. So, what you see on the desktop is exactly what you’ll get on whichever runtime you go with.

Easy to change and iterate

We all love change, right? Well, with Storyboard design and code changes are easy to do for a number of reasons. First, you can easily make changes to the design of the application without having to search through code to find where that piece of the app lies, especially important when you’re collaborating and someone else could have written it.

Second, having a visual, drag-and-drop tool that automatically updates everything underneath lets you easily picture and modify what the UI will look like without much stress. Instead of designing with code, running the application, navigating to the part of the application you’ve changed, and then deciding, “No, I don’t like it there,” and repeating…It’s much easier to scroll down in the Storyboard Designer editor view to the screen you want to edit, position the element where you want it, and see instantly whether it looks good or not.

Third, it allows designers to frequently test out the UI design and interaction to make sure their vision is coming to fruition, either on the simulator or on any number of real targets. This allows designers and developers to continuously evaluate together and create the best possible version of an application.

Easily run your application on a real target

No part of the UI application built in Storyboard Designer needs to be compiled to run on a target. This means I don’t need an environment setup to allow me to compile, making transferring and testing on a target pretty painless. All I need to do is export an application file, which creates an XML model file to be interpreted by Storyboard Engine, then transfer it to the target and run sbengine and point it to that model file.

In Storyboard 5.0, we introduced the SCP transfer feature which has made this process, and my life, so much easier! No more adding files to USB, transferring USB to the target, making sure it mounts properly, moving files via the command line, and then restarting the board, when needed.

Now, all of this can be done through a network connection, with files copied directly down to the target from within Storyboard Designer, and you can also choose to run a script to start your app, or do anything you want really, right after the transfer is complete. Just another reason why developing Storyboard Suite is so great.

To try Storyboard Suite for yourself (and feel like an application development goddess!), start your free trial now and see how easy it is to create beautiful embedded UIs from concept to production.