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...
For further actions, you may consider blocking this person and/or reporting abuse
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.
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.
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 :fixedand I used
backdrop-filter: blur(10px)in my main content. This gave me the glassmorphism style.
I hope this helps :)
Thank you it helps 🙂
Thanks, I will try to give the background a bit less focus.
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.
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
Welcome Khokon 😇
You've said it all. Especially that of color. The landing page is attractive and simple these are personally what I like about it.
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!
Thanks a lot, ben. I will consider all the points you've mentioned.
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
Thanks andaazil, I will try to follow your advice on the next update of my landing page.
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.
I'm glad you liked it. I will try to implement everything you've mentioned. Thanks for the advice <3
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.
Thank you. Now I see this point!
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.
Thanks for the tips. I will surely put a logo on the top!
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. 😁
I missed the perspective of the mobile devices. Thanks for your advise, helps a lot :)
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 ...
that's all from me. 👍🏻 Let me know if it helps.
Yes, it defenetely helps. Thank you for your advise.
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!
thanks for pointing this out. I will try to reduce the effect of that background animation or remove it :)
i would probably get rid of the blob from beeing fixed and keep it just on the landing screen.
you mean, the background bubbles?
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 ).
Got it. Thanks for your advise. I will try to reduce it and just keep it in one frame :)
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
Thanks for the advise. I will re work on the buttons and will try to improve the typography as well.
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 ;)
Great obserbation. I will prepare some square photos for mobile views then. thanks for your time and advise.
did you use your default system font?
No, I used google font.
ok
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.
Thanks, I will surely make changes to the buttons.