Ask HN: How to build a good looking SaaS landing page?
13 comments
If I would be designing a landing page for a product or a service I would start with https://land-book.com/.
The first thing I would do is look for a structure that would fit my subject. For example, what goes at the top? Quite a few websites choose a tagline or a small description(with a large font size) on the left, followed by a slightly longer description(with a smaller font size) and a visible action button. While on the right, there's usually an image of the product. Now, does this work in my case? If it doesn't, I look at other examples.
The next sections can be cherry picked. I might want to show the main or unique features, testimonials and other things I'd consider essential to tell the visitors.
Only after I'd be done with this part (could be called wireframing), I'd start choosing colors and fonts. My recommendation is that if you like a color combination used on a website, use it and stick to it. Don't replace one of the colors, stick to what is there. Just don't pick the colors from a competitor's website, that's poor form, in my opinion.
Typography is a little trickier. You have to play with sizes and combinations. And in a lot of cases, good fonts are not free. But there are also decent options available in Google Fonts. On this page you can find good free font pairs https://www.fontpair.co/all.
The first thing I would do is look for a structure that would fit my subject. For example, what goes at the top? Quite a few websites choose a tagline or a small description(with a large font size) on the left, followed by a slightly longer description(with a smaller font size) and a visible action button. While on the right, there's usually an image of the product. Now, does this work in my case? If it doesn't, I look at other examples.
The next sections can be cherry picked. I might want to show the main or unique features, testimonials and other things I'd consider essential to tell the visitors.
Only after I'd be done with this part (could be called wireframing), I'd start choosing colors and fonts. My recommendation is that if you like a color combination used on a website, use it and stick to it. Don't replace one of the colors, stick to what is there. Just don't pick the colors from a competitor's website, that's poor form, in my opinion.
Typography is a little trickier. You have to play with sizes and combinations. And in a lot of cases, good fonts are not free. But there are also decent options available in Google Fonts. On this page you can find good free font pairs https://www.fontpair.co/all.
Thanks for taking the time to share these insights. Very helpful, I'll be referring to your post as I hone my landing page's design.
Cheapest option is to download a free landing page design and code it: https://www.sketchappsources.com/
A better option is to purchase something off of https://themeforest.net/category/site-templates
its usually pretty cheap (sub $100) and the quality is pretty high.
Learning to design your own is harder. I'd say start with something from the resources above and iterate as you optimize for specific goals. As you spend more time optimizing your product you'll see design patterns being used by your competitors and learn along the way.
A better option is to purchase something off of https://themeforest.net/category/site-templates
its usually pretty cheap (sub $100) and the quality is pretty high.
Learning to design your own is harder. I'd say start with something from the resources above and iterate as you optimize for specific goals. As you spend more time optimizing your product you'll see design patterns being used by your competitors and learn along the way.
> Cheapest option is to download a free landing page design and code it: https://www.sketchappsources.com/
Sketchappsources looks promising.
> A better option is to purchase something off of https://themeforest.net/category/site-templates
I found templates on themeforest fall short on the aesthetics that you find in SaaS websites like linktree.com that I alluded to in my post description. Please correct me I have the wrong impression of themeforest.
> As you spend more time optimizing your product you'll see design patterns being used by your competitors and learn along the way.
This is where I'm at. I'm able to build a front-end but competitors products look way good and I want to bridge the aesthetic gap.
Sketchappsources looks promising.
> A better option is to purchase something off of https://themeforest.net/category/site-templates
I found templates on themeforest fall short on the aesthetics that you find in SaaS websites like linktree.com that I alluded to in my post description. Please correct me I have the wrong impression of themeforest.
> As you spend more time optimizing your product you'll see design patterns being used by your competitors and learn along the way.
This is where I'm at. I'm able to build a front-end but competitors products look way good and I want to bridge the aesthetic gap.
For a minimalist approach, use [0]MVP for css.
Then head over to [1]Color hunt to choose a good color scheme.
[0]: https://andybrewer.github.io/mvp/ [1]: https://colorhunt.co/
[0]: https://andybrewer.github.io/mvp/ [1]: https://colorhunt.co/
Sheer class, MVP looks legit.
I was in the same situation as you. I found it difficult to design my own that works good on desktop and mobile.
So I purchased multiple themes and settled on Landkit[0], which is built on top of bootstrap.
[0]https://landkit.goodthemes.co/
So I purchased multiple themes and settled on Landkit[0], which is built on top of bootstrap.
[0]https://landkit.goodthemes.co/
I also purchased Landkit, but eventually found it very heavy. I then essentially remade it on top of Fresh [1]. Code is here if anyone needs it [2].
[1] https://github.com/cssninjaStudio/fresh
[2] https://github.com/saasform/saasform/tree/main/data/themes/f...
[1] https://github.com/cssninjaStudio/fresh
[2] https://github.com/saasform/saasform/tree/main/data/themes/f...
Landkit looks clean. I'm not using bootstrap but will keep the landkit example in my backpocket.
Not an expert to suggest but here is the path, I followed -
- Go through design inspirations on dribble/behance
- Design a rough design draft on paper as per your use case
- Pick any existing CSS framework sucha tailwind CSS/Bootstrap etc & Get your hands dirty
Being an engineer, downloading a free template and just using it does not suit me. Designing on your own might take time some time but will help your product in long run as using a template restricts creative additions.
Being an engineer, downloading a free template and just using it does not suit me. Designing on your own might take time some time but will help your product in long run as using a template restricts creative additions.
> Designing on your own might take time some time but will help your product in long run as using a template restricts creative additions.
I feel the same way about templates as they constrain design freedom. I lean more toward CSS/JS frameworks.
> Pick any existing CSS framework sucha tailwind CSS
I've noticed tailwind gets a lot of love on HN. Is Tailwind UI going to help make it easy to create a landing page with top notch aesthetics?
I feel the same way about templates as they constrain design freedom. I lean more toward CSS/JS frameworks.
> Pick any existing CSS framework sucha tailwind CSS
I've noticed tailwind gets a lot of love on HN. Is Tailwind UI going to help make it easy to create a landing page with top notch aesthetics?
To use the most recent example I've come across, how do I go about building something like the linktree.com landing page?
I'm eager to learn whatever is necessary to design a beautiful webpage.