Overview
- Henry Heffernan
- Mariana Castilho
- Lochie Axon
- Dennis Brotzky
Henry is a design engineer working at Vercel. He contributed to a lot of Vercel’s new marketing pages, Next.js Conf, etc. He also has a very impressive personal site. In this interview, we’ll talk about animations, easings, design engineer in general and how he got his job at Vercel.
Emil (00:00)
Hey, so this is the first interview for Animations on the Web. Today, we will talk with Henry from Vercel who works as a design engineer there. Henry and I worked together for a while on the design engineering team at Vercel. I’m a big fan of his work.
Henry, why don’t you tell a bit more about yourself first?
Henry (00:24)
Yep - so I’m Henry Heffernan. I’m a design engineer at Vercel. I primarily work on the marketing related properties of Vercel, so things like our events such as NextConf, Vercel Ship. I work very directly with the design team and also some engineering to craft those experiences and create those websites as well as the actual Vercel marketing pages - like our Vercel homepage. Basically anything that’s not the dashboard or docs is something that I’ve likely touched over the last two years.
Emil (01:13)
Cool - why the marketing stuff and not the dashboard or anything else?
Henry (01:19)
I actually got hired to Vercel as a marketing engineer initially. I was “a marketing engineer” for about a year before transitioning to the design team and becoming a design engineer. However, like just being and existing on the marketing team before that really, paved the path for me to just continue doing that on the design engineering side of things.
There were a lot of really fun projects that we got to tackle when I moved over to the design engineering team - like the Vercel homepage redesign - which was super fun to work on and a like multi -month long project as well.
Emil (02:04)
We are going to talk about the redesign later, but could we go back a bit? You obviously have a very impressive personal site. Many people on the course’s Discord were very impressed by that. Could you tell us a bit more about why you built it, how you built it, and how that happened?
Henry (02:23)
The whole story started my last year of college when I was applying to jobs and I was really failing to get any offers because I was a pretty unremarkable graduate on paper, so to say.
So after submitting countless applications and attending a handful of interviews, I realized I should probably try and do something to differentiate myself a little bit, so I decided to start creating a website that would showcase my skills.
The idea for my website really stemmed from this vision that I had of wanting to have a 3D experience that people could go into and just see who I was, but in a very immersive way. Initially the whole setting and everything for this website was to be taking place in some cyber-punky future. But I realized shortly after starting that iteration of it that that would be nearly impossible on my pretty short timeline of trying to get a job before I graduated. So I did a hard pivot towards a 90s vibe and theme. That actually really worked out for me too, because the UI from the 90s is actually very simple and straightforward. So you can just make stuff really quickly and it looks period-accurate because it’s super simple.
After spending about two or three months on that project and pretty much doing only that and ignoring all of my schoolwork, I ended up releasing it to Twitter and it got a very positive response, which I was super grateful for.
I guess technically it’s made with just create-react-app - not Next.js or three.js or react-three-fiber. It’s pretty bare bones, which is just sort of a symptom of me being more new to the space at that time and not knowing that Next.js or react-three-fiber even existed when I created it.
Emil (04:59)
How did you learn? Because this is pretty impressive 3D stuff that’s going on there. Did you like learn it at school or did you like take a course for it?
Henry (05:16)
So I guess I learned a lot of 3D stuff in high school, just through self-exploration and learning things myself.
This is pretty deep, personal lore for myself… but I was active in some Call of Duty zombie-modding communities, where you’d create maps and stuff. I definitely learned some modeling then. Once you learn that stuff, you know how it works fundamentally.
So when it came to “I have to learn Blender, I have to learn all this stuff” - well, I did have courses at the time I was looking at, like Bruno Simon’s three.js journey that really helped learn the basics and everything.
I guess fundamentally having that background in just knowing how 3D stuff works in general really helped me create the experience.
Emil (06:23)
Right. Because you did this to find a job basically and I’m guessing that’s how you got to work at Vercel, right? Because this is your first real job.
Did you apply? Or did someone reach out to you based on the tweet about the personal site?
Henry (06:37)
Yeah, so when I “released this website” to my zero followers and I got a bunch of likes, I got reached out to a bunch - which was really cool - and I had the absolute privilege of being able to interview with a lot of companies and have my choices regarding who I wanted to go with. As opposed to the much more grim reality that I was facing before - which was like sending out a hundred applications and hoping to get two interviews.
So with that context - Guillermo, our CEO, actually reached out to me over Twitter DMs and that’s what kickstarted my interview process. I did still interview and I did several interviews with them before signing an offer. But that’s how I joined Vercel.
Emil (07:20)
Right. Interesting. That’s how I joined Vercel as well, Guillermo DM’d me on Twitter.
So you work at Vercel. You switch teams - you didn’t work on the design engineering team from the beginning because there was no design engineering team when you joined.
Obviously a lot of people are interested in design engineering; design engineering is a very interesting career path at the moment. Many companies are hiring design engineers. Could you tell us a bit more about like how design engineering looks like at Vercel? How does your job look like?
Henry (08:42)
I think at Vercel, the design engineer’s role is really just, as a whole, almost a replacement for what would otherwise be two people: a designer and an engineer both working on a project. So in any sort of case where you have that “iteration loop” of a designer and engineer, you can just replace it with one design engineer.
Because of that, we’ve worked on a lot of random things (seemingly). We’re kind of all over the place, which is very nice because novelty is always nice at a job and to get to do new experiences, not just feeling stuck working in one place.
To even like say that there is a single thing I do day to day, I don’t think that’s very honest. I do such different things every single day. It’s mostly just doing some designs, doing engineering, and owning a lot of the work that you do as well and not really having that back-and-forth that some people are so familiar with - where you’re talking as an engineer (or coming from an engineering background), that loop of talking to a designer, and going back-and-forth. That’s just not a thing that you have to worry about when it comes to the stuff that you’re doing. With that said, we do work with the designers as well and we do work with engineers to do our work too. It’s really hard to pinpoint exactly what we do, I guess.
Emil (10:46)
But okay, so I obviously kind of know how it looks like at Vercel because I worked on the same team but -
Henry (10:52)
I’m actually so curious what you think it looks like.
Emil (10:57)
How design engineering looks like at Vercel or in general?
Henry (10:59)
Yeah, yeah.
Emil (11:04)
From my perspective, I think design engineers are people that sort of - you know - if you and I would work together on something, then we would operate on the same wavelength: I would like what you created and I hope you would like what I created.
Then the designers would also not have to give us a list with 40 - like it’s not that we built exactly what the designer wanted and there is no like feedback at all. There’s obviously feedback and we work together, but I don’t think that I could design and build something myself and be very proud of that.
I could say I’m a design engineer but I’m not a design engineer that designs and builds the designs that he designed. I know that there are design engineers that do that, but I would say that’s how I see it.
Henry (12:17)
It’s definitely a spectrum of design engineers who lie more on the design side and the engineering side. For me, I definitely lie more on the engineering side, but I’m sure we can both think of plenty of design engineers who lie more on the design side.
Obviously, I don’t think there’s anything wrong with that - like everyone has their own strengths - I honestly wish I was more on the design side because I feel like that’s way cooler to be honest, but…
Emil (12:50)
Yeah, yeah. And it gives you more, it gives you more power sort of, right? If you can design and build everything yourself, you don’t need anyone else. Like, like it’s pretty powerful. But I guess there are design engineers at Verso like that, right? I think yes, designs and builds her stuff. So.
Henry (13:06)
Yeah, she’s super talented, yeah.
Emil (13:10)
I guess at Vercel specifically there are many design engineers that focus on different things; like you and I code a lot, someone else designs a bit more.
One question that I’m very interested in because I think about it a lot and there is no one answer to it; taste is obviously something that gets talked about a lot when it comes to design engineering and people say that good design engineers have good taste.
How do you think about taste? How can someone learn or get good taste? And what does taste mean to you in terms of design engineering and everything around that.
Henry (14:06)
I feel like taste is pretty difficult to define.
Even as like design engineers, I don’t feel totally qualified to answer this question. Because I feel like taste really applies to any profession almost.
It is a very important thing with design engineering, and that is what people really get drawn towards. But I don’t think it’s inherently a design engineering trait, if that makes any sense. I definitely feel like taste is much more of a designer trait that design engineers inherently hold having both of those skills.
So if you wanted to develop your taste, I’d say... the probably the number one thing is try and develop your design muscles first. It’s like breaking the problem down a little bit easier as opposed to just being like “taste is a magical thing that you just sort of have to have and some people have it, some people don’t”. It’s definitely a learned thing over time. Just based off of your experiences: what you do, what you make, whatever.
In terms of how do you refine your taste? You look at people who are really good. You try to educate yourself. Like there are books and courses on this. Your course does a great job, honestly, at trying to explain this very complicated topic.
Just finding inspiration for yourself, looking at new ideas. Even just being on Twitter alone, you already have an upper hand in terms of seeing what’s really going on in the UI craft/taste space. I open up my Twitter feed and I’m just bombarded with people making these gorgeous things and I’m like, damn.
The last thing is just practicing it like any skill. It’s just something that you have to do - over time, you’ll develop it, you’ll refine it. Everyone comes in with different tastes too, and everyone will have different tastes in everything too. So it’s not like something that you either have or don’t. It’s just something that you either have refined to be very accessible and people really are drawn towards it. I think that’s really what a refined taste is like. It’s just something that resonates with most people that see it.
Emil (17:06)
Right, right. Yeah, I agree with that answer, but you said that taste is not necessarily a trait of a design engineer. So what is a trait? What are you looking for in a design engineer? Because you are obviously hiring at Vercel right now. What does make a good design engineer in your opinion?
Henry (17:25)
Okay, so I do think that taste is something that a design engineer has, but I just mean it’s not explicitly something that the role has.
It’s just more so something that the design part of a design engineer has to have. So good taste is obviously something that we’re looking for. Or, at the very least, taste that resonates with us, because you know... to say one taste is good and one is bad is not too good to say.
The other things we just look for are just people that are really passionate about it. If you have the passion to create cool user interfaces or web experiences: that is number one best thing to see. And it’s honestly a requirement to be a successful design engineer in this space. And then beyond passion, just curiosity: wanting to learn, do more, and create stuff.
Emil (18:30)
Okay, so we talked about your career, design engineering, and this course is obviously about animations and you created quite a few animations on the new Vercel marketing pages.
How do you think about animations? How do you build them? Do you just jump straight in the code and see what sticks? How do you think about easing, duration? Could you walk us through your process of building an animation and thinking about it while you do it.
Henry (19:11)
The number one thing I try and do when I start an animation is to try and visualize it or see in my head what I want the final thing to look like. Just that exercise of trying to visualize something in its complete form.
That’s something that I personally tend to go towards in terms of iterating towards something that I want to create. Maybe this isn’t super applicable to people that don’t like to do that or aren’t good at that. I like to have a pretty strong idea of like what I want to do. And then I’ll just continue iterating towards that.
Most of the time that initial version I thought I wanted to create is not what I end up making. But even just having that strong vision to direct me towards something is really useful in just starting - it’s always hard to start doing something. But once you get the ball rolling and start iterating and get feedback on stuff, it’s way easier to keep going and making something great.
I do definitely jump right into the code, though, as the first step.
Emil (20:22)
On those marketing pages that we see at least specifically, do you use like Framer motion for example, or do you mostly use CSS animations? What do you choose most of the time and why?
Henry (20:41)
At Vercel, specifically just because we are so performance focused, we tend to really lean towards as much native CSS animations as possible. Just because Frame Motion is JavaScript, so you have to hydrate before you can start playing any animations. And also, they’re not necessarily hardware accelerated if you’re doing layout stuff.
Honestly, if you’re doing anything with layout, you have to use Framer Motion, basically. We tend to just go towards CSS animations, just because it’s super performant.
Emil (21:23)
Yeah, yeah, I guess you also don’t do a lot of layout animations on those marketing pages, right? At least I haven’t seen a lot of those.
Henry (21:31)
Yeah, and if they are layout animations, they’re usually basic enough to where you can really just fake it with transforms.
Emil (21:37)
Okay, I see.
When it comes to easings - I have a set of easings that I use most of the time. And then I choose which one to pick. I rarely create my own easings.
Henry (21:55)
Really? I always create my own. Yeah, cubic-bezier.com.
Emil (22:06)
Okay, that’s interesting. How do you do it? Like with the visualizer?
Henry (22:08)
Yeah, cubic-bezier.com.
Emil (22:10)
But you kind of know which curve you want right? You don’t just drag around -
Henry (22:12)
Yeah, of course. While I’m doing stuff, I’ll usually create four or five easing curves for something until I really dial it in and get it right. Because I like that level of touch and polish that like a very custom curve for looks.
Emil (22:27)
No, that makes sense. But which type of curve do you usually go for? Or is it very specific or very one-off for each animation? Like ease-in-out or ease-out or do you just see what works each and every time?
Henry (22:56)
I tend to lean towards, as of late, since I think my taste has evolved a lot. Like I used to really like exp-out where it’s super fast at the beginning and then it’s super exaggerated like this. I’ve been leaning a lot more towards just a pretty basic ease curve with a bit more exaggerated of an out. So I don’t know if you can visualize that.
Emil (23:11)
So, faster at the end?
No, slower at the end.
So like an ease out, but a very subtle one, I guess.
Henry (23:37)
A subtle ease in, a more aggressive ease out.
So it’s not symmetrical, of course. That’s definitely what I’ve been leaning towards. I really love that curve. I think they’re something very natural about it.
I’ve also been leaning towards - weirdly - linear easings lately too. At least stuff that just looks a little bit more linear, but it’s not linear. Just a little - you wouldn’t be able to know.
Emil (24:20)
Yeah, that’s interesting. I don’t think I ever use linear unless it’s something like moving all the time like logos.
So you’ve obviously worked in the design engineering field for a while. What advice would you give someone who wants to become a design engineer? Like what would you do if you weren’t a design engineer and wanted to become one?
Henry (25:06)
As a disclaimer, I personally don’t think I’ve been in this space for too long, first of all. But it is also a very new space. I’m incredibly hesitant to like prescribe a single path or even allude to there being a correct path to like go from engineer to design engineer, designer to engineer because that is normally how it goes.
With that said, I think one of the best things you can do is to just make stuff and get experience doing stuff, and then being very public about it. I think that’s worked out for both of us. I don’t want to sound too crazy being like “Yeah, just get super popular on Twitter. Then you can become a design engineer”. But that is a pretty valid path, honestly.
If you can gain a little bit of a following - just making cool things and sharing your work - that’s a very valid path to get this role.
Companies are also hiring. So if you have a strong portfolio: apply, see if you can get the job. And I also think f you’re currently employed at a company that’s interested in design engineering, you can try and push a little bit internally to get into that role.
I mean, you were the first design engineer at Vercel basically. Without you, I wouldn’t be a design engineer because you basically pushed us to create a whole team. If you feel like it’s valuable and you’re confident in your skills as a design engineer, then I’d say that’s also a pretty valid path to just try and do - but definitely up to the company and individual.
Emil (27:13)
Yeah, I agree. You have to build stuff and let people know that you built those things. That puts you in an advantageous position because you don’t have to apply like you did to 100 companies - you will be approached if your work is good enough, obviously.
Henry (27:41)
And I think too you have to just get better at it, obviously. If you are interested in it and you have a passion for it - if you just do a bunch of work and just keep flexing your design and engineering muscles to make new and exciting things, then you’ll get better over time.
Emil (28:09)
Mm -hmm. I think the most important thing is just to build stuff because the more stuff you build the better you get at it, but that’s with everything.
When it comes to animations, how do you decide when to animate something and when not? It’s very easy to overdo it and animate a lot of stuff.
Henry (28:43)
There are examples of people animating a lot of stuff and it really working out great and also examples of people animating nothing and it looking great. You have to use your taste to sort of dictate this decision.
But as a rule of thumb, when it comes to figuring out what you want to animate on a page… I come from the marketing side of things where you’re trying to tell a story. How do I tell a story with this animation? Is this animation even worth doing? Is it even contributing to that story?
Having that as a foundation to dictate what you do is helpful because it will avoid you over-animating stuff. Because I don’t think you should just go into being like, every single thing has to be animated. Because sometimes it really doesn’t and it really shouldn’t. So you have to be very conscious about what it is you’re doing.
If you ever find yourself just grinding out animations, maybe you don’t have to animate all that stuff. Just take a step back, think about it, figure out what you’re trying to actually tell and how you can use animation to accomplish that.
I would say do it tastefully. That is a pretty loaded phrase, but…
Emil (30:08)
Okay.
Right.
No, but it makes sense. But you talked about like telling a story and that’s what Vercel wants to do with their marketing pages as well.
Is there something that you guys do to ensure that every page feels like Vercel? I’m talking about consistency in terms of animations. The AI page sort of feels the same as another page when it comes to the way everything moves and is animated or is every page just different?
Henry (30:54)
At its core, we are always trying to tell the story of speed and performance and with that framework, it can help dictate how you animate things. And most of the time, we actually don’t animate a lot of stuff because it’s actually way faster obviously. And we don’t believe in super flourishy animations just for nothing.
Emil (31:19)
Right.
Yeah.
Henry (31:27)
We do sometimes go all out and animate some crazy things. And when we do do that, it’s really fun.
But it’s usually only to tell a story or if it’s like an important beat to the story that we want to tell. For example, a large globe in the middle of a page that is fully animated, and it’s actually telling this whole story of how Vercel works. It’s obviously worth investing into animating that whole thing because it can really draw people in and explain to people very visually what we do.
Emil (32:05)
When you think about animation, is there something that you should never do in your opinion or rarely do or should avoid when it comes to animations? Like something performance related or easing related, duration related, anything.
Henry (32:34)
Some actual performance tips are, you should never use Framer Motion to animate something coming in. If it’s something that should happen immediately on the page load, because that requires JavaScript to be loaded and everything so you can delay entire visual things just because JavaScript isn’t loaded. That’s one thing that I always keep in mind. I don’t know if there’s any hard rules you shouldn’t do.
What would you say?
Emil (33:03)
What would I say? I don’t have anything on the spot right now, but what you said is pretty valid. I know we avoided that when I was at Vercel, you should just use CSS animations at that point.
Maybe one thing that I would say is to avoid linear almost always. I know you just mentioned that you like using linear -ish easing curves.
Henry (33:20)
Yeah, linear-ish. Sorry, I want to clarify. I don’t like to use the actual linear curve, but I like things to almost look like it is, but it doesn’t look like it. I don’t know how to explain it.
There’s a very specific curve I have in my mind and what that looks like. But it’s more just feeling responsive and fast that I like from that curve, I guess.
Emil (33:47)
Okay, yeah, that’s good. But yeah, linear easing is something that comes to my mind.
And not make your animations like too long, because that’s kind of annoying. Obviously, if it fits the vibe, or you tell a story, like you said, and it really fits this very specific situation, then yes. But in general, I feel like animation should be very fast to not become annoying to users.
Henry (34:39)
There’s almost never a case that like animation - like a transition or something - should be over a second, absolute max. And that’s with a pretty extreme easing curve too.
I would say anything users clicking on - 200 milliseconds is the go-to you can even go lower like 150 for super fast stuff you want.
If you ever find yourself at 150 milliseconds for an animation, you’re like “this is not fast enough”, it is probably not worth animating at all. That’s always an option. You don’t always have to animate everything. I know that this is a course in animations, but sometimes the best animation is no animation. So something to keep in mind, I guess.
Emil (35:19)
Yeah, that’s what Sam Selikoff said that to me about design as well: the best design is no design because the outcome has already been anticipated.
Henry (35:49)
Same vibe.
Emil (35:52)
To close this off, are there any people, books, blogs, courses or anything that you recommend to people that are interested in design, engineering, or design-engineering?
Henry (36:12)
In terms of courses, I will be an absolute shill until the day I die for Bruno Simon three.js course because he really personally did a lot for me in terms of helping me progress my career. So I would say his course - if you want to learn anything about 3D, that is definitely the place to do it.
It’s honestly not that expensive and the amount of content he has - like 80 hours or something - it’s unbelievable how much he’s done. It’s absolute crazy value for what you’re spending. It’s like a dollar an hour for the price, which is insane.
So if you want to do anything with 3D, definitely check out his course.
In terms of other designers and engineers, I would say Twitter is one of the best places to be right now. I personally just follow a bunch of design engineers on Twitter. I love following their work and getting inspired that way.
Emil (37:24)
So who specifically? Drop some names!
Henry (37:26)
It’s an everyday occurrence that I go on Twitter and I’m impressed by someone’s work. So I really do not have anyone off the top of my head.
I can just start listing all the people I follow, but if anyone wants to know who I follow, just go and look at my Following list on Twitter.
A lot of design engineers typically don’t follow too many people, so check out their lists and you can just start looking at people’s stuff.
Henry (38:02)
Okay, I guess that’s it for the interview. Is there like anything else you want to to say? This is your time.
Henry (38:13)
I don’t have anything to push, right now.
I’m trying to post more things on Twitter. I have a few fun things lined up. Which is very exciting.
Follow me on Twitter, at @henryheffernan.
Emil (38:26)
Okay.
Yeah, follow Henry on Twitter and and he will post some very exciting stuff soon.
So this was the first interview. Thank you for listening. And there actually at the time of this record of when this gets published, there is already another interview with Mariana, who also works at Vercel as well so you can check this interview out in case you haven’t already, but that’s it.
Thank you Henry for your time.
Emil (39:09)
Thank you.
Interview notes
- Three.js course by Bruno Simon
- Henry’s Twitter
- Cubic Bezier site