Motion And Meaning

Motion and Meaning Podcast

A podcast about motion for digital designers brought to you by Val Head and Cennydd Bowles.

Subscribe in iTunes or RSS

Episode 12: Dan Mall on inspiration and presenting animation.

The super friendly Dan Mall joins me to talk about how animation fits into his design process. He shares his proven approach to finding inspiration and customizing animation to the project’s brand. We also discuss how and when to present animation ideas to clients and teammates along the way.

Transcript

Hello and welcome to Season 2, Episode 2 of Motion and Meaning. I'm your host, Val Head, and this season is all about getting animation done. In each episode, I chat with a different designer or developer about how they make animation part of their process. Today's guest is Dan Mall. He spent most of his career designing for the web, working at places like Happy Cog and Big Spaceship, and he also loves Philadelphia more than anyone else I know, so let's get right to the interview with Dan where he starts out telling us a bit more details about his company SuperFriendly.

Hi. My name is Dan Mall. I run a small design collaborative out of Philly called SuperFriendly. We do all sorts of stuff from design and development and just helping clients figure out stuff that they are having trouble figuring out on their own.

I know that you have a background working in some places like Big Spaceship and other agencies like that. You worked with animation a lot in the past when it comes to design things, and I was curious, where in your design process do you start talking about animation, thinking about animation things?

From the very beginning. I think there are some concepts that depend on motion, design concepts. There are some that motion is just sauce on top, but I find more and more frequently, it's integral to the concept of the thing that I'm making, to think about at least how something should react to something as simple as user feedback or just interaction. I try to think about that stuff as early on as possible, even if I'm not actually doing anything with it.

Right, right. What kind of things to you are design decisions that depend on motion? What's an example of a thing like that?

Yeah, so I think the obvious ones are probably ones that I'm sure you've talked about before with other people, which are things like hover states and how something should open and close, and maybe things that are hidden that need to be revealed. I think those are certainly the things that I think are more obvious, but I think there are other things that really can make or break an experience when it comes to motion. As an example, and I know you write about this in your book, which plug, plug, buy Val's book, but something as simple as where did something come from and where did it go can give you a sense of how I can get back to it again. I think that's one of the things that really frustrating in an interface is when you're like, "I don't know where that thing went," so just haven't a hint of a little trace or where it went and where it came from can help you get back to it again.

Right, like that hint of just being able to follow that logical flow visually of not having to think about it really. It's definitely a key one, a key thing that motion can help with. Do you often talk to clients about this stuff? Is this something you talk about in initial pitches or this something you leave to talk to them about in the end?

I think that depends on the concept so if the thing that we're doing really depends on it, I'll definitely talk through it, in the same way that some things are very dependent on a specific typography choice. If that's the case, I'll talk about the typography. Other times when I've presented design, the typography supports it but there's something else that's more crucial so I'll leave it out or I'll leave it at least until later. I think it really depends on the concept that I'm actually pitching or that I'm talking to a client about and if it's really integral, I try to make sure to have it be an integral part of that design presentation.

Right, that makes sense, like you have a global vision of sorts and you're trying to figure out the best way to accomplish that and communicate that, and sometimes it might be type, sometimes it might be color, sometimes motion might have a big part of it, but it's all in the greater name of design, I guess, to make it sound dramatic.

No, totally because I think there's some things that you can't talk about everything. I just don't think there's enough hours in the day. For example, I don't need to talk to a client about what to name my SAS variables, right? It's an important part of the project but that doesn't need to be collaborative. That could be a thing that I just do as part of the project. Sometimes I think of motion as that. It's just a thing that's going to make the design really good and I'm going to do it. Other times, it's "I really need to talk to you about this," because either one, I'm having trouble with it myself, or I want another opinion, or I want to make sure that everybody's on board first. I think it just depends on what the concept is I'm talking about.

Right, right. That totally makes sense. It's like sometimes there are just things you do because that's what you've been hired to do, to design a thing, and that's all part of designing a thing. Speaking of a little bit about the internal stuff, one thing you've written about before is the idea of motion comps. Can you explain what those are and how you use them?

Yeah, totally. A motion comp to me is like a static comp except it is in motion. When I think about making websites or making apps, I think the thing that is coded is the real thing and everything until that point is preview. I think of my role as I'm primarily working in tools like Photoshop and Sketch and After Effects and things like that, so I feel like my role is to do previews for the person who's actually building the real thing, and sometimes that preview is "Here's how it looks in a static state." Other times it's like, "Well, here's how it looks in motion," or, "Here's how different states of these look like, and here's how you get from one state to the other." Certain projects I'll do a motion comp.

