Create AsyncAPI speaker card design template

[mcturco]

Slack discussion thread: https://asyncapi.slack.com/archives/C023A76SV2Q/p1634634997121400 Inspiration: https://pbs.twimg.com/media/FAkpXMmWEAQeZFr.jpg

Design criteria

• [ ] Logo
• [ ] Presentation Title
• [ ] Presenter(s') Headshot(s)
• [ ] Presenter Name(s) & Credentials
• [ ] Register Now button

In addition, need card templates for live streams, and contributor-first meetings

[github-actions[bot]]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[mcturco]

@derberg @boyney123 Hey guys! Just finished putting together the templates for the speaker cards. I made a few variations for the Online Conference, Live Streams, and Contributor-first meetings, as well as offering templates where there are 2 speakers instead of one. Let me know if we should create a template for other types of meetings, and would love to get your feedback on these.

You can use the arrows on your keyboard to cycle through them, or just click on the buttons in the design: https://www.figma.com/proto/HN7QrFterf4JZ7AyTRZ2y1/Speaker-Cards?page-id=2%3A26&node-id=2%3A27&viewport=241%2C48%2C0.5&scaling=min-zoom&starting-point-node-id=2%3A27

[quetzalliwrites]

If I may, I don't think we actually need a button that says to register. I think it would be better to have a bigger speaker photo and/or asyncAPI logo on the speaker card. I've always felt that those call-to-action buttons on speaker cards felt out of place and took up valuable real estate. 🤔🙃👍🏽

[boyney123]

Great nice one @mcturco, I think they look great!

Yeah I agree with @alequetzalli on the buttons (also just seen the slack message).

Love the other ones tho they looking nice and clean 👍

[mcturco]

Thank you, @boyney123 and @alequetzalli !!

I agree with you guys that the Register for Free button doesn't really work in this application. Just to confirm, wherever these are being shared there will be a link to register for the conference, right? This is more referring to the Conference Speaker cards. I think the Live Stream ones work well with the stream links that are there.

Here is what it looks like if I just delete the CTA button without changing anything else. I quite like the amount of white space actually (note that I am wanting to be consistent with the title placement that is on the other speaker card designs). Do you guys think that people will know where to go to register for the conference? I think that's the only value I see in a CTA on this. Perhaps we can even simply say: Register online at conference.asyncapi.com Open to suggestions!

P.S. Now that I am looking at the image preview like this however, I do think that I need to make the presenter images and text larger for legibility.

[quetzalliwrites]

Yes, all posts will tell you either where to register for the conference or where to join a stream. So no worries on that end. Copy such as Register online at conference.asyncapi.com should be on the post, not a speaker asset.

I am glad you agree, the speaker images and text around them is small and hard to read.

Some speaker's cards will have a TINY banner for just the conf website when it's for a conf, if that is of interest..

I actually really admire the approach that my friends for CCOSS.org have taken. I am attaching the speaker card they gave me just to be able to share a visual idea :D

[mcturco]

@alequetzalli Okay YES! Took inspiration from that example (thank you!) and I am feeling good about this one! Let me know what you think:

And then if there is only one speaker we would just center one card in the middle

[quetzalliwrites]

Oh wow, that is so much better!! Damn, this is sooo cool and exciting!! ✨✨🥳🥳🥳

I'm so glad the pic I shared was helpful!

Question.. I still think that the speaker job role and their company/project has very small text.. what do you think about making that text a bit bigger? For example, I can with difficulty read your job role of Product Designer, but then I really struggle to read AsyncAPI Initiative.

What if we made that copy font size a little bigger? 🥸

[mcturco]

Absolutely, @alequetzalli I tend to agree with you there!

Here is an updated version where I increased all type sizes slightly. Let me know if you think that reads better!

[quetzalliwrites]

Hey @mcturco, yes !!! that text size is so much kinder to the eyes 😀👍🏽

Thank you for letting me share my feedback, I enjoy collaborating with you 🥳

[derberg]

Hey, nice job! Some questions to clarify

• Conference with Contributor Summit is a placeholder for the presentation title, right?
• Hosted by and Special guest are actually Speaker right?
• I'm wondering, can we include a link to conference.asyncapi.com, if too long, I guess we can get conf.asyncapi.com. Or it doesn't make sense really?

[mcturco]

@derberg Thank you! See my responses below:

Conference with Contributor Summit is a placeholder for the presentation title, right?

Yes! Placeholder text where the conference title would go

Hosted by and Special guest are actually Speaker right?

Yes these are the speakers. If there are better labels for these let me know, but I was thinking that using Hosted by for the main speaker presents nicer than Speaker and same goes for Special Guest

can we include a link to conference.asyncapi.com

I can see if I can fit that into the white section at the bottom, however @alequetzalli had some insight on how the links to the conferences are shared better in the actual social media post. I think I tend to agree because if it is in the post you can just click on it but if it is in the design you will have to type it out in your browser.

[derberg]

Yes these are the speakers. If there are better labels for these let me know, but I was thinking that using Hosted by for the main speaker presents nicer than Speaker and same goes for Special Guest

oh, for me it was confusing and I didn't get it this way. I was actually confused you mixed conference with live stream events 😄

Linux Foundation in the CfP process used Primary Speaker and Co-Speaker. I think that Speaker is ok really.

I can see if I can fit that into the white section at the bottom, however @alequetzalli had some insight on how the links to the conferences are shared better in the actual social media post. I think I tend to agree because if it is in the post you can just click on it but if it is in the design you will have to type it out in your browser.

yeah, just leave it as it is, I'm not 100% sure it is needed 😄

---

So how we do it, @boyney123 will show us the automation idea in action? 😄

[mcturco]

I was actually confused you mixed conference with live stream events

Sorry I'm confused now :laughing: are you saying the labels Hosted By and Special Guest only meant for streams? JW because there will be two separate speaker card templates: one for conferences and one for live streams.

@boyney123 and I spoke over slack and I think I am going to code the cards in HTML/CSS and then we are going to attach a JS form to it so you can fill out the fields, click submit, and it will give you a preview of your speaker card that you can download :) I think now I am just wondering if we should start a fresh repo for this "generator" or if we should create a directory for it in a current repo. I think a separate would be better so people can download it and use the tool locally, but I am open to suggestions there.

