hey, a year ago i posted (on another account) a mockup for a redesigned brush editor ui, as a suggestion for whenever there's interest in refining the ui in the future.

and i felt like doing another one recently, but not try to fit the entire thing in a docker this time lol

here's a link to the mockup images: https://imgur.com/a/SEAeq edit: i've revised these a bit, see below

should be pretty self explanatory how things work, but here's some additional notes:
- instead of the somewhat cumbersome horizontal preset list at the top, have a preset choosing ui like the preset docker
- vertically shrinking the brush engine list gives room for both the preset list and potentially the future stacked preset ui
- move [default preset] and [temporarily save tweaks to preset] buttons to top; they're general controls, not settings that are saved to any particular preset so they make more sense at the top

- clicking the arrow next to a parameter switches the modifier curves displayed on the right to that parameter
- (maybe there should be an indicator next to / instead of the arrow to indicate whether any modifier curves are enabled ("enable pen settings") for that parameter)
- make it possible to edit both the brush parameter itself and its modifier curves on the same page, without having to switch back and forth from the brush tip page where most of the parameters are, and the separate page containing the modifier curve
- to have enough room for the list of brush parameters on the left, divide the various controls into "general", "color", "texture", etc. tabs on the top

that's basically it. if anyone has feedback i'd love to hear it, otherwise i just wanted to post this as something to consider whenever the ui is worked on in the future

Thanks for the mockup. We are thinking about the brush editor UI. Right now probably the biggest issue is that it just takes up way too much space on the screen. We are trying to think of ways to making it 75% (or more) smaller. Probably some areas might have to be scrollable. Some people cannot see the bottom options on the current brush editor because it goes off their screen.

I did make some changes to make selecting brushes easier. Those will be coming with the stacked brush updates. We haven't solved the problem on how to make the entire editor a lot smaller though. That isn't a high priority item now, but if we get a good design, maybe someone like will be able to start looking into it.

Interesting idea about making an option more complex with the right arrow. It might need a bit of tweaking as some of the settings aren't on your mockup like Mirror, rotation, and scatter.

Keep the ideas coming.

I really like this mockup and the fact that you have the parameter and the curve on the same screen.

I made a few tweak to make it smaller and simpler imho
http://imgur.com/Ks5bX9m
- I changed the place of the brush engine and brush list so you first select an engine and then a brush
- put the default preset button alone so its not confusing with the reload button
- add a "enable pen setting" icon in front of each parameter
- put the list of curve setting as a pop-up list (lot of the settings are rarely used I think)
- removed the instant preview which is related to the little canvas and not the brush
- add some cosmetic to quickly saw which parameter you are tweaking

thanks for the feedback, i've thought about it a bit and made some revisions.

here they are: https://imgur.com/a/9BX1A

points of note:

- i like scottpetrovic's demo (https://www.youtube.com/watch?v=_f_tvpdvsVU) that makes the various sections hidable, because most of the time users just want to edit the current brush and don't need a list of presets

- split the settings that i previously had in the general tab into two tabs to free up vertical space. i don't know what the best way to divide them is; right now i have a tab for brush tip, and a tab titled brush stroke for the other settings.

- move the precision, eraser switch size, instant preview, etc settings to various places:
------ precision to the brush tip tab, which is where it should be imo because it selects the precision of the brush tip specifically
------ instant preview to the brush stroke tab, although since it's a setting that applies to all brush engines (i think), maybe it should be at the top instead
------ eraser switch size and temporarily save tweaks shouldn't be in the main editor window imo, because they're program options and aren't saved to any presets. i think putting them below the list of presets on the left would be fine, or in an expandable box next to the hide/show buttons in scottyp's demo, or even just in the main krita settings.

- shrink the editor horizontally by moving the list of brush dynamics into a 2 column list above the curve

- move the "enable pen settings" checkbox to a toggle button next to each setting, so you can see and enable/disable dynamics for each setting without hitting the expand button for each one.

- make the expand button for the currently selected setting appear highlighted so you have a more clear visual indicator of which setting you're editing.

