Home / GitHub Page

New Simple Joplin's UI and UX by giteshsharma

Hi Team,

I’m really interested to work with Joplin in coming Summers. Though I understand that I couldn’t make a PR which is required for GSoC, but I am still investing my time to do whatever contributions I can make to the community. So I have made some layouts for a new UI-UX design of Joplin, please give it a check an point me out what else can I do.

PS: I’ll have my exams from tomorrow and due to them I will be less active

Layouts

I tried to keep that layout same as Classic Joplin’s Layout(as siad by @laurent Sir to keep it simple),
just remove the the upper toolbar and replacing editing icon bar

Few Features and their working




Sidebar at RIGHT side
@memophen suggested for sidebar at right and probably this one is the nicest of the all design


Sidebar at LEFT side


Sidebar at BOTTOM side


Sidebar at TOP side


For left and right sidebar search will be like this,
2 - Copy
when user click search option this bar will appear and for right sidebar it will appear on left side.

Update 1

20 Likes

Holy hell. All of these look super slick and don’t trigger my UI overload OCD tendencies.

Also, @abogawat, got any thoughts here?

6 Likes

Hi team! After using Joplin since a month, I’ve just joined discourse to feature request for a better UI and UX for the desktop app. And what a co-incidence, I’m so glad that I came across this post!

This mock-up looks incredibly sleek and definitely makes Joplin less traditionalist like it is right now in its GUI design (no questions on its functionality which are already beyond amazing, thanks to the team).

Some of the problems that I’ve been facing with UI, are:

  • The font style of different options on top in desktop app are not elegant & font size is very small for my 15" laptop screen
  • The icons are also not appealing (reminds me of a traditional CMS)
  • The formatting sidebar is very large compared to everything else and is of rarely use (I would like to have it in right side - the layout A in this mock)
  • The notebook bar & notes bar should be able to minimize to save screen estate
  • The overall look & feel of app could be quite modern, etc.

I see that most of these are covered by this mock-up, I would love to see progress on this! If you need more details about issues I’ve with UI, please let me know.

2 Likes

Welcome to the forums. :smiley:

What issues would you like to point out that could be added and resolved by this mock up?

Hi, beside issues I already mentioned, the same UI/UX of this mockup can be applied to Joplin settings (preferences) page!

Also I just noticed that besides distributing that toggle sidebars and new notes/notebooks icons in appropriate places, this mock-up takes layout change icon to formatting options’ bar - which is another great feat towards UI minimalism!

3 Likes

I was on mobile when I responded and for some reason your list didn’t show. I’m sorry for not seeing that. Either way, I love these ideas. :heart:

2 Likes

@giteshsharma and @jaladh-singhal, I’d like to add this here too. What are your thoughts (old post from a bit back)?

1 Like

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.