Sometimes I call it an animatic, so I'll do an animatic or a motion comp for a developer if they're having trouble envisioning something or if I really need to describe something in a way, and I can't make enough sound effects or hand motions to communicate that, sometimes a motion comp or an animatic can help fill in the gaps. I'm working on a project now with a developer who we have a complex navigation and the way that the navigation and the search animate in, the way that I'm picturing it was very complicated and we've had maybe hours of conversations about it and I've done sketches and I couldn't quite communicate it well enough, and then when I did the motion comp, she was like, "Oh, okay, now I understand what you're talking about." Sometimes it's just a way to explain something in a way that I can't deal with words or sound effects or little hand wavy things.

I like that you include sound effects and hand wavy things as part of the communication process. I find those to be very key.

Yeah. I mean, sometimes a quick sound effect is all you need to describe an animation. Like, sometimes you'll see an animation and you'll be like, "Well, it's like less 'boing,' and more like whoosh," and then the person you're talking to is like, "Oh, okay, yeah I get it." Sometimes that's all you need, other times they can need stuff in a little more high fidelity.

Yeah, yeah, it's true. It's like sound effects and dancing can only get you so far.

That's right. That's right, which is to say, pretty far most of the time.

It's true. If you have a previous career in miming or beat boxing, you're in good shape for design.

I should go do an interpretive dance class or something.

I'm pretty sure they cover it in modern or something. What kind of tools do you use to make motion comps? Are there go-to tools that do it really well or do you use whatever makes sense at the time?

There are a lot of tools. I would say I tend to use the ones that are more familiar to me, so I don't know. I don't really like this, but it's the reality of it, which sometimes motion I need to do really quickly and so I'll often gravitate to a tool that I know I can crank something out really quickly and for me that generally is Flash. I use Flash pretty often. I used it this morning because I was animating something and even though I don't output to SWF which is the thing that it was I guess originally designed for, I use it a lot to make motion comps of websites and apps and the way that things move, so I generally gravitate toward Flash. Other times, After Effects is a little bit better for what I want to do.

I've toyed around with the more modern tools that people use now like Framer and Principle, but I find that they have less power, mostly because I know Flash so well. It's hard for me to switch.

Right. Most of those, like Principle and Flinto and all those, they're very much focused on prototyping like quickly ... Maybe not even quickly, but just testing an idea, not necessarily making a real thing. I feel like they limit their capabilities to specialize in that area, but Flash is wide open in that sense, because it just animates any of the things, really.

Yeah, I mean, for better or worse, and I know that I certainly have a slant toward the tools that are blank canvas, you have to make every single thing yourself. In Flash, you open it up and if you need to make a hover state on something, you have to manually create that hover state and you have to manually write the code that says, "Okay, this thing when I roll over it, it is an actionable thing." I tend toward tools that do that more than tools that have a couple of pre-canned things for you to use.

Right. There's pros and cons to both, right? You can make them yourself, that takes time, but you can make them be whatever you want versus take the preset and then that's the thing I don't want to say stuck with, that sounds a little too negative, but that's the thing you have. You can take it or leave it kind of thing.

Yeah, totally. Some projects have constraints that are like, "We can only use what comes in the box," and I'm like, "Great. For that, I'll use Flinto because I have those effects really handy, and they're right there for me and I don't have to rebuild them from scratch." Other projects where it's like, "Well, we should do something really custom here because" whatever, "It's good for the brand," or, "It's going to be really particular for a user to use it this way." Those are ones where I don't like to be limited by the ... I don't like the fight the tools itself. I like to just be like, "Give me a blank slate and then I'll figure out how to make it."

Right, right, and it's interesting that you brought up that idea of the kind of more wide open tools for branding purposes. Do you find you use motion to get the brands ideas or just essence across often?

Absolutely. I mean, something as simple as custom easing can go a really long way because material design as an example, there's great motion guidelines build into material design and to the point where I can see an app and not know it was built on material until I see something in motion and I'm like, "Oh, that feels like a material app," which I think is to their credit, they did a great job with those guidelines, and so I think something as simple as that can go a long way in something that animates over two seconds. You're like, "Well, this doesn't really feel like Google, it feels more like another company," so I feel like having a stake in the ground for each organization can be like, "Well, this is how our stuff feels like in motion."

Right, right, and it's interesting you bring up material design because I was just reading something you wrote I guess a week ago about design systems, your design system research article, and you had the best quote ever about material design. I was like, "Dan just nailed what bothers me about it so much," being specifically for Google and not we've all latched onto it because they just do have such strong opinions which I think is really an interesting point and I liked how you said that material design makes it impossible to make a bad design decision.