i was thinking some more and realized the list of predefined brush tips could be moved to the right and shown/hidden like the curve options for the sliders. it would make room for a large preview of the selected brush tip on the left, similar to the preview for auto brush tips. (example: https://i.imgur.com/fSre1OO.png)

also, i realized this design (3-4 tabs of controls depending on brush engine, several controls per tab, controls can be expanded to edit in detail) could actually be modified to fit in a docker quite nicely:







(link to images in case embedding doesn't work: https://imgur.com/a/rni08)

thoughts? is making the brush editor a docker a good thing? etc.

I like these mockups so far. I like Krita's brush editor because all settings are at the distance of one click. You make it even better.
Docker is good too, but it should be alternative to editor, not replacement.

There is a few things that I'd like to see (or discuss):

1) I see a little icon to turn on\off pen sensors, I'd be nice to add similar button to turn on\off the setting itself, for things like rotation, scatter, mirror, sharpen, etc. Because they works even without any sensors and with any value.

2) I'd like to see (and possibly change) opacity, flow and size on the same tab. They are, like, "core" settings and I don't think that separate them is good idea. Size and opacity, at least.

3) I think it's better to make list of pen sensors as pop-up list, as z-uo suggested. It's not frequently used. Also it'll save some vertical space.
I have one little idea about this list: by clicking on the title of some sensor this sensor will be checked and the others unchecked. To check multiple sensors shift-click or click on checkbox. With current list you must check another sensor first and only then you can disable previous one, which unintuitive and a bit frustrating.

4) About vertical space. Then I tried Krita on laptop with small resolutions screen I had a problem to inability to reach buttons on the very bottom of the brush editor. One of the solutions is move "important" things higher. Also there some space between sliders that can be cropped a bit.

5) Do we really need brush engine\preset selector? I mean it's brush editor in the first place and it isn't supposed to be tool for selecting presets. I thinks better to use that horizontal space for scratchpad (where is it, by the way?). Brush preset selector pretty handy is some situations and will be more useful then stacked brush will be implemented but I don't see the reason to keep it on the screen all the time. Make it in another tab maybe? And keep the feature brush engine -> presets with that engine. Also use this tab for stacked brush.

Thanks for the feedback! Here are my thoughts on the points you brought up:

1) checkbox to enable/disable settings themselves: That's a good point, there are a few settings like sharpness/threshold filter that should maybe have a checkbox to the left of the slider to enable/disable them entirely. This is probably something to look at on a setting by setting basis, because there's only a few settings that need it and it would be good to keep things as uncluttered as possible. Also, with a way to expand each setting, there's plenty of flexibility in what is shown, for example: just having an enable/disable checkbox (like with mirror in my example) and only showing the other relevant controls when you hit the expand setting arrow.

(Also a small note: there's no rotation setting on my mockups, rotation functionality is just a part of the angle setting.)

2) putting size/opacity/flow on the same tab: I originally had opacity and flow on the same tab as size but i moved them because of the following reasoning:

a) I needed to divide the general brush settings into two categories because there are too many to fit on one tab. Deciding how to divide them up is a little difficult because they don't fit into two specific categories.
b) There are a bunch of controls related to selecting the brush tip shape (either by choosing a predefined one or by customizing an auto generated tip). So, i decided on a tab for brush tip shape, and a tab for all the other settings (originally called "brush stroke" but now i think should just be called "general").
c) Size should go on the brush tip tab because it relates to the shape. Also, predefined brush tips each have a specific size (and sometimes spacing as well), and any settings that change depending on what predefined tip you select should be on the same tab.
d) There's a bunch more settings like fade/ratio/angle/mirror/precision that specifically relate to the brush tip, so i decided that the tab would just be too crowded with opacity and flow as well.
e) Additionally, opacity and flow aren't related to the shape of the brush tip, so they just make more sense on another tab.

But, there's no objectively correct way to divide up the brush settings, this is just my way of doing it.

3) list of pen sensors: I do like the idea of a pop up list of pen sensors, and it would save some vertical space which is good. I'm not sure that a drop down list with checkboxes is possible in qt (the framework that krita is built on), but either way i think finding a way to shrink the list of pen sensors would be good.

One possibility i just thought of: Have a list of only the currently enabled pen sensors, then have buttons to add/remove sensors from the list. The list would be short for most brushes because usually you only use one or two pen sensors at a time.

With regards to not being able to disable the current sensor without choosing another one first: personally i would fix that by just making it possible to do that, instead of requiring shift-click or having selecting one disable all the others, which seem less intuitive to me.

4) vertical space: The space between sliders could be made a bit smaller, but that might make them feel somewhat cramped, and in my second set of mockups there's still enough vertical room for a 768px screen height, so personally i think it's ok as it is.

Putting more important controls near the top was something i was thinking about when making my mockups. Basically, i wanted an intuitive flow from more general to more specific. I think my docker mockups show this pretty well. From the top it goes: brush engine selector > 4-5 tabs with broad categories (e.g. brush tip) > settings in that category > settings can be expanded to customize in detail and add pen pressure.

5) brush engine/preset selector/scratchpad: I designed my revised mockups to work with scottpetrovic's demo where the brush engine/preset selector and the scratchpad are hidable. so, the list of presets on the left could be hidden, and the scratchpad to the right that's hidden in my mockups could be shown if desired.

(confession: I personally don't find the scratchpad very useful. I would much prefer to have an automatically updating stroke preview like in photoshop/clip studio/etc, and either make the brush editor a docker or make it pinnable on top, so that i can test my brushes on the canvas itself.)

I think a brush engine selector is important because otherwise some users will get confused if they don't know there are multiple brush engines (eg. wondering why the available settings can completely change when they select a different preset). Which is why, in my docker mockups, i put the engine dropdown list and current preset at the top, so that it's clear to users that there are different brush engines, and that selecting a different one changes to a different preset.

Another reason i didn't put the engine/preset selector in another tab is because i wanted to keep the main editor window limited to only the options for customizing presets themselves (as in, only settings that are saved to the preset when you hit the "overwrite preset" button). This is also why i removed the "temporarily save tweaks to presets" and "eraser switch size" checkboxes from the main window and suggest they be put somewhere else.

stacked brushes: I now think the stacked brushes might make more sense as a "tool option": you select the freehand brush tool, then in the tool options, you have the choice of selecting multiple presets to paint with. Or perhaps there is a special brush engine for stacking and painting with other presets.

-----

Some more thoughts on making the brush editor a docker:

I like how cleanly it solves the issue of hidable preset list/scratchpad/etc. because they can just be separate dockers.

Krita already has a preset selecting docker, so we just need a scratchpad docker, which might be a useful thing to have when painting too. (and maybe we could get a stroke preview docker too plz lol)

I disagree with the docker being an alternative though. Personally, I think that having two separate editing interfaces is too much and would probably be a lot of work to maintain. If there's enough interest in making the editor a docker, then ideally the docker solution should be flexible enough that there's no need for the large editor window that we have now.

Okay, as I said I mostly agree with you. But:

2) You are reasonable and logical but I’m not sure. I think it’s the case that should be tested in real work scenario. I just want to separate settings by usability e.g. if you play with Opacity you’ll likely want to change Flow too, and less likely change something like Scatter. By this reason it’s better to move randomness and density to first tab and size to the second (just a thought).
Different people have different preferences though.

3) I realized pup-up list isn’t the best solution for fast access. I have an another idea: two columns list like yours but scrollable and sensors sorted by “popularity” (frequently used are on top, so you won’t need to scroll for most cases).
About your idea. I’m not sure I got it right, do you mean something like layer blending mode list? If so, it would be great. It you mean something else, I’m doubt it will be better than current variant.
My idea about quickly chose sensors isn’t actually related to brush mockup. I just want it to work like “click -> sensor chosen” instead of two clicks with certain order. The most common scenario is change one to another one. If you want both (very rarely) you can shift click or click on checkbox instead.

These two things above is sort of “deep usability optimizations”

4) I see you’ve done that and believe it’s compact enough even for 768px screens, there is just a couple things that can be moved such as scratchpad buttons and preset filter.

5) Yeah, I see now. Kinda ”modular preset editor”.

Scratchpad is useful for some limited scenarios, I think that’s enough to not delete it Stroke preview should be good to have, I agree.

