- You were, you told a little bit of the story, but you did lots of comics, didn't you, back in the day before you came into the web? - Indeed, I used to make comics for a living when I was, well, right up until the beginning of the recession. That was 2008.
I made comics for teenage girls.
They even gave me an award, and it was all very impressive, but comics don't pay the rent in the United States, unfortunately.
I tried to give them my reward, but they were like, "No, we need the rent payment.
"We don't want your award." - Did you build websites to promote and sell your comics? Is that how you got into it? - Yeah, back then, we didn't have Etsy, and we didn't have Shopify, and we didn't have Mailchimp.
If you wanted people to come read your stuff and pay attention to you, you had to build that platform out yourself. I think one of the first things I built was a Drupal community.
Then, there was an osCommerce shopping cart that I had to get out.
Then it was like, "Well, this looks terrible, "so I better learn CSS to make that look nice. "It's not goth enough, it needs a black background." I had to learn all those things, and it was like I was using the golden goose to make omelettes when I found out that people would pay me as much to do that for them in one weekend as I was making in 60 hours worth of comics every week. - I think that's probably a lesson many of us learnt. It's a familiar story 'cause now, a lot of people came to the web. We have some copies of this work of Rachel's here to give away if you ask a question. - I think there's one over there.
- Alright, good.
- [Woman] Oh, hello.
Along the same topic of comics, a lot of web comics these days are kind of just pages scanned and posted online, so how do you think animation plays into the future of web comics? - Great question.
Cordelia, who's speaking tomorrow morning and you should all totally show up for her talk 'cause it's awesome.
Cordelia makes some comics too.
She even made this web comic that is not only animated, but it's automatically generated so it's never the same comic twice, which I think is a really interesting experimentation with a medium.
Web comics are essentially comics that are posted online. Back in my day, that was just putting an image of the comic page online.
Then you would print them out.
- This is what The Oatmeal still does.
- yeah, and you'll notice that the images on the web are just, they're these dimensions, they're not responsive. Responsive web comics would be impossible to make. That would be a pain in the butt actually, but the point is that this content really hasn't evolved with the web.
It would be great to see responsive web comics that change according to the view port, and yet can still be printed for people who like to have something to sit on their coffee table or next to their toilet.
I'm not sure exactly where web comics are going to go, but I really hope they join us soon.
I love your experimentation with animations. I know a couple of other people are doing that too. There's even something called Homestuck.
Anybody here know what Homestuck is? Oh my god, you guys are old.
Homestuck, not homestar.
No, continuing in the great tradition of homest out there, Homestuck is an interactive graphic novel that was originally made in Flash, an accessible user interface, which sadly, web comics is lacking.
It's an interactive graphic novel where you move through it like it's a game. It's incredibly popular with teenagers.
If you ever go to a comic convention, you see people going around with grey face paint and horns, they're actually cosplaying characters from the series. I always thought it was an excellent example of people building a fandom on really nerdy technology. Some of the people who worked on that went on to create Undertale.
Please tell me someone here knows what Undertale is. Okay, got a couple of hands.
Awesome, awesome, keeping up with the youngins. Yeah, so you're seeing this kind of gameplay is expanding and constantly drawing new inspiration from what we're making available on the web. - Well, it's interesting, I used Marvel, who were on this enormous franchises, other than like, "Which side are those comics?" If you go back to the 1970s and earlier Marvel comics, so were essentially, very minimal.
They were almost like a comic that moved what the hand would move or there'd be, this is actually when I was on television.
The other things I remember from my television-watching days as a child. The web hasn't even (stammering) Those sorts of techniques that television discovered in the early days of animation.
We ransacked the early days of a lot of technologies and media for the web, but we haven't doing that around things that are drawn, and yet XKCD and The Oatmeal and some other very simplistic comics have been reasonably successful. - Yeah, I wish that their creators would experiment more with the medium myself, just because it could really kickoff a lot of, it could kickoff an interesting movement.
- Right, oh, we got a question over here.
- And don't worry, Cordelia.
Your prize is totes coming.
- [Man] Hello, what do you think the future of animation looks like with VR and on Word pages recycling? - Say that again? - [Man] The future of webpages with VR.
- With VR. - Yup.
- Do you really wanna hear my opinions on VR? It's not gonna be fun.
Alright, I'd honestly don't think people are gonna be, this is me personally.
Wait, I gotta come out here.
The opinions that I'm about to express do not represent John Allsopp's opinions nor the opinions of my employer, or the entire web animation community.
It's time for some Rachel-pinions.
- I think Microsoft cares a lot more about that than I do, in fact, I bring people here to make sure they disagree with me. - Alright, but these are Rachel-pinions here. I've been to SIGGRAPH.
I've watched how VR faces a lot of challenges with people getting motion sick. There are challenges with the space in which you enact VR. I think augmented reality is probably more the future, but the way that works with the web is still up in the air because there's no device for currently using augmented reality in the every day.
It isn't mainstream enough.
My opinion about AR and VR is that I don't know how they're going to effect the web because we don't know where the web is going to be when they actually matter.
Oh, that was so harsh.
Does anyone wanna disagree with me? - I have some thoughts there and probably entirely disagree. There's vare-day in that wall.
Then, there's a question back here.
Is this a thought on that conversation? No, this is separate.
Alright, we might have a question here.
- [Woman] I just wanted to know, Google Design, and Adobe Animation, and your Web Animations API. Which solution is your preference? - Could you wave your hand? I don't know where you are.
Ah, say that again.
- [Woman] I just want to know, Google Design, Adobe Animation, and your Web Animations API. Which solution, if use prefer? - Google Design is a, It's an animation interface for making ads. It was designed specifically, I think, for the Nokia group for making ads for mobile phones.
I think, please correct me if you're in the audience and you know that I am wrong.
Adobe has created Animate.
That's a rebranding of Flash.
It can export to SVG and a number of things. The Web Animations API is just an API that lives in your browser.
Currently, among all the different user interfaces for making animation for the web, there is no winner.
None of them win.
Part of that's because each one of them has to vomit up, if you will, a big old chunk of JavaScript that you're suddenly dependent on.
You can't edit those animations without pulling all that code down into a code base, so if you're building an app type-thing with these frameworks, it gets really complicated really fast.
People, when they're building app-like interactions, they tend to work with a big framework like React or Angular, and building the animations around that, and just demoing and story-boarding how things could look before baking that in.
You'll see that that's one way of solving this problem is going at it from the prototyping solution. The individual making something with a user interface solution remains very difficult space where there are no clear winners yet.
I say, use whatever you like today that helps you actually ship the thing that you're working on.
- Alright, we got a question over here, then, I promise I'll get to you.
- [Woman] I'm just wondering.
You talked a lot about design systems and creating the motion and interactivity for that. How would you recommend people get started doing that, especially if, perhaps, they're not, maybe they're more traditional designers or working in print and they're trynna work out how to create interactivity and motion for their design system for their product.
- Wow, that's a great question.
How do you get started if you're coming from a more static environment and you want to get into animation and motion, and you wanna feel that out.
Well, there's some great places to look.
All the things I've written on my writings part of my site, it's a great place, but additionally, Val Head has a UI animation newsletter, which is also a good place to keep an eye out for things. She's written a couple of articles as well that are floating around, so her site is a good place to get started. Personally, for me, when I started exploring animating the static web, I really dove in deep.
First, with how actual studio animations are done 'cause obviously, comics, cartoons.
I have my feet in that puddle.
Then, I moved from studying how people did animation in the past and all around the world to how humans actually perceive and process visual information by reading studies about cognitive load, et cetera.
I know, that's a lot of research to just get started but I'm saying, if you start looking at all these newsletters and you go, "Ah, you know, using a nice easing curve "as opposed to just whatever the browser "defaults to makes sense for me," and that's what you dig in.
These are good places to expand.
You're not just repeating what people hand you on a plate, but you're also exploring and pioneering in your own right. This is a really good time to be doing that in this field because the nut has just been cracked open. There's a good chance for you to go out and learn something and think of something in a way that no one else has before, and make a valuable contribution here.
I'm gonna encourage you to don't look for the easy copy and paste solutions, but really go out and do your research, and dig in there.
- We'll get to one, for a second, I just will pose around that, like a couple years ago, a lot of people who would've been talking about the famous Disney twelve principles of animation and some other classics in animation.
Where do you stand on some of those? Because that was something we've come across, middle of reuses, a template for thinking about animation. - Disney Studio's is well-known for this thing called the twelve principles of animation.
You may have heard of it before.
You probably have, even if you haven't been paying attention to the animation scene because when people are like, "Oh my gosh, "I can animate the web," they typically, like yours truly, read about Disney, and Disney's Studios have put out a great book called The Illusion of Life.
It's like a style guide for making Disney animations. They have twelve principles upon which all Disney animations have a foundation.
Now, I need to stress that this book is like a style guide, it's not a guide to how all animation everywhere should work for everyone.
It's how to animate living bodies in the Disney way. These are the things that Disney animators keep in mind. That can translate horribly to a user interface. If you completely obey those twelve principles, you'd end up with a very gummy, bouncy, awkward-looking interface.
For a long time, we were just seeing article after article with just kinda the "Hello, world!" You know, the twelve principles of Disney animation as applied to your user interface.
You can read one of them, and that's great, but then you wanna move on to something else because it's all the same thing.
It's not a perfect metaphor, it's kinda apples to oranges. You're going to have to find other wells to draw inspiration from.
For instance, the IVM motion designers went out and interacted with actual devices for their inspiration.
They weren't quoting twelve principles of cartooning. They were drawing on the principles of engineering to make their animations, and that was good for their brand.
Their brand wasn't organic life forms or children's cartoons.
Their brand was engineering and devices, and that deep, rich history.
- I just thought I'd bring that up because it does come up a lot.
I thought you'd might be able to clarify that, thank you. Alright, up to bat.
- [Woman] Are there any resources on the impact of animation on cognition that are perhaps a bit more approachable and sharable than an academic paper? - Wow, man, that is a great question.
Are there any more resources? Alberto Cairo, he wrote this book called Functional Design. He is a data-vis scientist.
There is one chapter in that book, and it's a thick chapter, which is about applying motion to data science where he covers a lot of this ground, and it's very accessible.
The rest of the book is really useful too, so I feel like you can buy the book for the motion design, how it works with the human visual system, et cetera. Then you get all this great stuff about data visual acquisition in the boot.
Wonderfully done.
I suggest his work for that, it's called Functional Design. Maybe you're thinking, "Well, I'm not really "interested in data vis." One of the best things you can do is look for books on art and visual ...
I went to a library and I was like, "I need some books on how the human visual "perception system works." It turns out my favourite book came from the Young Adult section.
It's a book called The Science of Seeing and Art. It's all about how the eye works as explained through impressionist master's paintings. It was a great book.
I always say, "If that's too much for you to digest, "go to the Young Adult section at your library "and read the books there," it's a good place to start. - We got time for a couple more.
Let me get some questions going.
- [Man] Alright, so this afternoon, we heard a bit about design language.
Obviously, one of the things that helps me day-to-day is being able to communicate, while the intentions of why and what section will look like the end product is gonna look like.
I'm wondering if you had any thoughts or ideas on how to get motion into the design language that we're using in day-to-day workplaces.
- How to get motion into design languages.
I guess my question is, why isn't it there already? Is it because your bosses are like, "Ugh, user doesn't require animation, "they just wanna get at the information super fast." In that case, you have to make an argument for the cognitive load benefits of using animation. Is it not in there because you don't have any motion designers to speak for animation? Somebody on your team is going to have to pick up that banner and invest time in learning about these things, or you're going to have to hire someone who actually does care.
There are many reasons.
I could ask you to expand on that a bit more, but let's just say that your bosses are like, "Do that," and you're like, "That's cool." How do I put the animation in there? Let's see, how would I do that? Well, the best part is to start by making a motion section. Start teasing out.
Do you wanna use the same time values for everything? You'll probably need a handful of different ones. Something that moves very fast, something that's a little slower, and something that's super slow for big movements across the screen.
God, I'm just giving you all my book here.
Anyway, you'll probably want to create a variable system for the different lengths of time that the animations will last.
Another variable system for the different kinds of easing the site you'll want to use in different situations.
This way, you won't end up constantly repeating yourselves and making only like, having a bajillion different blues and a bajillion different easings.
If you create one repo for those basic variables, these basic building blocks, That's very usefUl for people who come later. If you build it into your different components, even moreso, giving people those defaults is super handy. I would start, if I were just, "Oh, man. How do I do that?" I would start by trying to look for the commonalities in any existing animations you have, and trying to normalise them across the system, and bring them all into one place for people to continue to take from that.
Is that helpful? - Yeah. - Yes!
- So it sells for us.
When you worked on that, did they have a section which was focusing on documenting animations, like you talked about lengths and easings? Then, for individual components, would you refer to that set of defined animations? How did you encapsulate thinking about the animations into individual components? - The interesting thing is there's no right or wrong way to add animation into a design system.
For some people, if designers are writing with a design system, it'll be very, "These are our principles, "and we draw from these things." But you might find, if you were like, "Okay, tell me what easing should I use," that might be missing.
Those are kind of the messier, harder ones. Salesforce was much more of a modular, component-based, give developers code to not burn everything down with, kind of system.
It actually separated animation into two sections in the documentation.
There was a variable base section, where people would go to find the different times, the different easings, et cetera, that they could use to spin something up from scratch. But then there was also the components area where you could see different kinds of, I guess you could call them microanimations being applied to individual parts of the interface and how to call him on interface bits.
You could go even further to say that those animations could have been baked into actual microinteractions in a UI pattern library, but Salesforce edged on giving people creative defaults rather than being dictatorial in that regard. - Alright, I tell ya what, I got time maybe for one more.
Then we can continue the conversation over a soft drink, or beer or wine.
- Absolutely.
I will have enough scenes for everybody.
I assure you, please take them so I have enough room to bring my team Tim Tams so they won't kill me. (crowd laughing) - [Man] First of all, thanks for the great presentation.
My question is, obviously, having been around the block a few times as a web designer.
I've seen trends come and go, some really bad ones like reflections, drop shadows, - Oh, God. - and also some things that,
yeah, I can see you shuddering there.
In the world of animation, you've probably seen some good ones, and you've seen some bad ones. What other trends or the fads that have made you go, "Oh hell no." - Oh, so many.
Well, it's interesting, but the horrible trends of today that we loathe, typically, they end up staying around in some capacity. Like, lens flares. No, maybe not lens flares. Let me think again.
Okay, drop shadows.
We now use shadows in places to help say, "Hey, this thing is not a part of the material "that it's resting on top of," but we're not like, "Drop shadows on all the things," thankfully. I expect that these fads will not really disappear so much as they will eventually be worked into the language that we use in a much more professional and mild-mannered way.
For me, I think the thing that I love and hate the most is parallax.
Parallax is one of those terms that people use it to just lump a bunch of stuff together, but it's actually really nuanced.
When we say parallax, we are talking about things moving at different rates on the screen. You're scrolling and the thing in front is moving much faster than the thing at back, or maybe there's a cutout and there's an image back here, and as it moves up, You see a different part of the image. Those are both called parallax, but they're two very different things.
One is a cutout moving in over an image, exposing different parts of the image that is being still. The other is an actual object moving upon the screen at a different rate from its fellow object. Sometimes they are exactly correlated to a scrolling gesture, so as you're scrolling, things are moving at the same time. Sometimes, things are triggered when you are scrolling. Maybe an animation only happens when it's fully in view, or you've moved just passed It.
All of this stuff gets lumped into parallax. People debate endlessly about whether or not parallax is accessible because folks with vestibular disorders can be made to feel dizzy. When something on the page is moving at a different rate from something else, or it's not moving at all while everything is moving around it, oh my gosh. You guys, it's the dramas.
That is the fad that gives me the most heartache, but I also love some of the things that it does, like that triggering.
Only triggering in animation when it's in view, yeah. Why the heck should an animation be running when it's not in view? I like that.
Then I see people doing stupid things, like fading content in as you're scrolling down the page when it was never being lazy loaded.
It was always there. You don't need to fade it in. It's there, you're scrolling to the content. That's animation enough, why are you fading? Why are you doing this to me? Why are you doing this to the GPU? Why are you doing this to people? I love it.
I love it and it's like, "aw yeah, parallax." And scroll janking or scroll jacking, as it's called. Jacking, not janking, that's a different thing. Scroll jacking is one of the most valuable tools in the tool chest.
It's also one that gets abused like crazy, especially by advertising agencies who are just trying to give the client what they want. The client's like, "Make it razzle-dazzle," and they're like, "Okay, parallax." - She's trying to delight the user, aren't they? - Oh, don't use that word.
- I should've given you a trigger warning on that one. Yes, try not to delight too much.
- Oh, delight.
We didn't even get into that, did we? - Well, we did now.
Maybe we can discuss delight and whether or not Rachel finds it delightful or not over a drink.
- I will leave you with one statement.
- I love it.
- An animation can be apart with it.
An animation alone is not necessarily delightful, but animations can be part of a delightful user interface. - And with that, please thank Rachel Nabors.
