Inspiration: Improving the symmetry, viewability and aesthetics of the app

[RavenMacDaddy]

Essential changes made in the screenshot:

• Increases the space between the top section and the content below, as well as moving the top buttons further down
• The About section specifically seems to look better adjusted to the left, hence the choice
• Adjusts the button sizes depending on the amount of text, as well as the height of the buttons and text
• Reduces the space between titles and sub headers and the normal text while increasing the spacing between the sections
• Slightly adjusts the licensing text to the right to make them all align vertically
• Increases the spacing between the buttons at the top, makes things easier to distinguish and read
• Improve tab select widget

More or less all the different elements have been adjusted with the goal of more symmetry and being more aesthetic to look at - as well as easier to view and read.

I think the buttons and text for the sections at the top could do with being enlarged as well.

This is meant as ideas and inspiration for improving the project.

[marticliment]

Yes, it looks definitely better. At the moment i'm having exams week at school so I need to study, but i'll try to do this asap (just like the two other issues)

[RavenMacDaddy]

It's not your job - you do what you feel like doing, when you feel like it.

With that said, I appreciate your drive.

[RavenMacDaddy]

The tight buttons at the top visible in the build published in issue #21 gave me an idea, check this screenshot:

So instead of spread out buttons, the sections are separated by simple lines, and the corresponding selected/active section ought to be lit up both for clarity and in terms of aesthetic design.

Notice how the lines that separate them have been placed to be somewhat in the middle between each one - although it's all just a fast mockup for inspiration.

Personally I like this design more and more as I look at it.

[marticliment]

This might be difficult, but the final result is worth the time.

You know, it is amazing to work with someone that gives ideas, because there are lots of things I wouldn't have thought of. I really appreciate the effort you are putting here, without waiting for any reward or something. Thank you a lot, mate :)

[RavenMacDaddy]

My pleasure, and likewise - I think we complement each other very well.

[RavenMacDaddy]

For reference on how the buttons could be lit up:

[marticliment]

The tight buttons at the top visible in the build published in issue #21 gave me an idea, check this screenshot:

So instead of spread out buttons, the sections are separated by simple lines, and the corresponding selected/active section ought to be lit up both for clarity and in terms of aesthetic design.

Notice how the lines that separate them have been placed to be somewhat in the middle between each one - although it's all just a fast mockup for inspiration.

Personally I like this design more and more as I look at it.

What about something like this?

[marticliment]

Final Result:

[RavenMacDaddy]

1. I personally find that buttons should be proportionate to the amount of text and its size.

I get what you're going for making everything spread across in the middle, it just looks a little weird when the text is so small and short while the buttons are very wide.

Making the text clickable "links" (just blue text that's gets underlined upon hovering) is a possible alternative.

In either case I would make Add/remove extra buckets stuff align to the left with the rest in terms of visual design, but also to make additions for other package managers in the future easy as well.

Think of it as a list of items to the left, actually as it was in the beginning now that I look.

There just needs to be a little space inbetween the options for different package managers to make things distinguishable, for example Scoop is one section, Chocolatey is one section, etc.

2. The top is a lot better, but to clarify what I envisioned myself was more in line with what was illustrated;

The sections are simply separated by lines, and the active one is lit up, akin to the other screenshot from the Windows 11 context menu - it's the same rounded shape just inside the respective area, in a lighter shade; highlighting to indicate what's selected (for example with the mouse hovering).

Actually it's exactly like the context menus you created for right-clicking apps in the list, just vertical lines instead of horizontal, being sections on the horizontal plane, illustrated higher up in this thread in my respective post.

Frankly what was created instead is probably better, being bigger buttons without outlines and all.

3. Finally I notice the 'Unlicense' text being slightly to the right making it not vertically in line with the rest.

---

With that said, this is a definite improvement, and you've done a great job.