Ask HN: How to build a good looking SaaS landing page?

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.

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.

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/

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/

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.

Use these for inspirations : hyperpixel.io