UI / logo polishing experiment (see the screenshots)

Development
1

Thanks for making Joplin! I played around with it a bit, and its code, and decided to experiment with the UI a bit here and there to make it look more polished.

Here are the results of my one-day experiment:

joplin_after
joplin_after1280×768 115 KB

Since I can't post more than two links/images as a new user here, I published the before/after comparison screenshots here:

What I did is added a separate color for the note list component, made selected item in the side bar and note list more prominent, removed gaps around the note list from vertical resizers (they are still there, just not visible), and reduced visual noise a bit.

I also changed the color from sans-serif to -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji (basically what GitHub has) to make the UI appear in a system font and thus look more like an actual desktop application.

The commit in question is Desktop: UI cleanup pass No.1 · iafan/joplin@dd60488 · GitHub
(you can download my fork to play around with this version).

Let me know if this is something that you'd welcome as a PR, and if help with these things is needed at all. Of course, there are many more things I could polish here and there, but that looks like a good conversation starter. :slight_smile:

P.S.: too bad I discovered Joplin right after you had already settled on a new redesigned logo / icon. I guess I missed the train. As a part of my experiment, I created a new icon as a bonus). See it under the same GitHub link above.

I thought it would be nice to have something more abstract than just "J" or a musical note; here I envisioned a trail of an airplane in the sky: a symbol of speed, and freedom of expression. It still resembles the letter J, and has your color palette.

Cheers!

9 Likes
2

I like you changes! Small but really good ones! It just makes the app look more modern and clean! :slight_smile: I would love to see them in Joplin. The only thing for me is that I wish there was a bit more whitespace between the notes, but that is probably just a personal preference.

I really love the making the selected note blue to keep more in line with the app! :slight_smile:

3

I really like how you removed some of the borders! I feel like all the borders make Joplin look more dated than it is as well! :slight_smile:

4

I really like this UI polish! I’d love to see it implemented.

1 Like
5

In my local builds, I also remove the lines between notes in the note list:

image
image1576×1090 173 KB

1 Like
6

@iafan I show some good enhancement that people might welcome them.

if you can provide separate PRs for those enhancements, it will help maintainer pick

  1. Search bar + icon wrap in a round region
  2. The select note and notebook shows the bold font, and highlight with the same color
  3. font tweaking
  4. title bar style enhancement
7

Most of these things can be done by tweaking the userchrome.css.

8

I would like to see this.
@iafan, can you do this.

it might to much of a burden for an average user