Those who are interested in learning more about this topic or others, I recommend checking out DesignLab, where I mentor. They offer classes on Design 101, a great beginner’s start on design fundamentals. They also offer more in-depth User Experience, Research and Interaction Design courses. Those who were in the class at PARISOMA can get $50 off your first class by clicking here.

There’s been many websites that allow you to easily place your app’s screenshot into a device frame and it’s made everyone’s life a tiny bit easier. Placeit is one of my favorites (They also do video). While working on an app together, Mayank usually asks me to put some screenshots in a device frame for him. I happened to be away on vacation when he needed this done. When I came back from vacation (a mere weekend!) I found out that I’ve been replaced with an app.

For those who don’t know Mayank, the guy is constantly full of ideas. Ideas that make his life easier. Ideas that help him be more lazy. That’s the big secret. Mayank is a lazy developer that gets shit done. It’s the only way I can explain it. He makes apps (which as you all know takes a bit of time) to allow him to do less in the future. One of these times, he was tired of waiting on me and got frustrated trying to figure out how to do something simple in Photoshop. He stopped and asked himself, “Why can’t I just do this on my phone with an app?”

So that’s how Screenshot App was born. It’s kinda genius. You’re already taking screenshots of the app with your phone, this saves the step of syncing with your computer and making it in Photoshop or Sketch.

The other thing about Mayank is that he knows how annoyed I get with his attempts at design. I think he makes it bad on purpose. When he shows me, I’m so appalled by the ugliness (but amazed by the idea) that I agree to make it look and function better. So that’s how I got involved.

Most of the WWDC videos are developer related, but there are a couple designer ones this year. The one I’m most excited to watch is from the Apple Prototyping team AND THEY USE KEYNOTE TO PROTOTYPE! (I have an overview on how I do this here). It’s available to watch online now (you must use safari to view it) and it’s called “Prototyping: Fake It Till You Make It” with designers Jeffrey Traer Bernstein, Linda Dong, Julian Missig, and Mark Hauenstein.

Make better apps by trying things out first, before you write any code. Get a glimpse of Apple’s prototyping process and the range of tools and techniques we use, some of which might surprise you.

I remember when I was in elementary school and there was that kid that everyone made fun of. He was the smelly kid. I would watch the kids torment him and I laughed along with them. One day when my mom was meeting me at school for our walk home, I noticed she was carrying a bag of chocolate M&M’s.

I immediately thought they were for me and I said to my her, “MOM! I want some of those!”

And she said very calmly to me, “No, these aren’t for you”. We stood staring at the school doors and she was waiting. I didn’t understand what was going on.

“MOM! Why aren’t we walking home!”

She said, “Just a second, Jen. Be patient!”

Out comes the smelly kid. My mom walks over, calmly talks to the kid. His eyes cast low at the ground. She hands him the M&Ms and they share a smile. I’m very confused. Does she know him? Why is she talking to him?

And then we start walking home.

I ask my mom, “Why did you give HIM then M&M’s, Mom? No one likes him! He smells bad.”

Mom said, “Everyone needs someone to be nice to them sometimes. You have to see it from his point of view. Do you like it when your older brother teases and aggravates you?”

I gave her a sullen look and said “no”, while pouting.

“Well how would you feel if your brother did that to you all day while you all day school AND while you were home?”

“I wouldn’t like it.”

Mom said, “Well, You should remember that the next time kids are being mean to him. Put yourself in his shoes.”

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.

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.

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.

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.

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.