7
9 Comments

How do I learn to design landing pages like Stripe?

Hi,

I am a full stack developer who uses CSS frameworks like Bootstrap to design the UI/UX of my websites.

I want to learn how to design custom landing pages as well as internal app pages just like Stripe or Intercom or you know those cool products/services featured on ProductHunt.

Do I need to learn Figma for this? Once you create your design in Figma, how would you transfer it to HTML/CSS?

Are there any no-code tools like Webflow that would make learning design easier?

Are there any good resources you would recommend or any suggestions you have?

Thanks!

  1. 4

    You scale to millions of customers and hire the best designers in the world.

    Joke aside, my experience with design is that it’s more about consistency than skill. Start your day looking at designs on dribbble, behance, awwwards etc. for half an hour. Analyze and copy 2-3 of those every day on your preferred design tool. Yes, you will need Figma and contrary to popular IH belief, I don’t think any no-code tool can get you to Stripe level. (Btw, to transfer a Figma design to html/css you code everything from scratch, there is no better way.)
    And you will need to pour a lot of your time into it.

    The question is, is it worth it? What are you trying to achieve? Very little css knowledge can get you very far. It wasn’t worth it for me. My landing page designs suck. Landing pages are less about design than copy and clarity.

    1. 1

      Thanks for your reply.
      That's a great argument. I will try to improve my CSS knowledge first and then learn Figma to implement and practice different designs from the websites you mentioned.

  2. 2

    Learn about the fundamentals of design first. Tools are useless without a good grasp of design foundations.
    And then practice a lot and start small.

    1. 1

      That sounds like a great idea. Thanks for your response!

  3. 1

    If you mean like the moving gradient.....

    That is an image with probably high background size, maybe 600%, 400%?

    Then that is achievable with keyframes...

    The white you can do it with clip path...then the clay mockup...you actually buy them.

    I have something similar to that gradients on my site.

    https://www.colorsandfonts.com Is a moving css gradient.

    They use an image, because gamut gradients in css are difficult to achieve...

    I am not sure why, though...

    1. 1

      Hi, thanks for your reply. I meant the landing page design as a whole.
      Will have a look at the resources you mentioned regarding the gradients.

  4. 0

    This is a good question. You’re right, there is something different about their landing pages. There’s a kind of attention to detail that makes them look more professional and trustworthy. Over the longterm, this is part of what helps them stand-out from the conception.

    Of course, there are many other benefits To good design and many other factors that contribute to a company’s success.

    To answer your question:

    The only way to learn how to design High-quality landing pages (or full products) Is to practice practice practice. To study the thinking that goes into them. To ask questions and experiment yourself.

    I’ve been a UI/UX designer for 15+ years, and it took me a long time to master design; and even today, everyday, I am learning something new. This is mostly because with web design, there is an infinite number of possibilities driven by the fact that technologies and trends are always changing. But this is good, it keeps us in a job.

    Anyway, (without trying to sound too much like an advertisement) this is why I created Full Time Web Design. https://fulltimewebdesign.com

    I teach people of all skill levels and backgrounds how to design awesome websites and find profitable clients. In fact, I just released a new course that shows you exactly how to design high quality landing pages. Regarding Webflow: In my opinion it is the single best tool for wed design, and nothing comes close. It’s basically a code editor, but visual. Which means it gives you full control, but in a visual manner. It’s clearly built be people who understand web development. So, most of my tutorials are via Webflow.

    I’m happy to answer more questions, as I’m passionate about spreading the knowledge of good web design. I hope that helps.

    1. 1

      Thanks a lot for your reply.
      That's great advice.

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 49 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 29 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 18 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments