In a shock to all involved, I’ve actually made some updates to my own blog site. I know – I can’t quite believe it either.
I’ve barely touched this site since I built it, and now I’ve got a bit more content and wanted to make the category view a bit more visual, so I started looking for some suitable icon packs to use. During which I got distracted and redesigned the header.
Super Mario Bros. Wonder
Bit of a weird start isn’t it, but I need to admit something first — I was partly inspired to make some of these changes by playing Super Mario Bros. Wonder.
The UI in that Switch game has a lot of black, and I really liked it. To the point that I stopped playing and did this update instead. I guess that says a lot about me but I’ll leave you to draw your own conclusions.
I’d had the black outlined dinosaur icon since I’d built the blog, and I’d kind of just shied away from adding similar contrast in the rest of the UI but, thanks to good old Mario I decided to lean into it.
Icons
I’ve added icons for each category, from the Lucide icons pack, which are really nice and free to use — use them in your stuff, they’re great.
Design
I used to just have a coloured dot to represent each category so I used that colour as the background for each icon, which I think looks nice.
The icons themselves are also positioned inside black circles, slightly off-center to give the impression of a badge, which I think looks nice and gives a bit more contrast, and also ties it with the skull logo I’m using on every page.
I also played around with animating the icons on hover, but it looked like they were glitchy and broken as they were so small. It also didn’t really add that much so I scrapped that idea.
To implement the icons and new headers I created two new astro components:
- CatIcon.astro
- CatBadge.astro
CatIcon is, as the name suggests, for the icon. It imports them all and shows the correct one depending on what category name you pass into it. I’m not sure if this is the most efficient way to do it, but it works.
CatBadge takes that icon and uses it in a dynamic badge component which you can see used all over the site. The heading on the category page, the home page category grid, and the ‘most popular’ categories in the new header are all using the CatBadge component in one of its modes, ‘large’ or ‘xLarge’. (There is a ‘standard’ mode too but I’ve not used it as yet, so I didn’t finish it. I’ll gloss over that for now to give the appearance of super professionalism.)
Header
I was never happy with the homepage header, it was just a bit too plain and didn’t really show off the site or what it was about. So I redesigned it to be a bit more visual and to show off the new category icons.
The old header had a logo and a plain text menu, which showed the categories with the most posts at the time the site was built, though it’s recalculated each time I make a post.
I thought I could do better.
The old header was doing one thing (navigation) and not doing it particularly well. The new one does three: it tells you what’s new, it shows you what kind of content lives here, and it gives you a way in without having to scroll. The category icons help a lot with that last part; a coloured label is fine, but an icon communicates faster, especially if you’re a returning reader who’s already built an association with them. It also shows the description of each category, which previoulsy only appeared within the category pages, so readers looking for specific content don’t have to scroll far, or click too many times, to find it.
The new homepage header has a ticker which shows the latest 5 posts in a cycle, with prev/next and pause controls so it meets WCAG requirements for auto-advancing content. I had space for this as the new header also has the category grid we spoke about above.
S’alright isn’t it?
All of this adds up to a much more visual and engaging header which I think is a big improvement on the old one, and also shows off the new icons which – surprisingly – I’m really happy with.
Have I mentioned I usually hate everything I design? Because I do. Over and out.