Rate my landing page design and help me improve please!
Khokon M.

Khokon M. @khokon

Joined:
Dec 17, 2021

Rate my landing page design and help me improve please!

Publish Date: May 23 '22
38 38

Hi there, Dev community. I mostly do backend stuff. But sometimes, for my own personal projects, I also need to design some front-end stuff.
But I think I'm pretty much bad at designing stuff. That's why today, I'm asking your opinion about my ability to organize things.
If you think the design is good, please let me know. Otherwise, please advise how I can improve.
Thanks in advance, guys!
Landing Page URL

Comments 38 total

  • Ben Halpern
    Ben HalpernMay 23, 2022

    Very clean and enjoyable page.

    I'd say the number one thing for me is quick readability — because nobody wants to spend much time figuring out the page.

    It's not immediately clear that "Web Lock" is the subject of the page. It's a little too small – and should probably be bold. The "subheader" being above the main header might work, but it's also a bit confusing.

    Overall I'd bold the headers where possible and add more overall spacing between different headers, subheaders, paragraphs. Everything is a little condensed.

    The header could maybe use a quick visual of the "lock" idea — but I'm not sure what exactly to offer.

    You should come back and post after you've made any changes you get from feedback!

    • Khokon M.
      Khokon M.May 23, 2022

      Thanks a lot, ben. I will consider all the points you've mentioned.

  • N Cee Dee
    N Cee Dee May 23, 2022

    did you use your default system font?

  • Andrew Baisden
    Andrew BaisdenMay 23, 2022

    It's a lot better than I expected it was going to be when you said that you are bad at design. I have seen MUCH worse than this. I do have one comment maybe have your logo on the first screen above the "REGAIN THE PRIVACY YOU DESERVE" text. So you have brand recognition.

    • Khokon M.
      Khokon M.May 23, 2022

      Thanks for the tips. I will surely put a logo on the top!

  • JoelBonetR 🥇
    JoelBonetR 🥇May 23, 2022

    It's pretty fine to me. After reading the comments I just want to add that the min-width: 100vh on mobile is not worth (tested on my Pixel 5), I'd rather use a padding of 40 to 60px as much at the bottom of each container so me (as user) can read everything faster instead scrolling through void space. 😁

    • Khokon M.
      Khokon M.May 24, 2022

      I missed the perspective of the mobile devices. Thanks for your advise, helps a lot :)

  • Timothy Foster
    Timothy FosterMay 23, 2022

    I really like the color scheme! The pink and purple complement each other very well.

    My recommendation is to make your call to actions ("How it works", "Get Started", and "Contact Me" links) more prominent, which will increase the likelihood of people clicking them.

    • Khokon M.
      Khokon M.May 24, 2022

      Thank you. Now I see this point!

  • Leví Arista
    Leví AristaMay 24, 2022

    Nice project! It looks great
    One thing I'd suggest on mobile is to make the screenshots with square windows so you can make bigger the content within the picture ;)

    • Khokon M.
      Khokon M.May 24, 2022

      Great obserbation. I will prepare some square photos for mobile views then. thanks for your time and advise.

  • Marco Ledesma
    Marco LedesmaMay 24, 2022

    I think it’s a great start that could be amazing with a bit more iteration. My slight annoyance was with the moving background, which caused my focus to shift between what i was reading and the background. I viewed this on my iPad though, so perhaps the size of the text and content, relative to the size of the background, is what caused some of the distraction. Either way, pretty cool stuff!

    • Khokon M.
      Khokon M.May 24, 2022

      thanks for pointing this out. I will try to reduce the effect of that background animation or remove it :)

  • Awais Abbas
    Awais AbbasMay 24, 2022

    looks pretty neat. One issue noticed is that both footer buttons are a bit broken on mobile view. You can make them full-width for mobile screens or place them up-down for better view.

    • Khokon M.
      Khokon M.May 24, 2022

      Thanks, I will surely make changes to the buttons.

  • shammisharma
    shammisharmaMay 24, 2022

    Overall it is a very nice looking landing page. Very clean, minimal and to the point. 👍🏻
    Is is mobile optimised! I checked it on mobile ...

    1. I think bottom padding is too much. We can decrease it.
    2. Bold headings will give "weightage" (pun intended) to the page.
    3. and In the end put "get it for chrome" button again just before closing remarks so that user don't have to scroll to top again after reading the content.

    that's all from me. 👍🏻 Let me know if it helps.

    • Khokon M.
      Khokon M.May 24, 2022

      Yes, it defenetely helps. Thank you for your advise.

  • Codeitdoc7
    Codeitdoc7May 24, 2022

    Well where do I start, when I read that you only do backend, I was ready to see something poorly build or the usual stuff you see on YouTube Tutorials, but man I was wrong I am amazed, I can look again and again and again you get the idea. You did a great job.

    • Codeitdoc7
      Codeitdoc7May 24, 2022

      I found one thing, it's the background itself it's taking the focus from the content when I first visited( user will only come to page once and for few minutes if not seconds). Other than that everything is just awesome.

      • Khokon M.
        Khokon M.May 24, 2022

        Hi, thanks for the compliment. I first designed the plain design without the background bubbles. But it looks a bit too simple for me. Then the bubble idea popped into my head.
        So I searched on codepen about some bubble idea. I really liked one, so I picked that and used that on my background.
        But again, that was a bit messy. So, I made the bubble part

        display :fixed

        and I used

        backdrop-filter: blur(10px)

        in my main content. This gave me the glassmorphism style.
        I hope this helps :)

      • Khokon M.
        Khokon M.May 24, 2022

        Thanks, I will try to give the background a bit less focus.

  • Adam Crockett 🌀
    Adam Crockett 🌀May 24, 2022

    Typography particularly the heading styles consistency maybe could use a little work but in general it's smart.

    Also the buttons at the bottom, move them closer together

    • Khokon M.
      Khokon M.May 24, 2022

      Thanks for the advise. I will re work on the buttons and will try to improve the typography as well.

  • Jess Edwards
    Jess EdwardsMay 24, 2022

    Awesome work! I really like the animated background and the favicon is cool too. I think bigger, bolder headings in a different font would make them stand out a bit (you could even go for a grey colour if the bold black is too strong). Adding a little horizontal padding would also help things sit a little more nicely in the middle.

    • Khokon M.
      Khokon M.May 24, 2022

      I'm glad you liked it. I will try to implement everything you've mentioned. Thanks for the advice <3

  • Gedi
    GediMay 24, 2022

    i would probably get rid of the blob from beeing fixed and keep it just on the landing screen.

    • Khokon M.
      Khokon M.May 24, 2022

      you mean, the background bubbles?

      • Gedi
        GediMay 24, 2022

        yes. I personaly don't like too much animations on sites as they do distract from the main content that you are trying to show. ( obv unless those animations are to show some kind of content ).

        • Khokon M.
          Khokon M.May 24, 2022

          Got it. Thanks for your advise. I will try to reduce it and just keep it in one frame :)

  • SUCHINTAN DAS
    SUCHINTAN DASMay 24, 2022

    Nice Khokon 😃, The landing page does look good and seamless. But there are some major flaws which I think you need to improve if you want it to be professionally useful.

    1) The landing page color scheme needs to be made around blue but not pink. Reason being that pink color represents joy and happiness which is not used for any corporates or serious stuffs. You need to have you extension earn the trust of the users so the best color scheme is blue. ( Just go through color psychology ) 💁‍♂️

    2) The blur effect will not render on apple products. It would look very bad , so try to avoid it or remove it completely 🙅.

    3) The landing page is very simple but seems to have very less content . The spacing is here the issue and the elements needs to be enhanced. Try to make a better UX for the same 👨‍💻. Take some websites which people visit and try to get your insights over them.

    4) Lastly you need to make your extension download link little bit smarter , so that the person visiting the website just scan the webpage in couple of seconds but click on the download link first. At the end that's your purpose 🙂. You need them to make them download your extension so enhance it on that line.

    • Khokon M.
      Khokon M.May 24, 2022

      Thanks a lot for taking this much time to give me such valuable tips. I really appreciate you. I will consider everything you've mentioned here to make the landing page better. Thanks again

    • Somtochukwu Nnaji
      Somtochukwu NnajiMay 24, 2022

      You've said it all. Especially that of color. The landing page is attractive and simple these are personally what I like about it.

  • andaazii
    andaaziiJun 15, 2022

    Too much space when viewed on desktop but the mobile display is great.

    Clickable links looks like I am reading a novel and then boom, oh it's there. It needs to be styled to drag attention to it since the goal is to get downloads.
    Love the background animation, would be great if the download link is animate too. I love animation
    FYI, I am a beginner so I might be wrong

    • Khokon M.
      Khokon M.Jun 16, 2022

      Thanks andaazil, I will try to follow your advice on the next update of my landing page.

Add comment