nate-xyz / paleta

Extract the dominant colors from any image.
https://beta.flathub.org/apps/io.github.nate_xyz.Paleta
GNU General Public License v3.0
100 stars 14 forks source link

Design improvements #11

Open bragefuglseth opened 1 year ago

bragefuglseth commented 1 year ago

Hi! The current UI of Paleta is pretty good, but it has some weak points:

Based on this, I have created a mockup with some design suggestions. I haven't reinvented the wheel, as the sidebar is a really good layout solution, but it has received style changes. I have given the image view some padding to make the it feel more airy.

The biggest design change is probably how the palettes are stored for later. Instead of a separate section with the ability to create custom palettes from scratch and name, this design uses a bookmarking function. This is more in the scope of the app, as the main use case for saving a palette would be to quickly store it for later. Naming, categorizing and editing palettes is a use case that deserves its own app.

I realize that the changes I suggest are really big, but they don't necessarily need to be implemented all at once. If you think some of them are unnecessary / out of scope for the app, you can just implement the things you like. These are just suggestions, after all :smiley:

paleta-design-improvements

bragefuglseth commented 1 year ago

Here's the editable mockup SVG, just in case. I recommend to open it in Inkscape if you want to inspect it. You'll need to have the Cantarell typeface installed on your system for it to display properly.

paleta-design-improvements

tfuxu commented 1 year ago

That's a pretty good mockup. I totally agree that the initial state screen looks empty and would look much better with a colored Paleta logo. I also like the proposed ability of choosing different color formats, but I think it would be better if they were put in preferences window instead.

I would also like to address some points that I don't fully agree with:

The main view feels a little clunky/cluttered, and a little out-of-place among other GNOME apps.

I don't know, it feels pretty GNOMEy to me and not at all cluttered, but I also like that idea with color tiles. They could be implemented neatly with a grid box for example.

It feels like the app tries to be both a color extractor and palette manager at the same time. Paleta would benefit from focusing on color extracting, which is its core functionality.

Why not have the best of both worlds? Paleta could be a very good tool at extracting colors from your photo and at managing palettes for you, this means that you wouldn't need to go to the another application after generating a palette in Paleta, and copy your palette set color by color to another palette management program. You could just generate palette, save it directly in Paleta, go do something, return to your workspace, fire up your graphics editor of choice, and directly export palette set from Paleta to the editor.

Of course, this is just my opinion, and I think that if author would want to go with simplifying Paleta's UI, your idea with moving palettes to sidebar would be very good.

bragefuglseth commented 1 year ago

I don't know, it feels pretty GNOMEy for me and not at all cluttered

The general layout is fine, I was talking more about smaller aesthetic details. "Cluttered" was probably the wrong word to use, it just feels like the interface has some rough edges. As an example, Adwaita has a special widget for action rows with dropdown menus, and Paleta doesn't seem to utilize that.

Screenshot from 2023-02-11 00-06-34

The options and palette sections in the sidebar don't currently have group headers, which I have added in the mockup ("Options" and "Palette"). Things like that make it feel more neatly organized, even though nothing has really changed layout-wise :)

Another thing that makes it feel a little more tidy is giving the image view a little padding, no matter how large the picture is. The slight border-radius makes any image feel a little more at home in the UI. It's the small details like these that add extra quality to apps!

Screenshot from 2023-02-11 00-15-20

Why not have the best of both worlds? Paleta could be a very good tool at extracting colors from your photo and at managing palettes for you

This probably comes down to personal preference, but I think it's smart to treat the app as a simple utility instead of a full application suite for working with colors. A lot of potential users probably don't want or need to save, manipulate and organize palettes in this way. A simple bookmarks solution instead of a full-fledged palette manager is better in this case, since the user just wants to quickly store away some palettes for later use in a project, without the hassle of naming things, moving to an entirely separate full-screen view to access it and being "overwhelmed" with buttons. Having the palette manager as a separate app allows for modularity, if a user wants to manage their palettes in addition to extracting colors, they can download a stand-alone palette manager.

As an alternative to the integrated palette management system, maybe we instead could make it easy to export the palette in different formats (SVG, GIMP Palette, plain text and such)? Then the user could use their palette manager of choice, or just put the palette straight into their application. We could enable one-click exporting of the currently generated palette and any of the bookmarked ones.

