Some design ideas

Hey community,

I was fighting with the userstyle.css today to customize the look of the app a little bit.
Therethrough I would like to come up with some suggestions of what we could improve. As I'm neither a designer nor a dev I can not provide some moke ups. (I also didn't find a fitting topic for this)

  1. Starting with the header area. There are the (un)fold buttons for the notebooks and the notes/task list.
    In my opinion they do not belonge to this line and there are two ideas how to solve this:
  • just remove the buttons and make the lists completely hideable with the mouse (taking the seperator and pull it left) (but how to pull it back open?)
  • make it collapseable with a button inside these lists (I would suggest at the top of the lists)
  1. Continuing with the buttons for a new notebook, a note and a task.
    Again thinking of interaction in contexts, the buttons should be in the notebooks and the note/task list. I think more in the lower area.

  2. The last button left is the layout button
    As it is related to the editor and the viewer I would expect this button in the toolbar.

  3. the search bar
    As it has a different task and also different characteristic I would suggest to make it different from the input field for the note title

  4. The note title
    Very simple but I would expect the note title under the tool and the tag bar.

  5. The toolbar
    I love this one :wink:
    And I think to polish the toolbar it looks great to give it not only an icon but an button background (understandable?). This could also have the side effect that every icon has the same space and the distance between the icons are the same as well. In addition I think the order could be changed too, as formating text and insert content are different types of actions.
    Also making the open in another app button right alignt would improve the understanding of what each button is used for. (in addition to that, a share button would make sense as well, in my opinion)

  6. the tag bar
    Last but not least. I think seeing tags in this bar but edit them via button in the toolbar is not very intuitive. So I would suggest making the tags editable by clicking on them (also deleting, by removing the text or having a cross when editing) and habe a create button within the tag bar.

Wow this was much more than expected :wink: sorry!

I hope this is somehow useful - otherwise just put it into the trash or ignore it as your app is already very awesome!

:kissing_heart:

1 Like

I can’t agree with most of your items, but that’s just me:

  1. I like the fact that I can use buttons to hide the notebook/note list. I don’t want to resize to null for doing this, which also means I will have to find the correct size again - every time. No thanks.

  2. No again. When you start writing you are rather at the top of the app . I don’t want to move my mouse pointer to the bottom to create a new note and then up again for other button interactions.

  3. Maybe, but also not necessary.

  4. I agree, we should give those 2 their own class names.

  5. Nope, because the toolbar buttons apply to the text and not to the title.

  6. The order is already separated by function. The only space that we could remove is between I and the Link. Other than that. The first 2 groups are for changing text, the next group for inserting text, and the last group for other actions.

  7. Maybe.