Hello!
I woke up to find that the Hooktheory website has been revamped, and I like it a lot! It looks more modern, more interesting, and it has more of mainstream appeal. I don’t want to be an annoying person jumping at any occasion to criticize, but I want to contribute when I have the opportunity. I spent three minutes changing a few values directly in the browser, and I personally found it more pleasing to look at and interact with. So consider it an additional idea rather than criticism!
My three quickfixes that I think would improve the user experience and the visual appeal:
-
Don’t let the content touch the screen edges.
I.e. changing “container-fluid” to “container” (or adding a container if required). This makes the axis of interaction clearer, reduces screen clutter, makes the content feel less overwhelming, and makes the page more visually harmonic. -
Make the navigation bars opaque.
I.e. changing the opacity from 0.9 to 1. This makes the header text easier and clearer to read, and reduces screen clutter, especially for the white navigation bar. -
Give the navigation bars a slight shadow.
This separates the header from the content, making it easier to process.
I used box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);
Just my two cents, you do as you wish of course!
Current:
My suggestions:
