Redesign the AsyncAPI Website and Implement Dark Theme

[devilkiller-ag]

Overview

The AsyncAPI website needs a modern redesign for its pages to enhance user experience and accessibility and reduce screen glare. This project focuses on creating and implementing new designs for the website pages based on the theme chosen by @Mayaleeeee. A dark mode theme will also be developed to improve readability and usability in low-light environments.

Why This is Needed

• Inconsistent UI & Outdated Design: The current website pages and components are not mobile responsive and do not align with the AsyncAPI website’s evolving design.
• Dark Mode Support: Many modern websites use a dark theme to reduce eye strain and improve accessibility.

Project Goals

• Website Redesign:

  • Create new designs based on @Mayaleeeee’s theme selection.
  • Implement responsive layouts for mobile and desktop.
  • Ensure consistency in typography, colors, and UI elements.

• Dark Mode Implementation:

  • Develop a seamless light/dark mode toggle.
  • Ensure proper contrast ratios for readability.
  • Implement TailwindCSS-based theme switching.

Expected Outcome

By the end of this project, the AsyncAPI website will feature a modern, visually appealing design, improved mobile responsiveness, and accessibility. Including a dark mode will enhance usability in low-light environments and make AsyncAPI more inclusive and user-friendly.

Skills Required

Design & Accessibility: Figma, UI/UX Design, Accessibility (a11y)
Core Development Tools: React.js, Next.js, Typescript, TailwindCSS
Component Development

Difficulty Level

🟠 Medium/Hard

Mentor(s)

@Mayaleeeee, @devilkiller-ag

Length

350 hours

Resources

• AsyncAPI Website
• AsyncAPI Brand
• TailwindCSS Docs
• Dark Mode Design Guide
• How to design for dark mode: a practical guide

[Shriya-Chauhan]

I would love to take this on! @devilkiller-ag

[PraverBajaj]

This project aligns well with my interests, and I’m excited to take this on! @devilkiller-ag

[ARH-MNAJS]

If this issue is still unassigned, I would love the opportunity to contribute to it @devilkiller-ag . If it has already been assigned, I’d be happy to collaborate and assist you with the development @Shriya-Chauhan @PraverBajaj .

[Mayaleeeee]

Overview

The AsyncAPI website needs a modern redesign for its pages to enhance user experience and accessibility and reduce screen glare. This project focuses on creating and implementing new designs for the website pages based on the theme chosen by @Mayaleeeee. A dark mode theme will also be developed to improve readability and usability in low-light environments.

Why This is Needed

• Inconsistent UI & Outdated Design: The current website pages and components are not mobile responsive and do not align with the AsyncAPI website’s evolving design.
  Dark Mode Support: Many modern websites use a dark theme to reduce eye strain and improve accessibility.

Project Goals

• • [ ]
    [ ] Website Redesign:

    • Create new designs based on @Mayaleeeee’s theme selection.* Implement responsive layouts for mobile and desktop.* Ensure consistency in typography, colors, and UI elements.* [ ]
      [ ] Dark Mode Implementation:

    • Develop a seamless light/dark mode toggle.* Ensure proper contrast ratios for readability.* Implement TailwindCSS-based theme switching.

Expected Outcome

By the end of this project, the AsyncAPI website will feature a modern, visually appealing design, improved mobile responsiveness, and accessibility. Including a dark mode will enhance usability in low-light environments and make AsyncAPI more inclusive and user-friendly.

Skills Required

Design & Accessibility: Figma, UI/UX Design, Accessibility (a11y) Core Development Tools: React.js, Next.js, Typescript, TailwindCSS Component Development

Difficulty Level

🟠 Medium/Hard

Mentor(s)

@Mayaleeeee, @devilkiller-ag

Length

350 hours

Resources

• AsyncAPI Website
• AsyncAPI Brand
• TailwindCSS Docs
• Dark Mode Design Guide
• How to design for dark mode: a practical guide

Thanks for sharing the proposal, @devilkiller-ag.

