Why All UI Designers Should Give Principle App a Try and How to Get Started

Bring your static mobile app designs to life

Why prototyping interaction is a valuable aspect of mobile app design, and why all UI designers should give Principle for Mac a try. Plus a quick tutorial on how to get started animating your static mockups.

Introduction

As a User Interface Designer, my focus when designing has always been primarily on layout, color, typography and static graphics. But as we all know, design isn't just about how something looks, it is also about how the user interacts with the product and how it feels to use. These are things that are difficult to mock-up in Photoshop though (or any other graphics editor for that matter), and for a lot of projects, interactivity is often left to the developers to figure out. Of course there are lots of tools available that can prototype animation, most notably Adobe After Effects or Framer.js. But for some reason I could never really get on with any of them. They felt like more work than was necessary to make an object move from point A to point B smoothly. Then recently I noticed a lot of beautiful interactivity prototypes popping up on Dribbble (mostly mobile UX concepts) which all had one thing in common, they were made with something called Principle App. So, out of curiosity, I decided to give Principle a try. Honestly, I was expecting to spend an hour or so trying to make a box move from one side of the screen to the other or change color, and then give up out of frustration and never touch the app again! Obviously, that's not what happened though otherwise I wouldn't be writing this post. I was of course pleasantly surprised at how easy it was to use.

Why Prototyping Interactivity is a Good Idea

Other than being fun, and making you look awesome. Clients often have difficulty visualising how an app will work in real life, when viewing static design mockups. This has been an issue in the design world for a long time (I've often had to explain to clients that you can't click buttons on JPG files). And now that mobile app design is becoming more and more popular, it has never been more important to visually demonstrate what happens when a user taps, scrolls or drags. That is exactly what apps such as Principle will allow you to do. The difference between Principle and other animation apps which have been around for a long time (such as Flash), is that with Principle it is now easy and intuitive to make these prototypes. The excuse that it is easier to just explain to clients that you can't click mockups, than it is to actually prototype them is now irrelevant. In addition to presenting to clients, visual demonstrations are of huge value to the developers that will be bringing your app designs to life. Not only making their lives easier and removing guess work, but also ensuring that the results match what you as the designer had envisioned.

How Principle Works

Principle should be familiar to anybody who has used Illustrator, Sketch or Flash previously. It is based around using Artboards and a timeline. Artboards are like the 'Key Frames' or the start and end points of a particular animation or interaction. And the timeline is used to define the animation speed, delay, smoothing etc. between those artboards. Any object can be animated, provided it exists on both start and end artboards and is not identical on both. Principle automatically creates a smooth default animation when you add a trigger event such as tap, scroll, drag or touch for any attribute that has changed, ie postion, color, size. The animation usually looks pretty good as it is, but can of course then be tweaked in the Timeline. It really is as simple as that! There aren't a whole lot of drawing tools available (just rectangles and text actually) but that's what apps such as Photoshop or Sketch are for. Assets such as logos, buttons and custom shapes can simply be dragged onto the canvas to import and use.

A Quick Getting Started Guide

To help get you started with using Principle, here is how to create a simple interaction:

Step 1: Draw or Import Your Assets

Assets can be created in Photoshop, Sketch or other graphics application and then dragged onto the Principle canvas to import. Simple elements such as text and rectangles can be drawn directly in Principle. Notice in the screenshot below I have added two 'slides', one is in center of the artboard and the other is off to the side.

Step 2: Duplicate the Artboard

When you have your first artboard set up, duplicate it and make the changes that you want to happen. In this situation, we want to move the second slide into the center of the artboard instead.

Step 3: Choose an Event

Highlight the element on Artboard 1 which you want to initiate the interaction (Right Arrow Button) and click on the lightning bolt icon to bring up a menu of actions. Select your desired action from the menu and drag it to Artboard 2. Repeat for the opposite on Artboard 2 to go back to the beginning.

Step 4: Tweak the Animation

Open up the Animate panel to see the timeline, and highlight the transition you want to tweak (which is the X position in this example). Drag the handles in the timeline to increase the length of the animation, or choose a different transition type.

The Result

In just a few seconds we have created a beautiful, smooth animation. Although this is a very simple animation, the same principles can be used to create more complex animations and even full app prototypes quickly and easily.

Conclusion

If you're wondering at this point whether I'm affiliated with Principle in some way, I can assure you that I'm not. And I'm also not suggesting you go out and buy the software immediately either. But if you would like to expand your design process to include interactivity, in a familiar environment that doesn't require learning complicated software or code. Or even if you just want to create some pretty GIFs for Dribbble, I think you should at least give it a try!