[DESIGN] Holopin Design Tracking

[Mayaleeeee]

Introduction

Welcome to the tracking issue for the Holopin design project! This issue will be the central hub for all discussions, updates, and progress on the Holopin design. Below are the key details and steps to get started.

Project Overview

This project aims to create visually appealing and user-friendly digital badges for our community, ensuring alignment with AsyncAPI's branding and easy recognizability. The goal is to recognize member contributions and creating a vibrant, active community with Holopin’s digital badges.

Badge Design Categories

A- Contributor Badges

1. Contributor (Tier 1): Awarded to members who make their first contribution (issue, pull request, or code).
2. Regular Contributor (Tier 2): Given to members who make 5-9 contributions.
3. Frequent Contributor (Tier 3): Awarded to members who make 10-24 contributions.
4. Core Contributor (Tier 4): Recognizes members who make 25+ contributions.

B- Community Badges

1. Community Member (Tier 1): Awarded to members who engage with the community (issues, discussions, etc.).
2. Community Leader (Tier 2): Given to members who lead community initiatives (Bounty Program, Ambassador Program, Mentorship Program).
3. Community Champion (Tier 3): Recognizes members who consistently support and promote the community (i.e. Ambassadors, Conference Volunteers, etc.).

C- Project Badges

1. Project Participant (Tier 1): Awarded to members who contribute to a project (issue, pull request, code, design, docs, etc.).
2. Project Triagers (Tier 2): Given to members who label, comment, and manage issues and pull requests for a project.
3. Project Committers (Tier 3): Awarded to members responsible for technical oversight, pull request approval, and onboarding of new maintainers.

D- Sponsor Badges

TBA (to be added soon)

E- Maintainer Badges

TBA (to be added soon)

Branding Guidelines

Link to the branding guidelines: Branding Guidelines

Design System

Link to the design system: Design System

Badges Size and Dimensions

Link to the required dimensions of the digital badges Creating Badges docs

Steps

• Initial Sketches
• First draft of the design
• Review and feedback
• Finalize the design
• Integrate into the main AsyncAPI design file

Design Tool

We want you to feel comfortable using any design tools you prefer. However, our community primarily uses Figma for all design files. Please ensure your designs can be easily reviewed and integrated into our main Figma design file. You can create as many variations as possible to explore ideas.

Please don't hesitate to comment with any questions, updates, or feedback. We'd love to hear from you! ❤️

cc @thulieblack

[thulieblack]

Thanks, Maya, please also find the requirements and dimensions of the digital badges under the Creating Badges docs

[TenzDelek]

hey @Mayaleeeee ,
would love to work on this for the mentorship. what are the requirements? do we have to make any sort of a proposal to apply?

[thulieblack]

@TenzDelek please wait till the application for mentees is announced

[Oloso-surur]

Hi @Mayaleeeee I will like to contribute as a mentee to this project.
Where do I submit my application?

[ghost]

HI I am a BTECH Student and i also want to contribute to this project ?? @thulieblack @Mayaleeeee

[Mayaleeeee]

Application for Holopin Badge Design Project

In this project, you'll be designing digital badges for AsyncAPI, ensuring they’re visually appealing and fit within our branding.

Requirements

For your application, please submit a design plan that answers the following:

• How will you approach designing badges for each category?

• What design tools will you use, and why?

• What’s your timeline for the project?

• How will you handle feedback and challenges along the way?

• Lastly, why do you want to become a design maintainer, and how do you plan to grow this project after the program?

Recommended Skills

Familiarity with Figma (or similar tools), basic design principles, an understanding of branding, and a focus on user experience.

Submission Process

Share your design plan in a Google Doc format and submit it to my mail [[email protected]].

Selection Process

All submissions will be graded by the following:

• Creativity and originality of your design approach
• How well do you plan to incorporate AsyncAPI’s branding
• The practicality of your timeline and plan
• Your approach to feedback and overcoming challenges

Who I'm Looking For?

I’m looking for someone who’s excited to learn and grow. Frequent communication is important—keep me updated on your progress, and let me know if you run into any issues. Be open about your availability and any challenges you face so we can tackle them together.

Application Deadline

24th of October, 2024

[Oloso-surur]

