DEV Community

Rate my landing page design and help me improve please!

Khokon M. on May 23, 2022

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...
Collapse
 
coditdoc profile image
Codeitdoc7 • Edited

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. • Edited

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. • Edited

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.

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

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

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.

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

Collapse
 
jah_edw 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.

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

Collapse
 
auroratide profile image
Timothy Foster • Edited

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.

Thank you. Now I see this point!

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.

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

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.

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

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.

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

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.

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

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.

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.

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

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.

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

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.

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

Collapse
 
nceedee profile image
N Cee Dee

did you use your default system font?

Collapse
 
khokon profile image
Khokon M.

No, I used google font.

Collapse
 
nceedee profile image
N Cee Dee

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.

Thanks, I will surely make changes to the buttons.