Suggestion: Slightly layout/design change for the front page

[andreoda]

This is nothing urgent just some suggestions for a more balanced design with better symmetry.

Now that the layout was a it changed, the front page looks a bit empty. The upcoming albums and events sections look like this now (1920 x 1080 screen resolution):

Maybe there could be more albums filling the gap on the right or center them (make them sticky) and make the image sizes bigger.
The event section could be either centered to fill the smaller gap on the right (symmetry) or make them smaller to fit more.

Other design "issues" I noticed/tips I have:

The small text for the "jokes" could be moved to the left since it makes the right side of the logo looking "heavy".

I know it always looked like this but maybe making the categories in bold will give it a "cleaner" look.

This box looks unbalanced.
The app icons could be bigger to fill out the empty space, they could also be centered.
The community icons could be moved slightly to the left since the space on the left is bigger than the right.
The partner banner icons could be bigger and filling the empty space just like the first point.

The space around the "random" button is now uneven, making the space on the left equal to the right (account button) fixes it.

The whole top bar doesn't look centered. Maybe moving the whole section slightly to the left, aligning it (the buttons) with the main "box" underneath will give it a more symmetrical look.

Sorry that I couldn't use all the professional terms here, I forget most of them.

---

I made some edits to show it visually how it could look like:

Original:

My Edit:

With rulers and measurements:

The only area that I didn't change was the "Highlighted PVs" section since I didn't know what the best approach would be (just resizing it to fit the whole box would make it too large I think) and maybe that right space could be used for something else anyway.

---

I hope this is okay to leave here.

[ycanardeau]

Thanks for your detailed feedback.

I know it always looked like this but maybe making the categories in bold will give it a "cleaner" look.

What do you mean by "categories"? Are you talking about the links to "Home", "Artists", "Songs", "Events", "Featured song lists", "Tags / genres" and so on? It would also be nice if the current menu would be highlighted. For example, if you're on the song details page, the "Songs" menu will be highlighted.

Now that the layout was a it changed, the front page looks a bit empty.

I feel that 10 items per row are too many. And I've read somewhere (in one of the references below if I remember correctly) that the number of items that are displayed at once should be kept less than or equal to 7, although I'm not sure if this rule is applicable to this context.

Here is the example from YouTube, and the number of items per row is limited to 6:

Here is the example from MusicBrainz, and there are 10 items, but only one row.

If you feel the current layout a bit empty, then I'd suggest you try to have a change the max width of the right frame from 1600px to 1344px, which was the original value. Open DevTools on your browser by pressing F12, and go to the Elements tab, select the div element, and add a new style in the Styles tab.

Remember that it's surprisingly difficult to make a layout responsive (#6), and because of this, we would need some improvements in the frontend before starting working on this. I personally don't have motivation to do this, but of course it's welcome if you or someone else can do it.

Note that the priority is in the following order:

1. React conversion vocadb#900
2. VocaDB Player vocadb#1101 (and related issues)
3. Migrate to Bootstrap 5 vocadb#851 (or using flexboxes everywhere would suffice?)

By the way how did you make these edits? Did you use DevTools on your browser?

References:

• 100 Things Every Designer Needs to Know About People
• 100 More Things Every Designer Needs to Know About People
• 100 Things Every Designer Needs to Know About People

[andreoda]

What do you mean by "categories"? Are you talking about the links to "Home", "Artists", "Songs", "Events", "Featured song lists", "Tags / genres" and so on? It would also be nice if the current menu would be highlighted. For example, if you're on the song details page, the "Songs" menu will be highlighted.

Yes, that is what I meant and that idea is very nice.

I feel that 10 items per row are too many. And I've read somewhere (in one of the references below if I remember correctly) that the number of items that are displayed at once should be kept less than or equal to 7, although I'm not sure if this rule is applicable to this context.

That is probably true. Responsive website designs are very difficult to do.

By the way how did you make these edits? Did you use DevTools on your browser?

I only used an illustrator program since they never taught us in college how to do "real" webdesign (with proper tools and HTML codes).