Hello @Mayaleeeee
Thanks for giving me the opportunity to work on this project for the mentorship project.

I have started researching to get more inspiration on the design and I'll be starting with creating the sketches for the contributor's badges.

This is the link to the design.

[Mayaleeeee]

Hello @Mayaleeeee
Thanks for giving me the opportunity to work on this project for the mentorship project.

I have started researching to get more inspiration on the design and I'll be starting with creating the sketches for the contributor's badges.

That's fine.

Please remember to share the link to the Figma file you are working on.

[Oloso-surur]

Hi Maya
I have made updates to the badges sketchs.please review at your convenience.
Here is the figma link
Looking forward to your feedback.

[derberg]

Hey folks, what is the status of this project.
New year, new sponsor discussions for me - so I'm super interested with sponsor's badges

btw, I looked into figma. Would be nice to see in the badges not only asyncapi logo but name as well - the most important is to show our name as this is what sponsors want to show to their customers

cc @iambami

[Oloso-surur]

Hey, Lukasz

Thanks for the feedback! My mentor is still reviewing my work.

About your question, are you recommending that the sponsor badges include both the AsyncAPI logo and the name of AsyncAPI , or are you asking for the sponsors’ own names to also be included?

I’d like to clarify so we can ensure the badges meet expectations.
cc @Mayaleeeee

[thulieblack]

Please don't forget to follow the image size requirements.

[derberg]

are you recommending that the sponsor badges include both the AsyncAPI logo and the name of AsyncAPI

yes please 🙏 so at first glance, sponsor's audience see it is a badge from asyncapi, and second thing they notice is the sponsorship level

[thulieblack]

Hi, @Oloso-surur @Mayaleeeee. Please keep us posted on the status of the badges so we can review them and share them with the rest of the community. I would love for the project to be more visibility as well

I believe some of them are also needed for marketing apart from the community side. cc @iambami

[Oloso-surur]

Hi @thulie,

Thanks for the nudge! I was meant to provide an update yesterday, but I had some network issues.

My mentor has approved the project—just a few small updates left on my side, which I’m working on now and should wrap up today.

I’ll also be sharing updates on the badges during the design meeting tomorrow and posting the designs on the issue.

Apologies for the lack of updates, that’s on me.

[Oloso-surur]

Hello, everyone.

After updating the badges base on my mentor's suggestions and incorporating the suggestions made by @derberg with regards to the sponsors badges, I am happy to share the final design update.

Kindly take a look at the badges below and let me know if you have any questions.

• Sponsors Badge

• Contributor Badges

• Community Badges

• Project Badges

• Maintainer Badge

Figma link - https://www.figma.com/design/WaP77prW75xAfglulK7Fxs/AsyncAPI-Holopin-Design-Project?node-id=3801-2649&t=BHbHr6BCoOUwDwQ4-1

@thulieblack Yes, I followed all the image requirements.

cc @Mayaleeeee @iambami

[iambami]

Is green part of our color? 🤔

[thulieblack]

1. Maintainer Badge: Maybe we should limit it to one; just Maintainer
2. +1 with Bami, Is there a way to use the AsyncAPI Gradient color palette on the badges?
3. Contributor badges: I believe they go from Contributor - Regular Contributor - Frequent Contributor - Core Contributor

[thulieblack]

Maybe to add more creativity to the badges, why not use the new AsyncAPI Mascots? Some can be badges and other batches can be stickers

Some inspiration from other communities:

https://www.holopin.io/@dapr
https://www.holopin.io/@hacktoberfest
https://www.holopin.io/sticker/evolving/cm1ti4x4c57560cjq2styaitm
https://www.holopin.io/@joomla

[Oloso-surur]

1

Is green part of our color? 🤔

Yes, we have green as an accent color. However, I'll limit the colors to the ones Thulie posted here.

[Oloso-surur]

Maybe to add more creativity to the badges, why not use the new AsyncAPI Mascots? Some can be badges and other batches can be stickers

Some inspiration from other communities:

https://www.holopin.io/@dapr https://www.holopin.io/@hacktoberfest https://www.holopin.io/sticker/evolving/cm1ti4x4c57560cjq2styaitm https://www.holopin.io/@joomla

• do you mean use the AsyncAPI mascots as badges or incorporate them in the badges just as it is in inspiration you shared?

