DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for How do you create your headers?
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

How do you create your headers?

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.

From idea to execution

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:

  • Celebration banners
  • Social media headers
  • Event banners

And then article headers:

  • Code block + logo
  • Logo/Icon
  • Image

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:

Figma design file

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

Figma quickly changes colors

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, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (9)

Collapse
 
jonrandy profile image
Jon Randy • Edited on

TBH - I usually just try and find an image (with appropriate rights) somewhat related to the content. Failing that, I'll use an image of some code mentioned in the article.

For me, professional looking header images are a big turn off and often an indication of posts with an ulterior (often financial) motive. I also find there is frequently an inverse correlation (not in every case) between the 'professionalism' of the header image and the quality/depth of the content.

Collapse
 
dailydevtips1 profile image
Chris Bongers Author

Interesting!

I've never really looked at it that way.
For me it was more a quick win to make the images look a bit neater and all in-line with each other.

I do see what you say, with a lot of publications that seem to put more effort in the headers than the actual articles they aquire.

Collapse
 
jmau111 profile image
jmau111⭐

good question!

I tend to like big headers with lots of space, nice gradients and clip-path ^^, but when it come to blog, I prefer a single line with all "fundamental" items like the title, the menu, the search bar

Collapse
 
jmfayard profile image
Jean-Michel Fayard πŸ‡«πŸ‡·πŸ‡©πŸ‡ͺπŸ‡¬πŸ‡§πŸ‡ͺπŸ‡ΈπŸ‡¨πŸ‡΄

Thanks a lot, I will try this out.

That topic was a pain point for me. In fact, I hated so much having to create a banner that I used random things instead like here where I use a photo of my dog walking over my piano

Collapse
 
dailydevtips1 profile image
Chris Bongers Author

I used that method in the beginning a lot, just picked random images πŸ˜…

Collapse
 
codeystein profile image
codeyStein

Could I ask where you get your images? Thanks in advance and love your content!

Collapse
 
dailydevtips1 profile image
Chris Bongers Author

I either make them myself or use pexels for stock images.
Hope that helps?

Collapse
 
codeystein profile image
codeyStein

It does! Thanks!

Our newest Hackathon

Join the DEV x MongoDB Atlas Hackathon 2022 and use your ingenuity and creativity to build an application using MongoDB's cloud based developer data platform, MongoDB Atlas.

β†’ Get Started