Thoughtbrain Bloggers

Designery nerdy things.

Prototyping Animations with Keynote

by admin on April 3, 2014, 5 comments


It’s crazy town right now with animation tools. There’s many out there that get the job done, some better than others. There’s still a learning curve for some of the better programs. Scott Hurff has a great post summarizing all of the animation tools out there. The thing to remember with prototyping, you want to be able to just make it fast and move on. You don’t want to be spending a week figuring out Quartz Composer or After Effects, especially if you don’t have a week. (But if you do, these are amazing tools to know) I’ve even used Flash, because I know it, but I’ve also had to record a video of my screen with my phone once cause it wouldn’t #!$*&^% export smoothly. So that’s when I started looking for other options.

I’d heard of people using Keynote for prototyping screen flows and I knew Keynote had upped their game on animations recently. So I decided to check it out. There’s no custom animations, so everything is kinda canned. But it gets the idea across better than waving your arms and making noises like a trained monkey, and that’s all I needed it to do. I don’t want to spend my time perfectly crafting an animation if the developer is just going to have to recreate it again anyways. (But if you do want to create something that the developer can just import into XCode, I would check out the beta of Flux cause it does just that.)

One of my complaints with Keynote is you’re limited to the canvas size being in landscape and there isn’t a way to choose the exact size you want. BUT I’ve figured out recently that not only does Keynote export smoothly into a Quicktime movie, but Photoshop also opens Quicktime movies.

This part is kinda annoying but it works. Export a Quicktime movie from Keynote, which saves it as a .mp4 file. You have to then open the .mp4 in Quicktime and resave it as a .mov file. Next you have to do the drag-the-.mov file-to-the-Photoshop-icon thing to open, rather than a native File > Open, because it weirdly doesn’t give you the option to open a .mov file that way. Photoshop allows you to crop the .mov file and export it back into .mov or an animated .gif. Super annoying but super helpful.

**Update: I was told you can set a custom size, therefore eliminating this step. But its good info to know if you do need to crop movies in the future.**

Alright, now that I’ve said all this, I want to show you the guts of a keynote animation that I made and hopefully give you the gist on how to easily do this yourself. You can download my Keynote file here, so you can physically tear it apart like a tiny scavenger.

What I’ve prototyped is this game animation below. (The full version didn’t gif out completely, so here’s the full movie file too) It’s a simple shoot out style game that has characters coming in and out, jumping up and down. It’s a now abandoned idea, but it got the message across to the developer on how to treat the individual objects and the timing.

Shootout Animation
more →

JamSnap: Your Photos, Your Sounds.

by admin on January 25, 2014, no comments

I’ve been working on this project for awhile now and I’m pretty proud of what Mayank and I have accomplished so far! I just finished this animated gif with a quick explanation on how to use the app.

You can download JamSnap from the App Store. It’s free! There’s lots of features that we’re working on that are coming soon!

How to help your iOS dev in Xcode, as a designer.

by admin on December 10, 2013, one comment

The first few seconds when you hold a beta of an app you’ve been working on in your hand, is this awesome feeling of delight, mixed with a little bit of narcissism (ya, I did that). The next several seconds, you start to notice all the tiny designery things that the developer didn’t get quiiiiite right. Move this up 5px, change that font to bold, add a 1px stroke around that box, etc. The developer I work with calls it having a “Jenni Session,” where we sit down together and tweak all the tiny visual things that are bothering me. I’m glad that he cares enough to let me do that, but it would save so much time if I could just do it myself.

I’ve heard about designers that work in Xcode with their developers, and I’ve tried taking a tutorial or two to get more familiar with it. I’ve been surrounded by developers all my life, a developer father, brother and now a developer husband. I often joke that I feel like a kid that grew up with code as a second language; where I can read and understand code but can’t write it myself except for some basic things. Sometimes I kick myself for being so stubborn on NOT trying to learn code when I had so many opportunities growing up, but I was insistent on being the artsy one in my family and didn’t want to be like them. I’m still a bit stubborn, but I know it would be smart for me to be more involved.

