Motion And Meaning

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.

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.

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.

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.

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.

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.

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.

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

I should go do an interpretive dance class or something.

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.

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.

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."

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."

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.

Thanks.

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.

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.

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.

Yes, I remember that.

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

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.

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.

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

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.

Yeah, exactly.

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.

Yeah, totally.

Oh, that would be really terrifying.

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?"

Absolutely.

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.

Yeah, thanks for having me.