docs: Add "Understanding Design Elements" Guide for Kanvas #598
Conversation
Signed-off-by: Discuss bot <[email protected]>
Signed-off-by: l5io <[email protected]>
Signed-off-by: l5io <[email protected]>
Signed-off-by: l5io <[email protected]>
Signed-off-by: Zihan Kuang <[email protected]>
Signed-off-by: Zihan Kuang <[email protected]>
Signed-off-by: Zihan Kuang <[email protected]>
Signed-off-by: Zihan Kuang <[email protected]>
added meshery extension org help wanted issues to label
Signed-off-by: Zihan Kuang <[email protected]>
Signed-off-by: Zihan Kuang <[email protected]>
Signed-off-by: l5io <[email protected]>
Signed-off-by: Zihan Kuang <[email protected]>
Signed-off-by: vishalvivekm <[email protected]>
Create contributing video guide
Signed-off-by: l5io <[email protected]>
Signed-off-by: l5io <[email protected]>
Signed-off-by: l5io <[email protected]>
Signed-off-by: l5io <[email protected]>
Signed-off-by: l5io <[email protected]>
Signed-off-by: Discuss bot <[email protected]>
Signed-off-by: l5io <[email protected]>
Signed-off-by: l5io <[email protected]>
Signed-off-by: l5io <[email protected]>
Signed-off-by: Zihan Kuang <[email protected]>
Signed-off-by: Discuss bot <[email protected]>
Signed-off-by: l5io <[email protected]>
Signed-off-by: l5io <[email protected]>
Signed-off-by: l5io <[email protected]>
Signed-off-by: l5io <[email protected]>
Signed-off-by: vishalvivekm <[email protected]>
rm meshery from home pages of /cloud, /kanvas
Signed-off-by: mahadevan <[email protected]>
Signed-off-by: Vivek Vishal <[email protected]>
…d-docs fix: remove references
Signed-off-by: Discuss bot <[email protected]>
Signed-off-by: l5io <[email protected]>
Signed-off-by: Lee Calcote <[email protected]>
Signed-off-by: l5io <[email protected]>
Signed-off-by: l5io <[email protected]>
Signed-off-by: l5io <[email protected]>
Signed-off-by: l5io <[email protected]>
Signed-off-by: Zihan Kuang <[email protected]>
✅ Deploy Preview for bejewelled-pegasus-b0ce81 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| --- | ||
| title: Understanding Design Elements | ||
| description: A complete reference for all visual elements available on the Kanvas designer. | ||
| weight: 11 |
There was a problem hiding this comment.
| weight: 11 | |
| weight: 1 |
This document is highly useful and something that ideally users understand before they get too far into designing. I'm not sure if another document sits at a weight of 1 already, but this doc should probably come before all others in this section.
| When you're designing and visualizing in [Kanvas](https://kanvas.new/), you'll interact with a rich library of visual elements. This guide is here to help you understand what those visuals mean. | ||
|
|
||
| We'll cover two main types of visual elements you'll encounter: | ||
| - **System-Defined Visuals:** These are icons and styles that Kanvas uses to represent specific functionalities, component types (like Kubernetes resources), or integrated technologies. They have **predefined** meanings within the system. |
There was a problem hiding this comment.
In Meshery Docs, we define these as semantically meaningful (orchestrated components) and non-semantically meaningful (annotation-only components). Are we intentionally deviating to improve the ease of understanding?
|
|
||
| This section focuses on visual elements that have a specific, predefined meaning within Kanvas. Understanding these will help you accurately interpret designs. | ||
|
|
||
| ### Kubernetes Components |
There was a problem hiding this comment.
Are Kubernetes components special in their behavior? No, they're not. Components from any model are or can be made to be capable of the same behavior.
The Kubernetes model and its components can be used as an example, but it needs to be made clear that it is just an example.
|
|
||
| Kanvas employs its own thoughtful design system to represent Kubernetes resources, built on a few key principles for clarity: | ||
| #### Principle 1: Color and Structure | ||
| - **Uniform Color Scheme:** Kubernetes component icons in Kanvas typically use a **distinctive blue background**. This blue often serves as a standard identifier for Kubernetes-related elements, helping you differentiate them at a glance. |
There was a problem hiding this comment.
Using Kubernetes as an example is a great idea in that it is the most highly used model, but we do ensure that the reader understands it is just being used as a reference and not every other model and it's components have the same consideration made for them.
Description:
This pull request introduces a new, comprehensive guide: "Understanding Design Elements". It is structured to help users quickly understand the visual language of Kanvas by explaining two key types of elements: