stakwork / sphinx-nav-fiber

10 stars 45 forks source link

Color Palette/Icons for second brain data #345

Open plell opened 12 months ago

plell commented 12 months ago

Context: Data close to the camera shows a texture image, but far away it only shows a color (for performance and readability). The color is meant to communicate the type of data. The links between data (when selected) uses the same color as the type.

Here's an example of how this looks: https://www.loom.com/share/c15ac1bf613142a0b22fba4b11277964

Types of data are not a static group - the number of types will grow over time. At this point, here are the most common data types:

  1. Show
  2. Episode
  3. Clip
  4. Guest
  5. Topic
  6. Document
  7. Tweet
  8. Youtube

The color palette should not depend on a specific data arrangement, because the data will be arranged in a variety of positions and groupings on the map - the orientation may be grouped by type in one view modes and not in another.

Antanasijevic commented 11 months ago

@plell Hey David, let's have a call about this and discuss best solutions. Here are some of my notes on this subject, so we can go over it together.

In order to differentiate type of data, color coding will help, but not enough, especially if we plan adding more types of data. Rest of the UI should be redone also in order to achieve clarity about selected type of data.


For color coding to make a difference, the rest of UI (outside of map) should be monochromatic (Black, White, Gray). Most of colored buttons and elements should be desaturated. Some of the elements in map should be modified also.


Color Scheme for data types

Appearance of color in 3d space depends of lightning. Initially we should use primary and high saturated colors, since lightning will tone it down a bit. We can tweak colors later in case it feels too strong or too subtle.

image

For Brands, we should apply their colors (Red for YouTube, blue for twitter)
. For topics, i suggest we continue using white, and keep it neutral.

Remaining colors will make difference in any arrangement, but since there are common arrangements (like Shows connected to episodes), we should assign them similar colors that will make a difference but not create a noise when looking at large groups. So, for the rest of content we should identify most common way they are connected and try to apply colors in a way that makes most sense.
 To achieve that,i think we will have to try few options and see live what gives us best result.

Scheme 1 Scheme 2

Using shapes

In order to differentiate data types, i think we should, beside colors, use different shapes as well. That will give us additional clarity of each element in a group. Here are some basic examples. Let's discuss if we can use shapes in a meaningful way.

image