| Source | https://www.youtube.com/watch?v=Nn23ZVdu6_A |
|---|---|
| Readwise URL | https://read.readwise.io/read/01kvyrwt8tdzx492xscvcscah0 |
| Readwise ID | 01kvyrwt8tdzx492xscvcscah0 |
| Date | 2025-06-30 |
| Author | Chris Raroque |
| Category | video |
| Cover image | https://i.ytimg.com/vi/Nn23ZVdu6_A/sddefault.jpg |
So, in my last video, I walked through my entire app launch process, and something I briefly talked about was how I do weight list and landing pages. You guys asked for a more in-depth video, so here it is. If you’re new to the channel, welcome to the video. My name is Chris, and I build productivity apps. And today, we’re going to be covering landing pages. So, for all my landing pages, including the Ellie and the Luna landing pages, I use a tool called Framer. And before we dive in, I’m very excited to say that Framer has actually sponsoring this video. Even if they weren’t sponsoring, I’ve been using them for years. I would continue to recommend them anyway. But thank you to them for sponsoring this and supporting the channel. Before we get into Framer,
let’s talk about why I chose it over other options. If you’re not familiar, Framer is a no code tool that lets you build beautiful landing pages. I love the experience. It honestly reminds me of designing something in Figma where I can just drag and drop. And they have really good templates to get started. So that’s why I chose them. So why don’t I just code the landing page from scratch? Something really important to me is I want the option to be able to work with someone else on SEO or being able to modify or create new pages. And if I did it from scratch, that would mean that they would have to know how to code. Since framers know code and really easy to work with, it gives me that
flexibility and option to work with someone else on it. So, I’m going to give you guys some tips and advice on what I believe are the essentials for a good landing page. So, the first is really highquality screenshots and images. I would actually focus more on the imagery than I would the copy and the text itself, which is going to be very counterintuitive to a lot of advice you hear because a lot of people talk about the copy of the landing page, but in my experience, if I had to choose to put energy into copy versus imagery, I would choose the imagery. The phrase, "A picture is worth
a thousand words," is very true. You can convey a lot and make up for really bad copy. If you have a very good screenshot, I also think people are just very drawn to good visuals. And if you have good high-quality screenshots, it will really elevate their perception of your app. So high quality screenshots is my first tip. Kind of related to that in terms of the actual text and copy of your website, I think adopting the mindset of less is more is very important. So what I mean by that is try not to go very textheavy. Again, I think let screenshots do most of the work. Keep the text as minimal and as simple language as possible. My rule of thumb
is that if an 8-year-old can understand it, it’s a really good landing page, which is really hard to do in practice. Here’s my landing page for my app, Luna. I tried to use as simple language as possible wherever I could. So, for example, when describing the app, I actually chose to say a simple and beautiful budgeting app designed to curb spending. It’s one sentence and conveys that this is a budgeting app for people who are trying to get their spending under control. I could have said something like, “This is an app that breaks your budget down into weekly and monthly periods, which is something that no other budgeting app does.” But, I
decided to simplify the language, just put it all in one sentence, and really let the screenshot do most of that talking. If an 8-year-old can understand it, that’s a really good sign you’re on the right path. So, the third thing is to use videos if you can. If the picture is worth a thousand words, a video is worth a million words. I recommend filming some sort of demo or you just talking about your product and putting it on the landing page because it goes a long way to building trust. It can be really uncomfortable and take a lot of time, but it really does go a long way when you do something like this. So, if you go on Ellie’s landing page and you scroll down, you’ll see that I have a
demo embedded here. I’ve had so many people reach out and email me saying this video was really helpful or that the video is what pushed them to sign up and thanking me for doing that. So, if you can record a simple video because a lot of people would prefer to watch that, see the app in action rather than scrolling through a landing page and trying to figure out how it works from there. Fourth tip is that social proof is really important. Social proof is stuff like user testimonials or logos of companies that use your app. It really goes a long way to building trust. People want to use and buy things that they see other people using. If you’re just starting out, it’s really hard to
get these testimonials, even if you need to beg your beta testers to use it or ask friends to just write a testimonial for you. It really goes a long way and I recommend doing it. And please do not fake the testimonials. It’s very tempting, especially when starting out because if someone finds out or has a hint that that’s what’s going on, they will lose all trust. They will not use the app. And the last tip I have for you is to make the landing page personal and if you can add yourself to the landing page. If you’re watching this and you’re a solo developer or you’re a very small team, people want to support people, not faceless companies. So, if you can, I
would take advantage of that and put yourself on the landing page. Show them who’s behind the product because more than likely, they’re going to want to support it even more. Here’s an example of how I do this. At the bottom of every landing page, I have this small section where I introduce myself. I talk about why I built the app. I can’t prove it, but I think it makes a huge difference in conversion because again, people want to support people, and they especially want to support people who are building something that they care about. So, showcase that. Take advantage of it. That’s my last tip. So, as I covered in the last video, I use Framer for two things. It’s weight
list pages and landing pages. Let’s start with the weight list page because it’s way simpler. Weight list pages are really simple. They’re there to help you collect emails and build the weight list while you’re actually building the app. I usually just grab one of Framer’s free templates. All the templates look amazing. It’s really hard to go wrong. At the minimum, I put a screenshot of the app, maybe a small description, and then an email collection form. Most of the free templates support all of that and they look good out of the box so I don’t have to spend a lot of time on styling. In terms of the email collection, I would either use Framer’s built-in forms or something like FormSpark. I’ve been personally using FormSpark because when I first started
using Framer, Frame Forms did not exist. So, I really had no choice here. But my recommendation, what I’ll probably be doing from now on is using Framer Forms because it’s already built in. So, let’s talk about landing pages before we dive in. This is not a full-blown tutorial video. There’s already hundreds of videos out there. I personally recommend checking out Framer University. This is the resource I was using when I was trying to learn Framer. We’re just going to cover framer at a high level in this video. So, landing pages are different from weight list pages because it is the website that promotes your app after the app has launched. So, it’s not a weight list page to collect emails. It is the marketing site for your app. It showcases the app and convinces people
to download and sign up. I personally usually create these landing pages from scratch in Frame. Again, they have a huge template library and you really can’t go wrong. All of their templates look good out of the box. I recommend starting with one of the templates and you can just modify it from there. But, I personally build all the landing pages from scratch. And if you do decide to build from scratch, they have a really cool feature that I haven’t heard many people talk about called wireframer. Wireframe is a feature that uses AI to build out the structure of the page for you. So you can prompt it, describe what you want just like you do in chatpt and it’s going to go and start building out
the layout of that page, which is a really good starting point. So if you’re trying to build a pricing page or if you want to build a page describing a feature, it’s really good to help you get started with the layout. And again, the beauty of Frame is there’s no code, so you can just drag and drop to start editing the page directly. They also have a lot of pre-built components to help you get started quickly. Even though I’m building this from scratch, I use these pre-made components all the time. They have this really good one for this accordion FAQ section. They have animated image carousels which you can also click through. And some really cool ones like this moving marquee text that
I actually have in Ellie to showcase some of the features. And if you want something more complex, they actually allow you to build components using full React code. You can make these components with code if you need something a little more custom. And they have this AI feature which I don’t think a lot of people know about called workshop which will actually generate these components for you just by prompting it. To access workshop inside of framer by clicking this button and you start prompting it just like you would in cursor or chatbt. Let me show you how powerful this is because there are some really cool components you can create. So here’s a prompt you can use to actually make an image comparison
slider which has a drag handle and it’ll reveal the different side of the image as you drag it. I submit the prompt in workshop. It’s going to start building this and after a few seconds we have the component which you can use inside of your app which again is just React code fully interactive works out of the box and you can use this to make really powerful things. Here’s another example with some interaction. You can make a 3D tilt card with an image so when you hover over it it’ll start tilting. So if you’re curious about how people make these really cool interactive websites, custom components is how they’re usually doing it. And you can use Workshop to generate these really quickly and have
your landing page stand out. In terms of analytics and optimization, Frameware actually does have built-in analytics already. I love how basic it is, especially for weight list pages. You can see if people are viewing pages like your pricing page, what website brought them to your website, what devices you’re on, all of the basics that you should care about. And they actually recently added advanced analytics. It’s totally optional, but in theory, you could set something up where you can see how many people viewed the landing page and then clicked the get started button. So, if you need more analytics, Frame does support that.
So, the last thing people ask about is what about SEO? What about performance? And that’s another reason that I actually choose Framer is because they have a lot of this stuff built in out of the box. When you add images, they already do the image optimization, which is really important for SEO. They do the sitemap generation. If I built this from scratch using code, I would have to think about all of these things. So, it is really nice that Framer has this stuff out of the box. Plus, you can use Framer CMS, which I use to generate blog post, comparison pages, and just other pages for SEO. Again, if you’re working with a content team, then they’re able
to edit things without having to know how to code. I’ll leave a link in the description. Again, they’re sponsoring the video, so if you use it, it really does support the channel. But I hope it was helpful to see my process, see how I think about landing pages, and use Framer to build them. If you haven’t seen my previous video about my app launch process, covers everything from when to launch to app store optimization. So, definitely check that out. If you like this content, check out my Instagram and Tik Tok. I post almost every other day about building productivity apps. And obviously, if you like this content, don’t forget to subscribe. But thank you guys so much for watching and I’ll see you guys in the next video.
[Music]