Yeah, totally. What's cool about it is they also leave it open for you to be able to make good design decisions. I think what's built into material design is great defaults. This idea of the beautiful default. I think they do a great job of that and then if you want to customize and go off the reservation on your own, you're totally welcome to do that. That's definitely been top of mind for me. I'm working on a big design system project right now and we're trying to figure out how opinionated should this thing be and I learned a lot from studying that material design stuff.

Yeah, yeah, definitely. If anyone listening has not read that article, your design system research gathering, it's a really great look at a bunch of design systems ...

Thanks.

... And how they have those point of views. It was perfect time for me, too, because I'm also working on a design systemy project and I'm like, "Oh, helpful."

I feel like a lot of people are, yeah. I feel like it's a good time in the world for that kind of work.

When it comes to having that point of view and finding that stance of branding, what kind of things do you look for to latch onto to define that motion? Are there specific documents or conversations you have to get there?

I certainly think that I have a particular style when it comes to the way that I approach brands and branding, and identity work, and I think the more I design websites the more I realize that web design is branding work. It's an extension of that because colors and motion and interaction, all of those are how a brand should express itself or how an organization should express itself. I have the same approach to picking colors to what's the motion style, which is I latch onto words and I latch onto stereotypes around those worlds. As an example, if an organization says, "We want to be really fresh," or "We want to be really modern," that says something about what colors I would use.

Maybe I wouldn't use very dark colors. Maybe I would use bright colors in order to be modern, and that's certainly stereotypical. Any brand that would say that, you might lean in one direction over the other, and I think that's partly cultural and it's partly the stuff that we grew up with and so I think that a word can lead you to a particular color and a word can lead you to a particular typeface and I think in the same way, a word can lead you to a particular motion style. If an organization says they want to be really sleek, maybe that means they have very fast motion that has hard cuts, and again, it's a total stereotype but I think it's a good place to start.

I'll generally try and use words and when I do it with clients, I'll do a lot of word exercises to say ... I have a lot of friends that have suggested exercises like, "Here's a group of 100 words. Have your clients circle the top 10 that encompass their brand." That thing influences color which influences typography and influences motion and all of the things that you're going to make for them, all of those are driven by this set of 10 words, and ideally, those 10 words are something that are very unique to that organization that another organization can't have. I do a lot of exercises with clients to get at the heart of what makes them different than everybody else and motion is certainly a part of that.

Right, right and even if you're doing 10 words or however many words, all those words may have specific stereotypes. You said the sleek being fast and short cutoff kind of thing, but hopefully every client or every company has a different 10 words and that combination is what makes them unique. It's not just like everyone's bright or light and sleek and all these things. It's interesting how much can be tied back to just that language. I've talked to people about pulling motion ideas from voice and tone which is kind of the same idea, just less exercise based, and it's just really interesting how much you can draw from the way a brand talks about themselves, the words they want to associate with themselves. You can go off in all directions with it.

Yeah, totally. I think that there's a lot to be said for ... A lot of people ask me about how do I start coming up with the motion of an organization or for an organization, and I think it's the same way that you do with colors. There are abstract ways to get a color palette, right? You can look at a photo and say, "Oh, this photo feels like that organization, so I'm going to take this color palette." I think the same way, you could listen to a song and be like, "Oh, this song feels like that organization," and then start cutting your motion to the beat of that song. I've done that before as just an exercise to figure out, "All right, well this is a very slow rhytmn, and so maybe all the motion should follow this." Again, they're starting points. You don't have to end there but at least it's a place to start.

Right, right. Like, you can start with that literal connection of "I am matching the motion to the beat of this song," but over iterations what you end up with will never be that literal in the end. It's going to go through so many changes over the course of the design and everything, but it'll still have that basis. Since you were just talking about Flash, that totally reminds of a talk I saw Brendan Dawes do way back in the Flash days where he talked about he had a rule of never animating a thing unless you're animating it to music. He would, I guess ...

Yes, I remember that.

.. Put a hidden audio file in his timeline that he would time all his animation to, even if it was never in the end piece. That's actually a pretty good trick.

Yeah. That actually was my source for how I learned to do that.

Great!

Brendan is awesome. I actually that that's where I heard it, but yeah, I remember seeing that talk and I was like, "That's such a genius tip," because it's the whole idea of hide your sources. Just because you use something doesn't mean that it has to end up in the final take.

But it's really true, like your source can be whatever it is and even if someone was pulling from the exact same song or the exact same photo, what that designer's going to end up is going to be totally different than what you end up with, so it's definitely good advice. I don't know, that's like the fun mystery of design, right? One team that takes the exact same starting point, the exact same criteria or whatever, they'll end up with a totally different solution and neither are really going to be right or wrong. There's never one correct solution for design.

