Season 3
|
Episode 3
Landing page techniques used by the pros
Erik Kennedy
CEO and Designer @ Learn UI Design
Oct 19, 2023
Oct 19, 2023
|
65 min
65 min
music by Dennis
About this Episode
In this episode, we analyze four different websites (Lemonade, Formcarry, Stella Domo + Runway) to help you confidently write and design landing pages that sell 💪 Listen to learn how to:
Use layout techniques that make your design stand out
Avoid the biggest animation and copywriting mistakes
Add tasteful animation to your website
Showcase testimonials effectively
Design a top-notch hero section
+ a lot more
If you want to go even deeper 👉 check out Erik's new Landing Page Academy
Deep Dives
Get every episode
Free lessons from the top designers 👇
Fonz Morris
Lead monetization designer @ Netflix
Mia Blume
Past leader @ Pinterest, Square
Jorn van Dijk
CEO @ Framer
Femke
Design lead @ Gusto
Kenny Chen
UX lead @ Google
Join 8K+ designers
HC
HC
HC
HC
Deep Dives
Get every episode
Free lessons from 👇
Fonz Morris
Lead designer @ Netflix
Mia Blume
Past leader @ Pinterest, Square
Femke
Design lead @ Gusto
Kenny Chen
UX lead @ Google
Join 8K+ designers
HC
HC
HC
Deep Dives
Get every episode
Free lessons from the top designers 👇
Fonz Morris
Lead monetization designer @ Netflix
Mia Blume
Past leader @ Pinterest, Square
Jorn van Dijk
CEO @ Framer
Femke
Design lead @ Gusto
Kenny Chen
UX lead @ Google
Join 8K+ designers
HC
HC
HC
HC
Transcript chapters
The landing page mentality
There's two questions in my mind. One is what are the goals of the design work that I'm doing? And the other is what is the brand that I'm trying to achieve?
And if you think about it, the brand is kind of a subset of goals. So maybe it's all just about achieving the goals, but that's, that's generally where I think. And with a landing page, the goals are often. Almost by definition of the landing page, there's one goal. It's to get a conversion, right? To convert people.
Maybe that means sign up. Maybe that means buy. Maybe that means donate. Maybe that means start free trial. Maybe that means talk to sales. Oh, um, but whatever it is, like there's one thing that I'm trying to drive people towards and me and whoever else has a say in that website should be crystal clear on what [00:02:00] constitutes a conversion.
What is the thing we're trying to optimize? So I try and get very clear about like, what is that goal? And then, on the brand side of things, just start coming up with a list of adjectives, a list of phrases, a list of things that you're all about, and guess what? That's your brand. And the much... Harder problem is not getting agreement on those.
Like that's going to be a great exercise. It's always clarifying. Sometimes people think it's maybe a little bit squishy, but usually clients feel very heard. If you can ask them about who they are and what they stand for and they repeat it back to you and then you're like, okay, this is what I've, this is the list I've boiled out of what you've just said.
They go. That's me. And it's like, cool, we're on the right track. The tougher part is translating those adjectives and those phrases into the specifics of a design, be it the typography, the colors, the layouts, other elements like that. We're definitely going to talk a lot about deriving a visual language in this conversation.
I do like how it kind of [00:03:00] always comes back to this idea of a sales pitch. You know, at the day, it was what, what are we doing? We're, we are selling that next step.
The landing page mentality
There's two questions in my mind. One is what are the goals of the design work that I'm doing? And the other is what is the brand that I'm trying to achieve?
And if you think about it, the brand is kind of a subset of goals. So maybe it's all just about achieving the goals, but that's, that's generally where I think. And with a landing page, the goals are often. Almost by definition of the landing page, there's one goal. It's to get a conversion, right? To convert people.
Maybe that means sign up. Maybe that means buy. Maybe that means donate. Maybe that means start free trial. Maybe that means talk to sales. Oh, um, but whatever it is, like there's one thing that I'm trying to drive people towards and me and whoever else has a say in that website should be crystal clear on what [00:02:00] constitutes a conversion.
What is the thing we're trying to optimize? So I try and get very clear about like, what is that goal? And then, on the brand side of things, just start coming up with a list of adjectives, a list of phrases, a list of things that you're all about, and guess what? That's your brand. And the much... Harder problem is not getting agreement on those.
Like that's going to be a great exercise. It's always clarifying. Sometimes people think it's maybe a little bit squishy, but usually clients feel very heard. If you can ask them about who they are and what they stand for and they repeat it back to you and then you're like, okay, this is what I've, this is the list I've boiled out of what you've just said.
They go. That's me. And it's like, cool, we're on the right track. The tougher part is translating those adjectives and those phrases into the specifics of a design, be it the typography, the colors, the layouts, other elements like that. We're definitely going to talk a lot about deriving a visual language in this conversation.
I do like how it kind of [00:03:00] always comes back to this idea of a sales pitch. You know, at the day, it was what, what are we doing? We're, we are selling that next step.
Leading with content vs. design
And. It kind of begs this question then of, well, what, what kind of comes first? Like, do we jump into Figma and start throwing around different wireframes?
Do we write out the story and some of the key language? Do we think about like an outline? And I like that a lot of what you talk about kind of puts design in the driver seat of the content on a page, but I think that can be a little bit scary. And especially for designers who maybe are more comfortable, you know, punting that off to a UX writer or somebody to come in and actually like write the meat of the company.
And, you know, we're just supposed to make it look pretty. Can you talk a little bit about that process and how designers can grow that muscle of actually writing and articulating the sales pitch itself rather than just designing isolated sections and making them look visually beautiful in Figma? I don't necessarily think that [00:04:00] you need to have the landing page fully written before you design it, or even vice versa.
That you don't need to have a visual language before you start writing out what you see as the main points you want to cover in the landing page. I very much view those two threads as something you can do in parallel and also a little bit of a chicken and egg problem, right? Like, yeah, just for the simplest possible example, if you're kind of listing out some features or something, and you think of three features and you're like, these are really the three core features we want to hit.
You might very well decide that you want to have those in like three columns that are laid out in one row across. Right. I call it the three punch combo. You're just scrolling down on a desktop size device and you see boom, boom, boom. Maybe there's three sub headers and there's a couple sentences of text below each.
If that's five instead of three, that's going to change how the design looks, right? Like you, you may literally even be using a different font size for your sub header, just because all of a sudden now there's five of those things present on the screen. And it would feel like. It's like two shouting and two bold, but if you want three of them, then that design could look different.
[00:05:00] Or if you feel like you actually have really cool visuals for those, maybe instead of having three things across one row, you blow it up where there's like one, and then you scroll, and here's the second, and you scroll, and here's the third. And then like, let's say you go down that path, you're like, well, we do have cool visuals, but then once you realize it's going to take the whole page up, you're like, maybe we can add some extra text.
Maybe we can add like a little call to action here to read more about this particular feature because people have these questions. It's just like this feedback loop where the text informs the design, the design informs the text. Neither one is ever really truly done. Neither one gets, certainly neither one gets done before the other.
You were almost asking how can a designer. Start to step up, do some of that text. Like you said, run with the ball as far as they can. And then maybe you have someone else on the team that you're handing it off to. Well, I can tell you the most, in my opinion, the most important thing is to get the headline right.
And the second most important thing is to get the sub headers, right? And if you don't get those right, it [00:06:00] almost doesn't matter if the, if the body text is any good, because basically everyone will have left already. When a reader arrives at a landing page. It's you versus the internet. They could go do anything else with that time, right?
They're on your landing page, but they could be on Netflix and they could be on Twitter and they could be on what, you know, Instagram and whatever else. There's so many other things that they could be doing that every second that they're on your landing page, you need to like convince them within the first five seconds, it's worth staying here to investigate for five more seconds.
And in those five seconds, you have to convince them. Actually, no, there's even more, like, you are at the right place, we have something of value to offer you, it will make your life easier in these ways. And so with every little bit of time, you need to convince that person, yes, again, stay here, read this, and then when they've read enough, and they go, okay, this has addressed all my objections.
Then, hey, there's a shot, there's a chance that they're going to buy. The first step in that [00:07:00] path is the headline. When someone lands on your landing page for the very first time, they see that H1. They see that, you know, that top level above the fold page title or headline or whatever you want to call it.
And if that doesn't succinctly describe the greatest value that your product is offering them, you're already behind, right? You're already having people who are going to go, I don't understand what this is, and they just drop off. The way I phrase it in Landing Page Academy is the most succinct statement of the greatest value for the greatest number of your customers.
So yeah, so those three things, if you can do all three of those things with your headline. You're already way ahead and at least you've earned a couple more seconds of someone's attention and they're going to scroll down a little bit more and go, Hmm, okay, what is this really about? And they might read some sub headers and maybe they'll read a little bit of body text here or there.
Maybe they'll even get to the bottom of the page, but it's like nail that headline. You want every single person who's a plausible customer that when they read your headline. They go, if you were to ask them, does this site have something to offer you [00:08:00] a value? They go, yeah, yeah. I'm the target market. If they can't self identify as the target market after reading your headline, that's not good.
Like why would they not just leave? And. I can't stress how on a knife's edge every landing page is and the difficulty of the task that a landing page has to do because it's, it's a sales pitch, like you said. It is a sales pitch, but it's a sales pitch where you're blindfolded as you give it because you can't see the prospect and they have duct tape essentially over their mouth because they can't ask you any questions.
Obviously, this is a terrible way to give a sales pitch, but that's what every landing page is up against. You have to give a blindfolded sales pitch to someone who can't ask you this first thing, and also, in person, at least there's some social unacceptability to walking away from someone mid conversation, right?
Not on the landing page. [00:09:00] They can just close that sucker anytime they want. And they will. And like, pay attention to your own behavior. See how little it takes for you to just close a page. Because you're like, I don't really get what this is about. X, gone. Yeah. I like the idea that the hero section kind of being the, in a sense, you're selling the entire product or the entire company or whatever.
But you're also kind of just like, you're selling why you should spend the next 20 plus seconds on this website versus bouncing. Yeah. That's a great way to think about it. I have the actual salesperson at the door. Uh, the only thing I'll add is, like, the Netflix next episode timer has already started as well.
And you have, like, nine seconds. Let's look at some tangible examples. Like, let's point at some things and really dissect. What landing pages are doing well and you know, different opportunities for improvement. So I'm going to toss it to you and we can do a quick screen share.
Leading with content vs. design
And. It kind of begs this question then of, well, what, what kind of comes first? Like, do we jump into Figma and start throwing around different wireframes?
Do we write out the story and some of the key language? Do we think about like an outline? And I like that a lot of what you talk about kind of puts design in the driver seat of the content on a page, but I think that can be a little bit scary. And especially for designers who maybe are more comfortable, you know, punting that off to a UX writer or somebody to come in and actually like write the meat of the company.
And, you know, we're just supposed to make it look pretty. Can you talk a little bit about that process and how designers can grow that muscle of actually writing and articulating the sales pitch itself rather than just designing isolated sections and making them look visually beautiful in Figma? I don't necessarily think that [00:04:00] you need to have the landing page fully written before you design it, or even vice versa.
That you don't need to have a visual language before you start writing out what you see as the main points you want to cover in the landing page. I very much view those two threads as something you can do in parallel and also a little bit of a chicken and egg problem, right? Like, yeah, just for the simplest possible example, if you're kind of listing out some features or something, and you think of three features and you're like, these are really the three core features we want to hit.
You might very well decide that you want to have those in like three columns that are laid out in one row across. Right. I call it the three punch combo. You're just scrolling down on a desktop size device and you see boom, boom, boom. Maybe there's three sub headers and there's a couple sentences of text below each.
If that's five instead of three, that's going to change how the design looks, right? Like you, you may literally even be using a different font size for your sub header, just because all of a sudden now there's five of those things present on the screen. And it would feel like. It's like two shouting and two bold, but if you want three of them, then that design could look different.
[00:05:00] Or if you feel like you actually have really cool visuals for those, maybe instead of having three things across one row, you blow it up where there's like one, and then you scroll, and here's the second, and you scroll, and here's the third. And then like, let's say you go down that path, you're like, well, we do have cool visuals, but then once you realize it's going to take the whole page up, you're like, maybe we can add some extra text.
Maybe we can add like a little call to action here to read more about this particular feature because people have these questions. It's just like this feedback loop where the text informs the design, the design informs the text. Neither one is ever really truly done. Neither one gets, certainly neither one gets done before the other.
You were almost asking how can a designer. Start to step up, do some of that text. Like you said, run with the ball as far as they can. And then maybe you have someone else on the team that you're handing it off to. Well, I can tell you the most, in my opinion, the most important thing is to get the headline right.
And the second most important thing is to get the sub headers, right? And if you don't get those right, it [00:06:00] almost doesn't matter if the, if the body text is any good, because basically everyone will have left already. When a reader arrives at a landing page. It's you versus the internet. They could go do anything else with that time, right?
They're on your landing page, but they could be on Netflix and they could be on Twitter and they could be on what, you know, Instagram and whatever else. There's so many other things that they could be doing that every second that they're on your landing page, you need to like convince them within the first five seconds, it's worth staying here to investigate for five more seconds.
And in those five seconds, you have to convince them. Actually, no, there's even more, like, you are at the right place, we have something of value to offer you, it will make your life easier in these ways. And so with every little bit of time, you need to convince that person, yes, again, stay here, read this, and then when they've read enough, and they go, okay, this has addressed all my objections.
Then, hey, there's a shot, there's a chance that they're going to buy. The first step in that [00:07:00] path is the headline. When someone lands on your landing page for the very first time, they see that H1. They see that, you know, that top level above the fold page title or headline or whatever you want to call it.
And if that doesn't succinctly describe the greatest value that your product is offering them, you're already behind, right? You're already having people who are going to go, I don't understand what this is, and they just drop off. The way I phrase it in Landing Page Academy is the most succinct statement of the greatest value for the greatest number of your customers.
So yeah, so those three things, if you can do all three of those things with your headline. You're already way ahead and at least you've earned a couple more seconds of someone's attention and they're going to scroll down a little bit more and go, Hmm, okay, what is this really about? And they might read some sub headers and maybe they'll read a little bit of body text here or there.
Maybe they'll even get to the bottom of the page, but it's like nail that headline. You want every single person who's a plausible customer that when they read your headline. They go, if you were to ask them, does this site have something to offer you [00:08:00] a value? They go, yeah, yeah. I'm the target market. If they can't self identify as the target market after reading your headline, that's not good.
Like why would they not just leave? And. I can't stress how on a knife's edge every landing page is and the difficulty of the task that a landing page has to do because it's, it's a sales pitch, like you said. It is a sales pitch, but it's a sales pitch where you're blindfolded as you give it because you can't see the prospect and they have duct tape essentially over their mouth because they can't ask you any questions.
Obviously, this is a terrible way to give a sales pitch, but that's what every landing page is up against. You have to give a blindfolded sales pitch to someone who can't ask you this first thing, and also, in person, at least there's some social unacceptability to walking away from someone mid conversation, right?
Not on the landing page. [00:09:00] They can just close that sucker anytime they want. And they will. And like, pay attention to your own behavior. See how little it takes for you to just close a page. Because you're like, I don't really get what this is about. X, gone. Yeah. I like the idea that the hero section kind of being the, in a sense, you're selling the entire product or the entire company or whatever.
But you're also kind of just like, you're selling why you should spend the next 20 plus seconds on this website versus bouncing. Yeah. That's a great way to think about it. I have the actual salesperson at the door. Uh, the only thing I'll add is, like, the Netflix next episode timer has already started as well.
And you have, like, nine seconds. Let's look at some tangible examples. Like, let's point at some things and really dissect. What landing pages are doing well and you know, different opportunities for improvement. So I'm going to toss it to you and we can do a quick screen share.
Landing page #1 — Lemonade
I want to show this website, lemonade.
com. It's an insurance company for everyone who's following along at home. It's a great website. And [00:10:00] one of the things I really like about it is that like websites.
Where it's like crazy animation and, um, front end effects. And, you know, there's like a million lines of JavaScript or WebGL or whatever it is. But this website is not like that. This website is like a little more within reach of like the average design team. And they also happen to do so much stuff right, in my opinion.
That it's like just an excellent case study and worth looking at. So, you know, like I said earlier, it's like the above the fold is really one of the most important. Parts of your landing page. And what I love is that everything in this above the fold is kind of in sync. Like the main message you're supposed to be getting is what the H one says.
Forget everything, you know, about insurance. And I'll just add, this is a side note. Like, obviously forget everything, you know, about insurance doesn't meet the three criteria that I mentioned earlier. So like, maybe I would change [00:11:00] this if I was the designer working on it, but that aside, I think it is the right message.
And it's also perfectly coherent with the rest of their brand. So it's like you land on this website and as far as the overall feel, it's really airy, it's really spacious. They've got this like cutesy illustration at the bottom of this. Dude on his phone with his dog, just hanging out and listening to some music.
And they've got this little electric car kind of bumping along as it charges. But it's, it's really like little homey illustration that just makes it feels very casual. It feels very friendly. It also feels very sort of understated cause it's all black and white. The only colored element on the whole page is right in the middle.
It's this bright pink button, which probably is like the least common button color for insurance companies. And it just says, check our prices. And so, I love that the illustration says, hey, we're modern, we're casual, we're friendly. [00:12:00] That H1 literally says, forget everything you originally thought about insurance, we're different.
And then, if that like, you know, they don't pay for months and there's all this hassle and stuff. Lemonade is like just trying to shake you out of that mindset from the second you land on the site and make you go, Hmm, what, like, what are these guys all about? So that's the first impression. I love that. I love how unified it is.
Um, they've got the font, the color, the illustration, everything kind of gives that, that overall sense of like, forget what you thought insurance was all about. We're fresh. We're modern. We're new. It's amazing how much just that subtle motion with the illustration speaks to the perceived quality too. Like it feels like a legit website.
And all that's really happening is that guy's head's bouncing and the car is bouncing a little bit, but it adds so much more than that. This was static. It looks at first glance, like you're looking at an illustration. In fact, I think I called it an illustration, but there are just a few little things that are subtly animated about it.
And so if you stay there for [00:13:00] half a second, you go, Oh, wait a sec. Yeah, this is actually really cool. Um, I mentioned this in landing page Academy, but there's. I think there's this effect where anything that's hard to do in Figma is like an indicator that, uh, there's, there's a quality in this site and by extension, the product that you're selling that is a little bit more rare.
And so to us, anything that's hard to do in Figma, it just seems to look a little cooler. So animations. Um, any sort of like clearly custom illustrations or, or even clearly like commissioned photography that's specific to that thing. Like all those are great because you have to get out of your vector editor that costs whatever 12 a month and you have to.
Have some sort of skill or some sort of content that is about you specifically. And I think when we see those things as viewers, we're so used to like the boxy designs where it's just a stack of rectangles with some text boxes and, and totally square images [00:14:00] that. Yeah. When we see those subtle indicators of, of quality, the things that can't be done in Figma, it's like, Oh, this is cool.
This is legit. This is different. So totally images too. There's another really subtle detail about this illustration that I think is. It's quite nice. And even kind of speaks to the, uh, intentionality of the overall composition of the hero section, because it's like, where is it directing our eyes? And there's like a clear shape happening.
You have this V that kind of pushes you into the CTA button and it's all because of. The types of buildings that they stack, like in the back, there's the boxy buildings, but then in the forefront of the composition, they took the two houses that have the slanted roofs and they S and it slants the whole composition in towards the CTA button.
It's like a really subtle thing. And I kind of even wonder how top of mind it was when they were designing it, but everything about this hero section points. You to that pink CTA. That's awesome. Yeah, no, I never noticed that or thought about that in the context of this landing [00:15:00] page. Uh, I do. Not to just constantly be pitching my courses, but in learn UI design, I do say that like one indicator of great imagery and a website is it has a clear path of motion, which like, I think you can kind of guess what I'm talking about when I say motion, but it does feel like the motion here is this very clear, like slide in from the sides and boom, there's our pink button CTA.
Yep. Click it. You know, you want to.
Landing page #1 — Lemonade
I want to show this website, lemonade.
com. It's an insurance company for everyone who's following along at home. It's a great website. And [00:10:00] one of the things I really like about it is that like websites.
Where it's like crazy animation and, um, front end effects. And, you know, there's like a million lines of JavaScript or WebGL or whatever it is. But this website is not like that. This website is like a little more within reach of like the average design team. And they also happen to do so much stuff right, in my opinion.
That it's like just an excellent case study and worth looking at. So, you know, like I said earlier, it's like the above the fold is really one of the most important. Parts of your landing page. And what I love is that everything in this above the fold is kind of in sync. Like the main message you're supposed to be getting is what the H one says.
Forget everything, you know, about insurance. And I'll just add, this is a side note. Like, obviously forget everything, you know, about insurance doesn't meet the three criteria that I mentioned earlier. So like, maybe I would change [00:11:00] this if I was the designer working on it, but that aside, I think it is the right message.
And it's also perfectly coherent with the rest of their brand. So it's like you land on this website and as far as the overall feel, it's really airy, it's really spacious. They've got this like cutesy illustration at the bottom of this. Dude on his phone with his dog, just hanging out and listening to some music.
And they've got this little electric car kind of bumping along as it charges. But it's, it's really like little homey illustration that just makes it feels very casual. It feels very friendly. It also feels very sort of understated cause it's all black and white. The only colored element on the whole page is right in the middle.
It's this bright pink button, which probably is like the least common button color for insurance companies. And it just says, check our prices. And so, I love that the illustration says, hey, we're modern, we're casual, we're friendly. [00:12:00] That H1 literally says, forget everything you originally thought about insurance, we're different.
And then, if that like, you know, they don't pay for months and there's all this hassle and stuff. Lemonade is like just trying to shake you out of that mindset from the second you land on the site and make you go, Hmm, what, like, what are these guys all about? So that's the first impression. I love that. I love how unified it is.
Um, they've got the font, the color, the illustration, everything kind of gives that, that overall sense of like, forget what you thought insurance was all about. We're fresh. We're modern. We're new. It's amazing how much just that subtle motion with the illustration speaks to the perceived quality too. Like it feels like a legit website.
And all that's really happening is that guy's head's bouncing and the car is bouncing a little bit, but it adds so much more than that. This was static. It looks at first glance, like you're looking at an illustration. In fact, I think I called it an illustration, but there are just a few little things that are subtly animated about it.
And so if you stay there for [00:13:00] half a second, you go, Oh, wait a sec. Yeah, this is actually really cool. Um, I mentioned this in landing page Academy, but there's. I think there's this effect where anything that's hard to do in Figma is like an indicator that, uh, there's, there's a quality in this site and by extension, the product that you're selling that is a little bit more rare.
And so to us, anything that's hard to do in Figma, it just seems to look a little cooler. So animations. Um, any sort of like clearly custom illustrations or, or even clearly like commissioned photography that's specific to that thing. Like all those are great because you have to get out of your vector editor that costs whatever 12 a month and you have to.
Have some sort of skill or some sort of content that is about you specifically. And I think when we see those things as viewers, we're so used to like the boxy designs where it's just a stack of rectangles with some text boxes and, and totally square images [00:14:00] that. Yeah. When we see those subtle indicators of, of quality, the things that can't be done in Figma, it's like, Oh, this is cool.
This is legit. This is different. So totally images too. There's another really subtle detail about this illustration that I think is. It's quite nice. And even kind of speaks to the, uh, intentionality of the overall composition of the hero section, because it's like, where is it directing our eyes? And there's like a clear shape happening.
You have this V that kind of pushes you into the CTA button and it's all because of. The types of buildings that they stack, like in the back, there's the boxy buildings, but then in the forefront of the composition, they took the two houses that have the slanted roofs and they S and it slants the whole composition in towards the CTA button.
It's like a really subtle thing. And I kind of even wonder how top of mind it was when they were designing it, but everything about this hero section points. You to that pink CTA. That's awesome. Yeah, no, I never noticed that or thought about that in the context of this landing [00:15:00] page. Uh, I do. Not to just constantly be pitching my courses, but in learn UI design, I do say that like one indicator of great imagery and a website is it has a clear path of motion, which like, I think you can kind of guess what I'm talking about when I say motion, but it does feel like the motion here is this very clear, like slide in from the sides and boom, there's our pink button CTA.
Yep. Click it. You know, you want to.
Landing page #2 — Form Carry
So for my part of show and tell. I wanted to show the form carry website. So it's form carry. com. And in terms of like hero section positioning, it's really straightforward. Like they kind of just define what they do. It says get emails and messages from your HTML form.
And there's even a little eyebrow copy above that just says form backend. The reason that. I really enjoy this site. Well, I guess there's a few, and the first is they kind of have this fun curved motif that [00:16:00] is present in almost every section of the website and it's all derived from the logo up here. So if you go to formdairy.
com or you can look at the screen, you'll see they have these three lines and they're all a little bit. Curved. And it creates this kind of subtle F shape. And that curvature is brought in everywhere. And the first place you see it is actually in the input. So they have curved inputs, which that's crazy.
Yeah, I can't even imagine what is required to, to pull that off. Um, but it's kind of cool in that, like. Consciously communicates the fact that like, Hey, our forms are different. You've never seen one of these before. And they didn't have to say that their forms are different, but the bringing the logo motif into how they portray the UI kind of does that job for them, which I really like.
And if you scroll the page, I'll just kind of highlight all of the different places that this curvature exists. So there's like the backdrop of the section here, and they have this kind of like scribble pattern [00:17:00] down here. And. Uh, they bring it in basically everywhere. Even the integrations, they scroll through that same F logo shape.
And it's nice. Like, I think it's, I think it's really nice to have that subtle pattern kind of exist everywhere. So that's the first thing is how they create this motif and bring it in. Creatively. Yeah. Um, and. Even just kind of one more thing touching on that is like, I like pointing at this section right here.
It has a little image with a code block. And when you really break down what this section is, it's so simple. It's eyebrow copy, heading, subtext, and an image. It's a pattern that we have to put together as designers really frequently, and yet they've done such a great job of adding visual interest by again, taking that same curvature pattern and they added a really subtle gray one up underneath the [00:18:00] text and then this purple one right here behind the image.
And so I would look at this and say like, you know, this is actually pretty visually interesting section. And yet in terms of the content that it's displaying, it's very simplistic. As you get better at landing page design, you realize what's, what's sort of the fundamental content here. Oh, it's a text. And then it's some, some imagery, but even the imagery here is a, a code block, right?
And so the most boring representation of this is just kind of having, you know, text on the left and then this like little picture of some code, which is really just more text on the right. And like, that's not exciting. Like, yeah. Like you said, even this one screen is just a masterclass in how can you dress up that pattern so that it looks so much more visually interesting.
I think that's the key. It's like this could, and often is so boring and yet it's delightful. Yep. Another way that they. Take rather simple layouts and make them really [00:19:00] interesting is they have this pattern and it starts in the hero section where they use animated icons in line with the headings and I've started to see this more and more on websites and I love it.
And it pops up down here as well. It says collect payments from your form easily. And there's just like this really subtle floating purple dollar coin. Um, one more time, best in class spam protection. And again, it's like pretty simple stuff. Eyebrow heading, subtext, and just that little dash of the animated icon and pairing that color back to not only just the eyebrow, but.
The accent UI is a really, really nice touch because each section kind of has its own color theme. You got like, this one is orange and you scroll up here and it's purple. And they just take that animated icon and match it to whatever the, the highlight of [00:20:00] that UI composition is. It's such a good way to take something where it's like, okay, this is a headline.
It could be boring, or we can have this animated purple coin flipping around here and show off that actually, no, we're like. Quite fun. And, uh, we got, we got some, uh, front end skills to show off too. So yeah, it's great. Which I guess to be clear, maybe I'm saying that and it sounds negative. Like we're just, we're just showing off.
I don't think it's that I think a lot of the details in a landing page, these design details, they do convey to people we're not like everyone else. We put in extra effort with our landing page and the implication is. The same thing is true of the product. Um, and I've, I've done landing page user testing where I've seen people specifically stay at landing pages longer, even if they don't quite understand things.
They're like, wow, this design is so good. Like, I kind of want to see what this is about. Or like, this is clearly really modern and new. I'm not super sure what it is, but it's like people will cut you more slack if you can really [00:21:00] intrigue them with the design, which I think is something that's kind of like, uh, underrated in terms of conversion rates and design.
I love that point because we talk about visual interest a lot when it comes to landing pages and we treat that as a goal. You want to have some level of visual interest, but we don't often articulate why that is. And it ties back to that original idea where it's like you're basically at every single section reselling someone why they should stay on the page instead of hitting command W and jumping back to whatever they were doing before.
And. A little icon like this really can make your page more sticky and ultimately increase your chances of winding up with that conversion. Totally, totally agree. No, and I like your point about, like, this site being excellent implementation, excellent in terms of just, like, bringing it home and putting everything together and tying the whole site together and yet, the little things that they're doing, if you're, if you're like a beginning designer or an intermediate designer and you're like, like, I need to [00:22:00] break this down and understand this, it's, none of them individually are super crazy.
screenshot, but there's really Uh, just a few things that are going on. There's a background highlight shape, right? Where the highlight shape draws some, draws your eye towards the image of the screenshot. The highlight shape has a subtle gradient. Then, there's, I call it, in Landing Page Academy, I call this a frame break.
The click to copy button is sort of outside of the bounds of the image. And so it looks like it's kind of just pasted in as an annotation. And in fact, then there's another thing, a hand drawn annotation, pointing to the relevant piece of UI that it's trying to highlight. And then yes, there's also, I guess they're animating a little light effect, a little sheen that kind of glimmers on the one piece of UI that they're trying to emphasize in this whole screenshot.
But even without that, the other three things. Not at all difficult to do, right? All of them very simple, but sometimes it's like if you are designing a landing page and you're like, man, this is kind of boring. [00:23:00] Oftentimes it's just a matter of adding three things. And there takes experimentation to figure out what those three things are for the brand and for the site and for the layout.
But if you can add three little visual effects, you know, all of a sudden it's going to be a lot more interesting. You remind me of another thing that actually I'd like to get your take on. Because I think something that designers often have to make a decision on, especially when you're designing landing pages for like software products, is you want to show some UI.
You want to make the product feel real. But sometimes it can be a little bit overwhelming. And so like they did a really interesting thing here where they are not, they're basically using like placeholder gray instead of having the actual UI. Like this is supposed to be a Stripe dashboard. It says details.
And then there's just placeholder lines. Yes. They've made the decision that like, okay, this can only be distracting. It's not contributing back to the value proposition. And yet sometimes you do want to really showcase the. UI and have it feel very [00:24:00] real. So there's kind of like this spectrum between a simulated composition that maybe is a little bit more narrative forward and actual UI showcases that demonstrate like the power and robustness of a product.
That's fair. I, I think if you were to go look at the very best landing pages for software products, you would see this simplified UI style more often than not. Like where they're, they're abstracting some of the details. Like you called it narrative driven. That's a great word for it. This is incredibly effective if you just want to show off one feature or really have someone's focus go to, to one part of the screen, you have to ask yourself like what the value proposition that you're trying to reinforce and.
Maybe for tools, it is more likely that you would actually want to see it. Cause you want to see like, okay, this is like a powerful product. Like it does things, um, it, you know, they're not afraid. Linear is not afraid to show like a big table view where something like this, you know, we're trying [00:25:00] to communicate, collect payments from your form easily.
This word easily is pretty interesting. It's like, I'm not, they're not trying to sell power. They're trying to sell simplicity. And so that's reinforced in this abstracted. I'll touch on one more thing on this page. It's pretty animation heavy, maybe more so than even I would typically do. And yet I think the way that they approach the animations is pretty interesting because there's no like scroll animations, nothing's tied to scroll position, nothing's flying in from the sides.
I'm not like zooming into an image on scroll. Everything is contained within the relevant sections. And some of them are actually quite robust. Like they have this click to see magic and you can actually. Simulate the product all within this section. Like this is maybe outside of the bounds of what a lot of software teams would have an appetite for.
Yeah. And yet it's not overwhelming because it is contained. And so maybe you could even use this as an opportunity [00:26:00] to kind of touch on it. Like, how do you think designers should. about animation? Like how do you teach what works and maybe what is more distracting? One of my biggest takes on animation is that the vast majority of designers shouldn't actually do kind of what you described as like the large scale, scroll jacking, like sort of in your face animations.
And actually these more subtle ones, or you were calling them contained. I like that too. But a lot of these. Smaller scale animations are like great indicators of quality, great indicators of, of state. If you're trying to convey something that changes state over time, an animation can be a great way to do that.
But yeah, it doesn't, it doesn't need to be in your face. It doesn't need to be hijacking your scrolling effect. It doesn't need to be turning your computer into a, into a little space heater or whatever. I love this. And I think, uh, trying to say as a designer, let me think, what is the power I can get with smaller scale animations is.
The [00:27:00] best way to go for the vast majority of websites when you're dealing with smaller animations, there's actually a lot of free things out there too. Like you don't have to look at this little animated curvy line and think, well, I have no idea how to make that because actually I bet you could find 40 of these on Lottie files.
com and they'd probably look great. And they would, you could find one that would match your brand as well.
Landing page #2 — Form Carry
So for my part of show and tell. I wanted to show the form carry website. So it's form carry. com. And in terms of like hero section positioning, it's really straightforward. Like they kind of just define what they do. It says get emails and messages from your HTML form.
And there's even a little eyebrow copy above that just says form backend. The reason that. I really enjoy this site. Well, I guess there's a few, and the first is they kind of have this fun curved motif that [00:16:00] is present in almost every section of the website and it's all derived from the logo up here. So if you go to formdairy.
com or you can look at the screen, you'll see they have these three lines and they're all a little bit. Curved. And it creates this kind of subtle F shape. And that curvature is brought in everywhere. And the first place you see it is actually in the input. So they have curved inputs, which that's crazy.
Yeah, I can't even imagine what is required to, to pull that off. Um, but it's kind of cool in that, like. Consciously communicates the fact that like, Hey, our forms are different. You've never seen one of these before. And they didn't have to say that their forms are different, but the bringing the logo motif into how they portray the UI kind of does that job for them, which I really like.
And if you scroll the page, I'll just kind of highlight all of the different places that this curvature exists. So there's like the backdrop of the section here, and they have this kind of like scribble pattern [00:17:00] down here. And. Uh, they bring it in basically everywhere. Even the integrations, they scroll through that same F logo shape.
And it's nice. Like, I think it's, I think it's really nice to have that subtle pattern kind of exist everywhere. So that's the first thing is how they create this motif and bring it in. Creatively. Yeah. Um, and. Even just kind of one more thing touching on that is like, I like pointing at this section right here.
It has a little image with a code block. And when you really break down what this section is, it's so simple. It's eyebrow copy, heading, subtext, and an image. It's a pattern that we have to put together as designers really frequently, and yet they've done such a great job of adding visual interest by again, taking that same curvature pattern and they added a really subtle gray one up underneath the [00:18:00] text and then this purple one right here behind the image.
And so I would look at this and say like, you know, this is actually pretty visually interesting section. And yet in terms of the content that it's displaying, it's very simplistic. As you get better at landing page design, you realize what's, what's sort of the fundamental content here. Oh, it's a text. And then it's some, some imagery, but even the imagery here is a, a code block, right?
And so the most boring representation of this is just kind of having, you know, text on the left and then this like little picture of some code, which is really just more text on the right. And like, that's not exciting. Like, yeah. Like you said, even this one screen is just a masterclass in how can you dress up that pattern so that it looks so much more visually interesting.
I think that's the key. It's like this could, and often is so boring and yet it's delightful. Yep. Another way that they. Take rather simple layouts and make them really [00:19:00] interesting is they have this pattern and it starts in the hero section where they use animated icons in line with the headings and I've started to see this more and more on websites and I love it.
And it pops up down here as well. It says collect payments from your form easily. And there's just like this really subtle floating purple dollar coin. Um, one more time, best in class spam protection. And again, it's like pretty simple stuff. Eyebrow heading, subtext, and just that little dash of the animated icon and pairing that color back to not only just the eyebrow, but.
The accent UI is a really, really nice touch because each section kind of has its own color theme. You got like, this one is orange and you scroll up here and it's purple. And they just take that animated icon and match it to whatever the, the highlight of [00:20:00] that UI composition is. It's such a good way to take something where it's like, okay, this is a headline.
It could be boring, or we can have this animated purple coin flipping around here and show off that actually, no, we're like. Quite fun. And, uh, we got, we got some, uh, front end skills to show off too. So yeah, it's great. Which I guess to be clear, maybe I'm saying that and it sounds negative. Like we're just, we're just showing off.
I don't think it's that I think a lot of the details in a landing page, these design details, they do convey to people we're not like everyone else. We put in extra effort with our landing page and the implication is. The same thing is true of the product. Um, and I've, I've done landing page user testing where I've seen people specifically stay at landing pages longer, even if they don't quite understand things.
They're like, wow, this design is so good. Like, I kind of want to see what this is about. Or like, this is clearly really modern and new. I'm not super sure what it is, but it's like people will cut you more slack if you can really [00:21:00] intrigue them with the design, which I think is something that's kind of like, uh, underrated in terms of conversion rates and design.
I love that point because we talk about visual interest a lot when it comes to landing pages and we treat that as a goal. You want to have some level of visual interest, but we don't often articulate why that is. And it ties back to that original idea where it's like you're basically at every single section reselling someone why they should stay on the page instead of hitting command W and jumping back to whatever they were doing before.
And. A little icon like this really can make your page more sticky and ultimately increase your chances of winding up with that conversion. Totally, totally agree. No, and I like your point about, like, this site being excellent implementation, excellent in terms of just, like, bringing it home and putting everything together and tying the whole site together and yet, the little things that they're doing, if you're, if you're like a beginning designer or an intermediate designer and you're like, like, I need to [00:22:00] break this down and understand this, it's, none of them individually are super crazy.
screenshot, but there's really Uh, just a few things that are going on. There's a background highlight shape, right? Where the highlight shape draws some, draws your eye towards the image of the screenshot. The highlight shape has a subtle gradient. Then, there's, I call it, in Landing Page Academy, I call this a frame break.
The click to copy button is sort of outside of the bounds of the image. And so it looks like it's kind of just pasted in as an annotation. And in fact, then there's another thing, a hand drawn annotation, pointing to the relevant piece of UI that it's trying to highlight. And then yes, there's also, I guess they're animating a little light effect, a little sheen that kind of glimmers on the one piece of UI that they're trying to emphasize in this whole screenshot.
But even without that, the other three things. Not at all difficult to do, right? All of them very simple, but sometimes it's like if you are designing a landing page and you're like, man, this is kind of boring. [00:23:00] Oftentimes it's just a matter of adding three things. And there takes experimentation to figure out what those three things are for the brand and for the site and for the layout.
But if you can add three little visual effects, you know, all of a sudden it's going to be a lot more interesting. You remind me of another thing that actually I'd like to get your take on. Because I think something that designers often have to make a decision on, especially when you're designing landing pages for like software products, is you want to show some UI.
You want to make the product feel real. But sometimes it can be a little bit overwhelming. And so like they did a really interesting thing here where they are not, they're basically using like placeholder gray instead of having the actual UI. Like this is supposed to be a Stripe dashboard. It says details.
And then there's just placeholder lines. Yes. They've made the decision that like, okay, this can only be distracting. It's not contributing back to the value proposition. And yet sometimes you do want to really showcase the. UI and have it feel very [00:24:00] real. So there's kind of like this spectrum between a simulated composition that maybe is a little bit more narrative forward and actual UI showcases that demonstrate like the power and robustness of a product.
That's fair. I, I think if you were to go look at the very best landing pages for software products, you would see this simplified UI style more often than not. Like where they're, they're abstracting some of the details. Like you called it narrative driven. That's a great word for it. This is incredibly effective if you just want to show off one feature or really have someone's focus go to, to one part of the screen, you have to ask yourself like what the value proposition that you're trying to reinforce and.
Maybe for tools, it is more likely that you would actually want to see it. Cause you want to see like, okay, this is like a powerful product. Like it does things, um, it, you know, they're not afraid. Linear is not afraid to show like a big table view where something like this, you know, we're trying [00:25:00] to communicate, collect payments from your form easily.
This word easily is pretty interesting. It's like, I'm not, they're not trying to sell power. They're trying to sell simplicity. And so that's reinforced in this abstracted. I'll touch on one more thing on this page. It's pretty animation heavy, maybe more so than even I would typically do. And yet I think the way that they approach the animations is pretty interesting because there's no like scroll animations, nothing's tied to scroll position, nothing's flying in from the sides.
I'm not like zooming into an image on scroll. Everything is contained within the relevant sections. And some of them are actually quite robust. Like they have this click to see magic and you can actually. Simulate the product all within this section. Like this is maybe outside of the bounds of what a lot of software teams would have an appetite for.
Yeah. And yet it's not overwhelming because it is contained. And so maybe you could even use this as an opportunity [00:26:00] to kind of touch on it. Like, how do you think designers should. about animation? Like how do you teach what works and maybe what is more distracting? One of my biggest takes on animation is that the vast majority of designers shouldn't actually do kind of what you described as like the large scale, scroll jacking, like sort of in your face animations.
And actually these more subtle ones, or you were calling them contained. I like that too. But a lot of these. Smaller scale animations are like great indicators of quality, great indicators of, of state. If you're trying to convey something that changes state over time, an animation can be a great way to do that.
But yeah, it doesn't, it doesn't need to be in your face. It doesn't need to be hijacking your scrolling effect. It doesn't need to be turning your computer into a, into a little space heater or whatever. I love this. And I think, uh, trying to say as a designer, let me think, what is the power I can get with smaller scale animations is.
The [00:27:00] best way to go for the vast majority of websites when you're dealing with smaller animations, there's actually a lot of free things out there too. Like you don't have to look at this little animated curvy line and think, well, I have no idea how to make that because actually I bet you could find 40 of these on Lottie files.
com and they'd probably look great. And they would, you could find one that would match your brand as well.
Landing page #3 — Stella Domo
So here's another site that I think is. Kind of a fun example. I brought it in contrast to lemonade because this one definitely has a lot more in terms of the animations and scroll effects, and it's just a little bit more in your face about it.
So it's Stella domo, prefab. com. And it looks like as of right now, they've got one prefab house that they sell called the holiday domo. So. You land on it, you know, simple pattern here with the full page imagery, uh, I guess a photo though, kind of has a render like quality to it, sort of ethereal. It's really nice, but here's a picture of the house.
And then as you scroll down, they do some [00:28:00] wild stuff with what gets animated on scroll, the background kind of shrinks and stuff slides in from the side. Is it, and then as you keep going. They like, show you three different backgrounds for where this prefab house could be put, but then they start kind of, whatever, shattering in this weird fractal like pattern.
And then, okay, fine, then you get to the like, quote unquote, more normal part of the website. But even here... I, I think they're just doing a great job kind of mixing things up and sort of thinking outside of the box. Like you, you'll definitely notice these images. If you scroll around a little bit more, they have this ever so subtle parallax within their containers.
So it's like the placement of the image doesn't change, but kind of what you're seeing does just a little bit. And then this is one of my favorite parts of the site. So it's on the left, it's what appears like an animation, but I think in reality is just a whole bunch of [00:29:00] image files and they're all based on scroll position.
And so when you scroll quickly, those images fly by and has the effect of making it look like this three dimensional blueprint is assembled in front of your eyes as you scroll down the page, it's incredibly legit. The way they thought about the shadows too is so impressive. And, and you talked about like breaking the plane and how much interest that can add to a page.
They did not have to have this kind of almost map background break into the right panel. Yes. Really adds a lot. Like it's a super small detail, but it's like. Intentional chaos, almost? Yeah, intentional chaos. It's, I mean, the power of the frame break. If you have imagery, just let it, let it bust out of its, uh, container and see how things go.
By the way, speaking of intentional chaos, do you know what they're doing on this page? That is... Very, uh, very intentional, but also very chaotic. All of the paragraph text is indented farther than the subheader, right? So that's true of [00:30:00] assembly. Oh, okay. Here, more intentional chaos. They're numbered list.
Uses superscript text in a different color, following the title of that step. So if you, it's like, if you scroll up to step one, what was step one again? Uh, site. And then in superscript zero and read superscript zero one. It's like, okay, that actually means step one. Like they didn't take the normal way of saying, let's just have a one off to the left hand side.
It's like, no, what's, what's the, what's the visually the most interesting or intriguing way we can. Convey this sort of numbered list and yeah, this, I mean, this effect, I'm sure it works here or there. It would be a little bit odd to see it everywhere, but that's kind of the point. Like they just, they went a little bit outside of the box with it.
And as you pointed out, they literally went outside of the box with the image on the left. And then, uh, having the paragraph be indented a little bit more than the subhead. That's something, that's like a little motif that they repeat all the way through the site, like top to bottom. I noticed that up here too, like [00:31:00] that really stood out to me.
This is such an intentional decision to indent this paragraph text and you wouldn't see it very often. Yeah. It, it makes the whole section though. In so many ways, like it is the visual interest. Like this right panel is like, yeah, it's a nice image. This indentation is so cool. And maybe the reason it works so well is.
The rest of the composition is so simple. Like even down here, once we get into this animation, yeah, sure. There's a lot happening in this left side and there's like a lot of complexity, but like in terms of the page layout itself, this is remarkably simple still. Like there's an image on the left and there's just text on the right.
And so because there is that simplistic foundation, maybe that is the reason why I like them just breaking every typography layout rule in the book so much. I'm not sure. Yeah. Yeah. I mean, I [00:32:00] could go on and on. I think there's so much stuff that's going right with the site. And it kind of ties into what we were talking about earlier, where it's like.
Again, how many interesting effects are there just on this one page, right? Like we talked about the frame break of the imagery popping over to the right hand side. I also think part of it is the 50 50 layout. I've looked around. There's not a lot of them out there, but when I come across a site that just boldly divides the screen in half such that like Literally 50 percent is let's say an image and then the other 50 percent is very well set text.
They have, let's say wildly different background colors or they really contrast and it's just boom, 50, 50. Uh, I feel like that's an underrated layout and it almost always feels pretty impactful when, when you come across it. It makes me want to play with it, honestly, because this is, it's striking. It's striking and I haven't actually done it.
And even when you get to this point right here. This is cool, where you have the orange panel, the [00:33:00] light cream panel, and then you have the dark full image panel, and you get this kind of juxtaposition of the three really, really high contrast. Colors. Yeah. It's hard to pull off, but it looks excellent. Yeah, it really does.
This imagery is just so well chosen, right? Like I, I like to say to joke that I'm jealous of graphic designers because they get to choose certain text, put it on a certain image, and that text never changes. The screen size never changes, and the image never changes, right? Like that poster is there forever.
But on websites, we don't have that luxury. We always have. Different texts showing up on top of different images. And the idea that you can pick an image where like, again, on the left side, you have this white text, but the background of the image is just so dark and there's basically no contrast to it.
That white text is just. It's like uber legible, little, little details. They might have done some work to kind of fade out the left side of that image to a certain color. I was just looking at it. I, I, I think there is something like, I think they have maybe even a little bit of like an oval shape [00:34:00] here with a layer blur that's kind of fading it out, but it's so subtle you could never really notice, but it's like, it's a small detail that maybe there is the continuation of these wall lines all the way over and it would look just a little bit.
Messier, but cleaning up that image goes a long way. Yeah. So there's a lot of stuff here, but. Again, I just think in terms of doing animation right, where some of it is a little more aggressive, some of it takes over the screen a little bit more, but the net effect just kind of wows you. It's like, oh, I love this site.
So many things, big and small, that they're doing. Talk to me a little bit about the typography. What's your impression of the typography on this page? Well, I like it quite a bit. So, you know, now we're looking at where they have a bunch of the quick stats at about the house. So starting at 375 K floor plan, 720 square feet.
So a lot of these labels, um, they do something, I call this in their new eye design, I call it the slub pattern for smaller, lighter, uppercase, bold. [00:35:00] And it's this weird combination of properties here. I don't know that they're actually lightening it. I can't see over the screen share, but, um. It's this weird combination of properties where when you make text smaller and lighter, which kind of reduces the visibility, and yet you also make it uppercase and bolder.
Um, and sorry, by lighter, I mean color, not font weight. But when you, you know, use all four of those properties. It sort of balances the text and also gives it, I guess what you would call is like a little bit more elegant of an appearance, even for a sans serif. And so that's what they're doing with all these labels.
And if you look at the letter spacing, which kind of goes along with, um, something you'd naturally look to do when you're uppercasing text. The letter spacing is huge. It's like, what, 15 percent or something? That is just going to add a certain level of elegance, even to a sans serif font. I think it looks awesome on this site and elsewhere, but it's Ivy Presto.
It's just one of those where it, like, it's definitely elegant, right? You're not going to want to use it on something that's supposed to be [00:36:00] too casual. But where it shines, it really shines, and I think it's one of those fonts. Where it's sort of one of those top tier fonts where it's like merely using it.
And even remotely the right setting will automatically automatically make your design better. Yeah. Yeah, it looks awesome. And I think it's really interesting too. Like I kind of wondered if they tweaked the letter spacing here, if it just comes naturally this condensed, but it really is, it's pretty tight letter spacing, like each character is kind of bumping up against the next.
And so the combination of that with the really spaced out eyebrow copy above looks awesome. It does. Yeah. I don't know either. It is the display version of Ivy Presto. So it might be a little bit tighter than, than a text version, but even so, yeah, I wouldn't be shocked if they tightened it up further.
Landing page #3 — Stella Domo
So here's another site that I think is. Kind of a fun example. I brought it in contrast to lemonade because this one definitely has a lot more in terms of the animations and scroll effects, and it's just a little bit more in your face about it.
So it's Stella domo, prefab. com. And it looks like as of right now, they've got one prefab house that they sell called the holiday domo. So. You land on it, you know, simple pattern here with the full page imagery, uh, I guess a photo though, kind of has a render like quality to it, sort of ethereal. It's really nice, but here's a picture of the house.
And then as you scroll down, they do some [00:28:00] wild stuff with what gets animated on scroll, the background kind of shrinks and stuff slides in from the side. Is it, and then as you keep going. They like, show you three different backgrounds for where this prefab house could be put, but then they start kind of, whatever, shattering in this weird fractal like pattern.
And then, okay, fine, then you get to the like, quote unquote, more normal part of the website. But even here... I, I think they're just doing a great job kind of mixing things up and sort of thinking outside of the box. Like you, you'll definitely notice these images. If you scroll around a little bit more, they have this ever so subtle parallax within their containers.
So it's like the placement of the image doesn't change, but kind of what you're seeing does just a little bit. And then this is one of my favorite parts of the site. So it's on the left, it's what appears like an animation, but I think in reality is just a whole bunch of [00:29:00] image files and they're all based on scroll position.
And so when you scroll quickly, those images fly by and has the effect of making it look like this three dimensional blueprint is assembled in front of your eyes as you scroll down the page, it's incredibly legit. The way they thought about the shadows too is so impressive. And, and you talked about like breaking the plane and how much interest that can add to a page.
They did not have to have this kind of almost map background break into the right panel. Yes. Really adds a lot. Like it's a super small detail, but it's like. Intentional chaos, almost? Yeah, intentional chaos. It's, I mean, the power of the frame break. If you have imagery, just let it, let it bust out of its, uh, container and see how things go.
By the way, speaking of intentional chaos, do you know what they're doing on this page? That is... Very, uh, very intentional, but also very chaotic. All of the paragraph text is indented farther than the subheader, right? So that's true of [00:30:00] assembly. Oh, okay. Here, more intentional chaos. They're numbered list.
Uses superscript text in a different color, following the title of that step. So if you, it's like, if you scroll up to step one, what was step one again? Uh, site. And then in superscript zero and read superscript zero one. It's like, okay, that actually means step one. Like they didn't take the normal way of saying, let's just have a one off to the left hand side.
It's like, no, what's, what's the, what's the visually the most interesting or intriguing way we can. Convey this sort of numbered list and yeah, this, I mean, this effect, I'm sure it works here or there. It would be a little bit odd to see it everywhere, but that's kind of the point. Like they just, they went a little bit outside of the box with it.
And as you pointed out, they literally went outside of the box with the image on the left. And then, uh, having the paragraph be indented a little bit more than the subhead. That's something, that's like a little motif that they repeat all the way through the site, like top to bottom. I noticed that up here too, like [00:31:00] that really stood out to me.
This is such an intentional decision to indent this paragraph text and you wouldn't see it very often. Yeah. It, it makes the whole section though. In so many ways, like it is the visual interest. Like this right panel is like, yeah, it's a nice image. This indentation is so cool. And maybe the reason it works so well is.
The rest of the composition is so simple. Like even down here, once we get into this animation, yeah, sure. There's a lot happening in this left side and there's like a lot of complexity, but like in terms of the page layout itself, this is remarkably simple still. Like there's an image on the left and there's just text on the right.
And so because there is that simplistic foundation, maybe that is the reason why I like them just breaking every typography layout rule in the book so much. I'm not sure. Yeah. Yeah. I mean, I [00:32:00] could go on and on. I think there's so much stuff that's going right with the site. And it kind of ties into what we were talking about earlier, where it's like.
Again, how many interesting effects are there just on this one page, right? Like we talked about the frame break of the imagery popping over to the right hand side. I also think part of it is the 50 50 layout. I've looked around. There's not a lot of them out there, but when I come across a site that just boldly divides the screen in half such that like Literally 50 percent is let's say an image and then the other 50 percent is very well set text.
They have, let's say wildly different background colors or they really contrast and it's just boom, 50, 50. Uh, I feel like that's an underrated layout and it almost always feels pretty impactful when, when you come across it. It makes me want to play with it, honestly, because this is, it's striking. It's striking and I haven't actually done it.
And even when you get to this point right here. This is cool, where you have the orange panel, the [00:33:00] light cream panel, and then you have the dark full image panel, and you get this kind of juxtaposition of the three really, really high contrast. Colors. Yeah. It's hard to pull off, but it looks excellent. Yeah, it really does.
This imagery is just so well chosen, right? Like I, I like to say to joke that I'm jealous of graphic designers because they get to choose certain text, put it on a certain image, and that text never changes. The screen size never changes, and the image never changes, right? Like that poster is there forever.
But on websites, we don't have that luxury. We always have. Different texts showing up on top of different images. And the idea that you can pick an image where like, again, on the left side, you have this white text, but the background of the image is just so dark and there's basically no contrast to it.
That white text is just. It's like uber legible, little, little details. They might have done some work to kind of fade out the left side of that image to a certain color. I was just looking at it. I, I, I think there is something like, I think they have maybe even a little bit of like an oval shape [00:34:00] here with a layer blur that's kind of fading it out, but it's so subtle you could never really notice, but it's like, it's a small detail that maybe there is the continuation of these wall lines all the way over and it would look just a little bit.
Messier, but cleaning up that image goes a long way. Yeah. So there's a lot of stuff here, but. Again, I just think in terms of doing animation right, where some of it is a little more aggressive, some of it takes over the screen a little bit more, but the net effect just kind of wows you. It's like, oh, I love this site.
So many things, big and small, that they're doing. Talk to me a little bit about the typography. What's your impression of the typography on this page? Well, I like it quite a bit. So, you know, now we're looking at where they have a bunch of the quick stats at about the house. So starting at 375 K floor plan, 720 square feet.
So a lot of these labels, um, they do something, I call this in their new eye design, I call it the slub pattern for smaller, lighter, uppercase, bold. [00:35:00] And it's this weird combination of properties here. I don't know that they're actually lightening it. I can't see over the screen share, but, um. It's this weird combination of properties where when you make text smaller and lighter, which kind of reduces the visibility, and yet you also make it uppercase and bolder.
Um, and sorry, by lighter, I mean color, not font weight. But when you, you know, use all four of those properties. It sort of balances the text and also gives it, I guess what you would call is like a little bit more elegant of an appearance, even for a sans serif. And so that's what they're doing with all these labels.
And if you look at the letter spacing, which kind of goes along with, um, something you'd naturally look to do when you're uppercasing text. The letter spacing is huge. It's like, what, 15 percent or something? That is just going to add a certain level of elegance, even to a sans serif font. I think it looks awesome on this site and elsewhere, but it's Ivy Presto.
It's just one of those where it, like, it's definitely elegant, right? You're not going to want to use it on something that's supposed to be [00:36:00] too casual. But where it shines, it really shines, and I think it's one of those fonts. Where it's sort of one of those top tier fonts where it's like merely using it.
And even remotely the right setting will automatically automatically make your design better. Yeah. Yeah, it looks awesome. And I think it's really interesting too. Like I kind of wondered if they tweaked the letter spacing here, if it just comes naturally this condensed, but it really is, it's pretty tight letter spacing, like each character is kind of bumping up against the next.
And so the combination of that with the really spaced out eyebrow copy above looks awesome. It does. Yeah. I don't know either. It is the display version of Ivy Presto. So it might be a little bit tighter than, than a text version, but even so, yeah, I wouldn't be shocked if they tightened it up further.
Landing page #4 — Runway
I'm gonna take over one last screen share here.
And this one is pretty interesting. We're going to look at runway. com and I think it's easy to look at this website and think, what [00:37:00] the heck? Like this is so over the top. And in many ways it kind of is. They take the motif to a level that almost everyone kind of ignores because everything reinforces this airplane terminal UI stuff that you would see in an airport, basically.
But I guess my challenge for us is to try to identify different patterns that maybe are actually a much simpler than they appear that other people can pull from and use on their own websites. So this is the hero section. Okay. And. It's kind of interesting, like something that I kind of always ask myself a little bit, which we actually haven't seen in the websites that we've been looking at is like, when does it make sense to tease continuation on a hero section and have some kind of an element that breaks that first viewport and kind of pulls your eyes down the page?
This is another example that's basically doing the complete opposite of that, where You could look at this and be pretty convinced that it is a single [00:38:00] scroll website. And in reality, what you have is you scroll through and it actually has a scroll transformation that zooms you in through the window.
And then you get into this UI, which actually, I kind of forgot what this UI looked like. And this maybe would be an example of when it, you know, they're not abstracting anything. It's like really, really, really detailed UI. And I still don't have a great answer of when that makes sense to do it versus.
When to have something more low fidelity, but I think here they're not trying to communicate one specific point about it, right? They're not trying to say like, yeah, you know, here's one feature or here's one easy flow or whatever there I think they're just kind of showing you to show you I think you might be right.
Yeah It's like what is the show is the mock up the show or is the the heading and that point in the story the show? Maybe that is a way that you could think about it. If you scroll down into the page we get this Kind of two panel here and [00:39:00] something that I really like that this website does a lot of is they combine really high contrast elements.
And we saw that a little bit on the last website too, but like having this kind of stark white container with the, you know, perfect contrast other like darker container. I really like it. As you scroll, you list out the different features. You have the airplane moving left to right. And it looks like they have kind of like a video embed here that demonstrates that feature on the right.
Something that I do really like, again, is that each section has its own little color dominant. Where you have one icon and then they highlight a word. This is your thing, Rid. I think it is my thing. And that's what I'm realizing is it's my thing. Because I like... Emphasizing, uh, skimmability over readability sometimes, where I would almost rather someone look at this and immediately have the key takeaway of [00:40:00] joyful modeling experience than be able to articulate the rest of the page.
Like make it really, really easy for people to not read 80 percent of the copy on your website so that I can ensure they get the whole high level story. That's kind of how I approach copywriting a little bit. I'm curious if you have a take on that. Well, I certainly agree that the subheads should tell 90 percent of the story.
If someone just reads the subheads, they should end the H1. They should understand essentially what you're doing. The subheads are tough to overstate. 10, 20x more important than the the actual body text sometimes. Yeah. I really like your 90 percent rule basically every part of the core story should come through in the headings and I think it's a Mistake that I see a lot on websites where people will write a heading and it'll say like our process Or something like that.
It's like it doesn't communicate anything It's a label that then forces [00:41:00] me to read, you know, the rest of the fine print essentially And Yeah, I think if ever you are just reading the headings and you realize they're not actually saying anything and they're just functioning as labels I think that's a problem.
Yeah No, that's a it seems like a great point and I wonder yeah, even with something like our process It's like that's it's an opportunity to to say something about your process. It's our easy three step process. It's our process. That's It's, we've done 10 million times. It's our process that is rated 4.
9 stars, whatever it is. It's like, you have an opportunity to describe a little bit more about that process there. Yeah. I like that. I like phrasing it as an opportunity. Cause it's like your headings are some of your most valuable real estate on the entire website. Yeah. Should be milking them for everything you possibly can in every single section.
I think it was the scenarios tab. To me, when you sent me this website, I was just like, this was the tab that kind of did it for me where it was like, [00:42:00] Oh, I see a lot of what this is about. And. What strikes me about this is like, this sort of thing is probably tough to describe in words. Like if you said, well, you can enter in these numbers and then you can have your forecasts automate.
Even when you change those numbers, everything still stays up to date and still stays live. And then you can make these forecasts based on those numbers and blah, blah, blah. It's like, what? Like, you've, you've kind of lost me. But, just like, Again, you just show one image instead or one little animation here.
And it's like, Oh, uh, yeah, I don't think Excel does that. Like I can see why that would be useful. And they have these little subtle indicators that the data is updating live and all this other stuff is happening. I just, I love that. Actually that lends itself to a great copywriting tip for designers, which is.
If you're talking about your product in person and you watch someone have an aha moment when you use a certain phrase when you Say thing use a certain word a certain phrase you explain a [00:43:00] certain feature and you just notice again and again that people are going Oh, wow, that's cool. Like that's the moment they get it.
That should be higher up on the landing page yeah, the same things that sell something in real life are gonna sell something on a landing page because again, it's It is just a sales pitch and the same things that lead to those aha moments. I mean, if anything, it's easier on a landing page where you have the visuals, you have complete visual control and, uh, you can show anything you want to augment what you're trying to say.
I love that you keep bringing it back to the in person experiences because one, it's like a nice forcing function for. Really putting the salesman hat on a little bit. You're not just showing a bunch of pretty features. You're trying to persuade someone. It also forces you to use conversational language and to like write like a human would speak.
That's almost always more effective. I, I totally agree. And I think it's easy to be like, no, our brand is very formal or whatever. We're not going to write like we speak. It's not to say that if you're like some luxury brand, you [00:44:00] need to stuff your writing full of emojis or whatever. Like, no, you don't.
Right. But if you write the same way, a clear, helpful, confident person talks, you're already so far ahead. I'm going to take us into the next section here. We're going to have a pretty big scroll transformation and we get into this. Big, bold heading text, have a nice little like animated logo icon up here.
There's a couple of things that I think are interesting that I'm just going to call out. I don't actually know the hard and fast rules about them, but I think it'd be interesting to hear your take. And the first has to do with the text contrast. I think it's. A little bit rare to see subtext that uses like the primary brand color.
And they've done that in other places too, where most of the time that I would design something like this, I would probably use like a light gray, or maybe I would just make this white [00:45:00] and then decrease the opacity to 85 percent or something like that. Yeah. And. Because I, you know, you kind of think about, like, in terms of text, you have, like, the three ways that you would, you know, make, increase the prominence of something, like, you're dealing with, like, the size, the weight, and then the color contrast, and sometimes when you have, like, competing factors, it feels a little bit odd to me, where, you know, maybe the text above is bigger and bolder, but then, in this case, in some ways, I think this commands more attention than the white.
I don't see this pattern that often. Do you ever do things like this, or do you have general thoughts on Hmm. The use of typography here. Yeah. So a couple thoughts. One is I agree with you. I would not think to do it this way immediately. And maybe that's, you know, a shortcoming on my part and I should experiment more with kind of adding color into sub into secondary text.
Not so much that it competes with the primary text, but that it balances it out nicely. [00:46:00] And we should put a link in the show notes, but I have an article that I wrote called seven rules for creating gorgeous UI wrote it years ago at this point, but I still think a lot of it holds up and it's about some of the first, most important and practical lessons that I learned getting into visual design.
And one of those things is I said, it's sort of poorly, I said, you need to. Learn to balance what I called up pop and down pop. But it refers to the idea that, like you said, there's certain things you can do to increase the prominence of text. You can make it bigger, you can make it bolder, you can make it contrast more against its background.
Those are probably the three biggest ways. And then of course, by doing the inverse things, you can make text pop less. And so then. That's like the 101 level, the 201 level is where you say, I'm going to take a piece of text and I'm going to apply some styles that make it more prominent and some styles that make it less prominent.
That was what I was talking about with the slub pattern, smaller, lighter, uppercase, and bold. It's like, this is sort of a different variation of the same thing where it's like, yeah, that subheader is smaller and [00:47:00] it's not as bold. And it doesn't have quite as much contrast with the background as the big white text does, but the fact that they make it yellow feels like it balances it out in a way that if it was just gray, which again is sort of like the first, like you said, the first thing I would do too, just kind of like, well, let's see how this looks if it's just white or maybe white at like a 80 percent opacity.
It's like, no, I think it actually does look better that it's yellow. And so it's a cool way to add in a pop of color and allow that. That text to sort of stand its own. I also wonder if there isn't something to the effect of having this big white text that kind of looks like airport signage, right? Um, it's not saying that much either too, or it's like, are we leading with design or are we leading with content?
And. In this situation, it's like, is this actually really a value proposition? Runway is a better way? Not really. And so [00:48:00] perhaps a reason that this might be the brand color is this is actually what they want to say on this section. And you're right, this is more supposed to just kind of be branded signage.
Theory that you should try and say things that your competitors can't. If you focus on saying true things about your product that your competitors can't, that's great. Like what? You don't have to worry about the competition. Literally everyone can say, my product is a better way. There's nothing specific about that, right?
So in that case it is a missed opportunity. But, you know who else doesn't necessarily have anything interesting to say in a lot of their headlines? Apple, like you can scroll through an entire Apple landing page and it's just like silly puns about how new and innovative and whatever it is. And on one hand, again, maybe this is a missed opportunity.
Maybe it has become sort of a tired trope that they just talk about everything being the most innovative version of iPhone yet, even though like, so we're the last [00:49:00] 15 and a half of them. But on the other hand, does it affect their sales? Like, no, I probably not. There is something to be said for. Like they just, they dominate the market anyways.
So I'm of two minds about this kind of thing, but it's like, they may be missing an opportunity with this text. Yeah. Also the design looks really good. And it's clear that this is from a team that if they put half as much effort into their product as they do to the landing page. It's going to be a really good product, which I think is part of the website that we're getting to, if you keep scrolling down, not to Russia.
No, it's true. I mean, we kind of get into this features section here and now I really am paying attention to when we're abstracting the UI. Now, this is an example where we have very, very, very simplistic mockups. It's almost trying to communicate. Yeah, it's true. They don't actually want you to look at this really that much.
It's just trying to communicate. There is a product here. We're not just. I think it's more about this text. [00:50:00] Yeah, I think, so I think the examples are probably carefully chosen. Like, for instance, I don't know how common it is for software to have burn and runway as built in, like, kind of first class. Yeah, I think your point about these breaking the frame is really interesting.
Like, this section would be so much more boring if marketing campaign didn't extend. Beyond this line. Yeah. It's such a small detail. Yeah, it is. And it's funny because I definitely like in recording all the content for landing page Academy, I've mentioned frame breaks. So many times, and it's wild to me that despite over a decade of design experience until I consciously started thinking about the idea of imagery breaking out of the frame as being a technique that you could just reach for, I had no idea how many like dozens of times we see it per day and yet how it doesn't feel overdone or anything.
It's like such a good little visual way to spice things up to just have in [00:51:00] your back pocket. Another thing that is kind of interesting to me is like, I think I would have expected this line. Or something to clearly align with this text and icon here in all three of these cards, and it doesn't. I don't know what to do with that.
It just kind of stands out to me as like, I definitely would have done it the other way, and so I always then kind of try to ask myself, like, I wonder why? One other thing that I want to touch on, especially as it relates to the section above, which is like, one of those small details that I find myself thinking of more now is when you have three UI elements, And a lot of times I think it's like, or three or more UI elements.
A lot of times it's like, you know, a couple pieces of text and a button, or maybe a couple pieces of text and an icon, or maybe all four of those. How do you think about the spacing in between them? And what I see a lot of junior designers doing is defaulting to having [00:52:00] equidistant space every single time.
And what I think is more interesting is thinking strategically about Content groups within that list and having some have a really tight spacing and some have much more wide spacing and it kind of just communicates that like subtle intent intentionality. And also it makes it so you kind of perceive less items because you group things together.
So this is an example where it's basically equidistant, which I think makes a lot of sense. It's more legible. Um, it's fine. I think maybe I'd like it to be a little tighter. If you go up here, they kind of do the opposite where. There's three items you have the logo and the heading and the subtext and there's like a little bit of space right here and 3x space below.
Yes. It's like a really subtle design decision that it's one of those things that as a designer, you're going to have to make 15 times on every landing page that you design. [00:53:00] Yeah, no, I love that. You're thinking about even the spacing of this, like it's such a, such a fine level of granularity. I definitely think that overall the idea of like the, the conceptual space between different elements should mirror the.
The space in pixels gets you 90 percent of the way there. But here, yeah, it's like, this is a, a great point. Like why would that icon be a little bit closer to runway than the subtext is? Um, versus down below, they have more or less equidistant spacing between the icon, the subhead and the paragraph. I don't know.
I do agree with you that if I was going to redesign the part down below, I would also pull in the text closer to the subhead and have a little more space in between the subhead and the icon. So that, that definitely feels right. And not that this is the time for it, but it's like such a good exercise to, if you did take this page, just like whatever, jump into dev tools or even mock it up really quickly in Figma, and then try [00:54:00] playing around with the icon space above and see if I make the icon float a little bit farther away, like why does it feel worse?
Did they make the right call here? And if it does feel worse, can you put your finger on why it feels worse? I don't, and I, I legit don't know what that would be, but I'm very curious for someone to, to do that, make the analysis, tag us on Twitter. One more thing about this page that I want to highlight.
Landing page #4 — Runway
I'm gonna take over one last screen share here.
And this one is pretty interesting. We're going to look at runway. com and I think it's easy to look at this website and think, what [00:37:00] the heck? Like this is so over the top. And in many ways it kind of is. They take the motif to a level that almost everyone kind of ignores because everything reinforces this airplane terminal UI stuff that you would see in an airport, basically.
But I guess my challenge for us is to try to identify different patterns that maybe are actually a much simpler than they appear that other people can pull from and use on their own websites. So this is the hero section. Okay. And. It's kind of interesting, like something that I kind of always ask myself a little bit, which we actually haven't seen in the websites that we've been looking at is like, when does it make sense to tease continuation on a hero section and have some kind of an element that breaks that first viewport and kind of pulls your eyes down the page?
This is another example that's basically doing the complete opposite of that, where You could look at this and be pretty convinced that it is a single [00:38:00] scroll website. And in reality, what you have is you scroll through and it actually has a scroll transformation that zooms you in through the window.
And then you get into this UI, which actually, I kind of forgot what this UI looked like. And this maybe would be an example of when it, you know, they're not abstracting anything. It's like really, really, really detailed UI. And I still don't have a great answer of when that makes sense to do it versus.
When to have something more low fidelity, but I think here they're not trying to communicate one specific point about it, right? They're not trying to say like, yeah, you know, here's one feature or here's one easy flow or whatever there I think they're just kind of showing you to show you I think you might be right.
Yeah It's like what is the show is the mock up the show or is the the heading and that point in the story the show? Maybe that is a way that you could think about it. If you scroll down into the page we get this Kind of two panel here and [00:39:00] something that I really like that this website does a lot of is they combine really high contrast elements.
And we saw that a little bit on the last website too, but like having this kind of stark white container with the, you know, perfect contrast other like darker container. I really like it. As you scroll, you list out the different features. You have the airplane moving left to right. And it looks like they have kind of like a video embed here that demonstrates that feature on the right.
Something that I do really like, again, is that each section has its own little color dominant. Where you have one icon and then they highlight a word. This is your thing, Rid. I think it is my thing. And that's what I'm realizing is it's my thing. Because I like... Emphasizing, uh, skimmability over readability sometimes, where I would almost rather someone look at this and immediately have the key takeaway of [00:40:00] joyful modeling experience than be able to articulate the rest of the page.
Like make it really, really easy for people to not read 80 percent of the copy on your website so that I can ensure they get the whole high level story. That's kind of how I approach copywriting a little bit. I'm curious if you have a take on that. Well, I certainly agree that the subheads should tell 90 percent of the story.
If someone just reads the subheads, they should end the H1. They should understand essentially what you're doing. The subheads are tough to overstate. 10, 20x more important than the the actual body text sometimes. Yeah. I really like your 90 percent rule basically every part of the core story should come through in the headings and I think it's a Mistake that I see a lot on websites where people will write a heading and it'll say like our process Or something like that.
It's like it doesn't communicate anything It's a label that then forces [00:41:00] me to read, you know, the rest of the fine print essentially And Yeah, I think if ever you are just reading the headings and you realize they're not actually saying anything and they're just functioning as labels I think that's a problem.
Yeah No, that's a it seems like a great point and I wonder yeah, even with something like our process It's like that's it's an opportunity to to say something about your process. It's our easy three step process. It's our process. That's It's, we've done 10 million times. It's our process that is rated 4.
9 stars, whatever it is. It's like, you have an opportunity to describe a little bit more about that process there. Yeah. I like that. I like phrasing it as an opportunity. Cause it's like your headings are some of your most valuable real estate on the entire website. Yeah. Should be milking them for everything you possibly can in every single section.
I think it was the scenarios tab. To me, when you sent me this website, I was just like, this was the tab that kind of did it for me where it was like, [00:42:00] Oh, I see a lot of what this is about. And. What strikes me about this is like, this sort of thing is probably tough to describe in words. Like if you said, well, you can enter in these numbers and then you can have your forecasts automate.
Even when you change those numbers, everything still stays up to date and still stays live. And then you can make these forecasts based on those numbers and blah, blah, blah. It's like, what? Like, you've, you've kind of lost me. But, just like, Again, you just show one image instead or one little animation here.
And it's like, Oh, uh, yeah, I don't think Excel does that. Like I can see why that would be useful. And they have these little subtle indicators that the data is updating live and all this other stuff is happening. I just, I love that. Actually that lends itself to a great copywriting tip for designers, which is.
If you're talking about your product in person and you watch someone have an aha moment when you use a certain phrase when you Say thing use a certain word a certain phrase you explain a [00:43:00] certain feature and you just notice again and again that people are going Oh, wow, that's cool. Like that's the moment they get it.
That should be higher up on the landing page yeah, the same things that sell something in real life are gonna sell something on a landing page because again, it's It is just a sales pitch and the same things that lead to those aha moments. I mean, if anything, it's easier on a landing page where you have the visuals, you have complete visual control and, uh, you can show anything you want to augment what you're trying to say.
I love that you keep bringing it back to the in person experiences because one, it's like a nice forcing function for. Really putting the salesman hat on a little bit. You're not just showing a bunch of pretty features. You're trying to persuade someone. It also forces you to use conversational language and to like write like a human would speak.
That's almost always more effective. I, I totally agree. And I think it's easy to be like, no, our brand is very formal or whatever. We're not going to write like we speak. It's not to say that if you're like some luxury brand, you [00:44:00] need to stuff your writing full of emojis or whatever. Like, no, you don't.
Right. But if you write the same way, a clear, helpful, confident person talks, you're already so far ahead. I'm going to take us into the next section here. We're going to have a pretty big scroll transformation and we get into this. Big, bold heading text, have a nice little like animated logo icon up here.
There's a couple of things that I think are interesting that I'm just going to call out. I don't actually know the hard and fast rules about them, but I think it'd be interesting to hear your take. And the first has to do with the text contrast. I think it's. A little bit rare to see subtext that uses like the primary brand color.
And they've done that in other places too, where most of the time that I would design something like this, I would probably use like a light gray, or maybe I would just make this white [00:45:00] and then decrease the opacity to 85 percent or something like that. Yeah. And. Because I, you know, you kind of think about, like, in terms of text, you have, like, the three ways that you would, you know, make, increase the prominence of something, like, you're dealing with, like, the size, the weight, and then the color contrast, and sometimes when you have, like, competing factors, it feels a little bit odd to me, where, you know, maybe the text above is bigger and bolder, but then, in this case, in some ways, I think this commands more attention than the white.
I don't see this pattern that often. Do you ever do things like this, or do you have general thoughts on Hmm. The use of typography here. Yeah. So a couple thoughts. One is I agree with you. I would not think to do it this way immediately. And maybe that's, you know, a shortcoming on my part and I should experiment more with kind of adding color into sub into secondary text.
Not so much that it competes with the primary text, but that it balances it out nicely. [00:46:00] And we should put a link in the show notes, but I have an article that I wrote called seven rules for creating gorgeous UI wrote it years ago at this point, but I still think a lot of it holds up and it's about some of the first, most important and practical lessons that I learned getting into visual design.
And one of those things is I said, it's sort of poorly, I said, you need to. Learn to balance what I called up pop and down pop. But it refers to the idea that, like you said, there's certain things you can do to increase the prominence of text. You can make it bigger, you can make it bolder, you can make it contrast more against its background.
Those are probably the three biggest ways. And then of course, by doing the inverse things, you can make text pop less. And so then. That's like the 101 level, the 201 level is where you say, I'm going to take a piece of text and I'm going to apply some styles that make it more prominent and some styles that make it less prominent.
That was what I was talking about with the slub pattern, smaller, lighter, uppercase, and bold. It's like, this is sort of a different variation of the same thing where it's like, yeah, that subheader is smaller and [00:47:00] it's not as bold. And it doesn't have quite as much contrast with the background as the big white text does, but the fact that they make it yellow feels like it balances it out in a way that if it was just gray, which again is sort of like the first, like you said, the first thing I would do too, just kind of like, well, let's see how this looks if it's just white or maybe white at like a 80 percent opacity.
It's like, no, I think it actually does look better that it's yellow. And so it's a cool way to add in a pop of color and allow that. That text to sort of stand its own. I also wonder if there isn't something to the effect of having this big white text that kind of looks like airport signage, right? Um, it's not saying that much either too, or it's like, are we leading with design or are we leading with content?
And. In this situation, it's like, is this actually really a value proposition? Runway is a better way? Not really. And so [00:48:00] perhaps a reason that this might be the brand color is this is actually what they want to say on this section. And you're right, this is more supposed to just kind of be branded signage.
Theory that you should try and say things that your competitors can't. If you focus on saying true things about your product that your competitors can't, that's great. Like what? You don't have to worry about the competition. Literally everyone can say, my product is a better way. There's nothing specific about that, right?
So in that case it is a missed opportunity. But, you know who else doesn't necessarily have anything interesting to say in a lot of their headlines? Apple, like you can scroll through an entire Apple landing page and it's just like silly puns about how new and innovative and whatever it is. And on one hand, again, maybe this is a missed opportunity.
Maybe it has become sort of a tired trope that they just talk about everything being the most innovative version of iPhone yet, even though like, so we're the last [00:49:00] 15 and a half of them. But on the other hand, does it affect their sales? Like, no, I probably not. There is something to be said for. Like they just, they dominate the market anyways.
So I'm of two minds about this kind of thing, but it's like, they may be missing an opportunity with this text. Yeah. Also the design looks really good. And it's clear that this is from a team that if they put half as much effort into their product as they do to the landing page. It's going to be a really good product, which I think is part of the website that we're getting to, if you keep scrolling down, not to Russia.
No, it's true. I mean, we kind of get into this features section here and now I really am paying attention to when we're abstracting the UI. Now, this is an example where we have very, very, very simplistic mockups. It's almost trying to communicate. Yeah, it's true. They don't actually want you to look at this really that much.
It's just trying to communicate. There is a product here. We're not just. I think it's more about this text. [00:50:00] Yeah, I think, so I think the examples are probably carefully chosen. Like, for instance, I don't know how common it is for software to have burn and runway as built in, like, kind of first class. Yeah, I think your point about these breaking the frame is really interesting.
Like, this section would be so much more boring if marketing campaign didn't extend. Beyond this line. Yeah. It's such a small detail. Yeah, it is. And it's funny because I definitely like in recording all the content for landing page Academy, I've mentioned frame breaks. So many times, and it's wild to me that despite over a decade of design experience until I consciously started thinking about the idea of imagery breaking out of the frame as being a technique that you could just reach for, I had no idea how many like dozens of times we see it per day and yet how it doesn't feel overdone or anything.
It's like such a good little visual way to spice things up to just have in [00:51:00] your back pocket. Another thing that is kind of interesting to me is like, I think I would have expected this line. Or something to clearly align with this text and icon here in all three of these cards, and it doesn't. I don't know what to do with that.
It just kind of stands out to me as like, I definitely would have done it the other way, and so I always then kind of try to ask myself, like, I wonder why? One other thing that I want to touch on, especially as it relates to the section above, which is like, one of those small details that I find myself thinking of more now is when you have three UI elements, And a lot of times I think it's like, or three or more UI elements.
A lot of times it's like, you know, a couple pieces of text and a button, or maybe a couple pieces of text and an icon, or maybe all four of those. How do you think about the spacing in between them? And what I see a lot of junior designers doing is defaulting to having [00:52:00] equidistant space every single time.
And what I think is more interesting is thinking strategically about Content groups within that list and having some have a really tight spacing and some have much more wide spacing and it kind of just communicates that like subtle intent intentionality. And also it makes it so you kind of perceive less items because you group things together.
So this is an example where it's basically equidistant, which I think makes a lot of sense. It's more legible. Um, it's fine. I think maybe I'd like it to be a little tighter. If you go up here, they kind of do the opposite where. There's three items you have the logo and the heading and the subtext and there's like a little bit of space right here and 3x space below.
Yes. It's like a really subtle design decision that it's one of those things that as a designer, you're going to have to make 15 times on every landing page that you design. [00:53:00] Yeah, no, I love that. You're thinking about even the spacing of this, like it's such a, such a fine level of granularity. I definitely think that overall the idea of like the, the conceptual space between different elements should mirror the.
The space in pixels gets you 90 percent of the way there. But here, yeah, it's like, this is a, a great point. Like why would that icon be a little bit closer to runway than the subtext is? Um, versus down below, they have more or less equidistant spacing between the icon, the subhead and the paragraph. I don't know.
I do agree with you that if I was going to redesign the part down below, I would also pull in the text closer to the subhead and have a little more space in between the subhead and the icon. So that, that definitely feels right. And not that this is the time for it, but it's like such a good exercise to, if you did take this page, just like whatever, jump into dev tools or even mock it up really quickly in Figma, and then try [00:54:00] playing around with the icon space above and see if I make the icon float a little bit farther away, like why does it feel worse?
Did they make the right call here? And if it does feel worse, can you put your finger on why it feels worse? I don't, and I, I legit don't know what that would be, but I'm very curious for someone to, to do that, make the analysis, tag us on Twitter. One more thing about this page that I want to highlight.
Strategies for testimonials
Yeah. Which is the way that they think about the testimonials. And they bring them in, and this is huge testimonial text, and you kind of see like one and a half. At a time, and maybe we can even compare this to something like the Lemonade website, where you have that carousel, and in some ways it almost is communicating the scale of testimonials when it's just like moving, it's, we're just saying, you know, we have endless testimonials.
And this is kind of the opposite approach, where it's more editorial. [00:55:00] And, you know, we're, we're gonna bring in a single testimonial that we expect you to read because it's the only real text on the page and it's like 48 pixels and then they scroll through, I think, like six of them. Yeah, I agree with your analysis there where they definitely have this sense of like, We picked these a little bit more clearly.
We're not going to show you a million, but like read these. It's literally the only thing you can on this, on this page. Also not to beat a dead horse, but I do love that. If you, especially that first, uh, testimonial has got that really superlative wording, right? UI and customizability are unlike any other product out there right now.
It's like, that's, that's so powerful. And I don't think it's any accident that Kunal's testimonial that says that is the one that they're leading with. If you're going to read one, it's going to be the first one. And they, I think they picked a good one with this wording where he's saying it's [00:56:00] unlike any other product out there right now, just kind of.
Uh, a note for designers who are starting to get into copywriting and think about copywriting. One thing that's cool about picking blurbs like this is, if you have a testimonial that's very superlative, then it has this subtext which is, you don't even need to look at the competition. You don't need to look at the competition because this is the best.
If, if you think about it. If I'm trying to make a purchase or something, then I need to go do my research. And one of the reasons why I might not buy is because I just haven't done enough research yet. I might have no particular doubt doubts, no particular qualms, but maybe I'm going to find something that's better and maybe cheaper or whatever, you know, whatever access I'm, I'm caring most about.
But if I just see testimonial after testimonial, that says. This is the best. This is the industry standard. There's nothing better out there. Then, I mean, certainly it means nothing for the company itself to say that, but for the [00:57:00] customers to be saying that, it's like, oh, there's something there. That's impressive.
And so I think that's one of the reasons where, again, maybe the designers didn't pick this particular blurb, thinking all that out, but it's the feel of it. It's the feel of when your customers say, You don't need to look at any other options. Just get runway. It's like, yes, that's that's so powerful I like that we end up talking more about testimonials than I originally thought because I Think it's one of those things that designers can so easily just be like, well, that's not my job Yeah, and yet there's such an important part of a landing page that When they are used effectively and you almost work backwards from the testimonial and find ways to make that the show it's so powerful and you can't do that effectively as a designer unless you are Putting your strategy head on and asking yourself.
How can I? Source, identify, how can I get my hands [00:58:00] on user generated content that's going to help me sell? And what's the best way to showcase that? And something that we actually don't have in examples that we've looked at that I find myself doing a lot is, you know, maybe I'll have like a testimonial wall or this kind of, you know, floating testimonial card, but I'm a big fan of also like using contextual testimonials as well.
And, you know, sprinkling them within the story almost as like supporting points to the headings that I'm saying, like, I'll have some kind of like feature X is amazing and then find, how can I get my hands on a testimonial where a user is basically saying that for me or adding their own unique take on that.
And it kind of goes back to where we started this conversation, I guess, is like, how can you, as a designer. Be more content driven rather than design driven. I think that's going to be a helpful mindset to bring into landing page design. Yes. [00:59:00] I'm trying to remember the name of a site that does that really well.
I think it's a cloutmonster. com. That with a C? Yeah. C L O U T monster. So this is a consultant, like a media or press consulting service from Stephanie Lee is her name. And it's a fantastic site. She has this section where there's like a whole bunch of screenshots. So she's saying like, look, I've taught this to students and clients that they land in top tier publications.
And then there's a testimonial with someone who got something in good housekeeping, even when they had no idea where to start. And then there's a blurb from someone who had no idea where to start. Even when they had no prior connections, boom, there's someone who had no prior connections. And so it's just kind of this like little melodic interplay between you saying, look, no matter what special situation you think you're in boom, here's a customer raving about my service.
That was in that same situation. And I think, yeah, again, it's like how nice you don't even have to sell yourself. You just let your customers do it for you. [01:00:00] It's fantastic. Okay. So now I have another story of this because these screenshots are ugly. They look at this. I mean, they have, they've, they've clipped this top border.
This one has a scroll bar. You could so easily get rid of the scroll bar. And yet. A couple companies ago, I was working on a landing page for an educational product, and very clearly the site performed better when we included raw, ugly screenshots of a Facebook group rather than pulling out the content and turning it into like this beautifully designed composition, because the whole thing felt more authentic.
And I think you get the same feel here. It was a lesson that I actually kind of learned, is, because I changed it. I changed it, and then it dipped. And then we went back and put the ugly Facebook screenshots that in many ways ruined my design. It looked so bad. But then [01:01:00] it went right back up. The uptick happened again.
Yeah. All right. That was a lesson that I learned. It's like, how can you? Find ways to tap into the authenticity of a testimonial. Yes, more than making it look beautiful I mean, that's one nice thing about being able to just embed tweets right is totally you know, it's unedited but also It's like you kind of get the sense.
These are unedited because if someone was going to edit them They'd make it look a little better Yeah, it's it's a great point like Man, even having a, I don't have numbers for this, but like even putting a little Twitter bird icon. Next to something that was said on Twitter versus just like the raw text.
Sure. It makes it feel like Okay, this is actually out there in the wild like somebody hit enter on this They really believe this and there are probably other little subtle tactics that you can use as well So yeah, no, I could go on and on about testimonials I think there's there's so much to um Just in general as much as you can [01:02:00] make the reader raise their hand and go.
Oh, yeah, that person's like me It's like, yeah, that's great. You're doing it. Right. So whether that means including a name, an image, a couple words about the, the special situation that this person was in, right? Like literally Stephanie has here, even when they had no prior connections. It's like, if I'm going, I don't have prior connections.
And then boom, here it is. Oh, okay. It could work for me too. I read this article one time about what makes a great testimonial and. The, I'm sure there were multiple takeaways, but the one that really stuck with me is how can you find and source testimonials that specifically like dispel a doubt that you think your user might have?
Yes. It's like a perfect example. Someone might be reading this and the entire landing page is running through this mental filter that they have, which is I have no connection. So this probably won't work for me, no matter how good it all sounds. And so trying to identify those, and maybe that even is tied back to like, you know, initial user resource and, and having that list of like, here are the two or three things that [01:03:00] we feel as a company, we need to counteract somehow in the design and in the copy on this landing page.
No, you were preaching to the choir and actually in the very first worksheet in landing page Academy, one of the exercises, when at the same time that you're thinking of all your goals is like, think of the objections that you're going to hear again and again, and there's. This is different categories, but if you can address those proactively and you can show, look, like, actually here's a, here's a reason why your concern is not warranted.
And this is still going to be a great option. It's like, yeah, yeah, definitely. That helps sales. Definitely. That's going to bump the conversion rate. So we've covered a lot of ground. We have, I've learned so much from you, Eric, over the years. Like I pretty much read every email you've written for at least four years.
And. You know, I know you just have like an awesome blog and you're just this wealth of knowledge. So maybe we can end by, can you tell people where they can find you, what they can be on the lookout for? Maybe you can even share a bit about. Uh, [01:04:00] landing page Academy and anything else that you're working on.
Sure. Yeah. So the best place to find me is learn UI dot design. That's the website where now, uh, three of my courses are all up there. There's learn UI design. That's sort of the original flagship course. It's all about visual design, learn UX design, which is about the usability, user testing side of things.
And now landing page Academy. Which is about creating landing pages that not only look good and are visually interesting, but also just convert well and actually get people to take out their credit cards. So those are the three courses. And then on that same domain, there's also my blog and there's links out to Twitter, YouTube channel and all the other places where I'm posting stuff very occasionally.
And then of course the mailing list, like you mentioned, that's probably the best place for people to sign up if they just kind of want. an ongoing drip of original design, writing, different techniques. I try and keep everything very, very practical. Um, super practical. I can't, I will, here we're going to use a testimonial example.
You don't have to say it. I'll go for it. Go for it. Ridiculously practical. [01:05:00] Like you read this and he, he breaks down these specific, you know, visual techniques and things like that, where. You can see a design evolve after he's implementing it and you will read an article or read a newsletter and like have very specific things that you can use on your next project.
Okay. There you go, Eric. Thank you for taking the time. Eric. It's been awesome. Thanks for it.
Strategies for testimonials
Yeah. Which is the way that they think about the testimonials. And they bring them in, and this is huge testimonial text, and you kind of see like one and a half. At a time, and maybe we can even compare this to something like the Lemonade website, where you have that carousel, and in some ways it almost is communicating the scale of testimonials when it's just like moving, it's, we're just saying, you know, we have endless testimonials.
And this is kind of the opposite approach, where it's more editorial. [00:55:00] And, you know, we're, we're gonna bring in a single testimonial that we expect you to read because it's the only real text on the page and it's like 48 pixels and then they scroll through, I think, like six of them. Yeah, I agree with your analysis there where they definitely have this sense of like, We picked these a little bit more clearly.
We're not going to show you a million, but like read these. It's literally the only thing you can on this, on this page. Also not to beat a dead horse, but I do love that. If you, especially that first, uh, testimonial has got that really superlative wording, right? UI and customizability are unlike any other product out there right now.
It's like, that's, that's so powerful. And I don't think it's any accident that Kunal's testimonial that says that is the one that they're leading with. If you're going to read one, it's going to be the first one. And they, I think they picked a good one with this wording where he's saying it's [00:56:00] unlike any other product out there right now, just kind of.
Uh, a note for designers who are starting to get into copywriting and think about copywriting. One thing that's cool about picking blurbs like this is, if you have a testimonial that's very superlative, then it has this subtext which is, you don't even need to look at the competition. You don't need to look at the competition because this is the best.
If, if you think about it. If I'm trying to make a purchase or something, then I need to go do my research. And one of the reasons why I might not buy is because I just haven't done enough research yet. I might have no particular doubt doubts, no particular qualms, but maybe I'm going to find something that's better and maybe cheaper or whatever, you know, whatever access I'm, I'm caring most about.
But if I just see testimonial after testimonial, that says. This is the best. This is the industry standard. There's nothing better out there. Then, I mean, certainly it means nothing for the company itself to say that, but for the [00:57:00] customers to be saying that, it's like, oh, there's something there. That's impressive.
And so I think that's one of the reasons where, again, maybe the designers didn't pick this particular blurb, thinking all that out, but it's the feel of it. It's the feel of when your customers say, You don't need to look at any other options. Just get runway. It's like, yes, that's that's so powerful I like that we end up talking more about testimonials than I originally thought because I Think it's one of those things that designers can so easily just be like, well, that's not my job Yeah, and yet there's such an important part of a landing page that When they are used effectively and you almost work backwards from the testimonial and find ways to make that the show it's so powerful and you can't do that effectively as a designer unless you are Putting your strategy head on and asking yourself.
How can I? Source, identify, how can I get my hands [00:58:00] on user generated content that's going to help me sell? And what's the best way to showcase that? And something that we actually don't have in examples that we've looked at that I find myself doing a lot is, you know, maybe I'll have like a testimonial wall or this kind of, you know, floating testimonial card, but I'm a big fan of also like using contextual testimonials as well.
And, you know, sprinkling them within the story almost as like supporting points to the headings that I'm saying, like, I'll have some kind of like feature X is amazing and then find, how can I get my hands on a testimonial where a user is basically saying that for me or adding their own unique take on that.
And it kind of goes back to where we started this conversation, I guess, is like, how can you, as a designer. Be more content driven rather than design driven. I think that's going to be a helpful mindset to bring into landing page design. Yes. [00:59:00] I'm trying to remember the name of a site that does that really well.
I think it's a cloutmonster. com. That with a C? Yeah. C L O U T monster. So this is a consultant, like a media or press consulting service from Stephanie Lee is her name. And it's a fantastic site. She has this section where there's like a whole bunch of screenshots. So she's saying like, look, I've taught this to students and clients that they land in top tier publications.
And then there's a testimonial with someone who got something in good housekeeping, even when they had no idea where to start. And then there's a blurb from someone who had no idea where to start. Even when they had no prior connections, boom, there's someone who had no prior connections. And so it's just kind of this like little melodic interplay between you saying, look, no matter what special situation you think you're in boom, here's a customer raving about my service.
That was in that same situation. And I think, yeah, again, it's like how nice you don't even have to sell yourself. You just let your customers do it for you. [01:00:00] It's fantastic. Okay. So now I have another story of this because these screenshots are ugly. They look at this. I mean, they have, they've, they've clipped this top border.
This one has a scroll bar. You could so easily get rid of the scroll bar. And yet. A couple companies ago, I was working on a landing page for an educational product, and very clearly the site performed better when we included raw, ugly screenshots of a Facebook group rather than pulling out the content and turning it into like this beautifully designed composition, because the whole thing felt more authentic.
And I think you get the same feel here. It was a lesson that I actually kind of learned, is, because I changed it. I changed it, and then it dipped. And then we went back and put the ugly Facebook screenshots that in many ways ruined my design. It looked so bad. But then [01:01:00] it went right back up. The uptick happened again.
Yeah. All right. That was a lesson that I learned. It's like, how can you? Find ways to tap into the authenticity of a testimonial. Yes, more than making it look beautiful I mean, that's one nice thing about being able to just embed tweets right is totally you know, it's unedited but also It's like you kind of get the sense.
These are unedited because if someone was going to edit them They'd make it look a little better Yeah, it's it's a great point like Man, even having a, I don't have numbers for this, but like even putting a little Twitter bird icon. Next to something that was said on Twitter versus just like the raw text.
Sure. It makes it feel like Okay, this is actually out there in the wild like somebody hit enter on this They really believe this and there are probably other little subtle tactics that you can use as well So yeah, no, I could go on and on about testimonials I think there's there's so much to um Just in general as much as you can [01:02:00] make the reader raise their hand and go.
Oh, yeah, that person's like me It's like, yeah, that's great. You're doing it. Right. So whether that means including a name, an image, a couple words about the, the special situation that this person was in, right? Like literally Stephanie has here, even when they had no prior connections. It's like, if I'm going, I don't have prior connections.
And then boom, here it is. Oh, okay. It could work for me too. I read this article one time about what makes a great testimonial and. The, I'm sure there were multiple takeaways, but the one that really stuck with me is how can you find and source testimonials that specifically like dispel a doubt that you think your user might have?
Yes. It's like a perfect example. Someone might be reading this and the entire landing page is running through this mental filter that they have, which is I have no connection. So this probably won't work for me, no matter how good it all sounds. And so trying to identify those, and maybe that even is tied back to like, you know, initial user resource and, and having that list of like, here are the two or three things that [01:03:00] we feel as a company, we need to counteract somehow in the design and in the copy on this landing page.
No, you were preaching to the choir and actually in the very first worksheet in landing page Academy, one of the exercises, when at the same time that you're thinking of all your goals is like, think of the objections that you're going to hear again and again, and there's. This is different categories, but if you can address those proactively and you can show, look, like, actually here's a, here's a reason why your concern is not warranted.
And this is still going to be a great option. It's like, yeah, yeah, definitely. That helps sales. Definitely. That's going to bump the conversion rate. So we've covered a lot of ground. We have, I've learned so much from you, Eric, over the years. Like I pretty much read every email you've written for at least four years.
And. You know, I know you just have like an awesome blog and you're just this wealth of knowledge. So maybe we can end by, can you tell people where they can find you, what they can be on the lookout for? Maybe you can even share a bit about. Uh, [01:04:00] landing page Academy and anything else that you're working on.
Sure. Yeah. So the best place to find me is learn UI dot design. That's the website where now, uh, three of my courses are all up there. There's learn UI design. That's sort of the original flagship course. It's all about visual design, learn UX design, which is about the usability, user testing side of things.
And now landing page Academy. Which is about creating landing pages that not only look good and are visually interesting, but also just convert well and actually get people to take out their credit cards. So those are the three courses. And then on that same domain, there's also my blog and there's links out to Twitter, YouTube channel and all the other places where I'm posting stuff very occasionally.
And then of course the mailing list, like you mentioned, that's probably the best place for people to sign up if they just kind of want. an ongoing drip of original design, writing, different techniques. I try and keep everything very, very practical. Um, super practical. I can't, I will, here we're going to use a testimonial example.
You don't have to say it. I'll go for it. Go for it. Ridiculously practical. [01:05:00] Like you read this and he, he breaks down these specific, you know, visual techniques and things like that, where. You can see a design evolve after he's implementing it and you will read an article or read a newsletter and like have very specific things that you can use on your next project.
Okay. There you go, Eric. Thank you for taking the time. Eric. It's been awesome. Thanks for it.
Deep Dives
Get every episode
Free lessons from the top designers 👇
Fonz Morris
Lead monetization designer @ Netflix
Mia Blume
Past leader @ Pinterest, Square
Jorn van Dijk
CEO @ Framer
Femke
Design lead @ Gusto
Kenny Chen
UX lead @ Google
Join 8K+ designers
HC
HC
HC
HC
Ⓒ Dive 2023
