I prefer the selected note to have inverted colors like in version 1, but everything else is great 
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 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.
- For example, Slack let’s you change 9 basic theme colors + provides a dozen or so preselected color palettes.
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.
5 Likes
Great nice slick design!
Joplin is getting better and better!
Thanks for the hard work!
Ray
1 Like
Getting better and better!
Imho the side-bars are too big and take away to much of the usable space
1 Like
Great improves !
I just think of something that is strange to me. The title of the note (Ok everybody is welcomed to Joplin:) is written 4 times. Sidebar, top, editor, md. Does it have to be that way ? I mean can’t it be only an h1 title ? Then the top will be free.
Then you can set tags on the top and keep the bottom as a state Bar (« barre d’état in French) for the path (what you wrote In: notebook ) and date/time
More easy to have, I think also « + note » and « + todo » is enough to avoid 2 « new »
Hello,
Does it support multi-tab? I usually need reference many notes at the same time.
2 Likes
They are resizable.
2 Likes
I too like the darker sidebar and lighter note list better.
It would be great if we can drag at any point on the separator, not just on the small button.
The collapse/expand button could have an arrow icon indicating the direction of collapse/expansion.
“<” to collapse “>” to expand.
So in the fully collapsed view, I expect that we would be two separators taking up space to the left with toggle buttons on it that point to the left “>” (for expand).
I’d prefer these toggle buttons to be in the middle of the separator instead of the bottom.
I wonder if there would be a way to include date and time without reducing the title field width.
Also, I notice a blur between the tags at the bottom and the editor. Will this make the last line of the rendered markdown difficult to see?
But the rest looks great!
2 Likes
Right, there's no need for a button. Currently there aren't any either. You click on the separator and drag it.
1 Like
It's the opposite for me. The light sidebar design looks cleaner / better to me.
I think it is looking great. I would prefer the list of notebooks dark, but I guess we will be able to adjust this in userchrome.css, if we want something not many other people do
I strongly disagree to the first proposal about indent in the left part, since it shows the whole structure of the notebooks in a glimpse. By means of the second proposal we could collapse everything else and have a nice "primary" view.
But then I agree to the second proposal, it would be very helpful to collapse and extend the various levels.
I totally agree with leaving the level shading in the left-hand index, or at least make it an option. A unified color is to my eyes a soup and doesn't correspond to the main purpose and functionality of Joplin.
1 Like
there was some work done on UI in April, see New Simple Joplin's UI and UX by giteshsharma.
I like some of the improvements (like to vertical toolbar) and the mockups received many positive answers. So, are these ideas reflected in the new design?