Website UI Kit design/dev project

[mcturco]

Introduction

While updating the visual style of the website in this PR, I noticed that the website is lacking a way to keep repeated elements looking cohesive. In other words, there are a lot of places where components need to be created for even the smallest of elements that repeat on the website. Tailwind CSS is great, but I think only if used properly by applying the class names within a component instead of copying and pasting the classes every time you want to create a new element that uses the same visual style as something else.

So you might ask: What are the steps that we should take to resolve this problem?

It may seem like this is only a problem within the code, but I think we can use this problem to start defining design patterns across the site and see what we should keep, what to discard because it is redundant, and what styles we can make adjustments to.

This issue will require 2 types of work:
design - this will be labelled next to the step that requires work in Figma
development - this label will be added next to the step that requires coding

---

Step 1: Audit all design patterns on the website currently [design]

This is imperative so that we have an "inventory" of all the things that exist currently on the website to get an idea of what we are missing or need to improve the design of. At this stage, all visual elements on the website are sorted into buckets and we discuss what elements we need to add/remove/improve.

---

Step 2: Create components in Figma [design]

At this stage, we will start by assembling the smallest components (atoms) together to make larger components (molecules), and then assembling the larger components together to make complex components (organisms).

---

Step 3: Finalize components and develop in Storybook [design] [development]

Once we have a finalized version of all the components and their various states in Figma, we can begin to develop them within the Storybook of this repo. The collaboration between design and development here is important to the success of the working components. We will need to make sure the components are engineered to be dynamic.

---

Step 4: Test components, gather feedback, iterate on design [design] [development]

It is important to test the components and make sure that everything is working as expected. If a design when translated into code is not working out as planned or has failures, we can use this step to make any necessary changes.

---

Step 5: Document appropriate usage of components [design] [development]

Once we are finalized on our set of components, we will then need to document its usage both from a design perspective and an engineering perspective so that we ensure cohesiveness across community contributions.

---

As always, feedback is welcome on this proposal! 😄

[likitarai1]

Hi @mcturco Can I work on this issue?

[mcturco]

Hi @likitarai1 👋

@yashsehgal had mentioned to me in a private message that he would like to work on this project as part of GSoC (work on this will not begin until June) so he will be submitting his proposal for mentee soon, I believe 😄

[naman-tiwari]

Hey @mcturco I would like to work on this issue but as you said work will not begin until June so till then I cannot put my inputs here ?

[mcturco]

Hi @yashsehgal and @naman-tiwari!
I am thinking for this issue to have the most successful outcome it would be best to have 2 contributors work on this project together as part of the AsyncAPI Mentorship Program. Because this issue will require both UI/UX Design and Development, I think one person should be responsible for each area. Keep in mind that this will require some collaboration between both sides to craft a working solution. Is this something that you two are open to, and if so which area would you prefer to work in?

[naman-tiwari]

Hey, @mcturco I'm open to both domains of the issue. And I think that having 2 contributors for two specific areas can be a great learning experience for both of us and as a substance to contributing.

[yashsehgal]

This sounds great @mcturco I would love to work with @naman-tiwari on this project. I am also open to both of the domains but would love to focus more on the React development side. Like creating components and writing edge cases, adding variations to components and much more.

It's really gonna be great learning experience.

Let's go 🚀

[mcturco]

@naman-tiwari @yashsehgal Great, let's do it! I can of course help facilitate decisions made from a visual design perspective so that this UI kit represents our brand. The goal here is to create ready-to-use components that a contributor can use to create new pages on the website without much need for design mock ups or guidance.

Excited to work on this project with you! 🚀

[likitarai1]

Hi @mcturco! Can I contribute on this issue as well?

[mcturco]

Hi @likitarai1! It looks like @naman-tiwari and @yashsehgal might have this issue handled, but I will leave it to them to decide if they need more help on this project 😄

[likitarai1]

Hi @naman-tiwari @yashsehgal Can I collaborate with you two in this project?

[mcturco]

Congrats @yashsehgal & @naman-tiwari on your project being selected for the 2022 Mentorship Program!

I am so excited to provide guidance on this project and very eager to see what we can come up with! Wanted to see if you both wanted to hop on a meeting sometime next week to put together a roadmap so we can get started. I will reach out to you both on slack so we don't flood up this issue, but just wanted to leave a comment on here to make it official 🙌

[mcturco]

Next Steps:

• Audit the components we have on the website currently and highlight inconsistencies and what is needed

I suggest we do this both from a visual design perspective & a code perspective.

Timeline: 2-3 weeks (or longer if needed)

Feel free to reach out to myself or @magicmatatjahu at any time if you guys have questions or need guidance on this process. Go go go!! 🚀

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[mcturco]

Hey @yashsehgal and @naman-tiwari 👋

Looking for any updates regarding this Mentorship Program project. How is everything going with the audit? Let me know if you have any questions or need me to help remove any blocks.

[Mayaleeeee]

Hy everyone,
My name is Maya, and I'm a product designer/researcher.
I'll take Naman's position on this issue for my mentorship program.

Thank you @AceTheCreator @mcturco @yashsehgal

[naman-tiwari]

Hey @mcturco I was not able to give time to the project due to college commitments, I will.now.be able to give my focus to the project.

[Mayaleeeee]

Hey @mcturco @AceTheCreator
I'm currently auditing the docs page of the AsyncAPI website this week, and I'll be updating you on what I have done so far on Friday, which will be on the 25th of November, 2022.

Thank you.

Hy @yashsehgal, how are you doing???

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[rukundob451]

@mcturco any of these still available?