Joplin new design, feedback is welcome! (20 June Update - Version 4 is ready!)

The buttons are maybe too prominent, but they don't have to be. e.g. if there was a top bar or something, one could just double-click that and the sidebar/note list is collapsed. I'm not a UI designer, but I'm sure there are options to make this work. e.g. even if it was double-click on the separator.
For me the buttons are useful. I would miss them, but I could live with it, if there were shortcuts for both actions.

I much prefer the tags at the bottom myself. I’m all in favour of this!

2 Likes

I’d second this - I use Joplin in a similar way and really like those buttons at top left for toggling the view of the folders and notes. Other than that, I think the new design looks great - thank you for all your amazing work on this!

I second this. Maybe a small button on the separator (like in Overleaf)?

3 Likes

2 posts were split to a new topic: Editing issue

Thanks everyone for your feedback so far. Version 2 is now ready and your feedback again would be most welcome! For info, this is done by a designer from Upwork that we’ve hired using the mentor stipend we got from Google for GSoC.

The note title field somehow is missing from this design, so I’ve asked to put it back, but otherwise there are some nice improvements I think.

1 Like

Yep, I've noticed that right away.

I like it, except the WYSIWYG | Markdown. IMO they are too prominent. I'm not sue how often people switch between editors.
I don't think there have to be buttons at all for that. But I'm biased, because in my case it's 0 times - or never. Maybe a poll is required?

4 Likes

I liked this better:

image

Maybe we need an explanation what these buttons are supposed to do:

image

Also, I have noticed that the info button, which was the reason for the toolbar re-design is once again burried next to other icons.

I still do not see the back/forward button, nor the In: notebook button.

PLEASE! No poll! I still have nightmares thinking about the poll for the Joplin icon! :slightly_smiling_face:

Let's just let the BDFL do his thing...

(BTW, I do agree with you about the WYSIWYG | Markdown buttons.)

Agree. I collapse/expand the notebook and note list a whole lot more than switching editors. Is the top right button supposed to do that?

A fullscreen mode? Like a “distraction free” type mode? Is that what you are hinting at? You can achieve it by collapsing things, but a toggle would be super nice.

WSIWYG | Markdown

Looks nice, but too big.

No note label at the top? Hm. I am not sure what I think about that. It’s more or less a “filename” in concept. The markdown itself often has a different Title, so to speak. I would have to chew on that. If there is no title, that [WYSIWYG | Markdown] bit could probably stay as is, but still seems a bit … bold.

I prefer the selected note to have inverted colors like in version 1, but everything else is great :slight_smile:

As a recent arrival in the community I wanted to express thanks for getting us to this place. I like the clarity of the design. I use Drafts and there is a lot of similarity I feel which is a bonus. Will there be scope for people to keep the ‘classic’ layout or will the change enforce a new UI?

  • new note, new to do and search bar inside the note list make sense
  • tags on the bottom might get in the way for the long notes
  • i agree with others on that most people won't switch often between wysiwyg and markdown. that might be even burried in the options. version 1 top of the editor looks nice like this and makes sense:
    • note name
    • text formatting + other buttons in one bar
  • i would miss note date and time and info above the synchronize button. they're small and gray enough that you only see them if you look for them :slight_smile: at least in my current version (1.0.214)
  • i use toggle buttons often but wouldn't mind if there were hotkeys for both

anyway it's so nice to see that joplin is always improving, growing and people discussing it here. this looks a bit more like evernote which have a nice ui (other than the annoying sync and upgrade buttons at the top, those are already solved in joplin).

Here’s my 2 cents on theming (please let me know if you’d prefer I post this in a new thread!):

I went ahead and wireframed out my thoughts on how the “bones” of the layout could be organized at the bottom of this post. As I mentioned, I think the design style is progressing nicely, so I don’t mean for this to be a comment on that. Also, I noticed that the designer has incorporated a lot more of the elements in V2, I made these before I saw that, so these are an iteration of V1.

My thoughts around theming:

Make simple theming easy for most people (a la Slack)

  • By standardizing margins / font sizes / where colors are used, we can let people choose basic things like:
    • sidebar color(s)
    • highlight color
    • font colors / styles / sizes
    • padding (classic, compact)

We could apply those colors using tints so you could have nicely designed borders and things without having to pick every single color.

Use CSS Grid to make it easy for “advanced” theme-makers to build themes for various purposes (including mobile)

  • If we do the heavy lifting of organizing similar items together (which I realize is easier said than done as a group!), we can use CSS Grid to make it easy for an advanced user to rearrange the layout.

  • For example, by defining:
    #notebooks, #notes, #tags #editor-tools, #editor, #rendered, #navigation, #sync, etc, someone who really cares more about tags than notebooks could make tags the most prominent or move it to the right. Someone else could remove the rendered version completely.

  • In my experience with mobile web (vs. native app dev), you can use this same idea to reorder the elements for mobile. Not sure how applicable reusing the layout code is in this codebase, but ideally the “simple themes” would work on mobile.

My take on the wireframes:


The buttons at the bottom show/hide the various panels (including a new panel for tabs)
I moved all the note navigation to the bottom (back/forward, breadcrumbs, tags).

Mobile, showing the reuse of layout:

9 Likes

I like the new design, I do agree with EricB10 though that it would be nice it had some better support smaller windows sizes so that it can support splitscreen a bit better.

All in all I really like the design of version 2. The idea of having the tags at the bottom is unique and look good. I would also move the WYSIWYG/Markdown switch to the settings menu I dont think people will regular switch between these two modes and it leaves more space for more important information.

I am not sure if I like the position of the search bar, because it implies that only the selected notebook (and potentially sub-notebooks?) will be searched. Is that the case or is it still a general search?

For To-Dos I would actually like it, if the date and time of an alarm is shown below the title in the list. Similar to version 1 but just for alarms not for the creation date.

Overall I like the design, somehow it seems gentler on the eyes. I don’t want to lose the level shading in the left-hand index, however-- my use case is complex enough that a monochrome list would be unusable.

Version 3 is now available and I’ve updated the top post with it.

There are a few things that will most likely change and for info this is my own feedback:

If you have any suggestions yourself feel free to let me know.

4 Likes

Great nice slick design!
Joplin is getting better and better!
Thanks for the hard work!

Ray

1 Like