DEV Community

Khokon M.
Khokon M.

Posted on

Rate my landing page design and help me improve please!

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

Discussion (38)

Collapse
coditdoc profile image
Codeitdoc7 • Edited on

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.

Collapse
coditdoc profile image
Codeitdoc7

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.

Collapse
khokon profile image
Khokon M. Author • Edited on

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 :)

Thread Thread
coditdoc profile image
Codeitdoc7

Thank you it helps 🙂

Collapse
khokon profile image
Khokon M. Author • Edited on

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

Collapse
suchintan profile image
SUCHINTAN DAS

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.

Collapse
khokon profile image
Khokon M. Author

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

Collapse
suchintan profile image
SUCHINTAN DAS

Welcome Khokon 😇

Collapse
dovey21 profile image
Somtochukwu Nnaji

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

Collapse
andaazii profile image
andaazii

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

Collapse
khokon profile image
Khokon M. Author

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

Collapse
ben profile image
Ben Halpern

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!

Collapse
khokon profile image
Khokon M. Author

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

Collapse
m4rcoperuano profile image
Marco Ledesma

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!

Collapse
khokon profile image
Khokon M. Author

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

Collapse
auroratide profile image
Timothy Foster • Edited on

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.

Collapse
khokon profile image
Khokon M. Author

Thank you. Now I see this point!

Collapse
jahedw profile image
Jess Edwards

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.

Collapse
khokon profile image
Khokon M. Author

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

Collapse
joelbonetr profile image
JoelBonetR

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. 😁

Collapse
khokon profile image
Khokon M. Author

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

Collapse
andrewbaisden profile image
Andrew Baisden

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.

Collapse
khokon profile image
Khokon M. Author

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

Collapse
shammisharma profile image
shammisharma

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.

Collapse
khokon profile image
Khokon M. Author

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

Collapse
adam_cyclones profile image
Adam Crockett

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

Collapse
khokon profile image
Khokon M. Author

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

Collapse
aktoriukas profile image
Gedi

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

Collapse
khokon profile image
Khokon M. Author

you mean, the background bubbles?

Collapse
aktoriukas profile image
Gedi

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 ).

Thread Thread
khokon profile image
Khokon M. Author

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

Collapse
leviarista profile image
Leví Arista

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 ;)

Collapse
khokon profile image
Khokon M. Author

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

Collapse
callmebobonwa profile image
Nnaji David

did you use your default system font?

Collapse
khokon profile image
Khokon M. Author

No, I used google font.

Collapse
callmebobonwa profile image
Nnaji David

ok

Collapse
kazmi066 profile image
Awais Abbas

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.

Collapse
khokon profile image
Khokon M. Author

Thanks, I will surely make changes to the buttons.