[UX] Graphic Design for Meshery Catalog page or section

[leecalcote]

Current Behavior

The Meshery Catalog is live and available, but not described very well n the layer5.io site. Some of its description can be found on layer5.io/meshmap in the card carousel.

Desired Behavior

Ideally, there is a Meshery section or new page that describes the purpose of and value in use of the Meshery Catalog.

Implementation

• Redesign the UI of the catalog page
• Create reusable components
• Add the above-mentioned components to the design system
• Better UX functionality i.e. anchors, sliders, interaction, tags etc
• Add meaningful information assisting the user/viewer of the page eg. getting started section, caveats and considerations, FAQ's and comments/reviews (slider)
• Information architecture, for better understanding the interconnectedness between Meshery, Meshery Playground, MeshMap (add other interfaces if necessary)
• Questions and comments section has interactivity with other interfaces (MeshMap and Playground) as it becomes a collaborative (public) design
• User interviews to gather more information on pain points and suggestions for improvement of the interface and overall design
• Usability tests to improve the functionality and design

Acceptance Tests

1. One or more designs are available in the linked Figma design file page.

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma.
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[nishantminerva]

May I do this?

[leecalcote]

Thanks, @nishantminerva

[vishalvivekm]

any update on it ? @nishantminerva

[nishantminerva]

@vishalvivekm Can you please provide me some paper wirefram so that i can design it accordingly. That will be very helpful.

[vishalvivekm]

@vishalvivekm Can you please provide me some paper wirefram so that i can design it accordingly. That will be very helpful.

@nishantminerva did you check out
wireframes and designs for Layer5 site in Figma ? : https://www.figma.com/file/5ZwEkSJwUPitURD59YHMEN/Layer5-Designs

Tagging @ritiksaxena124 for assistance here

[ritiksaxena124]

@nishantminerva , here we have a link for the mockup of Catalog page which is under process, you can take the data to insert as @leecalcote mentioned from the carousel in layer5.io/meshmap and play with the design in Figma. if you have any queries feel free to jump into our Slack channel if you haven't already.

[vishalvivekm]

@nishantminerva , here we have a link for the mockup of Catalog page which is under process, you can take the data to insert as @leecalcote mentioned from the carousel in layer5.io/meshmap and play with the design in Figma. if you have any queries feel free to jump into our Slack channel if you haven't already.

Thanks Ritik
@nishantminerva There you go

[nishantminerva]

Thank you @ritiksaxena124 and @vishalvivekm. I will soon update you on the progress.

[avantikajain289]

Hi @leecalcote @ritiksaxena124 happy to continue work on this one. I would require editing access to the Figma to get started. Thanks!

[manasak2010]

can I also help?

[avantikajain289]

@manasak2010 Absolutely!
Steps:

1. Join the community by completing the community member form.
2. Get access to the Figma file (both mentioned in the description above) and other assets.
3. Join the slack channels and ping me. We'll take it from there.

[VishyFishy7]

I would like to contribute to this. Requesting Figma Edit access.

[leecalcote]

@VishyFishy7 view access granted. With the way that Figma permissions work (and their lack of granularity and ease by which work is deleted or lost), we withhold edit access until a community member has demonstrated their competency, consistency of participation, and sustainment of positive engagement over an extended period of time. Don't let this dissuade you, though. On the contrary, jump in with both feet and make some waves. For now, simply make those waves in another design file.

[VishyFishy7]

@VishyFishy7 view access granted. With the way that Figma permissions work (and their lack of granularity and ease by which work is deleted or lost), we withhold edit access until a community member has demonstrated their competency, consistency of participation, and sustainment of positive engagement over an extended period of time. Don't let this dissuade you, though. On the contrary, jump in with both feet and make some waves. For now, simply make those waves in another design file.

Totally understandable. However is there any way I could get the asset files (branding,logo) for Layer5 to use for this project? That is the only thing I need.

[manasak2010]

thankyou will soon get back to you with the progress

…

On Tue, May 23, 2023 at 1:22 AM Ritik Saxena ***@***.***> wrote: Assigned #4131 <#4131> to @manasak2010 <https://github.com/manasak2010>. — Reply to this email directly, view it on GitHub <#4131 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYO2GYAMDNDKQMWWN3IN2W3XHO7YBANCNFSM6AAAAAAXKOQX7Y> . You are receiving this because you were assigned.Message ID: ***@***.***>

-- with regards, manasa kumari

[leecalcote]

Contributors, who fill in a community member form (https://layer5.io/newcomer) gain immediate access to the shared drive, which is full of resources / assets. Also, this page has a smaller set of assets available - https://layer5.io/brand

[avantikajain289]

Hi to the Creator of this Issue,

A few suggestions to add items to the agenda:

• Redesign the UI of the catalog page
• Create reusable components
• Add the above-mentioned components to the design system
• Better UX functionality i.e. anchors, sliders, interaction, tags etc
• Add meaningful information assisting the user/viewer of the page eg. getting started section, caveats and considerations, FAQ's and comments/reviews (slider)
• Information architecture, for better understanding the interconnectedness between Meshery, Meshery Playground, MeshMap (add other interfaces if necessary)
• Questions and comments section has interactivity with other interfaces (MeshMap and Playground) as it becomes a collaborative (public) design
• User interviews to gather more information on pain points and suggestions for improvement of the interface and overall design
• Usability tests to improve the functionality and design

I will keep adding to the list of tasks if and when they come up.

Thanks!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue is being automatically closed due to inactivity. However, you may choose to reopen this issue.