Harmonize the colors in the UI

Discuss suggestions and ideas for the forums, site, software.
Post Reply
User avatar
Posts: 1
Joined: Wed Nov 22, 2017 3:47 pm

Harmonize the colors in the UI

Post by yes-comment »

So I only figured out that you guys wanted to update the icons when I updated to v4.0.0. I've already posted my suggestion to the issue tracker at bug #7741 however I wanted to move the icon/looks discussion out of there because performance and under the hood bugs are way more important than some pictures with colors.

Anyway, I've given things some thought today and did another mock-up of how I think the icons could be tuned up a bit. I can't write code and I'm not a professional graphics designer but I like to tinker in photo/graphics editing and I hope you guys like the mock-up and would consider updating the looks if you do.

So anyway here are the things I did (look at the attached screenshot) going from top to bottom:

1. Toolbar:
- changed the color of the icons to 50% black, this way they are visible on both light and dark themes
- changed the little + symbols to the green used throughout the UI
- changed the "Remove" icon to an X, same red as the "Error" icon
- changed the colors on the "Resume" and "Pause" buttons, also "Pause" button uses the same icon as the one in the torrent list, only upscaled

2. Sidebar:
- completely redid all the icons and in the STATUS section, colors match the old version
- new icons are 12x12 px
- "Resumed" is a combination of Seeding/Downloading (maybe the Downloading and Seeding filters could swap places in the list so it's not upside down compared to icon)
- "Error" icons are the same in STATUS/TRACKERS
- "Warning" icon redesigned to be a bell

3. Torrent List
- changed icons and text to reflect the different statuses
- icons are 12x12 px
- inactive torrents (icons) are 50% grey, so they work with black themes

4. Status bar (on the bottom):
- changed leech/seed icons to the ones used throughout the UI
- updated the speed limiter icon

That's pretty much it, but the icons/colors would need to be updated in:
- the right-click context menu as well (color change to 50% grey for the flat ones, update the following: Delete, Limit download/upload/ratio, Copy magnet link)
- General Tab: change colors (see second attachment)
- change colors in the speed graph
- change colors (maybe update icons) that represent the connection status (next to the speed limiter icon)
- change X icons in File, Edit, Tools drop down menus
- "Tracker" icons in the sidebar
If you're going with a flat design, might as well update the progress bars in the torrent list and Content tab

I can create and export the icons to SVG if you want and would like to use them.
qbittorrent-general tab.png
Last edited by yes-comment on Wed Nov 22, 2017 4:51 pm, edited 1 time in total.
Posts: 2
Joined: Mon Sep 18, 2023 7:08 pm

Re: Harmonize the colors in the UI

Post by France25 »

Thanks for info 😊 and the advice, buddy. But as for me, to improve the user interface, I usually try to select high-quality images in order to attract as many visitors as possible to my web resource. And recently, I used trinity knot vector images for my blog and was pleased with the result. I think that sometimes this is the best way to update the design of your project.
Post Reply