[quetzalliwrites]

I actually like the idea that she presents of also having labels of "hosted by" and "special guest" for streams! I would find it useful to have that information honestly. Then for a conference, I know the cards would just say "speaker." 😀

[mcturco]

Gotcha. So should the Conference speaker cards have these labels or should we just have each one as Speaker

[derberg]

• for me hosted by and special guest is great but for live stream events, like Contributor first
• for conference, it should just be speaker, not main/primary/co- as in most cases they are equal 😄 I honestly can't figure out why LF have primary speaker and co-speaker

[mcturco]

Okay here are the final files, let me know if we need to make any last changes! @derberg @alequetzalli

Conference Card - 2 Speakers

Conference Card - 1 Speaker

Live Stream Card - 2 Speakers

Live Stream Card - 1 Speaker

[quetzalliwrites]

I really agree with what @derberg said about just having speaker and considering them all equal. 🙂👍🏽

Wow, @mcturco, these last ones are just SOOOOO BEAUTIFUL, I can't even!! ❤️❤️❤️ I really like how the small banner in the bottom of the cards shows the YT and Twitch stream links so nicely!

The only final feedback I can think of is to second what Lukasz asked earlier about trying to fit the conference link on that banner... maybe we can have the link right after the "asyncAPI" logo in the bottom left? I would try to put the logo and conference.asyncapi.com next to each other for those Conf speaker cards 😬 What do you think? Does it fit?

[derberg]

although I love most cards with live stream links to youtube and twitch, we need to skip it as this year we want to track registration, so we do not want to openly promote the fast that talks are streamed too? makes sense? at least not on speaker cards

[mcturco]

@alequetzalli Thank you! ❤️ And regarding what you and @derberg mentioned about the links...

Would it work to drop the stream links and then add conference.asyncapi.com in that place for both the conference & live stream cards? Or, we could just not have links on there altogether and just follow the format of the conference cards with the date on the bottom right. Up to you guys!

[quetzalliwrites]

Oh no, @derberg I didn't mean that I thought she should add YT and Twitch links on CONFERENCE speaker cards. Those I only think she meant to use for streams, not the conference talks.

I think the conference speaker cards should have the date on them for sure and the conf website. 😬

[derberg]

Ok, so, we need to drop stream links and replace with conf website is ok and date show like in the live stream example

Also I figured why we confuse with each other. I just though this issue is only about conference and live stream is covered separately as we probably need different style/brandig for Contributor-first meeting anyway to separate from Conference. At least I though about it this way 🤔

[quetzalliwrites]

hahaha @derberg I think you assumed this was only for conference speaker card templates, tho! 😀😂😜

See how Missy in her issue here only titles it about speaker design templates. This means a variety of templates, and thus not just for conferences. 🙃

[mcturco]

Okay so I think I know what happened here... I recently made assets for the conference here. Because we liked the art direction, we decided to make the speaker cards for the Conference match the same theme as the conference assets. Somewhere in the mix, @boyney123 requested a speaker card as well to announce live streams. So, I decided to marry the two concepts together into one template that we can re-use for future conferences and live streams.

