[UX] Graphic Design for Meshery Catalog page or section

leecalcote commented 1 year ago

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

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 commented 1 year ago

May I do this?

leecalcote commented 1 year ago

Thanks, @nishantminerva

vishalvivekm commented 1 year ago

any update on it ? @nishantminerva

nishantminerva commented 1 year ago

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

vishalvivekm commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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

avantikajain289 commented 1 year ago

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

manasak2010 commented 1 year ago

can I also help?

avantikajain289 commented 1 year ago

@manasak2010 Absolutely! Steps:

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

VishyFishy7 commented 1 year ago

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

leecalcote commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

thankyou will soon get back to you with the progress

On Tue, May 23, 2023 at 1:22 AM Ritik Saxena @.***> wrote:

Assigned #4131 https://github.com/layer5io/layer5/issues/4131 to @manasak2010 https://github.com/manasak2010.

— Reply to this email directly, view it on GitHub https://github.com/layer5io/layer5/issues/4131#event-9306786357, or unsubscribe https://github.com/notifications/unsubscribe-auth/AYO2GYAMDNDKQMWWN3IN2W3XHO7YBANCNFSM6AAAAAAXKOQX7Y . You are receiving this because you were assigned.Message ID: @.***>

-- with regards, manasa kumari

leecalcote commented 1 year ago

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 commented 1 year ago

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[bot] commented 1 year ago

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[bot] commented 11 months ago

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

layer5io / layer5