Harmonize the colors in the UI
Posted: Wed Nov 22, 2017 4:44 pm
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.
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.