If this is not okay and we need to create an entirely separate art direction for the live streams, I can do that by changing the colors in the background pretty easily. I just figured that we could start adopting consistency in our assets so when people see our posts they can start to associate those styles with AsyncAPI. I personally don't think we have to create a new design style for each type of asset that we want to create, I think this can become confusing to our audience.

Let me know if that clarifies the situation @derberg and how you think we should move forward! 😄

[derberg]

I fully trust your opinion here. If you think it is ok to use the same colors then let's do it 🍻

2 points though:

• we also live stream to twitter and LinkedIn so need it there too
• AsyncAPI Conference will be replaced with custom title as they are not related, especially that they will stay long after the conference

[boyney123]

@boyney123 and I spoke over slack and I think I am going to code the cards in HTML/CSS and then we are going to attach a JS form to it so you can fill out the fields, click submit, and it will give you a preview of your speaker card that you can download :) I think now I am just wondering if we should start a fresh repo for this "generator" or if we should create a directory for it in a current repo. I think a separate would be better so people can download it and use the tool locally, but I am open to suggestions there.

@mcturco yeah maybe create a separate repo for now I think makes sense. Then we can add new designs etc in the future. Did you need help with this, or are you cool to run with it?

[mcturco]

@boyney123 okay great, I think I will run with it for now but I will let you know if I need assistance with the logic side of things!

[Barbanio]

@mcturco These templates look amazing. We could use something similar for the webinars too? What do you think?

[mcturco]

AsyncAPI Conference will be replaced with custom title as they are not related, especially that they will stay long after the conference

@derberg Trying to understand what you mean here... Are you referring to the part on the bottom white area where it says [AsyncAPI Logo] Online Conference? Are you saying that this text should be editable?

[mcturco]

@mcturco These templates look amazing. We could use something similar for the webinars too? What do you think?

Thank you @Barbanio! Yes, I think we could make a version for the webinars, definitely!

[derberg]

@derberg Trying to understand what you mean here... Are you referring to the part on the bottom white area where it says [AsyncAPI Logo] Online Conference? Are you saying that this text should be editable?

Yes because the live streams will stay after conference, they have nothing to do with the conference. So for Contributor-first meetings I will have to change it to [AsyncAPI Logo] Contributor-first

[mcturco]

So for Contributor-first meetings I will have to change it to [AsyncAPI Logo] Contributor-first

No problem! I can be sure to make that editable.

Otherwise, here are the final files in this Figma prototype link (arrow through to see them all): https://www.figma.com/proto/HN7QrFterf4JZ7AyTRZ2y1/Speaker-Cards?page-id=2%3A26&node-id=33%3A354&viewport=241%2C48%2C0.5&scaling=min-zoom&starting-point-node-id=33%3A354&show-proto-sidebar=1

The only problem I was having was for the Live Stream version where the streaming sites are listed. I just realized that the handle for each one is slightly different and there isn't enough space to list out all the links and for it to remain legible. I think going back to what @alequetzalli was saying, people are going to be able to click on the link in the post that the speaker card is shared to, so maybe the logos for the social media sites will be enough on the cards to communicate that we are streaming on all those platforms. But I am open to suggestions if you guys have them!

[derberg]

ok, so how can we start doing speaker cards, conference is right behind the corner 😅 I will actually have to ask someone to do it, but first need some instructions

[mcturco]

I can make them all! Should I just follow the schedule that is on the website?

[derberg]

❤️ ❤️ ❤️

I can make them all! Should I just follow the schedule that is on the website?

yes please 🙇🏼‍♂️

[mcturco]

Okay I will work on that now!! If they don't have a headshot, what should I use?

[mcturco]

@derberg I have the finalized speaker cards for each talk in the conference. Should I commit these files into the community repo? Or should I just share them with you?

[derberg]

@mcturco awesome ❤️ share them with me on DM and I will put them on AsyncAPI drive and mention link here in the comments for others so they can check them out too

[derberg]

@mcturco yo, I'm continuing with Contibutor-first live streams and just wanted to confirm that you suggest continuing with what you proposed above (Hosted by and Special Guest) and the same brand as for the conference. Also, where can I find PSD file template that I could edit?

[mcturco]

@derberg I have a plan to make an online generator for this, but for now I have set up a template file in Figma that I have just invited you to (check your postman email). Not ideal as only Postman employees can edit Figma files, but this is how we will handle it for now. I also don't mind making you some speaker cards if you send me the info 😄 either way

[derberg]

ok then, lemme wait for the online generator 😆 🙇🏼