Concerning Website Redesign

[OmegaAOL]

The website shouldn't be redesigned drastically because this is the most functional version of the site; many of the mock-ups that have been posted are designed to look aesthetically pleasing but either diminish compatibility with all screen sizes and browsers, or dumbdown the existing website by removing features. The current website is not the most beautiful - but fast, well-coded, and functional.

A suggestion as to what to do with the website is to refine it, not redesign it. Examples:

• The header logo image with the glossy wordmark and the 3D dragon's egg [https://www.qbittorrent.org/img/qb_banner.webp] could be replaced with the logo and a simple "qBitTorrent" wordmark in the same font of the logo. The drab blue could also become a lighter, more vivid shade of blue.
• The main color of the site could be changed from blue to a toggle of white or very dark grey, for light and dark modes.
• The website could be optimized for larger screens (stretch content across screen) without removing its usability for smaller screens.
• Color scheme could be implemented better. For example take all the OS logos from the site and change their hue to the same vivid blue in Photoshop or GIMP. Suggestions: vivid blue, drabber blue, blue-white, white, grey, dark grey, black.
• Add an "About" subsection (instead of the main page being About). The main page could host screenshots of qBitTorrent and a download button which automatically detects the client operating system.
• Basically tinker with the style, but the site itself change minimally.

An example of bad redesigning is the uTorrent client. Since its buying-out from version 2.04, it has declined, becoming slow, using "modern" buttons and non-native UI elements that slow it down and break its compatibility.

[OmegaAOL]

Edited using Devtools. I can also make a pull request/edit the website source code to look like this if there is interest from a project maintainer. Remember this is extremely easy to implement and has basically no drawbacks compared to the current version.

Bonuses (vs. original site):
Works properly with dark mode extensions and other website-tweakers
Easier to navigate for people with eyesight disabilities
Loads faster on slower internet speeds or older hardware/software
Looks more modern without sacrificing usability or documentation
Works better on older browsers (pre-2005)
Images load properly on browsers pre-2014 because of PNG usage instead of WebP

[PhilippBaranovskiy]

This is the best option from my perspective.
Thanks for doing this all for a preview in dev tools. This looks very well.
I vote for way of refreshing rather than redesigning, and for this option.

In case we go in this direction, I would join the team and polish typography.

[OmegaAOL]

@sledgehammer999 @Chocobo1 I feel that the website redesign is a priority. The last time this was really discussed was 2017, over 5 years ago. Nowadays, many people looking for qBitTorrent actually don't end up downloading it, just because of the site:

https://old.reddit.com/r/qBittorrent/comments/lj4x82/how_do_i_download/
https://old.reddit.com/r/torrents/comments/50vco0/is_this_the_real_qbittorrent_download_link/
https://old.reddit.com/r/qBittorrent/comments/kcwu5b/whats_the_official_download_link/
https://old.reddit.com/r/qBittorrent/comments/zadhqz/qbittorrents_website_is_garbage/

And this is just Reddit, where you would think people are more educated. This goes to show that the website looking the way it does is a real problem that drives off new users.

In this day and age somebody who knew what to look for would trust the site but many newbies will think that the website is suspect because it is poorly designed. An old website designed by a team or a graphic designer 10-12 years ago will hold up today, as will a poorly designed but modern-looking site; however, the qBitTorrent website is both old and badly designed, so potential users are considering other options.

More issues: as you can see, the main download hyperlink goes to the FossHUB repo, which is less than ideal for a newbie. I am sure you could host the latest releases on the site itself, forgoing SourceForge. You could always add two additional hyperlinks to go to the repos.

Even more issues: the site has been patched up, never addressed, over the years. As an example, clicking "Screenshots" takes you to an outdated SourceForge link which redirects to the main repo. What good is that? Make a page on the site displaying screenshots. At this point the site has become an index. Nothing is actually hosted there; it is simply a collection of hyperlinks that lead to SourceForge, FossHUB, or GitHub.

[OmegaAOL]

Some modification. This is not in Devtools but rather modifying the website source code. I will make a pull request after my modifications work for all the subpages.

This also has a unique benefit that no other mockup has aesthetically - its simplistic design enables easy dark mode using Dark Reader. All 4 Dark Reader modes work properly. (Filter, Filter+, Static, and Dynamic) The current/original website (qBitTorrent.org) only supports true dark mode with Static and even that is pretty broken/bugged.

[OmegaAOL]

@sledgehammer999 @Chocobo1 This will be my last reply to this thread. Please read it and tell me your thoughts so I could make a pull request. I thought of making one in advance but I had figured by the time you replied it would be out-of-date.

Please tell me if you wish for me to make a pull request. I am sure that this way of doing things has no downsides: even screen-scrapers and CSS styles written for the old website would work with the new website (because of same base code and class names). This, unlike other suggestions, simply modifies existing code.

Speed: The new website is very slightly faster because of less content.
Accessibility: Supports dark mode, dark readers, and high contrast themes better than the old site.
Usability: The same, since all the base code is unchanged.
Backwards-compatibility: Should work with any CSS themes or screen-scrapers that use CSS classes / HTML IDs to distinguish elements. Has a higher chance of rendering using very old browsers (IE6, anyone?)
Aesthetics: Other than the fine folks at r/Skeuomorphism, I think everyone would agree that this looks better. On second thought, the old website is so badly designed in terms of stylesheets (no offense) that even r/Skeuomorphism would prefer the new one.

Could not agree more.

[jermanuts]

Looks great, also #218

qbittorrent website definitely needs a new redesign!

https://briarproject.org/ recently redesigned their site.

[andiricum2]

something like this?

[jermanuts]

Looks great too!

qbittorrent largest competitor has a very well designed website https://transmissionbt.com

[xickoh]

something like this?

I really love this.
If this gets approved, I volunteer to implement it. Please let me know if I can proceed with it, it will be my first open source contribution and it will be a pleasure to support the project

[felixqueisler]

Is the maintainer of the website not checking this git?

[rumplin]

I went blind, by just viewing your preview images. Before you do anything, make the site read if dark mode is used by the OS.