Thanks to everyone who came out to my talk + workshop tonight! Thanks to PARISOMA and DesignLab for putting on the event. 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. Here's the slides from the talk: Also here's some helpful links: Wireframe Tools • Paper & pencil + POP app - free! • Apple Keynote for Mac (also available for iOS) - free! • OmniGraffle - $100 • Balsamiq - $89 • Adobe Illustrator - starts $20/mo • Sketch - $99 • Gliffy - free & Pro options • Invision - free & Pro options Wireframe Inspiration • Mobile Patterns • Pttns • UI Patterns • Wireframes Magazine • UX Archive • UserOnboarding • Articles on Medium about wireframing • How to run a design sprint Anyone who wants to learn more about the design side, I have a list of all the UI/UX resources I've used.
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. Together we've made this app and both hope it's just as useful to you all as well. Here's how it works: (sorry the backgrounds on the gifs are not all white) 1. CHOOSE A TEMPLATE You can choose from portrait or landscape, with or without an iPhone frame. 2. ADD YOUR SCREENSHOT Tap on the iPhone screen to add the screenshot from your photo album. I made one specific for screenshots to make them easy to find. 3. CHOOSE YOUR iPHONE Tap on the iPhone frame to cycle through a range of iPhones. There's a label that appears over the status bar to indicate which iPhone/iPad frame is being displayed. 4. CHOOSE BACKGROUND Tap on the background and choose either an image or color for the background. This one is a bit trickier due to the space where the text goes. It's best if you tap on the left or right of the iPhone frame and not the top. 5. TYPE YOUR TITLE AND DESCRIPTION Tap on "TITLE" or "DESCRIPTION" to edit either. You will be able to choose the font, size and color of the text. It's also easy to go back and edit the text after you close the keyboard. 6. SAVING YOUR SCREENSHOTS You can choose to save your screenshots to either your camera roll or Dropbox. When you save with Dropbox, it will place the screens in the "Apps" folder in a folder named "Screenshot Tool Storage." This way the Screenshot app will not need to authenticate your entire Dropbox account, it will only authenticate what it needs, which is the "Screenshot Tool Storage" folder. It exports all the sizes you need for the App Store, from iPhone 4 to iPhone 6+.
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.You can also download it in HD or SD as well as view the slides.
A story that has stuck with me through life. 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.” Something to remember.
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 thing you have to do is slice all the individual graphics that you need to import into the project (which with keynote is easy as dragging the file onto the artboard as you need them, yay easy!). You can also copy and paste illustrator vectors. I start with a phone background that already has the background graphic/color, title and status bar. Then I start animating things. For lots of things that need to slide in an out, you might want to create shape panels on either side of the phone image to cover up all of your animation trickery. This might be good to add at the very end, as you'll have to Bring to Front each time you do something.
If you're not familiar with Keynote animations (alot has changed in the new version too), this is will a brief overview.There are three basic animation tabs:Build In, Action, and Build Out. Each object you place can have any or all of these applied to them.Build In is how the object appears on the canvas, Action is what the object does while hanging out there. Build Out is how the object leaves the canvas. With each of these options, you can set the duration, tell it when to start as well as set a delay of when it starts. There's a long list of animations to choose from and a really nice way to preview each option after choosing the animation. Each of these animation tabs has a window with the Build Order, think of this like your layers palette in photoshop. After you have set an animation to your object, it will appear in the Build Order. This is where you set the time when one animations starts compared to another animation. There's three options to choose how to Start the animation: On Click is more for presentations, it lets you start an animation by clicking on a mouse or the arrow key. With Build means the animation with go with the build, at the same time as on the layer on top of it. After Build means the animation starts after the layer above. Pretty self explanatory. There's also the option to Delay the time of each of these operations. A good way to use this is for Build 2 to start With Build 1, but to delay it by 5 secs, instead of waiting for the animation to finish. As you start animating, you'll start to notice how much you want to speed things up. This is a good trick to do that. In the third slide (below) of the example keynote, the animation gets pretty layered and complex. The canvas gets cluttered and hard to read. This is really where the Preview button gets used alot to understand what is going on. I wish there was a way to show/hide some Build Layers in this instance. You can also animate the transitions. If you click on an individual slide (the left panel), the transition options show up. The most useful is Dissolve, the coolest one is the Magic Move. The transition of the dark grey background with the blue background moving up from the bottom was made with Magic Move. You can download the keynote file here to check it out. Magic Move figures out which items have moved on each slide and then tries to tween them. It works sometimes, when it doesn't is when I rely on Dissolve. The strongest feature that Keynote has to offer is in the Action panel. The Move action lets you draw a line where you want the object to move with dead simple easing (ease in, out, both or none). If you have used Flash, it's like doing a motion tween but even easier. You can also throw in a Scale action. The animation below shows off a mix of the Move action and Scale action. You can download the Keynote sample here. - Starting with one circle, Build In the Fly animation to enter the canvas. - Select the Action tab, Add an Effect and choose the Move action. The Circle defaults to move off to the side and the Build Order defaults to On Click. You can grab the second "moved" circle Shape (I'm calling it Shape B) and place it where you want. The circle Shape B in the Build Order will need to change to After Build 1. You can also pull on the red line between circle Shape A and B and curve it, add points and really make it wiggle, instead of just going in a straight line. - You can keep adding more Move/Scale actions until all of your movements are set. If you want multiple circles moving around like in my animation, I would set up all the movements of the first circle, then add each one individually. The second circle will follow With Build under every step. This is where it comes in handy to import your own graphics so you can tell which graphic is which, unlike mine. I've added labels here to illustrate the order of the 4 moving circles in my animation. The line division shows where the animation changed to start After Build, instead of With Build. In the image below, Build 5 begins an animation. Then Build 6,7,8 are set to Start With Build 5. Build 9 starts a new animation and will be set to Start After Build 8. Also, if you dig around online, some people have made things you can drag into the keynote that are already animated. One that was helpful with the game was this countdown timer from iPresentee. I hope this helps you get started, feel free to ask me questions on twitter or email!
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!
Last week I got to attend this Designers + Geeks meetup to watch a presentation by Luke W. I really enjoyed it and it's now available online.
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.
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)