Krita UI Redesign

I just copied and edited the Krita source files for most of the mockup icons; most of them had to be converted to paths first though, which was a pain.

An aside; if we’re going to have coloured icons, they might need to be converted to paths. That’s just the impression I got from the Blender discussion threads, so I could be wrong :grimacing:.

1 Like

where are the icons located? I was looking around and I am not finding them.
it would speed me quite a bit instead of doing all from scratch again.
I only found the touch docker icons.

1 Like

I downloaded them here.

The link was already posted here a few days ago :sweat_smile:.

2 Likes

oh shoot I missed it somehow… >.<

thank you. I really thought they were in the installation files somewhere like in inkscape.

1 Like

All good, and same here :laughing: I spent too much time in the file explorer before I got pointed in the right direction!

That’s a nice mockup, and it has me thinking, could the same idea be applied to a vertical sidebar? As in the Blender-esque sidebar that I designed in my mockup :thinking:. Good ideas!

1 Like

Hey thanks ! :hugs:

Grum999

2 Likes

One icon that has been missing for a while is the python icon especially on the windows version.
what do I do after I finish like a icon or something? do I upload it somewhere?
python

3 Likes

I wouldn’t know to be honest, considering it is just one icon, a question for @tiar perhaps?

I’m not too clued in on how icons are submitted and reviewed anyway, I assume the same icons have been inside Krita for a while now, without much need to change or add to.

But I see the value in adding this icon, it would fit in well with the Python Plugin Manager under ‘Configure Krita’

1 Like

I am unsure how we should proceed to accept icons, as the thing is that before we’d accept merge requests, but a whole merge request for a single icon might be a little much??? I’m unsure…

Anyhow, just an FYI, we use the breeze icons for everything that we don’t ourselves make a unique icon for, so do check that repository first, I’d be afraid you’d duplicate work otherwise :slight_smile:

… Maybe we should ask the kde visual design group how they handle merge requests for artists…

3 Likes

I think a merge request for icons would be fine. We would need a light and a dark version, in svg format.

5 Likes

okays. since it is a merge request I will continue making some more icons around to see what I can do to try and make it worthwhile.

2 Likes

Great thread fullerhill_art!! Glad to see more people discussing Krita’s UI! :grin:

I have been busy with school so I have had an unfinished Krita UI mockup lying around some time with changes I would love to see. But now that I have more time and with this fantastic thread, I feel it is the perfect opportunity to finish it up and share it!

The ideas I propose is not a total redesign or a large change in how Krita functions, but how I think some small visual tweaks can greatly improve and modernize the look of Krita, while making the program clearer.
(They are aimed at the current interface, not the beautiful mockups people have shared!)

  1. Visually separate the dockers

Sometimes the dockers blend into each other. It seems like a long list of options instead of different customizable “windows” for different uses. Even though I have good control over my dockers, and they work fantastically, in my head they look a bit overwhelming.

I suggest separating them. This makes it easier to understand at a glance, and keeps things sorted!

Before:


After:

  1. Make the tabs slimmer

Me, and a lot of other people seem to change to “Subwindows” just to avoid having those large tabs. They take up so much space, especially on small screens. In my opinion they should be slim by default, and there should be a setting to make them “Touch Friendly”

I wrote more about it here: Option for thinner document tabs

It is also hard to see what document you have active, as they are too similar in colour. I suggest having the inactive document displayed in a darker colour.

Before:


After:

  1. Remove that dang line

It is a very tiny thing, literally the width of 1 pixel, but I cannot seem to ignore it. It is super sharp, and eye catching and messes the header look noisy and messy. It is so light compared to the (often) dark UI, and creates unnecessary contrast.

From the very first time I opened the program (and I genuinely love Krita insane amounts) I have always looked at it and had a strong dislike for the line. I want it gone. If an update came to Krita with the only new feature being the removal of that line, I would be extremely happy and consider it a fantastic update.

Before:

After:

Thanks to wojtryb for bumping it earlier in this thread! I am deeply passionate about that dang line! :smile:

  1. Modernizing the look of the tabs, while making them clearer

This is mostly personal preference, but I think the current tabs looks dated. I would like to see them updated! Also it is a bit hard to distinguish what tab is active, since they are so similar in colour. I suggest making them simpler, and make it so the active one stands out from the others. If there are a lot of tabs and the names gets cut off, I think it should be swapped with icons, like on fullerhill’s mockup!