About preset settings docker: my personal experience says that I don’t need the docker in long run. It’s good to have it then you actively experimenting with brushes\presets but current “click\hotkey to show, click outside to hide” is perfect for quick and small changes.
In Paintstorm Studio brush settings implemented as one big scrollable docker (worse than your variant imho). It was more or less fine just because there was a way to quick and easy show\hide docker so I could keep it hidden while work and keep it on the screen while experimenting. Krita doesn’t have a way to quick enable\disable dockers so it will be uncomfortable to handle, at least for me.

I have an idea though. A few more options for brush editor:
a) “Compact mode” – editor will have one column, like on your docker examples.
b) “Pin editor” – editor won’t disappear after outside click, so you could try brushes on the canvas and have quick access to settings.
c) “float mode” – so you can move editor to other place. There was a way to do such thing but I can’t find it, not sure it still here.
I think with these options editor will be flexible enough for most usercases and won’t be problem to maintain (not sure about implementing though).

Proper scratchpad docker (as well as stroke preview) would be very useful, much more useful than brush editor one. By proper scratchpad I mean area there you can paint\erase with different presets, and color picking. But I heard it tricky to implement.

There is some UI prototype for stacked brush and I think it’s really great:
https://phabricator.kde.org/M78

2) Yeah, grouping by usability was my original thought too when i had size/opacity/flow on the same tab, but now i'm kinda thinking with all the possible kinds of brushes that it isn't really possible to predict what people are going to use most. Like, inking brushes might not use opacity and flow at all for example. But i think most brushes are gonna need customizing settings on both tabs anyway so i'm not too concerned about it either way.

3) A 2 column scrollable list is basically what i was going for in my docker mockups, except i didn't sort the most used sensors at the top, which is a good idea. The other idea i had was a small scrollable list of all the currently enabled pen settings for that preset (meaning it would be empty by default). Then to the right of it would be a plus button that shows a popup with the currently disabled sensors so you can select one to add/enable, and a minus button to disable/remove the currently selected sensor from the list (meaning you wouldn't need checkboxes). I don't really know which i like better tbh.

I agree about it being a little awkward to change from one setting to another. I'm just not sure shift clicking is the best way to fix it (might be confusing to users since keyboard controls aren't immediately apparent). But yeah, these are smaller usability questions.

editor as a docker:

You make a good point about how, since krita doesn't have a quick way to hide/show dockers, it would be more clumsy for people who use that workflow.

I wonder if this could be solved like tool options, by letting the user choose whether to make the editor a docker, or a popup in the toolbar. In that case, i wonder if it's possible to make the editor cleanly shrink to one column as a docker, without needing to code two completely different designs. Like, my docker and larger editor mockups are pretty similar, the only major difference is the larger editor displays expanded settings to the right, instead of on top of the main column.

(iirc i think photoshop's editor uses the "can be shown/hidden with a button in the toolbar, but is also just a regular docker you can dock to the sides" design as well.)

Yeah, i think we're in agreement about a proper scratchpad docker. (I probably wouldn't personally use it much, but i'm sure there are plenty of users that would.) But yeah i don't know how difficult it would be to implement.

stacked brushes:

I don't know if it's just because i'm tired or what but i'm having trouble understanding all the details of how the stacked brushes mockups work. I might look at it again a bit later. I don't have any specific ideas right now for the ui, my only suggestion is that it be clearly separate from the settings for the actual brush engine. (as in, you don't even need to see the settings for the presets you're stacking.)

update after like six months lol:

i was thinking about ui design the other day, and spent a few hours looking through the krita source code. i'm going to see if i can get a really rough demo of my brush editor docker working, and maybe a stroke preview docker as well.

we'll see how it goes because i only have a little c++ experience and haven't ever worked on a large application like krita. that said, i'll update this if i get something working.

Yes, krita is pretty big, I wish you luck

There is some other mock ups in the phabricator but I think yours is the best.
You may write some notes and code here (I guess it's "official"): https://phabricator.kde.org/T4536

^ thanks. it's gonna take a while though especially since i don't have a computer to work on atm.