vocadb icon indicating copy to clipboard operation
vocadb copied to clipboard

Overhaul of the front page

Open andreoda opened this issue 1 year ago • 0 comments

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): grafik

The upcoming albums and events sections look like this (1920 x 1080 screen resolution): grafik

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:

grafik 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.

grafik Maybe making the categories in bold will give it a "cleaner" look.

grafik 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.

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

grafik 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: VocaDB_Front_Page_Original

My Edit: VocaDB_Front_Page

With rulers and measurements: grafik

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.

andreoda avatar Apr 26 '23 19:04 andreoda