• I'll limit the maintainer badges to one instead of the three created.

[iambami]

From frequent contributor to advanced contributor or maintainer. If need be.

I also think something is missing looking at the design. I just can’t quite explain what exactly.

[thulieblack]

do you mean use the AsyncAPI mascots as badges or incorporate them in the badges just as it is in inspiration you shared?

Create some variations, and let's see what you come up with.

You can have one with mascots as badges, and another one can incorporate the mascots in the badge. Feel free to be creative

[thulieblack]

I'm sorry, but it's supposed to be Core Contributor. That's the term we use in the community for advanced contributors.

And I have to agree with @iambami that the badges are missing something. They should be visually enticing; maybe it's the AsyncAPI touch that is missing I don't know what I can say.

[Mayaleeeee]

@Oloso-surur, getting the color combinations right is key since it helps set us apart from other communities. That’s something that felt off in the designs you shared below. Check out the link Thulie provided here and the one in the project description above on how to use those colors correctly.

The AsyncAPI logo and text are way too small, making them hard to read. Plus, with the different color combinations, it’s not very accessible. You might want to adjust the spacing or rethink the layout a bit. Also, all those icons aren’t really necessary—they make the badge feel cluttered and take away from its primary purpose. Keeping it simple will make the sponsor badge more visually appealing.

• Sponsors Badge

The colors here aren’t accessible at all, especially the last two on the right. Update them to follow the color guidelines and ensure the text is readable.

• Contributor Badges

This looks good, I love the color usage, but you can be more creative to make it more attractive.

• Community Badges

These need some work. Right now, they give off a “school badge” vibe, like something sewn onto a uniform. Try refining the layout so it looks cleaner and more modern.

• Project Badges
  

The spacing here feels a little off. You can find inspiration from the link above to tweak this and bring in the AsyncAPI brand more effectively.
Also, as discussed in the design call, let’s cut down the Maintainer badges to just one for better inclusivity. Instead, we can add more contributor-focused badges—like Contributor of Design, Community Manager, Documentation, etc.—to highlight different contributions.

• Maintainer Badge

Overall, you did a great job following the image requirements—that part was solid. But there’s room to step it up, especially with color combinations and creativity.

[derberg]

Sponsors Badge

shouldn't sponsor badge colour somehow relate to the name of the badge 😃 like "gold", not necessarily have to be fully on gold colour, but have you know, like something that would relate?

[Oloso-surur]

This is an update on the Sponsor badges after useing the gradient colour.
cc @Mayaleeeee @thulieblack @iambami @derberg

[Mayaleeeee]

This is an update on the Sponsor badges after useing the gradient colour.
cc @Mayaleeeee @thulieblack @iambami @derberg

We are getting there.

But I'm worried about the gradient colour as the background. Have you tried playing with the other colour?

Also, for the platinum sponsor, try using 5 stars as the icon instead of that slant lines.🙂

[derberg]

btw, we also need a new level: Diamond :)

[Mayaleeeee]

This is an update on the Sponsor badges after useing the gradient colour.
cc @Mayaleeeee @thulieblack @iambami @derberg

We are getting there.

But I'm worried about the gradient colour as the background. Have you tried playing with the other colour?

Also, for the platinum sponsor, try using 5 stars as the icon instead of that slant lines.🙂

@Oloso-surur
Have you updated this?

[Oloso-surur]

This is another version after using the dark purple colour.

[Mayaleeeee]

This is another version after using the dark purple colour.

This is nice.

Don't forget to add the Diamond sponsor, too, and you can proceed with the other designs.

[thulieblack]

Well done @Oloso-surur we are getting there but I'm not sold with the stars. Why not apply Lukasz's suggestion?

shouldn't sponsor badge colour somehow relate to the name of the badge 😃 like "gold", not necessarily have to be fully on gold colour, but have you know, like something that would relate?

Maybe the button color can have actual bronze, silver, platinum, and diamond colors or some form of icon that represents the sponsor tier instead.

[Mayaleeeee]

This is another version after using the dark purple colour.

Have you updated the design with the suggestions made by Lukasz and Thulie?

Also, make you give a report on the task you are working on before the end of the week. You need to give a weekly or bi-weekly report(any one you are comfortable with), please