Episode Links

Abridged Transcript

Gary Rozanc
For me, I think movement and animation is a new core design principle alongside composition, color theory, and typography. I don’t think it’s just an ancillary design principle anymore. Yet, it’s not ubiquitous like good typography is. So, why has the adaptation of movement or animation taken—to me, it seems—a slower pace?
Val Head
I think there’s a couple reasons for that, especially on the web. I mean, up until maybe less than five years ago, we didn’t have a way to add motion in a way that could be semantic and properly belonging to the web. Doing things in Flash or other similar plugins, or even jQuery sometimes, just felt like once removed from the web, right? We were building sites with CSS, HTML and JavaScript, but to make things move we’d need to toss in a big Flash square essentially, and that was this weird part of your site that wasn’t really attached to the rest of the site. You had to make a lot of compromises to make that work in a way you wanted to if you cared about semantics and accessibility and usability in general.
So, I can’t think of exactly what year all that changed, but it’s pretty recently that now CSS can do a lot of that stuff; browsers have gotten much faster at interpreting and executing JavaScript so we can actually use other things besides jQuery, we can even use Canvas and stuff if we wanted to. And then there’s the whole SVG situation, which is just, like, magical amazing-ness and confusing-ness all in one. We have so many options now that are really properly native to the web and that we can control using the same tools we’ve always used to build websites, and I think that really changes things for us. We can use the same tools we always had and we’ve always used to do this new thing—new to us, maybe not new to everyone.
But I think the other reason it’s not quite caught on as much is it’s just something we don’t have a background in. Most web designers haven’t taken any animation classes, they don’t have a motion design degree, they probably don’t really even know much about the field of motion design, it’s just not something we ever really come across in our typical web design education, whether it’s just formally at school or just reading blogs… Even if you only read things like A List Apart, animation didn’t get mentioned there until pretty recently, so. I think it’s just kind of been this thing that maybe has just been right outside our regular realm of where we were and what we read and what we learned about, so we just never quite got there.
Gary
In the big picture, yeah, we just haven’t had the technology around that long.
Val
Yeah.
Gary
But—and I wish I had time to fact-check this right now—responsive web design and media queries came out not that long ago and… I mean, now it’s expected that your website’s going to be responsive. So really, you can almost make the argument that there’s no longer responsive design because that’s just now become web design.
Val
Yeah, I think they were tweeting about the five-year anniversary of the article a couple months ago, so probably about five years, yeah.
Gary
Yeah, and so animation has been around—if it wasn’t adopted back in IE9, it was shortly thereafter, right?
Val
Yeah, it’s been probably maybe three or four years that we’ve really been able to use it, because a lot of it is the older browser stuff and everything. On top of those other two things, animation also just had a really bad reputation on the web. You just talk about web and animation and people are like, “Oh, skip intro, banner ads, ew, yuck, get me away from that!” It kind of comes with its own baggage in that sense too, which is maybe unfair. Well, it’s unfair but also not unfair. Like, there’s some terrible skip intros, there’s some really awful banner ads, it’s totally true. But I feel like we can do so much better than that, and ignoring it because of what’s been done in the past is not really the right thing to do. We can change that and do way better things now, so why not embrace it and try it as opposed to being like, “Well, it was crap before so we’re not doing it anymore.”
Gary
I agree with that sentiment. I can’t remember what blog or what article I saw it in, but somebody broke out the 1992 version of Apple’s original homepage. It was awful, and if we had stopped there because it was awful and because nobody knew how to use the technology the way they could print, we would be stuck in that rut of still having that. But people pushed the boundaries and pushed forward with it, so I’m kind of surprised animation and movement don’t fit into that same mold.
Val
Yeah, I think maybe it’s partly that people feel it’s a little bit of an extra thing, too. I know I’ve been told this when writing articles or pitching articles and stuff, is people feel like things—like responsive design is “very important and fixing a serious problem,” and they still feel like animation is this kind of extra thing you can maybe add if you want to. But they just questioned the design value of it, which I’m like, “Well, I could talk to you a lot about the design value of it, but if you don’t want to hear it, I guess I’ll just take my article elsewhere…”
Gary
Your most recent article, you compared it to good typography. It’s a detail thing. Yes, of course the site is still going to work, of course the site is still going to function, but it’s just going to be a better, more intuitive experience if animation and if movement is included. I think one thing that always shock me about that though—I teach web design, I teach responsive design and I started with the fundamentals, but students always gravitate any time that they’re doing their mock-ups towards putting in movement. They want carousels, they want lightboxes, they want parallax scrolling, they want all of that before they even focus on typography. I think they equate movement as content or in the place of ideas. So, how do you get these new designers to focus on content and layout before enhancing with movement? Or do I have it backwards? Maybe movement is where to start from in animation.
Val
I like that they’re trying it out, because I feel like even if you’re going to it first and even if you’re doing it, for lack of a better word, wrong or maybe it’s not the best choice, the fact that they’re going to it first I find very encouraging, because that’s the opposite of what most working professionals are doing now, it’s the last thing to look at. So, that gives me some hope, like “We will change our outlook on this!”
But I think one way to get them to focus on the content and make them fit is to just ask “Why is that there? Why is that moving?” and if you can’t answer that, maybe it doesn’t need to be moving, or maybe you just need to rethink what’s moving, and why, and when. Because if you can’t answer why it’s moving, then it doesn’t really have much purpose. It’s kind of the same way as if someone asked you “Why did you pick that headline typeface?” If you’ve no explanation… And the reason can be anything, from this huge long essay about how “the designer of the typeface lived in the same era as the subject of this article,” or it could just be it had really strong corners and nice parallel lines, so it fit with the clean… There’s a huge gamut of explanations that are perfectly legitimate design explanations, but you just need to have thought of one or have one.
Gary
I also feel bad too, because I like the fact that—you’re right, you should be excited that every student wants to have something moving across the screen. Whether it’s for the right reasons or the wrong reasons, they want something animated. I guess the frustrating part for me is like, “Well, you can’t even adjust the margin on your H1 elements yet.”
Val
I guess it’s the same thing as wanting all the typefaces on your webpage. Eventually you realize that no matter how much you love type, you should maybe just, you know, limit yourself to a couple.
Gary
I’m surprised I don’t have this overabundance of wanting to use typefaces. It might be just because that’s how I start off—the first project I start off with, it’s a single “We’re going to do it mobile-only so that we do this long, tall, narrow column and we pick four typefaces and that’s it,” and they have to work in a system, so. They haven’t had any experience, so whatever I say to them they think is the right thing to do.
So, this is a large question: what is your working process for working on a project or when to apply animations, and how do you actually do it? In the early stages when they’re doing wireframing and sketches and mock-ups, how do you incorporate movement into that? And animation, in addition to everything else that needs to be shown?
Val
I work independently, so I tend to end up with a lot of different teams, so I kind of adjust my process based on either the client or the team’s process since I’m usually not the person completely in charge of everything, which is nice. But I try to think of animation as early in the process as possible. I find that if you don’t, you run into problems later. It becomes harder to implement or harder to argue for, even just in the sense of having time to do it, if you wait too long into the project. If you’re at the end of the project and everyone’s almost hit their cap of billable hours and you’re like, “And we should add some animation!” people are going to be like, “No, we don’t have the time! This needs to launch!” So the earlier you can start talking about it and discussing it, the better, if for nothing else to avoid that situation.
But I like to start thinking about it even in just the sketching phases, of “How, at the minimum, could this brand or this project or whatever it is that the focus of the site is about… how could it be expressed in motion, what kind of motion would express the same values or the same message of this brand?” and then kind of look for ways to put that in there. A lot of the time, it’s the obvious things, like buttons or state transitions, things like that. Then to actually start putting these into usually rough sketches at first, then when we get to the point of doing things like element collages and that kind of thing, actually adding little mini-storyboards in there, like “Here’s the behavior of the button and how it might animate. Here’s three cells, effectively.” Things like that.
Or if it’s something like the way something might enter the screen or leave the screen, of kind of storyboarding that out, not so much to demonstrate every detail of the motion in that phase but really to have it be something to talk about. Because usually when you’re presenting things like element collages, you’re talking to your team or your client, so when you get to that part, you’re like, “Hey, this is what I’m thinking about the motion for this particular piece of content or particular object in our design,” and then just kind of carry that through as you go. Like when you get to your in-browser mock-ups, actually have some of that in there.
On some of the projects, I don’t actually end up touching too much of the code, so I’ll create some little motion mock-ups. I tend to use After Effects, but I know a lot of other people use Flash or something, whatever you’re comfortable in, to kind of take that little storyboard or those elements from Photoshop or Sketch and actually try to animate them and just be like, “Here’s how this would move or how it might actually look.” And to also use that when you’re talking to the developer, of just like, “Here’s what I have in mind, here’s why I want it to work like this. How can we make this happen?” A lot of the time, it might not always be one to one—you can’t do the exact same motion you see in After Effects on the web. After Effects is kind of a really fancy tool, you can make it do a lot of things you could never replicate on the web. So, use it as a way to move things forward and a way to show people what you’re thinking vs. doing that pixel perfect thing of “make it look exactly like this, or else.” That’s worked pretty well—of having it in there as early as possible, working to a motion mock-up, and then getting to some kind of usable prototype, which always tends to be the part where you end up finessing things a lot because you realize, “Oh, when I click on this and that animates like that, it’s too fast, or it doesn’t quite read right, or it doesn’t feel like it responds fast enough,” or that kind of thing.
So, getting to that prototype as fast as you can in your process is pretty important, especially when you’re animating interactive things. The sooner you can actually try to interact with it, the sooner you can figure out how good your motion is for interacting with and what you might need to change or adjust.
Gary
One thing that kind of shocked me—because whenever I get a chance, I like to talk to designers, especially ones that just kind of graduated, just to see like, “Hey, what could we have done better and what were you shocked at?” She said, “Oh, I wish we could’ve learned Keynote.” I was like, “Why do you wish you would’ve learned Keynote?” She’s like, “Well, all the animations, at least the iOS animations, are built like transitions in Keynote.”
Val
Oh, that’s true.
Gary
She was like, “I’m designing in Keynote all the time to mock-up these animations.” I didn’t know what to say to that. I was totally shocked that that’s a tool now.
Val
Yeah, I’ve heard that from a few people, that they do motion mock-ups and stuff in Keynote, and even wireframes in Keynote, which I think is interesting. I don’t know, I’ve never used it for that, but it seems like it’s a really popular tool for that.
Gary
Yeah, the tool you mentioned, After Effects, that’s what made the most sense to me. Like, “Oh, I can do all this. I can show students how to do this in After Effects and get the message across.” But I never…
Val
But also, After Effects is this huge mammoth tool. I use it because I learned it in school and I kind of know how it works. But if you knew nothing about it, Keynote sure sounds a heck of alot more approachable than After Effects, and probably a little bit more to the point. If you’re just doing motion mock-ups for interfaces and after effects, you’re probably not using 85% of the tool. So, Keynote maybe makes more sense. But it’s all in what you know, right? If you can get that across with whatever you need to use… I guess that changes when you’re working with a team, because you need to all agree on something or else it’s going to be chaos. But it’s not so much the tool, it’s what you’re trying to get done.
Gary
One thing you’ve mentioned a couple of times now—you’re an independent designer, you don’t really work for a firm. But every time I heard you mention something about how you work, you used the word “team.” I think a lot of students think, “Okay, my choices are I’m either going to be this independent freelance designer…” and I don’t think they realize just how much of a team sport design has become.
Val
Generally all the projects I take on fall into two different categories: it’s either me working directly with a client, which is still totally a team effort because if you don’t work with your client, how are you going to come up with a good solution for them if you don’t actually consider them a part of your team? But I guess the more traditional team aspect I work on a lot of the time is I team up with other independent folks. So, I basically run my own studio, which is essentially just me, but that really limits you to the size of project you can work on. There’s only so many roles you can fill yourself, and even if you were an expert in all of them, it would take you infinitely more time to ever finish a project because you’re still only one human.
So, what I do a lot of the time is team up with some other independent folks and usually we end up in a team of about five-ish. There will usually be a UX or an IA person, someone doing content strategy, a developer, maybe even a specific CMS developer, a project manager, and then usually myself doing design. So, I guess that was seven that I listed out, but whatever—five to seven people. So, it’s kind of like you’re teaming up to create your own little agency in a sense but on a per-project basis. We all get together to do the proposal, so everyone has input on that, and we work up a schedule and basically work on it as if we work at the same company, even though we don’t—at least for that project. It’s been a great way to work because one of my biggest fears of going independent was, “I don’t want to work by myself all the time.” As much as I wanted to leave the agency I was at, I was like, “I’m going to miss working with people.” So, it’s nice that you don’t have to give that up.
Gary
I think it was recently Dan Mall who tweeted that he and 800 other people it seemed like were co-working on O’Reilly’s redesign, and I was just amazed at the geographical locations of everybody. It’s like, “Wow, things have really changed, just even in the past five years.”
Val
I feel like that model has become much more popular even for clients. Like, I think, yeah, maybe five years ago if you told a client, “Hey, I have this team of seven people who don’t even live in the same city and we’re going to work on this project for you!” they’d be like, “Get out of here. Nope, not going to happen.” But now, that’s not a crazy thing to propose.
Gary
Yeah, well Dan Pink predicted it back when he wrote Free Agent Nation, he kind of alluded to this team approach to everything and this “independent but team.”
So, you teach at Lynda.com and you host All The Right Moves tutorial screencast. As a traditional offline educator, I find myself acting like Gollum, and so I have these conversations with myself that I’m not covering enough skills in the classroom, and that’s why there’s this need for this online education and these workshops, and that’s why they’re growing. Then I come back to like, “Well no, I teach at a four-year design program. I have maybe 11 or 12 classes total to teach everything that an entry-level designer needs to know.” Sometimes I feel like we’re failing because we’re not covering enough and these other areas are picking it up, and then other times I’m like, “Well no, we just can’t.” What’s your view on how we’re doing? Are we doing enough? Is that why Lynda has been so popular?
Val
No, I think it’s more of what you’re saying of as a school, as a four-year program, you can’t cover absolutely everything. It’s just impossible. So, I think that these other things kind of fill in those gaps. But also I think that they’re aimed at a little bit of a different audience as well, right? Not everyone can go to a four-year school and get a four-year degree, or even if you’re someone who has a degree and it’s like, “I’ve decided that I’m changing my career to this web design stuff. Crap, what do I do?” It’s nice to have those other options, of “Oh, you could do Lynda stuff, you could do Treehouse,” or whatever. I think sometimes people like to say that those can replace a full on university education, and I don’t know if they really can. Like, if you didn’t have a degree and you decided to just go teach yourself through Lynda courses, I don’t know if you’d really end up with the same skillset… I just don’t think they cover all the things that a school does.
But the two appeal to different audiences. I know a lot of people that end up taking Lynda courses are actually people that—at least the people that have given me feedback about mine—are generally people who already have a job and work at some large corporate-type thing and their company has a Lynda subscription and they’re just trying to learn new stuff to further what they’re doing, or maybe make a move career-wise, or get into a different department, or, a lot of the time, just to get their current project done. Like, “I need to learn this thing because I know I need to do it, and I have no idea how but I have to do it for this project!”
And then the workshops and the screencasts and stuff, the main reason I do it is… one of my favorite things about this industry and the web design industry in general is just how open and sharing everyone is. Like, I feel like I wouldn’t be doing this today if I hadn’t gone to meetups and read blogs and just run into these people who would just shared what they knew basically just for the sake of sharing and making things better for everyone, which I don’t think is actually common in many other industries, which just feels so weird. So, a lot of that stuff I just do because I feel like I’ve gotten so much from people’s openness and sharing, especially early on in my career. If I could do that for somebody else just by sharing what I know and spending a few hours recording a little video, that’s pretty great. I want to do that. So, that’s my main motivation for doing all of the blog and the videos and all of that stuff.
Gary
It’s real easy to get blinders on and I forget, so I’m always looking at it from a student perspective, like right out of high school. I mean, I didn’t even start going to school until my late 20’s, so I forget that that other segment exists and that it’s serving a huge need for that, that traditional education isn’t meant for or isn’t easily accessible. So, I kind of forget that.
This isn’t a very deep question, but what are some of your favorite exercises for teaching people motion and animation and movement?
Val
Oddly, the very favorite exercise in my workshop is animating a robot with CSS, which sounds silly because it has nothing to do with interfaces. But the main reason I ever put it in was to give people the feel of what it’s like to have a bunch of CSS animations, like writing a bunch of keyframes and having them work together, because that’s a big challenge. I had this robot that I drew and I thought it’d be cute to make him dance, and I figured I’d use it as a one-off in one workshop, but it’s everyone’s favorite exercise. So, I’ve had to redraw the robot a few times, make him SVG now, but he’s stuck around for awhile, which is pretty funny.
But it is a good exercise for two reasons: to get a feel of what it’s like to have multiple animations on multiple things and how to make them work together, because it’s very different in CSS because we don’t have a visual timeline, so you have to keep that all in your head, essentially. And then secondly: it’s pretty easy to imagine a robot dancing, and I think this is maybe why this exercise works so well, is you can imagine what he should do, so it’s really easy to think of what the motion you want is, and then you just have to do the work of “How do I write that in CSS?” I think a lot of the time, when you’re presented with something that’s maybe less silly, something with more “weight” on the end decision, if you’re like, “I have to animate this form and it has to be really good and everything,” you kind of block yourself from being able to do it because you put so much pressure on yourself. Like, “It has to be perfect!” That’s hard. So, I think that exercise works really well because there’s none of that expectation, and then we move on to doing some actual real interface stuff. But that’s always a fun one to start with. I do little screen captures of everyone’s robots; I have a collection at the end of every class of a bunch of dancing robots.
Gary
See, it goes back to my students are just fascinated—the first thing they want to do is start moving things around the screen. So, dancing robots… They just go “ooh” and “ahh” when I pull up CodePen and I show them, “Look at all these CSS animations that we’re not going to learn but I really hope you do on your own!”
Val
But that’s part of education too, right? Just showing people what’s out there. I know for me, when I first started university, I had no idea graphic design was a thing you could go to school for, which makes me sound kind of stupid, but I was only 18, so, you know. But if I hadn’t had someone tell me that existed, I probably never would have gotten into this. So, I think that’s still good, showing people little things of “You could do this. We’re not going to talk about it, but if you like it, go find out for yourself.”
Gary
Yeah. No, I mean I have to, because there’s just so much it’s unbelievable. So, are there ways to teach motion without the screen being involved? I mean, I know earlier you mentioned storyboarding. Is there other things besides doing storyboards?
Val
Of non-screen at all? I guess pretty much storyboards would be it, unless you’re going to go to some straight up traditional animation, which would be really fun but probably not very practical. There’s a really awesome museum here in town that actually has a classic animator’s desk, or drafting table. It looks amazing.
Yeah. So every time I go in there, I’m like, “Oh, I wish I knew how to use half of this stuff!” But I’m not sure how practical that is.
Gary
Yeah. Alright, well just one last question: what does your toolbox look like for the modern designer who includes animations? Because I know there’s a bunch of little things you can use to make writing CSS keyframes a little bit easier, and we talked about Keynote and After Effects. But are there other things you have in your toolbox that maybe would be helpful that I don’t know about?
Val
Yeah, like on the code writing side. Well on the design side, it’s definitely things like After Effects. I should probably try using Keynote more, I might be able to save myself a ton of time. But mostly it’s just an excuse to open up After Effects. You’re like, “Oh, I remember this. It was so fun!” So, a lot of that on the design-side of things. And a lot of just terrible messy sketches, especially if I’m working with people I’ve worked with a lot and it’s an internal team, I will show them my awful sketches and explain and talk them through it, and sometimes that’s enough to get the point across. Clients and new people, not so much—I don’t like them to know that I can’t draw for crap. But that’s why I do stuff on screen.
Code-wise, I use Autoprefixer for helping out with getting all that in, because oh my goodness, writing all that stuff by hand is just terrible. Getting to know Sass and being able to write Sass loops is a really handy way to save yourself writing some keyframes. Or using it to save variables for your easing and stuff. Instead of having to see 50 billion cubic bezier functions in your CSS, you just see a variable called “ease out quad,” and that’s so much easier. So, a lot of little code shortcuts that work good for other CSS things as well I find are really helpful for animation. And then I like to keep an eye on JavaScript libraries for animation, because you can go pretty far in CSS but sometimes you need a little more logic and a little more control, and I’m terrible on deciding which one I want to use, so. Like on my last project, I used GreenSock, the project before that I used Velocity. So, it’s horrible; I just can’t decide on one. But they all have different strengths, so. Yeah, I’m terrible at just picking one and sticking with it.
Gary
Well, I wish there was a one-size-fits-all tool. It’d make it a lot easier for us.
Val
Yeah. So, I think changing up your tools based on what you need to get done is totally fine. It just maybe makes you sound a little indecisive. But it’s how we get stuff done.
Gary
I was talking to a couple of designers at Substantial, it’s a firm up in Seattle, and they basically said, “Learn one tool, learn it really well, and don’t worry about learning all the other tools because you can just bend that one tool you know really well to make it do whatever you want.” So, I like that approach.
Val
And you don’t want to feel overwhelmed that you have to learn them all. You can get things to work with pretty much any tool you have if you know one well enough.
Gary
Yeah, you can make it work. Alright Val, well, we’re coming up on the end of this episode. So before I let you go, is there anything you are working on that you want to share with the listeners? Like maybe a new podcast or a book?
Val
Yeah, actually I have both of those things. My friend Cennydd Bowles and I just started a podcast called Motion and Meaning, which might be of interest to your listeners. It’s all about how we take motion design principles and apply them to our work as people who do digital design, and that’s been pretty fun. You can find that at MotionandMeaning.io and hopefully soon as an iTunes podcast listing as well.
I also just announced that I’m writing a book for Rosenfeld Media, and it’s called Designing Interface Animations, and it’s kind of about similar stuff really, getting into more detail obviously than the podcast, about how we use motion as designers and how we can use it well. So, I’m really excited to get all that down in book form. It’s going to be so awesome to have it all in one place.
Gary
Can you give us a little bit more of a hook on that one? A little bit more detail, like some of the potential chapters or anything, or has it not been worked out yet?
Val
Oh yeah, I totally can! Well basically the main purpose of it is to be kind of like a crash course in interface animation and motion design theory for folks who work on the web because we generally don’t have that. My main goal is to provide really great resources for anyone reading it to create animations in their own work that have both purpose and style, so that’s kind of the main thing.
Gary
That’s definitely exciting because that’s going to fill a huge, huge void. I’m coming from the educator perspective, where I could find a thousand books that I could use in the classroom for HTML, for CSS, for user experience… everything. But there’s nothing really out there on the motion, that idea of how it can help user interface and help the experience.
Val
Exactly, and that’s one of the main reasons I wanted to write it. So, there’s three sections to it: one is kind of the case for animation, a little bit of psychology, a little bit of UX reasoning of why this is good to do, and a little bit of history behind motion design and all that kind of stuff; using animation to solve design problems, where I break down five different ways animation can actually help solve some design issues we get into when it comes to interfaces and how it can help and how to pull it off; the last bit is all about animation in our work process, how this fits into our design process, because especially people who are already working and doing this—they already have a certain way they go about tackling projects, how do we fit this in there. I talk a bit about prototyping, and then also a chapter on animating responsibly, which covers a little bit more about getting into some accessibility and some of those other little things that I think are unique to us on the web that maybe people who are creating apps and other things don’t care about as much as we do. So I’m excited about all of that, actually.
Gary
Do you dive into the performance aspect of it, to be responsible stewards of that?
Val
Yeah, yeah, performance comes into that as well. Probably not in a huge amount of detail, not to the level of a Paul Lewis course or anything. But yeah, part of it is being responsible. If you have five billion animations, how do you balance that with actually wanting things to work fast and all that kind of stuff. So yeah, that all kind of fits under that umbrella.
Gary
That’s fantastic. Once again, what’s the name of the book?
Val
The book is Designing Interface Animations and it’s coming out on Rosenfeld Media in 2016, so thankfully I have a bit of time to finish writing it.
Gary
That’s exciting. That’s going to be a great resource. Alright, so one last thing before I let you go is: do you have a final piece of advice you’d like to give design educators to help prepare our students?
Val
Just advice in general: expose your students to motion as a design tool. Even if it’s something you don’t know super well yourself, just present it to them as a thing they can do and can look into, because I think the expectation of having that skill is going to be something that’s on job descriptions soon, and if nothing else they might have a little fun with it and come up with something amazing that we never thought of, which would be the best.