This isn't my app, though, if the developer wants this specific kind of integrated experience, they are of course free to do so. The app is extremely useful regardless. It could potentially harm the potential of inclusion in GNOME Circle, as they are pretty strict on design, but it's more important to create the app you actually want to than following someone else's design criteria :)

bragefuglseth commented 1 year ago

I also like the proposed ability of choosing different color formats, but I think it would be better if they were put in preferences window instead.

If the app gains enough preferences to justify a preferences window, I agree that we should do this. However, color format is currently the only application-level preference, so having a window for it would be overkill. This is also something a designer might want to change frequently, as some codebases require RGB formatting while a graphics application might only accept hex input. I borrowed the design pattern from GNOME Weather, which uses it for temperature units:

Screenshot from 2023-02-11 00-20-04

tfuxu commented 1 year ago

You convinced me even more to your main view idea :) I hadn't noticed those group headers, but they definitely make the interface more tidy, it has more space thanks to them. I'm also in love with those color tiles, they will look really nice if implemented. And this border radius for image also makes everything look better.

About palettes management, I always thought about an application suite like a set of apps that are from the same category (like office, communication, multimedia) but aren't really as much related. The examples would be LibreOffice, Mozilla Suite, VLC, e.g. But when it comes to a single specific need, I do believe (but not in all cases) that it could be just convenient for the end user to have those features in one app.

I do believe that putting both palette creation + palette management concepts into one app is what really makes Paleta a tool instead of another small utility (I have nothing against utilities, but there are many of those in GNOME ecosystem, whereas there are much less proper tools).

Having palette management as a separate app would allow for more modularity, if such an app would support export formats that Paleta supports. If not, there could be an argument made that we could just copy colors by their hex values, but that would make the whole experience a lot less convenient. Also as a side note, I had an difficulty finding any apps made to manage color palettes, I only found an Pastel, but it is an Mac app.

I think that instead of removing palette management, it could be redesigned to make it less overwhelming, maybe by using compact palette set tiles (four most dominant colors as a square).

Also, I agree, if different color formats selection will be the only preference in Paleta when it will be implemented, it would definitely be a better idea to just put it in menu. Preferences with only one option would look quite empty ngl.

Well, the final verdict is up to dev, but I think we both made very good points about potential new designs, which will probably change how Paleta will look in the future.

bragefuglseth commented 1 year ago

Having palette management as a separate app would allow for more modularity, if such an app would support export formats that Paleta supports.

If that doesn’t exist, it could probably be made with some of the code Paleta already has! Or we could collaborate with the existing ones and ask them to add support for it if they haven’t already.

When we’re first at it, here’s a crazy idea: We could take it even further, and try to make the apps work seamlessly together with similar interfaces for displaying colors. Imagine being able to drag and drop the palette from Paleta into your palette manager! This common «GNOME color ecosystem» would be a heaven for designers, and maybe even attract more people to GNOME just because of the convenience!

Here are some GNOME palette managers (partly to answer your question about not finding them):

Other color-related apps:

I see some great opportunities for collaboration here!

bragefuglseth commented 1 year ago

Well, the final verdict is up to dev, but I think we both made very good points about potential new designs, which will probably change how Paleta will look in the future.

Yeah, our discussion has hopefully been helpful to n :)

tfuxu commented 1 year ago

If that doesn’t exist, it could probably be made with some of the code Paleta already has!

That's true. If dev would want, he could create a seperate app that would support all of the export options Paleta (will) support and make it just drag-n-drop to copy whole palette to that app.

Or we could collaborate with the existing ones and ask them to add support for it if they haven’t already.

That's also a good point.

Here are some GNOME palette managers (partly to answer your question about not finding them):

Oh, so there are some? That's a shame that they don't promote them more! But good to see they exist.

We could take it even further, and try to make the apps work seamlessly together with similar interfaces for displaying colors. Imagine being able to drag and drop the palette from Paleta into your palette manager!

That would be sick!

I think that Paleta needs to somewhat mature (at least exist for more than a month) before it starts to conquer art & design side of GNOME ecosystem, but after that, I see a big potential in it and in creating an inter-connected ecosystem of other apps like that.

bragefuglseth commented 1 year ago

If the palette manager is kept like it is now / Paleta expands its scope to becoming a general-purpose app for everything related to palettes, I can help with design. I really think there’s something to the simplicity of just doing one thing excellently, though.

nate-xyz commented 1 year ago

Great discussion guys, you've given me a lot to consider. I'm not sold on changing the scope of the app (in either direction), but I will definitely be incorporating elements of brage's redesign soon.