How do you create your headers?

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Search for a command to run...

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
When I saw the title, lazy me was hoping it be like those online generator tools so I hurriedly added it to my chrome reading list. boy I was wrong, nevertheless I gain more insight on headers and templates ideas reading this. Thank Chris!
Most of you know me for my consistency, a golden arrow in my blog series. I've written 1000 articles in 1008 days! Almost an article a day, and my honeymoon was the only holiday I ever took. I'm super proud of this achievement; it has been a fantasti...

It's not the first time I'll be talking about community. I think it's an essential aspect of any successful tool. This shows in my previous explorations of Astro, Medusa, and now Vendure as well. All these products thrive in a super open, welcoming, ...

The cool part about Vendure is how easy it is to set up and how abstract each layer is. Basically, we get the following elements: External database Server Worker Admin UI Frontend While this is amazing, it also brings a bit of complexity when it co...

The previous article looked at customizing Vendure on a data and process level. In this article, we'll look at customizing emails, as they are often a big part of a webshop system. We'll be looking at two different layers of customization for customi...

Even though Vendure is a pretty significant project out of the box, in some cases, we might want to go in and modify some elements to work to our specific use case. In this article, I'll take a high-level look at some elements we can customize within...

I often get asked how I create the headers for my articles. Thus I thought, let me write down how I do it and set it up.
When writing, I used two kinds of headers: my old legacy ones. These are kind of dark and contain the logo in the background. And then the new colorful ones.
The old ones were all hand-made in Sketch locally.
But today we'll talk more about the new ones.
When I rebranded my website and logo, I also decided to take the headers of each article more seriously.
And thus, I decided to hire someone with more experience in the design field.
Before even looking for a designer, I decided to write down the types of headers I wanted.
I was able to split it out into these categories:
And then article headers:
These were all rough the banner types I had, and I decided to put them in a notion document linking some existing examples.
Now that I had a clear idea of what I was looking for, I decided to look at Fiverr and target five people whose styles I liked.
I reached out to these five people and ordered one header from each. This was pretty cheap and gave me a good idea of what I liked.
I really liked designedbyhello's work most and decided to go with this person to create the actual templates.
He decided to create a Figma template file for each of my templates where I could easily add images/change texts.
The Figma file looks like this:

As you can see, I can use all kinds of different setups, and for each file, I can easily switch color patterns or images.

And that's it. I'm super happy with my design templates, as this style reflects my style and blog.
I'd love to hear about your process and how you like my headers.
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter