The front page does not give any hint as to how this exchange works or will work. Screenshots of future UI is popular on landing pages, but there are other ways.
The animation apparently only starts when I hover/move my mouse, so I was waiting for a while for nothing to happen.
The background image(s) are quite heavy.
The text is way too small for me to read.
Here's an old principle: Make your front page clearly state what the heck is going on. For example, going to https://www.fsf.org/ you get the very first sentence below the menu: "The Free Software Foundation (FSF) is a nonprofit with a worldwide mission to promote computer user freedom." Or going to https://monta.com/ (a random startup) you get a UI screenshot, a call-to-action button and the first sentence: "Monta is the operating platform powering the EV ecosystem serving drivers, companies, cities, and the electricity grid with one integrated software solution."
You have so many pixels, why do I need to click "Read more" when I could be reading more right away? I am here to sign up, but there's no pitch.
I was taught a good lesson about animations, that I want to share:
When you make an animation, you might fall in love with it too much. You are proud, because it looks really cool. It's exciting to make it. Visitors of your page might not feel the same, since we see so many animations every day. Look at one of those cheap american news shows - there are really professional animations all the time. It's a hard pill to swallow, noone cares about our animation as much as we do :(
It doesn't mean, the animation should go. It should absolutely stay, but the crank up the speed of the animation as much as you can bear. And then make it twice as fast. I mean that literally. I had made an animation that took a second to complete, a decade ago. My senior looked at it, and gave that same lesson. I cranked the speed up to 0.3 seconds - it was as much as I was willing to speed up. "Otherwise noone can really see it." ... Then I sped it up to 0.15 seconds, went to lunch, and when I came back, I could appreciate that it was perfect.
From a design view-point, remember: less is more. As others here have commented, the UI has a lot of unnecessary details and effects that take away from the overall professionalism of the site.
Try focusing on the bare minimum, and go from there. For example, less animations (even though they're cool), getting rid of that white box glow, and a bigger font, can go a long way.
Remember who your target audience is, and design for the broadest group possible in that audience. Keep it simple, and intuitive, and with a hint of magic.
I'm by no means a UI expert, but
1. The email box / button needs to be much bigger. You probably want a more custom button style as well
2. Image loading speed is inconsistent; choice of image also. I will probably stick with a single image
3. Animation of the record is cool, but it should be triggered once only. There is no need for a big "X" button to reset it
I went through your blog post and I like your idea. Would love to see further iterations with the page and product
I made some tweaks based on feedback (thank you all again for being gentle I'm new to putting my "designs" out on the web)
- animation time drastically shortened
- hid "X" button
- still linking the blogpost instead of describing what it is succinctly because I'm bad at being concise (although maybe that's a red flag that I won't succeed...)
- made it more mobile-friendly (read: made the font-size bigger) and styled inputs crudely, removed filter on blockquote
This is like a commit message not a comment :X
But really I don't know how to express my gratitude I'm over the moon :D
I'm a professional programmer not a graphics person, so take with a grain of salt. It looks cool! The intro is fun and the scrolling title bar is a nice touch (although I think some people might be turned off by it)
I will say though, to me personally it looks very simplistic. For example, the button and the textbox appear to have no styling. Also I don't understand why there's an X in the top-right corner which repeats the intro animation.
Nice first attempt! What I would try to do is find a design system and stick with that. Someone else already commented about the size of the text and elements. If you’re not designing on a daily basis, you will overlook such and many other gotchas like consistency of padding, font weight vs. font size, and so on. A great one I can recommend is TailwindUI—just make sure to give a template your own spin to prevent looking too generic.
I don't understand the very large X in the upper right corner. Typically these appear when a window has appeared on the screen, and the X is how you dismiss it. Here, it loads with the page, so it's not clear if I would want to click it to 'dismiss' what I'm currently seeing. But since I don't know what's behind this (or how to get the current view back), I would be hesitant to click it.
Very cool visuals, but after the record flies out and lands at the bottom of the screen, the record seems like a hyperlink because the mouse pointer turns into a finger, yet nothing happens on click.
The "X" to close the "popup" is pretty subtle. But there doesn't seem to be any point to closing it, is there?
Your backgound picture took longer than expected to load on mobile. I am, well, on mobile so I couldn't check the size, but I guess you could scale it down or compress it a little more.
The animation apparently only starts when I hover/move my mouse, so I was waiting for a while for nothing to happen.
The background image(s) are quite heavy.
The text is way too small for me to read.
Here's an old principle: Make your front page clearly state what the heck is going on. For example, going to https://www.fsf.org/ you get the very first sentence below the menu: "The Free Software Foundation (FSF) is a nonprofit with a worldwide mission to promote computer user freedom." Or going to https://monta.com/ (a random startup) you get a UI screenshot, a call-to-action button and the first sentence: "Monta is the operating platform powering the EV ecosystem serving drivers, companies, cities, and the electricity grid with one integrated software solution."
You have so many pixels, why do I need to click "Read more" when I could be reading more right away? I am here to sign up, but there's no pitch.