Designing My Dream Animation App
The whole idea for making my own animation app came when I realized one simple thing: The core of animation is about portraying motion. This is completely different from the core of illustration, and yet when we think of “animation apps” most of them are actually illustration apps that happen to have animation tools added on to them. Even the apps specifically made for animation tend to look like simpler versions of those illustration apps.
When I sat down and really brainstormed what my perfect animation app would be like, I realized how many features I would want to scrap, in order for beginners to not get distracted from the real goal. Because while illustration techniques like lighting and coloring can be applied to animation, for beginners it is just a waste of time.
I thought to myself, why not make a tool that has a super simple set of tools, but each tool is perfected so that learning animation can be as enjoyable and distraction-free as possible?
I got tired of waiting for this app to appear on the app store, so here we are. Since I need a base knowledge of Swift before I am able to make any kind of progress in the coding part of the app, in the meantime I am trying to really hone the design of the app. So, without further ado, here are some concepts that I have come up with:
The most important part of this app’s design is the timeline, because this is what artists are going to be constantly interacting with.
In this concept, the “current frame” is always in the middle and will be the frame that all interactions will be based around. A traditional timeline has a bunch of pre-set spaces that frames can be placed on top of, and the artist needs to do some calculations to leave enough space between frames so that they can add “in-between” frames later on. This always felt super limiting to me, so instead I made adding in-between frames exactly the same as adding regular frames.
Dragging on frames to rearrange them is a must, but also easily scrolling back and forth between frames is essential.
So that these two gestures do not conflict, my thought right now is that the user can only pick up and drag the frame that they are currently on, and then if they drag on any other part of the timeline it will scroll through the frames.
Onion Skinning! This is one of the more complicated things for beginners to understand, but I think I have come up with a way that makes it super simple. The key to this is “Onion Mode.”
Basically, when you press the Onion button, it will show you on the timeline exactly which frames are currently being included as Onion Skins. You can then click on specific frames to add/subtract them, or simply drag more frames in to be included as Onion Skins. For some reason a lot of other apps have the Onion Skinning tools in a completely separate window than the timeline, but I think that showing it visually on the actual timeline will make it so much easier to understand what is going on.
Write in the comments all of your questions and feedback, it is so encouraging to hear from you guys! My next post will probably be an update about my journey as an artist learning how to code. Thanks for reading!
Zoe Olson
Ps. You can read the announcement post about this app here :)
