What do you think about my landing page? How can I improve it?

What do you think about my landing page? How can I improve it?

xtbhyn

💻 🎨 🖊️ 📚 🌱 🍔
Local time
00:16
Joined
Oct 20, 2019
Messages
54

Hello everyone :)

I made a landing page to validate whether the problem I am solving is worth solving and also if the solution is good enough. I developed this to scratch my own itch and I've been using it for sometime. I would love to know your thoughts about the landing page.

Here is the link: Particle Systems | Capture user inputs on websites without any backend

About the Product:
We offer UI components specifically designed to capture emails, polls, bug reports etc and then pass the captured data directly to your cloud services via integrations. No need to develop any back-end. Save time & effort.

Target audience:
Developers who don't want to go through the hassle of setting up a backend for the use cases mentioned above.

Thanks, I am eagerly waiting for your replies.

 

Sharkie

🦈
Gold Member
Local time
15:46
Joined
Feb 14, 2020
Messages
141
Pronouns
She/Her

So, I'm on mobile, which probably isn't the best or right way to go about viewing this site, but it is DARK. I'd lighten up some of that text and other elements on the page. I'm not colour blind, and it was a bit difficult to read some of it.

The layout is a bit broken on my mobile, but from what I can see it looks really well laid out and the little graphics and animations are lovely!

I'll give it a peek when I get back on my computer and give some thoughts on that as well. Overall though, I think it's really nice! Good job!

 

Adam

Mr. Webwide
Administrator
Local time
18:46
Joined
Sep 24, 2019
Messages
1,259
Pronouns
he/him

There are arguments against the all-to-common landing page layout but they do come with a big advantage that people know what to expect. A clearly defined hero with a logo, navigation to key page sections/pages, a headline about the product, a sign-up button and below some more information if you've captured peoples interest.

Check here for some inspiration:

  • I'm on a widescreen so the site is stretched very far, it needs capping at a certain width so the content is not so far apart from eachother
  • Make use of higher contrast and more diverse font sizing to focus on key elements of the page such as your page title
  • I really like how Mailgun shows the code/results in their hero, perhaps something like this would work for you to instantly get the message across Mailgun Technologies
Seems like a nice product! Will really shine with a bit more love to this page. :)

 

xtbhyn

💻 🎨 🖊️ 📚 🌱 🍔
Local time
00:16
Joined
Oct 20, 2019
Messages
54

@Sharkie
Hey thanks, I am trying my hand at svg animations and illustrations. It's challenging yet fun! 😁

@LividJay
Thanks! I also suddenly feel the accented text (pink + green) is too distracting and adversely affecting readability 🤔

@StewAlexander
Thanks, I will fix that 😎👍

@Adam
Thanks for the examples and the Mailgun suggestion! 😎👍
I was wondering if I should add a "how it works" section but now I think I should.

-----------

Thanks guys for your help :) Based on your suggestions, I will:

  • Brighten up the content
  • Optimize the layout for mobile (I am thinking of removing the horizontal scroll)
  • Add a max-width for widescreens
  • Re-organize the content into a standard landing page layout
  • Add a "How it works" section

 

kilian

Member
Gold Member
Local time
19:46
Joined
Oct 7, 2019
Messages
62
Pronouns
he/him

To brighten up the content, use a color contrast ratio tester. You'll want to have at least passing WCAG contrast, and that'll make your site look better. The animation is nice but make it smaller and make sure you have your tagline, your animation and a CTA visible immediately. Your checkbox-things are now very visually distict and look button-ish, but they don't do anything. Replace them. Use a neutral sans-serif font for you body text.

 

LividJay

Member
Local time
13:46
Joined
Feb 16, 2020
Messages
61

To brighten up the content, use a color contrast ratio tester. You'll want to have at least passing WCAG contrast, and that'll make your site look better. The animation is nice but make it smaller and make sure you have your tagline, your animation and a CTA visible immediately. Your checkbox-things are now very visually distict and look button-ish, but they don't do anything. Replace them. Use a neutral sans-serif font for you body text.
Do you have any recommendations for tools like this? I didn't even know this was a thing :)

 

Adam

Mr. Webwide
Administrator
Local time
18:46
Joined
Sep 24, 2019
Messages
1,259
Pronouns
he/him

Do you have any recommendations for tools like this? I didn't even know this was a thing :)
Chrome dev tools colour picker will do it for you sometimes though it seems to be a bit hit or miss depending on whether it detects the background colour.

Screenshot 2020-02-21 at 15.18.56.png

This simple tool is a nice way to check manually, colours should be at least AA compliant: WebAIM: Contrast Checker

@kilian makes Polypane, the best browser for building great web experiences which does this and a whole lot more also in an integrated testing environment. 😄

 

JacobHegwood

Member
Local time
12:46
Joined
Nov 19, 2019
Messages
37

I really like the overall design and what you're going for. I would definitely start adding animations to give it that "polished" feel. Just a couple drop-ins or fade-ins is all you need. As far as anything I'd personally tweak, the first three bullets feel like they should be buttons. You could circumvent this by putting the green checkmark on top of the bullet point and make it slightly bigger. Great job so far, you're very talented.

 
Last edited:

RobinHood

Member
Local time
18:46
Joined
Jan 6, 2020
Messages
26

I like where it's going and the colour scheme, but the font colours all look too desaturated, which makes them hard to read.

The spacing between elements needs work too, some of the gaps between sections are huuuuge. Maybe tweaking the visual heirarchy and adjusting some of the font sizes.

The animation at the top is pretty cool. The '+ many more' seems a bit out of place though. The dots next to it look like it might be a vertical carousel, but it's not.

 

Gummibeer

Astroneer
Moderator
Local time
19:46
Joined
Oct 5, 2019
Messages
1,177
Pronouns
he/him

Do you have any recommendations for tools like this? I didn't even know this was a thing :)
Axe and some other tools will do it in a more developer way. 😉
Lighthouse/web.dev has also a check but doesn't show the exact element. 😕
There are also tools to manually check two colors against each other - design phase.



 
Last edited:

LividJay

Member
Local time
13:46
Joined
Feb 16, 2020
Messages
61

Axe and some other tools will do it in a more developer way. 😉
Lighthouse/web.dev has also a check but doesn't show the exact element. 😕
There are also tools to manually check two colors against each other - design phase.



Very cool! Thanks!

 
Top