Before:
image

After:
image

  1. Update the icons

This is mostly aimed at the docker buttons for closing and undocking. They look samey, and the icons inside the “squircle” are so small they just look a bit like noise. I suggest removing the squirlces and keeping it simple, whit an X and a “window” button. In my opinion, it looks nicer, it is more readable, easier to click, and people are accustomed to what the X and Two squares mean.

I have seen Linux builds of Krita having some great looking icons on the docker! I am very jealous! I want the program to look as beautiful on my devices as they do on Linux!

There are also some other icons like these I feel need to be changed at some point: Replacing the zoom and rotate cursor with new icons

Before:
image
After:
image

  1. Add some space around the Advanced Color Selector

Tangents in design are very eye catching, and an interface in a drawing program should be as pleasing and calm to the eyes as possible, since you do not want your gaze to travel away from what you are drawing. The docker looks a bit claustrophobic in my opinion, because of the tangents, and I think a little space does wonders! It does not need to be much, just a little bit!

Before:
image

After:
image

Here is the final Before/After, with all of the changes combined

Before:

After:

If all of Krita gets small treatments like this, I think it will turn out absolutely fantastic! Thank you for reading!

@fullerhill_art On your mockup you have already solved a lot of the things that I have touched upon! And a lot of your suggestions like workspaces as tabs are wonderful! I have enjoyed seeing your designs! :grin: Keep up the great work man!

Edit: tapatilorenzo pointed out to me that the underlined characters on the tab names were missing, I totally forgot to add them back in the mockup! I would like them to stay, even though they are missing in the mockup. Thanks for pointing it out! :blush:

18 Likes

Agreed on the slimmer tabs and removing “that dang line”.

Note that while tabs look nicer without underlines, that’s part of functionality: pressing the underlined character focuses the tab. It’s called a keytip. Someone probably cares about it.

Thanks for +1’ing the docker contrast. (People asked me about it and I didn’t respond on it, whoops!) Krita could really use it.

3 Likes

Thank you! :blush:
Oh yeah the underline function in the tabs are nice, I just forgot to add them back! :sweat_smile:Thank you for pointing it out!
Yeah, docker contrast would be great indeed! :smile: I think a lot of people get overwhelmed the first time they open Krita, since it looks almost like a big “list” as it is now

2 Likes

A feature I would love to be implemented into Krita one day is a dockable brush editor. But I know docker version of the brush editor would have to be redesigned though because it would be too big to fit into any space.

@Rakurri I love the flatter design in your mockup!

4 Likes

Yeah I would love that too! Even though it might be too big to sensibly be docked to the sides for instance, just having it as a floating docker or having it on another screen would be amazing! Having it always open on another screen is something that would speed up brush creation a lot! :grin:

Thank you! :blush:

2 Likes

just having it as a floating docker or having it on another screen would be amazing

That would be nice for me too as someone with dual monitors.

2 Likes

All the mockups are nice and everything, but I’m afraid they’re meaningless if you don’t figure out a practical way to tweak Qt’s style.
Like, all you can do with the Fusion style is tweak a few colors, that’s it.

If you apply a Style Sheet you basically lose the original look and need to define each element from scratch. And then there’s a couple custom widgets in Krita that use the style engine directly, which will probably cause issues too…

The Breeze style on KDE is more “modern” flat looking, doesn’t feature “that dang line” and gives a bit more contrast on a few things, but also is a bit bulkier.

Unfortunately, Breeze is a Qt plugin that depends on KDE which in turn depends on Qt, which means it’s not practical to ship it with appimages, and I’m not even sure it can be compiled for other platforms than Linux.

But I just stumbled across this, a Breeze imitation in Style Sheets:

About the document tabs, they are very stubborn on its own, while you can get hold of the QTabBar object with a dirty trick, it refuses most customizations, neither auto-hide nor disable expanding to full width work :frowning:

3 Likes

This looks awesome! Thanks for the mockup and ideas, I definitely think flattening the workspace and removing unnecessary lines looks much better! And the intent for beginner users is good :wink:.

That would be good, I know @RamonM proposed that idea a while ago too!
It would definitely take time.

Nice find! Looks like an interesting read for sure. I wonder if it would work in Krita :thinking:.

Thanks for the awesome discussions guys!

2 Likes

that is basically everything I hate about everything Qt. But there should be a way I think Qt is meant to be plastic, I have seen so many different UIs with Qt.

3 Likes