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 .