Landing Page Feedback
Hey everyone! Im a developer who is new to UI design and did my best to create a apealing landing page for our product. Im sure there are a ton of things I can improve on and I know that there are many experienced people here. I would like any feedback on the UI from colors, fonts, all the way to the interactive components. Thank you all in advance!
Here is the site: (warning the site may be slow but this will be fixed soon)
https://quarry.video/
Quarry
width=device-width
11 Replies
i'll review the whole page, but straight away you need to turn off the autooplay on the example video
it's super annoying to have it keep starting as I scroll near it
-------------
1. primary nav: it might be good to add anchor links to lower parts of the landing page here, or move your waitlist sign up button to here. I would also give it vertical padding so the logo is not touching the top of the frame, probably 1rem or so
2. hero: your hero does not adequately explain what is the purpose of the page. The title is ok, but maybe follow it up with a paragraph text that explains why this would be useful. Also, i am never a fan of hero images that don't seem to have any connection to the project. In this case, I would suggest maybe making the blurry animation a bg element and centering the text, or finding some sort of visual that reinforces the hero's message in some way
In fact, what I suggest is, swap the hero title with the next section. Make 'Find diamonds in the rough' your hero title, and generate media clips the next section's title.
Also, resize them, so that the h1 in the hero is bigger than the title in the next section
3. CTAs - Your call to actions are probably too subtle. Maybe the one you want people to pick the most (sign up for waitlist) should be a lot more prominent and noticeable
4. Fonts - not sure what fonts you are trying to use, but I am only getting system fonts and the occasional 'georgia' font
5. overall - I don't feel a 'flow' from one section to the next, it just kind of feels like you made them individually and stacked them on top of each other. And, while I do like the dark/light mode option, the overall colors are pretty boring. You could probably spruce them up quite a bit either by adding a few different tones of the same shade, or maybe some subtle gradients, or adding an accent color (and then reusing it for the blobs, the cta highlighting, maybe a title or two)
Thank you so much for this! After reading your explinations I agree with them and ill work on implimenting all of these but i also want to ask you about two points.
The original plan was to do something like this for the hero:
oh i like that way better
the tapes get closer to the title on houver. the reason I went with the blob is cuz i thought the tapes might be too unprofessional but they also make more sense since they have something to do with the product
i find that the blob thing works best on sites where it is a very subtle bg element that you hardly notice
And for this point your 100% right. The components were made pretty much seperately with no real plan in mind (big mistake) but ive learned from that which is great. For the cta do you think it would be good to put the waitlist in a normal (colored) button to grab attention? Or should I find a way to impiment the arrows while still grabbing attention? For the accent color I agree with that if we go with the blobs but for the tapes would it be best to keep it plain black and white? Sorry if this is too much lmao its great to have more eyes on it.
ill experiment with that and see how it turns out
I like that you have 2 arrows, one pointing down to the next section and one pointing to the signup. So, I would try to incorporate a design that keeps them both. Maybe, by adding that arrow and the text into a simple button *like the button is only an outline maybe. You can play around and see what works the best
and for color, I would just solidify the accent color, and then start slowly adding it on the page. basically if you can, you want it to be represented at least once on each section. and from there, you can add more if needed
Sounds great! Thank you again for all your help
https://www.opengraph.xyz/
This should help you with social media previews and seo
OpenGraph
OpenGraph - Preview Social Media Share and Generate Metatags
OpenGraph is the easiest way to preview and generate open graph meta tags for any website.
oh this is helpful thanks