I have a SaaS webpage that has poor aesthetics and want to change it asap. I know basic CSS and html and have experience using frameworks like uikit. But at the end of the day I'm an engineer with a sense of aesthetic appreciation but not aesthetic creation.<p>To use the most recent example I've come across, how do I go about building something like the linktree.com landing page?<p>I'm eager to learn whatever is necessary to design a beautiful webpage.
If I would be designing a landing page for a product or a service I would start with <a href="https://land-book.com/" rel="nofollow">https://land-book.com/</a>.<p>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.<p>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.<p>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.<p>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 <a href="https://www.fontpair.co/all" rel="nofollow">https://www.fontpair.co/all</a>.
Cheapest option is to download a free landing page design and code it: <a href="https://www.sketchappsources.com/" rel="nofollow">https://www.sketchappsources.com/</a><p>A better option is to purchase something off of <a href="https://themeforest.net/category/site-templates" rel="nofollow">https://themeforest.net/category/site-templates</a><p>its usually pretty cheap (sub $100) and the quality is pretty high.<p>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.<p>[0]: <a href="https://andybrewer.github.io/mvp/" rel="nofollow">https://andybrewer.github.io/mvp/</a>
[1]: <a href="https://colorhunt.co/" rel="nofollow">https://colorhunt.co/</a>
I was in the same situation as you. I found it difficult to design my own that works good on desktop and mobile.<p>So I purchased multiple themes and settled on Landkit[0], which is built on top of bootstrap.<p>[0]<a href="https://landkit.goodthemes.co/" rel="nofollow">https://landkit.goodthemes.co/</a>
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<p>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.