My new signature banner: from sketch to reality

Hi there! How are you?
Today I am very much excited to share my Steemit Post Signature Banner that I have designed with the inspiration of @mueeinislam brother. I want to thank him for showing me such a potential domain to share with the community. So, now let's dive into this!

_{My Signature Banner}

What is a Signature Banner?
I am sure you all know it. It is like the digital business card that usually comes at the end of any writing. It reminds a reader about the author and provide short glimpse about him.

As a designer, I believe that every detail matters and of course less is more. I had kept my banner very minimal to have better focus on the key information. Now let's see how I designed my new Signature Banner that I will use at the end of all my posts:

1. The Research: What and Why

Before I started designing, I looked at other successful Steemit profiles. I wanted to understand what makes a footer banner actually work.
My research led me to these 4 Key Discoveries:

• Trust is Everything: So, I must include my photo.
• Mobile-First Design: Most users read Steemit on their phones, so I researched the best screen size for mobile displays.
• The Power of CTA: A banner is beyond picture. So, a Call to action like 'Let's Connect' helps to increase engagement.
• Hierarchy Matters: I placed my username first in bigger size because that is the most important information I want people to remember.
  
  

2. The Decision: What to Include

I wanted a banner that feels professional but also shows who I am. So, I included only the crucial information that is enough to represent me and doesn't clutter the space. So here's what I decided to include:

• My Photo: This is important to get to know me!
• Username: I made @Kitki bold and bigger so you won't forget me!
• My Roles: I included what I do as a professional and like to do as an amateur.
• QR Code: This is for my portfolio—just scan it to see some of my work!
• Call to Action: I added a Let’s connect! button because I love meeting new people in the community.
  
  

3. The Sketch: My Rough Idea

I drew a quick sketch in the Microsoft Whiteboard to decide where to put my photo, my name, and my social links. This sketches helped me to make sure the layout was balanced and easy to read.

_{Two Sketches of the Banner}

4. The Design: Real Visuals

If the design doesn't need lots of manipulation I usually do everything in Figma. This is my go to design software for over 4 years. So, for this simple banner design, I used it (though it feels quite unconventional!).
I chose a frame size of 800*200 px and picked minimal colors for the design. I have used three colors:

• FFFFFF for the background.
• 211D1D for text and button.
• 06D6A9 for having a steemit feel subtle background graphics.

Text was the default Inter and for icons I used the world famous Bangladeshi icon package, Huge Icons. I used QR Code Generator for creating my customized portfolio QR code. For having contrast with the white background of Steemit, I used shadow for the banner.

_{Final Output}

I am quite happy how it turned out. Now it's time to check if any improvement needed in case of resolution and size.

Task	Tool
Research	Steemit, Gemini AI, Notepad
Sketch	Microsoft Whiteboard
Design	Figma

Since I am a designer, I would love to help my fellow Steemians! If you need a professional banner like this for your posts, feel free to comment below or reach out. I'm eager to help our community look better!

Best Regards,
@kitki

_{Posted using SteemX}