Community Page Design Improvements

[Mayaleeeee]

Description:

The present community page suffers from information overload, making it cluttered and difficult to navigate. Users may find it visually overwhelming, which detracts from the overall experience. The goal is to improve the page's structure, visual hierarchy, and interaction to create a cleaner, more intuitive, and visually appealing design.

Your task is to declutter the page by improving the UI/UX, restructuring the layout, and adding appropriate interactions. The page should be engaging but simple enough to navigate comfortably.

PS: The circle on the header looks great, so we can skip that part - we just need to add more people (to the circle) when we start the development

Requirements:

• Redesigned dropdown menus with improved usability and aesthetics.
• Reorganized content with a clear visual hierarchy.
• Improved UI with a cleaner, more modern design.
• Added interaction elements that enhance the user experience.

[Oloso-surur]

@Mayaleeeee can I work on this?.

[Mayaleeeee]

Hey @Oloso-surur

I plan to work on this issue myself for the Q4 bounty program. I really appreciate your interest and enthusiasm! If you're looking for something else to dive into, here's another bounty issue
that you might be interested in.

Thanks for understanding!

[sambhavgupta0705]

Are these designs approved by all code maintainers??

[Mayaleeeee]

@sambhavgupta0705 Thanks for asking.
The community page redesign is part of a larger website redesign effort that’s still under discussion and hasn’t been fully approved. I’ll cover this in detail during our meeting on Thursday. Please join us there for more context and to share your thoughts.

[sambhavgupta0705]

But should it be considered as a bounty issue?

[Mayaleeeee]

Hi @sambhavgupta0705,

I saw your question about whether these issues should be considered for the bounty. I’ve reached out to the website code owners to get their approval and feedback.

I also noticed your DM about wanting to submit your bounty issues and mentioning the limit of two issues per repo. I felt the tone of those messages was a bit off, and I’d appreciate it if we could keep our discussions respectful and constructive. If you have further questions about the bounty limits, please direct them to @thulieblack or @aeworxet.

Thanks!

[sambhavgupta0705]

Okay @Mayaleeeee
No issues will talk to them just wanted to convey my message
No hardships 🙌😀

[sambhavgupta0705]

Sorry if you felt my tone was a bit off just wanted to discuss it but no worries I apologise if you felt that way
@aeworxet can we submit more than two issues per repository or if we have submitted more than two issues then what can be done?

[thulieblack]

The limit for two issues was lifted for Q4 https://asyncapi.slack.com/archives/C05UHTSEHE2/p1725004679310299?thread_ts=1725004626.151889&cid=C05UHTSEHE2

[aeworxet]

@sambhavgupta0705
You also can wrap several trivial issues into one Medium Bounty Issue to achieve resolution of a batch of small issues (example of an aggregated issue)

[aeworxet]

Bounty Issue's service comment

Text labels: bounty/2024-Q4, bounty/medium, bounty/design
First assignment to regular contributors: 2024-09-20 00:00:00 UTC+12:00
End Of Life after: 2024-10-31 23:59:59 UTC-12:00

@asyncapi/bounty_team

The Bounty Program is not a Mentorship Program. The accepted level of Bounty Program Participants is Middle/Senior.

Regular contributors should explain in meaningful words how they are going to approach the resolution process when expressing a desire to work on this Bounty Issue.

[siva222003]

I would like to work on this issue.
Please assign me !

[Mayaleeeee]

Thanks @aeworxet

Hey @siva222003

I plan to work on this issue myself for the Q4 bounty program.

If you're looking for something else to dive into, here's another bounty issue that you might be interested in.

Thanks for understanding!

[aeworxet]

@Mayaleeeee is an AsyncAPI Maintainer specified in https://raw.githubusercontent.com/asyncapi/community/master/MAINTAINERS.yaml, so they fall under the first category in the prioritization list.

[aeworxet]

Bounty Issue's Timeline

Complexity Level	Assignment Date (by GitHub)	Start Date (by BP Rules)	End Date (by BP Rules)	Draft PR Submission	Final PR Merge Start	Final PR Merge End
Medium	2024-09-17	2024-10-07	2024-11-17	2024-10-20	2024-11-03	2024-11-17

Please note that the dates given represent deadlines, not specific dates, so if the goal is reached sooner, it's better.

Keep in mind the responsibility for violations of the Timeline.

[Mayaleeeee]

@aeworxet this bounty issue is considered completed, as I have successfully delivered the requirements for this task:

• Redesigned dropdown menus with improved usability and aesthetics.
• Reorganized content with a clear visual hierarchy.
• Improved UI with a cleaner, more modern design.
• Added interaction elements that enhance the user experience.

You can access the Figma file through this link or take a look at the design below.

[akshatnema]

Hey @Mayaleeeee Can we get a mobile view for this page as I see there are multiple components in the page, that can be difficult to reiterate in the mobile view. Making a Figma for mobile view would be convenient for developers to code the components in the proper way.

[aeworxet]

@Mayaleeeee
Please add a mobile version of the Community Page design as per @akshatnema's comment to instruct future web developers on what components can be hidden and how components that remained visible should look like in small viewports.

[Mayaleeeee]

Thank you both @akshatnema @aeworxet

I have added the mobile version of the Community Page to the Figma file. You can view it below or via the link to the Figma File.

[aeworxet]

• I counted three violet colors on the page:

  #6200EE (first button)
  #6F09FF (other buttons)
  #7B61FF (vector)

  Is this intended, or can they be brought to one violet?

  If all violets can be brought to one violet, then the first button's #6200EE looks the best personally to me.

• Please make the same padding from all sides for the lowest copyright text (the same distance from the right edge as from the left edge.)

• SVG of the Vector is cut off in the desktop version but displayed fully and shifted in the mobile version. A coder will wreck their head trying to achieve this 1:1. Choose something one, please (I think a full vector in SVG that moves responsively based on the viewport size will be the best.)

@akshatnema, do you have remarks on my comments?

[Mayaleeeee]

• I counted three violet colors on the page:
  #6200EE (first button)
  #6F09FF (other buttons)
  #7B61FF (vector)
  Is this intended, or can they be brought to one violet?
  If all violets can be brought to one violet, then the first button's #6200EE looks the best personally to me.
• Please make the same padding from all sides for the lowest copyright text (the same distance from the right edge as from the left edge.)

• SVG of the Vector is cut off in the desktop version but displayed fully and shifted in the mobile version. A coder will wreck their head trying to achieve this 1:1. Choose something one, please (I think a full vector in SVG that moves responsively based on the viewport size will be the best.)

@akshatnema, do you have remarks on my comments?

Thanks @aeworxet

• Regarding the buttons with different colours. I couldn't access the AsyncAPI Figma file because our free subscription ended, that was why the buttons were in different shades. However, they have been updated, as I have duplicated the design system to the new Figma file I am working on.

• The padding in the footer has been well implemented.

• No, the SVG was not cut off; it was inside the frame. I have updated it on the mobile and desktop, and they have been grouped together (the vector and the image).

[aeworxet]

• The majority of violets are changed to #6200EE but these three are still different:

  #6200EE
#6F09FF
#7B61FF (vector in the desktop version too)

• Twitter had changed its name and logo.

[Mayaleeeee]

• The majority of violets are changed to #6200EE but these three are still different:
  #6200EE
#6F09FF
#7B61FF (vector in the desktop version too)

• Twitter had changed its name and logo.

Hello @aeworxet
I have updated the buttons.

Once I regain access to the design system file, I will update the X logo before the design implementation. I have also added a comment to the Figma file to remember.

Thank you,

[aeworxet]

No other major concerns were expressed about the design itself by other AsyncAPI members, and more clarifications on the implementation will be requested by a web developer during the coding stage anyway, so

[aeworxet]

Bounty Issue Is Completed 🎉

@Mayaleeeee (githubID 105395613), please go to the AsyncAPI page on Open Collective and submit an invoice for USD 200.00 with the expense title Bounty website#3193, tag bounty, and full URL of this Bounty Issue in the description.

[Mayaleeeee]

@aeworxet @Mayaleeeee, I think the 360px and sm breakpoints will not make much difference in the design. From my understanding, I prefer to have 3 viewpoints (if you have complex design patterns) - mobile, tablet and desktop view. @Mayaleeeee If possible, try to be clear on these 3 viewpoints regarding your design as it will help the developer get an exact picture on how an element should behave, once the screen starts expanding.

Thanks for the inputs @aeworxet @akshatnema

In short, you mean I should create the tablet and mobile veiw with the same design elements on the desktop, right?

Please confirm if the question I asked above is the improvements you are proposing @akshatnema

[aeworxet]

@akshatnema, @anshgoyalevil, @sambhavgupta0705, @devilkiller-ag, please clearly outline the task for @Mayaleeeee by specifying the exact pixel widths to be used for the Figma designs, rather than using generic terms like 'tablet' or 'mobile'.
Or just approve widths specified in #3193 (comment).

[Mayaleeeee]

@akshatnema, @anshgoyalevil, @sambhavgupta0705, @devilkiller-ag, please clearly outline the task for @Mayaleeeee by specifying the exact pixel widths to be used for the Figma designs, rather than using generic terms like 'tablet' or 'mobile'.
Or just approve widths specified in #3193 (comment).

Thank you @aeworxet

Yes, they should do that, please, because the response here will determine how to update the website home page

Currently, I'm using 1440 pixels for desktop, 1024 pixels for tablet, and 375 for mobile based on the design system I created

Additionally, @aeworxet, could you confirm if there are funds remaining for Bounty Q4, as I would like to upgrade this to an advanced issue.

Thanks!

[aeworxet]

Currently, I'm using 1440 pixels for desktop, 1024 pixels for tablet, and 375 for mobile based on the design system I created

This is exactly the reason widths for design tasks should be specified in pixels, because the Website uses Tailwind CSS with media queries (here, 'breakpoints for responsive design') of

sm	 640px	@media (min-width: 640px) { ... }
md	 768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }

and @Mayaleeeee, as a non-coder, is not obligated to know that by default.

So precise widths in pixels are necessary to keep designers and coders on the same page, since 'desktop', 'tablet', and 'mobile' are different for everyone, as everyone may have noticed.

@aeworxet, could you confirm if there are funds remaining for Bounty Q4, as I would like to upgrade this to an advanced issue.

@Mayaleeeee, yes, there are USD 400 remaining in the 2024-Q4's budget, so it is possible to upgrade this Bounty Issue to Advanced.

[aeworxet]

Upon request of the AsyncAPI Maintainer, who is also the Bounty Program Participant (@Mayaleeeee, githubID 105395613), the Complexity Level of this Bounty Issue was reclassified to Advanced (upgraded) and its Timeline changed.

Bounty Issue was Reclassified and its Timeline changed

Complexity Level	Assignment Date (by GitHub)	Start Date (by BP Rules)	End Date (by BP Rules)	Draft PR Submission	Final PR Merge Start	Final PR Merge End
Advanced	2024-09-17	2024-10-07	2024-12-01	2024-10-27	2024-11-17	2024-12-01

Please note that the dates given represent deadlines, not specific dates, so if the goal is reached sooner, it's better.

Keep in mind the responsibility for violations of the Timeline.

[Mayaleeeee]

Currently, I'm using 1440 pixels for desktop, 1024 pixels for tablet, and 375 for mobile based on the design system I created

This is exactly the reason widths for design tasks should be specified in pixels, because the Website uses Tailwind CSS with media queries (here, 'breakpoints for responsive design') of

sm	 640px	@media (min-width: 640px) { ... }
md	 768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }

and @Mayaleeeee, as a non-coder, is not obligated to know that by default.

So precise widths in pixels are necessary to keep designers and coders on the same page, since 'desktop', 'tablet', and 'mobile' are different for everyone, as everyone may have noticed.

@aeworxet, could you confirm if there are funds remaining for Bounty Q4, as I would like to upgrade this to an advanced issue.

@Mayaleeeee, yes, there are USD 400 remaining in the 2024-Q4's budget, so it is possible to upgrade this Bounty Issue to Advanced.

Thanks for the clarifications @aeworxet

So now, I am to use 640px for mobile - which is the sm, 780px for tablet - md and 1024px for the desktop - lg?
@aeworxet @akshatnema

[aeworxet]

The person who will be implementing this responsive design should know how they are going to do it ahead of time because of https://tailwindcss.com/docs/responsive-design#targeting-mobile-screens:

Where this approach surprises people most often is that to style something for mobile, you need to use the unprefixed version of a utility, not the sm: prefixed version. Don’t think of sm: as meaning “on small screens”, think of it as “at the small breakpoint “.

it’s often a good idea to implement the mobile layout for a design first, then layer on any changes that make sense for sm screens, followed by md screens, etc.

So I still think that:

• 360px ~ 639px will be 'Mobile' (design with width 360px, unprefixed CSS during coding)
• 640px ~ 767px will be 'Tablet' but narrow (though wider than 'Mobile', like a tablet in Portait mode) (design with width 640px, CSS prefixed sm: during coding)
• 768px ~ 1023px will be 'Tablet' but wide (like a tablet in Landscape mode) (design with width 768px, CSS prefixed md: during coding)
• 1024px ~ ∞ will be 'Desktop' (design with width 1024px, CSS prefixed lg: during coding)

(reformulation of #3193 (comment) in different wording)

[akshatnema]

So now, I am to use 640px for mobile - which is the sm, 780px for tablet - md and 1024px for the desktop - lg?

@Mayaleeeee Yeah, that's correct. Also, I've a Design file that targets Design system of website, that were used before. Missy made it, but after certain changes, we have some color changes in the primary color of the website. If possible, can you please follow this approach to use the colors in the website. If you are changing/using colors in the website, make sure they follow a design system. You can copy elements from above Figma file and use it in your design files.

360px ~ 639px will be 'Mobile' (design with width 360px, unprefixed CSS during coding)
640px ~ 767px will be 'Tablet' but narrow (though wider than 'Mobile', like a tablet in Portait mode) (design with width 640px, CSS prefixed sm: during coding)
768px ~ 1023px will be 'Tablet' but wide (like a tablet in Landscape mode) (design with width 768px, CSS prefixed md: during coding)
1024px ~ ∞ will be 'Desktop' (design with width 1024px, CSS prefixed lg: during coding)

@aeworxet I don't want to complicate design of the website with so many viewpoints. I understand that they are the breakpoints inside Tailwindcss but we also know that the tablet viewers of website are much less in number. Moreover, we don't provide any critical functionality inside website. Hence, we can take a single viewpoint of tablet as I specified above.

[akshatnema]

@aeworxet @Mayaleeeee Let me define breakpoints for design of the website:

• 360px ~ 639px will be 'Mobile' (design with width 360px, unprefixed CSS during coding)
• 640px - 1024px will be 'Tablet'
• Above 1024 px will be targeted as Laptop + desktop view

You can reference following image for these viewports:

[aeworxet]

@akshatnema

Designs for 640px and 768px are different currently.
#3193 (comment)

(The design for 768px is mostly the same as the one for 1024px, except for the NavBar, but still, breakpoint 768px exists and has impact on view.)

How should that difference be addressed?

[akshatnema]

@aeworxet I think you are talking about the difference in the style of fonts, that is internally managed by Tailwindcss. We don't handle different type of font sizes in different viewports. It's internal property of TailwindCSS to provide responsiveness to the website.

[Mayaleeeee]

@aeworxet I think you are talking about the difference in the style of fonts, that is internally managed by Tailwindcss. We don't handle different type of font sizes in different viewports. It's internal property of TailwindCSS to provide responsiveness to the website.

Hello @akshatnema

I have updated the designs to reflect the mobile, tablet, and desktop versions based on the recommendations you provided.

Please take a look at it via this link

cc @aeworxet

[akshatnema]

@Mayaleeeee Can you please paste the updated Figma link?

[Mayaleeeee]

@Mayaleeeee Can you please paste the updated Figma link?

Done, here's the link

[Mayaleeeee]

@akshatnema
Were you able to take a look at the Figma file for the designs?

[aeworxet]

@akshatnema

I think you are talking about the difference in the style of fonts

No, I'm talking about collapsed/open navbar and different elements' placement.

I have made full-page screenshots of the current https://asyncapi.com design for viewports:

360px
640px
768px
1024px
1280px

so everyone can compare.

Therefore, I think there should be five Figma designs of these widths, and 1440px is not needed; it should be shrunk to 1280px as the largest used at asyncapi.com.

For the person implementing the responsive design:

• 360px and 1280px will be reference designs.
• 640px, 768px, and 1024px will be Tailwind CSS' breakpoints that actually need to be coded.

Additionally, there needs to be a design of navbar (menu) in both collapsed and open states for different viewports. I think these can be created separately to avoid cluttering the main design sheet.

Screenshots

↓

Collapsed list of screenshots for different viewports (click to view):

360px

640px

768px

1024px

1280px

[akshatnema]

No, I'm talking about collapsed/open navbar and different elements' placement.

@aeworxet Yeah for these design elements, it matters because Navbar changes as per the viewports. But I don't complicate this page design with so many viewports designs. We can have 3 viewport designs for this page and later on, if contributor (who will work on this) has any doubts, that person will automatically ask doubts from @Mayaleeeee.

[aeworxet]

@JeelRajodiya

As an outside observer, what opinion do you have on this topic?
(please specify the pixel dimensions for 'Mobile,' 'Tablet,' and 'Desktop' when you refer to them)

[JeelRajodiya]

@aeworxet
In your comment, Notice that the website looks the same in both the 640px and 768px versions . Differences between the two, such as font size and grid arrangement, can be handled with CSS. Therefore, I believe we should not to create additional Figma layouts.

I agree with Akshat's comment. It is better keep the designs simple.
We should have just three viewports: Mobile, Tablet and Desktop.

Breakpoints for the coders

We can continue with the breakpoints mentioned here

Min Width	Max Width	Breakpoint Name	Additional Notes
0px	639px	Mobile	The navigation bar will have a hamburger menu, and the layout will be compact.
640px	1024px	Tablet	The navigation bar will have a hamburger menu, but the site layout will be less compact, resembling the desktop version.
1025px	∞	Laptop/Desktop	Menu links will be directly embedded in the navigation bar, and the layout will be more spacious.

Figma Design Frame Sizes

And for the figma designs we can have layouts with these widths (If I'm not mistaken, we already have these layouts in the current figma file, they are perfect!)

Breakpoint Name	Frame Width
Mobile	360px
Tablet	768px
Laptop/Desktop	1440px

[aeworxet]

@akshatnema, what do you think about delegating to @JeelRajodiya the right to make operational decisions on this and #3192 designs, with you only approving the finished result?

Would you also consider @JeelRajodiya as a candidate for implementing the designs from this Bounty Issue and #3192?

[aeworxet]

@akshatnema and @Mayaleeeee had a direct conversation about the design of the Community Page during the

Design Meeting, 12:00 UTC Thursday October 17th 2024
https://youtu.be/FzRxTpOeIDA?t=367
6:08 ~ 30:26

[aeworxet]

The decision has been made to start implementing the new design only after the entire design of the Website is finished.

[Mayaleeeee]

Thanks for adding the link to the design meeting to this discussion @aeworxet

@akshatnema
All the suggestions we discussed during yesterday's meeting have been implemented in the designs, and you can view the images below:

The suggestions

• download the overlapping images
• change the second CTA button text (the learn more button)
• include the colours used for buttons and texts

The images

• GitHub Img
  

• Slack Img
  

• Slack (event) Img
  

• Ambassador Img
  

Figma Link: https://www.figma.com/design/hJgfKiPHHu2wG37L9DEUj0/AsyncAPI_Website-Redesign-%2B-DS?node-id=3808-1017&t=Kc5wa2Ci2PcdZ9pi-1

@aeworxet, this bounty issue is considered completed, as I have successfully delivered all requirements for this task, including the additional requirements for the code owners. cc @akshatnema

[Mayaleeeee]

The decision has been made to start implementing the new design only after the entire design of the Website is finished.

Yes. The purpose is to create bounty issues for developers so we can accelerate the website redesigns and ensure all pages are ready simultaneously.

[aeworxet]

this bounty issue is considered completed
#3193 (comment)

@akshatnema, can you please confirm?

[akshatnema]

Hey @Mayaleeeee ,
I think you missed some of my points in the meeting. I've recorded a Loom video regarding my feedback. Can you please look into this?

Loom link - https://www.loom.com/share/88e34a56d2e14e17a5acbcb7a6ff0a42?sid=5c256896-e84b-41c4-a3b7-c92e5170f6bf

cc: @aeworxet

[Mayaleeeee]

Hey @Mayaleeeee , I think you missed some of my points in the meeting. I've recorded a Loom video regarding my feedback. Can you please look into this?

Loom link - https://www.loom.com/share/88e34a56d2e14e17a5acbcb7a6ff0a42?sid=5c256896-e84b-41c4-a3b7-c92e5170f6bf

cc: @aeworxet

Hi @akshatnema,

Thanks for the Loom video.

However, during our design meeting, I suggested downloading the overlapping images and adding them directly to GitHub, and you had agreed at the time.

That said, I’ve implemented all the updates based on your latest suggestions. Please take a moment to review the changes.

cc @aeworxet

Link to the Figma file

[akshatnema]

I suggested downloading the overlapping images and adding them directly to GitHub, and you had agreed at the time.

Yeah, but I also said that please consider them as image element in website, if you are exporting it as an image.

@Mayaleeeee Apart from that, designs look good to me. I don't find any problems in it. You can even ask for more suggestions in the #design channel.

cc: @aeworxet

[aeworxet]

Apart from that, designs look good to me. I don't find any problems in it.

@akshatnema
Meaning, this Bounty Issue is completed?