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.
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...
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:
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 cranksoftware.com, 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.
