Show HN: I made a landing page am I doing this right?

https://dj.exchange

by dayvonjersen • 3 years ago

12 24 3 years ago

dj.exchange

Full write-up explainer blogpost here: https://dayvonjersen.com/blog/announcing-dj.exchange

Maybe I should have linked that instead of the landing page???

What do you think I'm new to this :)

chychiu• 3 years ago

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

dayvonjersen10• 3 years ago

Thanks for reading my nonsensical rambles :)

The big X is a holdover from when I was first testing it. I should get rid of that. The <input>s are unstyled I can change that!

Thank you so much

warent• 3 years ago

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.

dayvonjersen10• 3 years ago

I am also not a graphics person. Or a programmer. Just a person with a dream and an Internet connection :)

Thanks for positive feedback, someone gets what I was going for :p

RileyJames• 3 years ago

It wasn’t a good experience on mobile (iPhone SE2020).

The background images took ages to load (I’m assuming they’re massive, I’m on 4g). The image didn’t complete loading before switching.

Swiping down brought up a modal, but it didn’t load correct, and it didn’t seem to yet any content beyond a vinyl logo?

dayvonjersen10• 3 years ago

yikes yeah I should compress the JPEGs if they made your phone blow up! sorry about that but thanks for checking it out all the same :)

sshine• 3 years ago

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.

dayvonjersen10• 3 years ago

lol a friend told me my music is very "mysterious" and so I've sort of ran with that creatively but "mystery" in web development is not(!) a good idea

duly noted good sir thank you for the feedback I shall iterate

supermunny• 3 years ago

Your e-mail input placeholder says unknownartist@dj.exchange which is quite confusing, am I inputing my e-mail or choosing a username for your site?

dayvonjersen10• 3 years ago

Hm, fair point. Do you think I should leave placeholder empty?

heresjohnny• 3 years ago

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.

liminal-dev• 3 years ago

Good job creating your own site!

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.

Good luck!

dayvonjersen10• 3 years ago

Cheers!

gnicholas• 3 years ago

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.

theodric• 3 years ago

The sign up form just gives me a blank white screen on FF mobile Android, so I didn't sign up. ¯\_(ツ)_/¯

dayvonjersen10• 3 years ago

ohno D:

idk how to fix this it's literally a plain <form> and <input> no javascript weirdness or anything hmmm

obfuscator• 3 years ago

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.

dayvonjersen10• 3 years ago

It was much slower originally >_>

Solid advice! I'll try 150ms thanks :)

kmoser• 3 years ago

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?

dayvonjersen10• 3 years ago

Thank you. yes the X is useless unless you want to see the animation again which based on the comments no one wanted to see the first time :p

atoav• 3 years ago

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.

tech-no-logical• 3 years ago

animated vinyl covers whole page and I can't do anything : https://imgur.com/a/wM3Ejig

(firefox / ubuntu). so I'm sorry to say 'no' ;)

herbst• 3 years ago

Can't scroll on my mobile (android)

dayvonjersen10• 3 years ago

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

Show HN: I made a landing page am I doing this right?

Related Stories