Website UI Kit design/dev project

[fmvilas]

This is a copy of the issue @mcturco created a while ago at https://github.com/asyncapi-archived-repos/design-system/issues/4.

---

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! 😄

[Mayaleeeee]

Thanks @fmvilas.

Hi @AceTheCreator, Here is a quick update on the project. I've finished the first step, which involved auditing all the design patterns on the website. Next week, I'll be moving on to step 2. If you have a moment, please take a look at the design audit on the figma board and let me know your thoughts.

cc @mcturco

[AceTheCreator]

Thanks @fmvilas.

Hi @AceTheCreator, Here is a quick update on the project. I've finished the first step, which involved auditing all the design patterns on the website. Next week, I'll be moving on to step 2. If you have a moment, please take a look at the design audit on the figma board and let me know your thoughts.

cc @mcturco

Acknowledged. I'll look into it asap :)

[devilkiller-ag]

Hi @Mayaleeeee, Is this issue still unresolved? If so I can help you with the development part.✨

[Mayaleeeee]

Hi @Mayaleeeee, Is this issue still unresolved? If so I can help you with the development part.✨

Please reach out to @Ace, he is working on the development part.

Thanks for asking @devilkiller-ag

[Mayaleeeee]

Hello everyone,

It's been a while since I last provided an update; I apologise for that. I've been working continuously on the project and keeping my mentor, @AceTheCreator, updated on my progress via Slack.

I'm excited to announce that the project is complete, and the remaining tasks involve a few documentation and improvements. I'll be working on those regularly, and Ace will review them when he resumes in January.

cc @AceTheCreator @mcturco

You can view the project's figma file by clicking on this link: https://www.figma.com/file/cFsY4LCfKmDqdlaTIJPpA1/Design-System?type=design&node-id=0%3A1&mode=design&t=hKVsdzKdm2DgUWWd-1.

I wish you a merry Christmas and a happy New Year in advance. :tada::confetti_ball::partying_face:

[BhavyaSingh2611]

Hey, I'm Bhavya and I would like to contribute to making the website ui kit, apart from the figma file design are there any other components that are still to be designed :D and any issues that i should be aware of.

[AjayAsnani]

Hello @AceTheCreator I would like on work on UI kit Development project for GSOC and want to discuss more about this.

[KhushiRawat29]

Hi @AceTheCreator @fmvilas, I would like to work on the development part under GSOC. Looking for a positive response.

[gschandrasekhar]

Hey

@fmvilas , I'm Chandra Sekhar, a prefinal year student at Lovely Professional University, India, pursuing a bachelor's degree in Computer Science. I've gained hands-on experience in HTML, CSS, JavaScript, and frameworks like Tailwind CSS and React.js, along with databases such as MySQL and MongoDB. My enthusiasm lies in expanding my knowledge of web development and contributing to projects through open source. Last summer, I was involved in a project called "Bharat Legal Tech," where I gained valuable insights from designing to developing. We initiated the project from scratch, focusing on various aspects like white paper functionalities (SRS Document), User Flow, Low-fidelity wireframes, high-fidelity wireframes, and project development. After going through the ideas list, I'm particularly interested in contributing to web development projects, I'm keen to work on the AsyncAPI Website UI Kit Development:https://github.com/asyncapi-archived-repos/design-system/issues/4 I've reached out regarding my interest in this project and am eagerly awaiting a response. I'm eager to delve deeper into the project's details and scope. As an optimistic individual, I'm always on the lookout for opportunities that create a positive impact in the tech industry. I'd love to connect with you on LinkedIn. https://www.linkedin.com/in/gschandrasekhar/

[akshatnema]

Hi contributors, Since @AceTheCreator is not available right now, let me share you insights about this issue.

This issue is in continuation with the @Mayaleeeee's project on developing Website UI kit design in AsyncAPI Mentorship program 2023. Since the design is ready for the website, we are now looking to revamp the design, theme and colors inside the website, along with developing Storybook integration inside website project. Storybook is a frontend workshop for building UI components and pages in isolation.

Therefore, in the duration of this project, you will have to create Storybook components inside the website, based on the given Figma design. Also, the contributor has to make sure that this updated Figma design should be replicated to the website during the course of GSoC mentorship program.

All the contributors are hereby requested to kindly make their proposal deep down related to website, on how they will be integrating and creating Storybook design components inside website and will update the website code accordingly.

[Thanush19]

hey @fmvilas , i can contribute to this issue in developement , kindly assign me...

[Rahul-Bhati]

Hello @fmvilas , I'm interested in contributing to the development stage of this issue. If the position is still available, please assign it to me. I'm eager to learn more about it and available to discuss further details.

[SujalRaunak]

Hi @fmvilas @AceTheCreator I am Sujal Raunak, and I want to contribute to the development part for GSOC 2024. I think my knowledge in reactjs, nextjs and tailwindcss will be effective in my contribution. Kindly let me know, how can I begin.

[AjayAsnani]

Hey @fmvilas @AceTheCreator I want to work on this issue.