Then I saw a post on Medium from Julius Tarng, the designer at Potluck. The title itself pulled me in, “Designers: you can Objective-C, too! How you can help your iOS engineer by getting into production storyboards and Objective-C — if they let you.” This looked exactly what I was looking for. A way to get more involved with the pixel perfection in Xcode, but doing minimal damage to the actual code.

There’s a couple of things with storyboards that didn’t make sense in my design mind: The Navigation Controller is screen-shaped, looks exactly-like-but-sits-in-front-of the View Controller (the screen you’re actually mocking up), but you can’t put any visuals on it. But if you want to apply certain characteristics to that screen, it has to be applied to the Navigation Controller, not the View Controller. Or how you can easily tell a screen to respond as a modal, yet there’s not an equally as easy way to make a close button to get out of that modal. For anyone that wants a good hint at making that close button, check out my friend, Bryan Clark’s, stuff on Github that he put together to help me with this. Go Fork with it. heh.

Just a day or so later, Meng To wrote another equally helpful article, “Learning Xcode 5 As a Designer,” that went a little bit deeper on Storyboards through a tutorial with files attached so you could mess around with it yourself and see how it was built. By the end of the day I had my own working prototype in Xcode. I rebuilt some existing screens of my job’s current app since I already had the layout and slices done. It’s pretty easy to figure out the basics of Storyboards and feels a little bit like keynote. The best part was, I didn’t get least bit frustrated, I was actually getting kinda giddy. That same excitement of seeing something that I actually built, in my hand.

There were a couple of things I got stuck on, but I just went back and forth between the two articles and found some other things online. The dev at work was more than happy to help explain things to me, and was even more excited at the idea of working like this on the future iteration of the app.

Later in the week, Meng To released another article/tutorial with attached file examples about his new product, Canvas, which allow you to animate in Xcode without code. This is what I’m playing with now, but I haven’t quite mastered it yet.

So anyone that is a mobile designer, I encourage to you at least play with the tutorials that Meng provided. It feels good to learn something new and it might actually help you understand what you’re making a little better.

Photoshop Animation Techniques by Alex Grigg

by admin on December 3, 2013, no comments

Alex Grigg has a great hour long tutorial on how to animate in Photoshop.

The layout of the tutorial-

Part 1 Getting Started-
All the key features that you’ll need to know in order to get animation out of Photoshop. These include an introduction to the animation timeline as well as the steps you can follow to export your animation.

Part 2 Clean-up, Colour and Creating Actions.
A step by step walk through for creating some the actions that will help you speed up your animation workflow – including creating colour layers, effective bucket filling and creating your next frame.

Part 3 Extra Tips and Tricks-
A few extra tips and tricks to help you get started animating in Photoshop. These include using preexisting videos in your animation, better manipulating the timeline and how to export gifs from Photoshop.

(credit: @walterstephanie)

The New Disruptors podcast with Glenn Fleishman

by admin on November 21, 2013, no comments

TheNewDistruptor_podcast

Glenn invited Alli and I on a podcast to talk about how XOXO inspired us, how we got to San Francisco, playing Cards Against Humanity with Glenn, App.net and how we manage a full time job with our various side projects. Whew, we talk alot.

Listen here:
The Labors of Job with Alli Dryer and Jenni Leder (Episode 50)

Fabulous Fashionistas

by admin on November 20, 2013, no comments

I really admire these fashionable older women.

By Director: Sue Bourne.

A new TV documentary on Britain’s BBC4 has been tickling people’s fancies across the pond and stateside. “Fabulous Fashionistas” features six women of advanced years who share a love for style and a “screw that” attitude to the standard dictates of age.
(via: Senior Planet)

Great tool for developers : GluePrint

by admin on November 20, 2013, no comments

GluePrint is a mac app that allows you to simply drop a mockup and overlay the image on top of your work to see how it compares. Position with the arrow keys and scroll to adjust the transparency. Pretty sweet for only $5.

glueprint