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 😄