I mean, one of the things that I try to do a lot in my design work is have multiple inputs of inspiration, so if you're trying to make something that's modern and somebody else is trying to make something that's modern, well, there's a good chance that you might come up with the same thing, but if I'm trying to come up with something that's retro modern, somebody else is trying to come up with something else that's futuristic modern, now having two inputs instead of one means something completely different. I think all of these factors way in. Instead of doing one word about the brand, do 10 words about the brand. Instead of letting those one word influence your motion, make 10 words influence your motion and by throwing more inputs at it, you have all this kind of range of variety and less likely that your thing is going to end up like somebody else's.

Right, right, and I think the funniest thing or maybe not funny funny, but interesting thing about working that way is you know what all of your sources were, but I don't think anyone else could ever trace it back correctly.

Yeah, there's this great podcast called "Song Exploder," that Brad Frost turned me onto.

Yeah, he turned me on that one, too.

There's this one episode, I'm not going to spoil too much, but there's one episode with one artist who talks about the inspiration for his song and the way that he does it is he listens to other songs and then he plays the melody of that song himself, records it, he plays it in his style, but then he uses an anagram generator to save it as a different title on his computer so that he can't go back and so let's say he was using the song "Stand By Me," he wouldn't call the file "Stand By Me." He would call the file whatever an anagram of "Stand By Me" would be so that he actually can't go back and trace his own sources. I thought that was pretty interesting.

Oh, wow. That’s totally throwing yourself for a loop.

Yeah, exactly.

He goes back and listens to those files and has no idea. Maybe if he remembered playing it, that's the only way he would know where it really came from.

Yep, but he does that because if he revisits the tune months later, he doesn't want to go back and remember the song that he was inspired by. He just wants to listen to the track that he played and then hopefully he'll be inspired by himself.

That's a really interesting approach. I kind of want to try that.

Yeah, totally.

Like, I won't even know where it came from. We're just about at the end of time, not the end of time, at the end of our time.

Oh, that would be really terrifying.

By the way, this podcast ends the world, but one last thing I wanted to end with is what advice would you offer someone who thinks motion is super important and wants to start using it more in their work but is having trouble convincing the rest of their team to buy into that idea?

I would say that you've got to do it first. I don't think that you should wait for permission to do something. If you go to your team and you say, "Hey, I'd like to try this thing out," and everybody's like, "Yeah, I don't know," do it anyway because I think it's much easier to convince someone when you have something in front of them that they can respond to rather than the idea of the thing to respond to. I think that you've got to bite the bullet and do it anyway and give it a shot, and then, sell the heck out of that thing. Go and put it in front of somebody and say, "Okay, here are all the advantages to doing it this way. Here's why it's really good. Here's why it's awesome. Here's why it's better than the way that we were talking about doing it before," and you should have those reasons, otherwise why are you doing it in the first place?

Assuming that you have all those reasons, do the thing, spend the extra nights, spend the weekend to do it. Stay up late, or whatever you need to do in order to make it happen, because I think that's much more convincing than saying, "Hey guys, why don't we animate it this way?," and then everybody's like, "Nah. I don't think we should do that," and then your idea is dead. I've had a lot greater success just buckling down, spending the extra couple of hours and doing it, and then putting that in front of everybody, in front of the team and saying, "I have this great idea. I worked it all out. All the questions are answered. Here's why it's going to be better. What do you all think?"

Right, right, I love it. It's like the ask for forgiveness, not permission thing.

Absolutely.

It's a very effective approach. Thanks so much for chatting with me today, Dan. Where can people find more about you on the internet and keep track of all the fun stuff you're up to?

I am on Twitter as DanielMall, that's my full name. D-a-n-i-e-l-M-a-l-l. My website is also the same, DanielMall.com, and if anybody wants to email me, just fill out the contact form there it will come directly into my inbox.

Nice, nice. I'll make sure to put those links in the show notes as well, but thanks so much. This was a great chat.

Yeah, thanks for having me.

To find out more about Dan, follow him on Twitter where's he's DanielMall, or check out his site at DanielMall.com. His company SuperFriendly is also on Twitter as SuperFriendlyCo and on the web at SuperFriend.ly. I'll list those all in the show notes, too, of course.

As Dan so nicely mentioned, I just published a book called "Designing Interface Animation." It digs deeper into a lot of the same topics Dan I discussed here. You can find the book at DesigningInterfaceAnimation.com.

You've been listening to Season 2, Episode 2 of "Motion and Meaning," with me, Val Head. You can find out more about the show at MotionandMeaning.io, as well as listen to all of last season with me and Kenneth Boles either there on our site or on iTunes. I'd love to hear your feedback on the show. You can find the show on Twitter as MotionMeaning and if you've enjoyed the show, give us a rating or a view on iTunes so more people can find out about it. See you again soon