New Simple Joplin's UI and UX by giteshsharma

I have an Idea about it, will show it after my exams

Yes! This one looks really modern and slick!

Would love to see Joplin updated to this design

2 Likes

These look really cool! One thing I would suggest is to add editor/viewer mockups in there. I would love to see those as well.

1 Like

Well that looks nice :wink:
I do have some thoughts about that:

  • I do like the idea of moving the formatting bar above the title
  • Probably the position of the formatting bar could be an option
  • There was already a discussion, that some people (including me) prefere to have the option to hide the sidebars completely
  • Maybe you could handle the creation of a notebook or a note similar to the tags and put the plus behind the "All Notebooks" or the "Meetings"
  • I would prefer to have the search bar in a easy reachable place
  • I don't see a use in the very small sidebar as you can't read anything or?

Over all this is very different from the current UI. I like it but there is a very big community and there will be those who don't like such big changes.

1 Like

Read the 3rd image’s text, we will hover them to see the full names.

These designs look good, but the long list of icons is not great in terms of usability, especially since it mixes buttons meant for the editor (Bold, Italic, etc.), with buttons meant for the note as a whole (Info, External edit, etc.), with buttons meant for the whole app (Search, Layout, etc.)

So it would be interesting to see designs that take this into account, and position the buttons to makes it more obvious what they are for.

This is what we have now, and what should or could be changed:

5 Likes

@giteshsharma This is a great update on your previous iteration. It addresses the feedback items very well and is a step in the right direction. Here are my comments on some specific details.

  • Moving the ‘Add notebook’ and ‘add note/todo’ links in the respective sidebars all but removes the need for the top bar. My worry is that if the lists get too long, the add icons will go below the fold and harder to access. I would consider moving them to the top, maybe (like you have for the tags).
  • Not entirely sure how helpful the avatar style icons (with first two characters) in the collapsed sidebars will be. The tooltips are a good idea, though. Probably needs some more iteration on the collapsed state.
  • Moving the search box in the formatting toolbar feels a little confusing, since search is global, not specific to the file being edited. I would move it into the sidebar somehow. Maybe an icon that opens up a floating panel when clicked.
  • I agree with @laurent’s comments about not mixing the formatting and metadata icons in the toolbar. They’re together as of now, yes, but I don’t think that’s ideal.
  • The notebooks list can be refined further for clarity and improve hierarchy. These explorations from @memophen are a great example: Cleaner design of the sidebar?

@giteshsharma Good work! I really like the color scheme

1 Like

Do you remember the good old office xx days? There you were able to rearrange parts of the toolbar wherever you wanted to.

Because this becomes a problem when you collapse the sidebar.

I think in the notebook bar belongs the notebooks and the add notebooks button.
Same for Notes and Tasks in the note list.
Then the search bar and the go back go further buttons belong together (I think they don't belong to the toolbar because then you might think it is undo and redo...)
And then of course the toolbar and the note related buttons.

I like the idea if this are bars you can rearrange like you want it ...

Just my two cents :wink:
Thanks for your insights - i do like this discussion!

1 Like

My original suggestion was not to have the Search Bar in the formatting section but be a full part of the original sidebar where Notebooks, Notes and Tags are at, since Search would apply to all of those. That way it can also be hidden when the user doesn’t need it and an implementation using the current Notebooks implementation could be used to show what Search finds.

1 Like

Nice design, very clean and simple. Any chance of it having just the Note editor maximized with everything hidden so that you can stay focused on writing… like iA Writer?

1 Like

I’ve instantly fallen in love with these designs!

Well, there are four sides. Left for the lists of notebooks and notes (rejecting design B), so still three available for other controls. Combining the different types in one bar could still be considered if they have different background colors, like the search field in C and D, or are separated by a horizontal (A and B) or vertical (C and D) line.

One question about the note title. Is “Brief” in the viewer the note title, and “Points to remember” the first header? When scrolling, will “Brief” scroll away or stay on top of the screen?

Edit:
Also looking forward to see how a split screen (editor + viewer) would look like.

2 Likes

Design looks good and it's quite similar to Bear App on macOS :stuck_out_tongue_closed_eyes: and i agree with laurent. Some universal actions in Joplin shouldn't be added with note editing ones.

@giteshsharma Great job man! Designs look super classic

1 Like

I agree, excellent look, the colour is perfect, would also love to see this implemented :slight_smile:

1 Like

Very nice. I would like to see this implemented in the future as well.

1 Like

I love the look and feel! Well done!

However, I generally use the markdown+preview side-by-side layout in Joplin and these concepts don’t seem to take that mode into account yet.

It seems like having the formatting buttons on the right side would conflict with a layout that had editing in the left pane and preview in the right pane, as the buttons would be attached to the uneditable preview rather than the editor. Maybe flipping the editor and preview would be palatable?

I don’t think the bottom or top button layouts would conflict with the side-by-side, but I recommend reviewing how the side-by-side layout would look with these proposals while they’re in concept stage

4 Likes

Beautiful designs and simplicity, but I had same thoughts as @themightychris that markdown and preview screens are not reflected here.

What I would like to see is a UI where the markdown is displayed for the paragraph where cursor is located and the balance of the document is in preview mode. That would let users see if my markdown is working and edit it in the same screen. I don’t know if that is possible, I’m not a programmer, but this would eliminate the dual window and toolbar relationship problems mentioned by @themightychris and it would totally improve my user experience over having dual windows.

I would also love to see a search field in the toolbar that allowed users to search for markdown examples (tool functions) and insert a snippet of example markdown. There are just too many markdown options to have in toolbars but it takes a long time and repeated use to remember markdown for all the table, math, defined lists, etc. Ideally, there would be a filter icon next to the search that allowed selection of the enabled markdown plugins.

Right now I use notes with markdown examples but they are clunky. Still, maybe notes tagged as markdown examples could be used as libraries to store the menu items and make them readily customized by users. Then the filters would search the tagged notes and users could create favorites and share them. If icons were associated with the example snippets custom toolbars could be made accessible to end users.

1 Like

Nice proposal.

A few questions to make sure you consider all the details:

I’m not sure I would want to have the new note, todo, notebook actions always visible and taking up so much space in my note list. I would prefer to see two more notes listed than have these options there.

The search bar also shows the number of results, are you proposing to show it in the search bar itself? It isn’t shown.

Tags is all the way at the bottom of the sidebar. If we get a ‘trash’, where would it go?

The editor pane is nice and clean, but how does it look with the markdown panel? Where does the formatting toolbar go in that case?

Where will the backward/forward note navigation buttons go?

Last, but definitely not least, where are the note tags displayed?

Edit: Also don’t forget about the “search in note” feature. In your design, it looks like it will get confused with the global search function.

3 Likes

An impressive list of objections, but unfortunately it lacks a breakdown-list of feasable options according to the many app-screen-resolutions. (As he remarked on his 4K 1980 screen.)

No, just kidding.

I am not quite quite in line with DShirk.
With Joplin we have a very capable (up to minii-problem-sized) note-taking tool. It is then up to us (users) to find those feasable .css-solutions to those bugging milli-micro-nano-problems. And, are they that bugging ?