Add subscribe buttons to header (in a stylish way)

[mgreiler]

The header should provide the listener (or website visitor) with a visually appealing way of subscribing to the podcast.

Right now, I'm imagining something like a yellow part of the header that has links or buttons that bring you to the desired podcasting app.

I made a rather drafty draw up in Figma in order to better explain what is needed:

Or with buttons (a bit inspired by Wes Bos's podcast):

As you can see, both variations are visually not appealing, but they are meant to explain the functionality of it ;-)

I'd be super thrilled if you have some ideas and proposals for how we could make this look slick and modern!

[LenaSchnedlitz]

I drafted some solutions in Figma that we can iterate on.

What do you think?

---

Some notes:

• Neither variant has labels; I believe they would add too much clutter.
  I expect users to recognize their preferred podcast provider's logo, but we could add tooltips to make things even clearer.
• At the moment, solutions are desktop only. I will add mobile variants when I know more about your preferences.
• Do you already know which links you want to use in the final version?
  The mockups currently use arbitrary ones, but I can update them if you already have a specific set in mind.

---

Solutions I like best:

(Please also have a look at the Figma file, which also contains other interesting variants.)

---

Looking forward to your input! 😄

[mgreiler]

Hey Lena,
what fantastic work. I like one and two of your favorites the most.
Maybe we could make a transition from blue to yellow?

From the first, I like that it is on the right side. From the yellow, that it catches the eye a bit more.

I like the tooltip idea! I also think they might recognize the logo and with the tooltip, they can get all info.

One thing I was wondering is if we should write "Click to subscribe to our podcast"
I know, subscribe alone is slicker, but I wonder if people will know these are actionable items...

In any case, I'm super excited about your solutions! Thanks so much for your contribution!

[LenaSchnedlitz]

Thanks for the feedback! I'm thrilled you like my ideas! 😊

Maybe we could make a transition from blue to yellow?

Done! I added some new variants to the Figma file 😉

One thing I was wondering is if we should write "Click to subscribe to our podcast" I know, subscribe alone is slicker, but I wonder if people will know these are actionable items...

This is an interesting question. I'm not sure... Many websites similarly display social media links, so I would expect people to recognize their purpose. However, in the yellow versions, position and color might confuse them.

Maybe you could test it with a small group of people? 🤔

I prefer Click to subscribe! because it's shorter:

I can also try to make the links look more clickable themselves if you like. This will do the trick, but will also take up more space and therefore seem more cluttered.

What do you think?

[mgreiler]

First impression! I love it! Thank you!

On Tue 22. Mar 2022 at 10:19, Lena Schnedlitz ***@***.***> wrote: Thanks for the feedback! I'm thrilled you like my ideas! 😊 Maybe we could make a transition from blue to yellow? Done! I added some new variants to the Figma file 😉 One thing I was wondering is if we should write "Click to subscribe to our podcast" I know, subscribe alone is slicker, but I wonder if people will know these are actionable items... This is an interesting question. I'm not sure... Many websites similarly display social media links, so I would expect people to recognize their purpose. However, in the yellow versions, position and color might confuse them. Maybe you could test it with a small group of people? 🤔 I prefer Click to subscribe! because it's shorter: [image: Desktop - 4b] <https://user-images.githubusercontent.com/10845748/159444152-197b2933-d24c-4b2a-899a-85aac7311cd6.png> I can also try to make the links look more clickable themselves if you like. This will do the trick, but will also take up more space and therefore seem more cluttered. What do you think? — Reply to this email directly, view it on GitHub <#13 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACNYYLHXFSRTH26E2YGYMDVBGGCBANCNFSM5PRBHCBQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

-- Dr. Michaela Greiler -- Workshops: www.awesomecodereviews.com Writing: www.michaelagreiler.com Podcast: www.se-unlocked.com Find me on Twitter: twitter.com/mgreiler

[LenaSchnedlitz]

I'm glad you like it! Will post mobile solutions soon...

[LenaSchnedlitz]

I just added some mobile variants 😉

https://www.figma.com/file/RkxnaLyEmCQvd0eXCNmO9F/Header

[mgreiler]

I like numbers 2 and 3 A LOT!
Thank you!