It’s great to see the redesign being prioritized for GSoC this year. The outlined goals for the redesign are excellent, and I’m excited about the focus on accessibility, dark mode, and modernizing the overall user experience.

However, I suggest incorporating a clear UX research and validation phase after the implementation as part of the AsyncAPI Mentorship program later this year. Here’s why:

• Testing the Impact: Redesigning is a big step; however, ensuring the new designs address usability and structural issues is equally important. Usability testing, A/B testing, and gathering feedback post-launch are important to measuring success.

• Community Engagement: A focused research phase will allow us to involve community members (designers, developers, and users) in refining and iterating the design based on real-world use.

• Long-Term Improvement: Combining the technical implementation from GSoC with structured research in the mentorship program ensures the redesign is functional and user-centric.

Given my involvement in the initial UX audit and the design system for AsyncAPI, I’m committed to ensuring the redesign is validated with real users and refined based on feedback. For GSoC, we can focus entirely on redesigning and implementing the new website (which aligns with the outlined goals). Then, as part of the AsyncAPI Mentorship program in December, I’d propose incorporating a user research phase to ensure the redesign meets user expectations and identifies areas for iteration.
This would also align with the broader phased approach for improving the AsyncAPI website:

• UX Audit (completed)
• Design System for the Website (completed)
• Redesign & Implementation (current focus with GSoC)
• Research (proposed for AsyncAPI Mentorship

cc @akshatnema

[PRAteek-singHWY]

@Mayaleeeee Good evening ma'am
i emailed you and Ashmit sir regarding the contribution for this exciting and revolutionary update in Async API's website/.

can u please tell me that , since i have already forked an dstarted working over this project,
what do i need to do further.

Looking forward for your guidance .

[sagarkori143]

Hey @Shriya-Chauhan @PraverBajaj @ARH-MNAJS @PRAteek-singHWY
This project has been proposed for GSOC 25.

[akshatnema]

@Mayaleeeee Makes sense. Can you please list out the tasks that need to be completed first from the design part? With respect to timelines, we can only give the initial few weeks to design, and then will have to go for implementation.

[PayalKumari10]

Hey @Mayaleeeee, @devilkiller-ag @akshatnema
I saw that this project has been proposed for GSoC 2025, and I’m really excited to contribute!

Can you guide me on how to get started with solving this issue? Are there any specific tasks or requirements I should focus on?

Would love to collaborate and learn from you all! 🚀

[Utkarsh-123github]

Hey @Mayaleeeee @akshatnema . This is a fantastic enhancement to Async API website. Having previously introduced some major enhancements in various open source orgs including Async API, I am well acquainted with the codebase. Additionally, my hands on experience with Figma, UI/UX Design and modern tech stacks such as React.js, Next.js, Typescript, TailwindCSS and Component Development enables me to contribute effectively. I would love the opportunity to work on this enhancement and make the most of it.
Also do mention if there are any qualification tasks needed to do for getting this task assigned.
Looking forward to your thoughts!

[Anurag07-07]

@devilkiller-ag @akshatnema @Shriya-Chauhan @Mayaleeeee @ARH-MNAJS
Hello Sir/Mam,

Myself Anurag, a second-year student. This project aligns perfectly with what I have been working on so far. I am currently focusing on improving the UI using Tailwind CSS. You can check out my projects on my GitHub.

I also have experience with JavaScript, TypeScript, ReactJS, and a bit of Express and NodeJS.

I am excited about the opportunity to contribute to this project and help enhance it further. Looking forward to hearing your thoughts!

[BEaANIKET]

@devilkiller-ag @Mayaleeeee I would love to work on this project! I have experience with TypeScript, Node.js, TailwindCSS, and UI/UX design, and I am also actively learning UI design. This project aligns perfectly with my skills and interests, and I am excited to contribute.

If this is still open, please assign it to me. I am eager to start contributing and would appreciate any guidance on initial steps. Looking forward to working with you and the team!