vocadb
vocadb copied to clipboard
Overhaul of the front page
The general menus, header, logo etc. need to be aligned to achieve a proper symmetry to make everything visually more appealing. Here are some design/layout ideas.
The "Highlighted PVs" list could be styled/reworked to look better.
When viewing the front page on a larger resolution/screen, a lot of whitespace is visible besides the "Highlighted PVs" section, perhaps a specific text or section could be shown there. An idea would be to display specific "Featured song list/s" or "Random popular Artist/s" as a section there.
My view (1920 x 1080 screen resolution):
The upcoming albums and events sections look like this (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" under the logo could be moved to the left since it makes the right side of the logo looking "heavy".
Perhaps the logo could also get an update/redesign.
Maybe making the categories in bold will give it a "cleaner" look.
The horizontal social media and external links menu needs to be cleaned:
- 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.
- In general, some logos are outdated and should be replaced and some partner websites need to be removed and added.
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 header 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.
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 in my edit 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.