With the start of 2024, I wanted to take a look at the state of my website, and I thought "how can I make this website look better? MATERIAL DESIGN
Yeah... Uhm... I was a bit bored when working on another blog post, so I took a look at my website and corrected some mistakes. Specifically, the perfect phone guide, in which I decided to check the links, and out of boredom I checked out the Material Design 3 website to find out that you can apparently implement Material Design 3 on websites via frameworks (?). I'm not sure why I'd want to do that, but for whatever reason it inspired me to partially add this kind of design into two elements of my website.
When I had the idea of creating a website, I had the idea of creating a navigation bar on the left. This design was quite inspired by the design Cadence uses on her website, however I quickly realised that it might not be the best way for a simple navigation bar on different devices or user window alignment (I was right), and at the start of my website, I just used a very basic hyperlinks on top of my website because I didn't understood how you could do something like that. Just imagine how the website might've looked like with this design though. Anyway...
After taking a look at other website, I inspired my top navigation bar from the Void Linux homepage, which in my opinion looks quite nice and is quite practical. The only thing I could material-ify was the active indicator by rounding it up. I made sure to make the rounded corners look like the bottom navigation panel of many Material Design 3 apps.
For short sentences, updated informations, important informations, notes, or for lists full of text, I decided to add a background colour indication. I inspired it by the way unixsheikh does it on his website. It's a simple and nice way for content separation and adds dynamic to my blog posts.
Here's how it looks like :)
Outside of the reason that I was bored and wanted a little glow-up for my website in 2024, I had another reason too. In recent times, I found myself getting more interested into design and UX choices and generally making things look good. I believe good design and good user experience is what defines a good product. A lot people may argue that functionality should be more prioritised, but I think you can't really appreciate a functionally great product when the look and feel is flawed, and vice versa, a great product should not skimp on its functionality in order to look good. Material Design 3, in my opinion, is a great combination of functionality and design. It isn't trying to be the most utilitarian design, but it's also not too minimal where even basic features are lacking, and the design is not trying to be intimidating. As for this website, it was always functional and fast. Often times where I'm in networks of slow internet, a lot of modern websites fail to load whereas my website ran just fine. It's just that in the past, my website wasn't known to be the prettiest, and even the slightest change has made this website look much better. I know a lot of people won't like it, I used to not like it either initially, but after getting used to it, apps that don't adapt to a similar design look too sharp, cluttered, and dated for whatever reason.