Webwide is the inclusive forum community for web designers, developers & makers.

Whether you're an enthusiast, in training, or a seasoned pro – you'll fit right in at Webwide. We understand that our community is one of creation which is why we, unlike many other discussion forums, encourage sharing of your own projects and content. Creating a forum account is fast, easy and completely free so you can start participating right away.

Read our Code of Conduct

Free Forum Membership Benefits

  • Participate in hundreds of interesting discussions
  • Network with industry peers and make new connections
  • Show off your own projects and relevant content
  • Get help and feedback for your coding and designs
  • Buy and sell services and resources in the marketplace
  • Participate in our friendly community challenges
  • Earn trophies and work your way up our leaderboards
  • Enjoy exclusive Webwide member discounts and offers
  • ...and so much more!

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

xtbhyn

💻 🎨 🖊️ 📚 🌱 🍔
Gold Member
Joined
Oct 20, 2019
Messages
46
Reaction score
49
Points
95
Location
Hmmm
Local Time
Today, 16:27
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.
 
  • Cheer
Reactions: Sharkie

Sharkie

Member
Joined
Feb 14, 2020
Messages
51
Reaction score
62
Points
30
Location
Canada, eh! :)
Local Time
Today, 06:57
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!
 
  • Like
  • Love
Reactions: xtbhyn and Adam

LividJay

Member
Joined
Feb 16, 2020
Messages
36
Reaction score
46
Points
20
Location
Virginia, USA
Local Time
Today, 06:57
The layout doesn't seem broken on desktop, but I agree with Sharkie in that it is VERY dark. Also, my eyes don't seem to know where to go as nothing really pops out.
 
  • Love
  • Like
Reactions: xtbhyn and Sharkie

Adam

Mr. Webwide
Administrator
Joined
Sep 24, 2019
Messages
880
Reaction score
913
Points
915
Location
United Kingdom
Local Time
Today, 11:57
Website
adgr.dev
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. :)
 
  • Love
  • Like
Reactions: xtbhyn and Sharkie

xtbhyn

💻 🎨 🖊️ 📚 🌱 🍔
Gold Member
Joined
Oct 20, 2019
Messages
46
Reaction score
49
Points
95
Location
Hmmm
Local Time
Today, 16:27
@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
 
  • Cheer
  • Like
Reactions: Sharkie and Adam

kilian

Member
Gold Member
Joined
Oct 7, 2019
Messages
44
Reaction score
41
Points
70
Location
Zoetermeer, Netherlands
Local Time
Today, 12:57
Website
kilianvalkhof.com
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.
 
  • Like
Reactions: LividJay

LividJay

Member
Joined
Feb 16, 2020
Messages
36
Reaction score
46
Points
20
Location
Virginia, USA
Local Time
Today, 06:57
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
Joined
Sep 24, 2019
Messages
880
Reaction score
913
Points
915
Location
United Kingdom
Local Time
Today, 11:57
Website
adgr.dev
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. 😄
 
  • Like
Reactions: kilian and LividJay

JacobHegwood

Member
Joined
Nov 19, 2019
Messages
35
Reaction score
38
Points
20
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:
  • Love
Reactions: xtbhyn

RobinHood

New member
Joined
Jan 6, 2020
Messages
18
Reaction score
8
Points
3
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.
 
  • Like
Reactions: xtbhyn
Top