RFC: Design and UX ideas

[zadam]

Hi all,

First beta of 0.46 is nearing, and I'm starting to think about 0.47. One of the focus areas will be the look and feel of the app which is currently ... let's say less than ideal.

What I'd like to do:

• make the UI more visually attractive - nicer, sprinkle in some colors. This would mean a new default theme, probably with light and dark variants. Current theme could be preserved as "classic theme".
• make the app easier to use with the leverage of visual cues. Current theme is visually quite minimalistic, e.g. many widgets are not visually separated which might make the app more difficult to understand.
• create sort of visual language for common elements like primary buttons, help buttons etc.
• add new theme extension points (CSS variables) leveraging the more consistent visual language mentioned above. Currently theming is little more than a different color scheme and one must (ab)use unstable CSS classes to change the look more significantly. Of course the theming "API" will never be complete but we can do better than now.
• change app icon - current icon is too complex. Simpler design with some colors would look better. Decent inspiration can be found on google. Flower/leaf/plant based motif should remain ...

As part of this there might be some smaller functional/layout UI changes, but larger UI reorganization should remain out of scope.

Now all this is pretty difficult task for me - I'm not a designer and my abilities in this area are very limited so I thought I might ask here for input. Things I'm interested in:

• specific ideas - e.g. what you think might look better or might be easier to visually identify
• inspiration links and screenshots - do you particularly like some app and its design? Post here a screenshot and ideally comment on why you think it looks/works well. A cool example is e.g. Allure:

• are there perhaps designers working with open source projects. Some (limited) monetary compensation might be possible. (applies also for icon design)
• to people developing their own themes - what extension points would you like to be added into CSS variables?

[raphwriter]

Some progress on the logos as well!

Here are some refined designs. I felt that the previous version was not 'compact' enough so I, well, compacted them. 😄 Also I applied a greener color scheme, I think it works quite well.

[omaidb]

我又来了，抱歉更新晚了，最近有点忙。我在下面做了一个版本。

真漂亮

[meichthys]

Some progress on the logos as well!

Here are some refined designs. I felt that the previous version was not 'compact' enough so I, well, compacted them. 😄 Also I applied a greener color scheme, I think it works quite well.

Just my opinion, but i reallly like the one in the bottom right!

[omega3]

Please, add option to disable completely "similar note" area.

Make labels in attribute area look better, for example the same as "similar note" looks now. Besides there could be an icon to hide / show attributes somewhere beside Note paths icon. I don't think it is necessary for this line with Owned and Inherited attrs to be displayed permanently.

Add label / tags pane where all labels from all notes are listed. It is difficult to remember names of all labels, so I can't search for something the name of which I don't remember. This pane could also have small search as you type area to search for labels / tags.

I believe that would make labels / tags management more user friendly.

Maybe it would be more intuitive for new users if labels were called: tags, because they are tags and this is the name most users and programs use.

[Y-con]

I think an outline inside the note would be useful when the note grow larger.Maybe like this.

Besides,that would be great if the code block has the ability of syntax highlighting.

Thanks for contributing this remarkable note tool.

[meichthys]

@Y-con I believe syntax highlighting is already supported. You just need to be using a code note and then select the type of code you are using from the top right menu.

[Y-con]

@meichthys Yep,thanks for the remind,it do work.But there are cases that we need the abilities of the Text Note like "CheckBox" ,"ToDoList" etc as well as the code block with the ability of Code Note's syntax highlighting. So the limitation is 1.code block in Text Note can't support syntax highlighting 2.or maybe the Code Note can't support Text Note abilities(weird)

[zadam]

It's not that weird actually. There are richt text editors and code editors (with highlighting). Is there a rich text editor which can also do code highlighting? I'm not aware of any ...

[zhaiyujin]

Is it impossible to implement code blocks in text comments that are not supported? Many of my notes are code blocks

[meichthys]

@zhaiyujin I could be misunderstanding your question, but I think you are looking for the back-tick code formatting:

Like this: code here typed like: `code here`

[paul1149]

I'm on .47,7. The main thing keeping me from using Trillium is the available themes. I often use Dark themes, but the contrast with the #fff font is brutal on the eyes. Similar is true of the White theme, though a bit less because the background has a tinge of shade to it. But to my eyes it's not enough softening.

Also, different colors for the tree pane would soften the impact of the whole window.

Those two principles - lessening the contrast and providing different colors for major interface elements, soften the impact on the eyes.

Adding a choice of font face would also be a huge advancement. This is especially true when you're cross-platform, because fonts render differently on different OSes.

The SteelBlue theme is interesting, but I actually find its contrast too subtle. And the monotone background across all elements is still a problem. And for me, there is the added problem of the serif font, which I find very hard to read.

I'm attaching a shot of my CherryTree install. I didn't spend a lot of time on it, but it does illustrate something I find pleasant to look at.

I'm going to check out the Allure theme you've cited.

[raphwriter]

@paul1149 not to toot my own horn but you could also check out https://github.com/raphwriter/trilium-theme-melon maybe you like it (not a dark theme though)

[paul1149]

Thank you, @raphwriter . I did notice that, and I think it's tastefully done. And it's certainly fine to mention it here. But I'm looking to break up the large white background across the whole UI. I have a neurological condition which makes doing so very advantageous.

[JadeVane]

@paul1149

But I'm looking to break up the large white background across the whole UI. I have a neurological condition which makes doing so very advantageous.

I'm not sure of the true meaning of "break up the large white background across the whole UI", but I tried to make some changes, hoping to come in handy.

Any feedback is welcome.

[paul1149]

I think that shaded tree on the left helps give the interface some pleasing subtlety.

[fidelix]

@JadeVane that design is top-notch.

Thank you for doing this.

[yllekz]

I would love if there could be some kind of theme that replicates the OneNote UI, colors, fonts, and line spacing. I generally really like the OneNote look and it would be cool if there could be a mockup of it done in Trilium to ease the transition.

[zadam]

This is an old issue, please open a new one if you have some proposal.

[romaric-siri]

@paul1149

But I'm looking to break up the large white background across the whole UI. I have a neurological condition which makes doing so very advantageous.

I'm not sure of the true meaning of "break up the large white background across the whole UI", but I tried to make some changes, hoping to come in handy.

Any feedback is welcome.

Have you released this one yet ?

[JadeVane]

Have you released this one yet ?

Not yet. I just saw the idea @paul1149 mentioned and thought it would not be complicated for me to make some color changes based on the original theme style, so I tried to make some changes, but I did not get a response after posting my results here. At that time, it seemed that these changes were just half-finished products and did not receive enough feedback to improve it. I myself did not have the idea of ​​using this theme, so I did not publish it.