I redesigned GPU-Z using the Fluent Design Language

[Vayra86]

You mean like this?
View attachment 92276 View attachment 92277

DO WANT

You see that first version felt like a tabletfriendly iOS version. This right here, this is proper PCMasterRace material. Add a dragon and a sports car somewhere and it'll go viral

 

[Tsukiyomi91]

I WANT IT!!! =D Blending with Windows 10 UI minus the flashy elements is good for me.

 

[CosmicWanderer]

Just thought I would post an update to this. Last week Microsoft went into great detail about the evolution of Fluent Design in the Outlook app for Windows. One of their concepts included a colored top bar to "align more to the Outlook brand", and I thought this would be interesting to apply to the GPU-Z concept.

Gamers are typically very proud of their GPU choice, either from Team Red or Team Green, so it would be fitting for GPU-Z to reflect that in a more prominent way based on the detected GPU. There would also a blue accent (not pictured) for integrated Intel GPUs.

There are other minor changes made like moving all the function buttons to a bottom bar to keep things a little more organized, and I included the new Radeon badge.

Again, just a reminder, these are purely conceptual designs. Think Photoshop (although its actually Adobe XD)

Light Theme:

Dark Theme:

 

[OneMoar]

@W1zzard PLZ WE NEED THIS

 

[Naki]

Don't like. I like the general idea, but not the lack of indentations around each data item (label control).
Please note GPU-Z has indentations for the data labels and they aren't there just for fun, but for a reason. It looks much more readable with them.

Can you do a mockup with those?

Getting rid of checkboxes also not a good idea IMHO, and you forgot the Close button too.
Also, Hamburger icon is here, so Hamburger icon is what your mockups should use - please lose the gear icon, as W1zzard made up his mind for Settings it is that icon. This means the gear icon is highly unlikely to happen.
Magnifying glass for Lookup button is a good idea, but will likely confuse some users.

 

[Aquinus]

It's too bad that GPU-Z doesn't run web server with RESTful endpoints that describe all of the data that it has available. Everything can use HTTP and JSON.

 

[LightningJR]

Your design has improved by quite a bit. I am really liking the newest dark theme. I still don't like the large text for the tabs though.

 

[jboydgolfer]

i wonder how that will work with large or small DPI settings......

 

[T4C Fantasy]

Just thought I would post an update to this. Last week Microsoft went into great detail about the evolution of Fluent Design in the Outlook app for Windows. One of their concepts included a colored top bar to "align more to the Outlook brand", and I thought this would be interesting to apply to the GPU-Z concept.

Gamers are typically very proud of their GPU choice, either from Team Red or Team Green, so it would be fitting for GPU-Z to reflect that in a more prominent way based on the detected GPU. There would also a blue accent (not pictured) for integrated Intel GPUs.

There are other minor changes made like moving all the function buttons to a bottom bar to keep things a little more organized, and I included the new Radeon badge.

Again, just a reminder, these are purely conceptual designs. Think Photoshop (although its actually Adobe XD)

Light Theme:
View attachment 96495

Dark Theme:
View attachment 96496

Look up button should be a full button though

 

[CosmicWanderer]

Don't like. I like the general idea, but not the lack of indentations around each data item (label control).
Please note GPU-Z has indentations for the data labels and they aren't there just for fun, but for a reason. It looks much more readable with them.

Can you do a mockup with those?

Getting rid of checkboxes also not a good idea IMHO, and you forgot the Close button too.
Also, Hamburger icon is here, so Hamburger icon is what your mockups should use - please lose the gear icon, as W1zzard made up his mind for Settings it is that icon. This means the gear icon is highly unlikely to happen.
Magnifying glass for Lookup button is a good idea, but will likely confuse some users.

Indentations are nowhere to be found in the Fluent Design System. In cases where there is a congestion of text, grids and text weight are used to make text more legible as well as differentiate between headings, subheadings, and content. I could add a visible grid, which might help further. I will try this later.

Hamburger menus are reserved to consolidate tabs usually, putting settings in them is not intuitive. A settings button makes more sense. As for the magnifying glass, yeah, its the closest I could find to describe "lookup". Open to other suggestions here.

One of the challenges I was thinking about were tooltips and settings. The tooltips needed to look clean and modern, yet not too obtrusive. And I wanted settings to remain within the main window to prevent having to open multiple ones, similar to existing Fluent settings menus (see Mail & Calendar, and Microsoft Edge for examples).

Tooltips

Settings

Look up button should be a full button though

Is it a function that is clicked on regularly?

 

[T4C Fantasy]

Indentations are nowhere to be found in the Fluent Design System. In cases where there is a congestion of text, grids and text weight are used to make text more legible as well as differentiate between headings, subheadings, and content. I could add a visible grid, which might help further. I will try this later.

Hamburger menus are reserved to consolidate tabs usually, putting settings in them is not intuitive. A settings button makes more sense. As for the magnifying glass, yeah, its the closest I could find to describe "lookup". Open to other suggestions here.

One of the challenges I was thinking about were tooltips and settings. The tooltips needed to look clean and modern, yet not too obtrusive. And I wanted settings to remain within the main window to prevent having to open multiple ones, similar to existing Fluent settings menus (see Mail & Calendar, and Microsoft Edge for examples).

Tooltips
View attachment 96502

Settings
View attachment 96503


Is it a function that is clicked on regularly?

yes probably 500 times a day if not more

its also where a lot of the gpu database views come from, so making it less viewable would be killing the database

 

[OneMoar]

yes probably 500 times a day if not more

do you sleep

 

[T4C Fantasy]

do you sleep

its where most of the gpu database views come from, and thats a lot....

 

[CosmicWanderer]

yes probably 500 times a day if not more

its also where a lot of the gpu database views come from, so making it less viewable would be killing the database

Well we wouldnt want that. I will add it as a button in future mockups, probably in the space right under the badge image, or maybe add “lookup” as text next to the search icon in the bottom bar.

 

[T4C Fantasy]

Well we wouldnt that. I will add it as a button in future mockups, probably in the space right under the badge image, or maybe add “lookup” as text next to the search icon in the bottom bar.

nice

 

[Naki]

Hamburger means Settings also.
The way three dots also means those, as well as the Gear icon you used.
It is up to developers to choose between these (or some other) icons.

Not an intuition issue, please note Hamburger was chosen as it is better looking on low-res screens than Gear icon.

EDIT: Sorry, but your Settings screen is horrible. It takes half the space it could. A really bad idea, I am afraid.
Settings will be likely changed going forward. So, new ones will come/get added over time. This means cutting Settings window is not really a good idea.

 

[Toothless]

It looks good, getting better over time. When will we see a release of this?

 

[Tsukiyomi91]

if this comes as a custom skin, I would use it rather than looking at the old pre-XP era UI. Doesn't fit with Windows 10 at all.

 

[CosmicWanderer]

EDIT: Sorry, but your Settings screen is horrible. It takes half the space it could. A really bad idea, I am afraid.
Settings will be likely changed going forward. So, new ones will come/get added over time. This means cutting Settings window is not really a good idea.

Adding horizontal space won't make a difference unless a column structure is used, which wouldn't look good as the main UI also uses it. Vertical space is what's needed when more settings are added and an easy solution for that would be to make it scrollable. There just needs be subtle visual cues that hint at a scrollable interface which is easy to do, even without having to add a big ugly scrollbar.

 

[Naki]

Scrollable Settings not a good idea for this app, sorry.
IF there were tons of Settings, maybe then it would be. Currently Settings of GPU-Z are separated into tabs, so not really any need for scrolling.

 

[EzioAs]

Scrollable Settings not a good idea for this app, sorry.
IF there were tons of Settings, maybe then it would be. Currently Settings of GPU-Z are separated into tabs, so not really any need for scrolling.

I disagree in this case. It's not a bad idea to have scrollable settings if the application window can be resized.

 

[CosmicWanderer]

Scrollable Settings not a good idea for this app, sorry.
IF there were tons of Settings, maybe then it would be. Currently Settings of GPU-Z are separated into tabs, so not really any need for scrolling.

I don't see why not. Currently there are not enough settings to need it to be scrollable, so this is a non-issue. If there are more settings, then a scrollable UI is fine. The Advanced tab in the current GPU-Z is scrollable, so why not have it in settings when required in the future?

Edit: Slightly reworked settings

 

[Naki]

I disagree in this case. It's not a bad idea to have scrollable settings if the application window can be resized.

EzioAs, Fahad -- It is up to W1zzard to decide. Please note that Settings screen in current GPU-Z version is a separate window and not a tab of main window.
So, having main window resizable (namely only Sensors & Advanced tabs, actually) does not necessarily mean Settings screen should be resizable too.
IMHO Settings screen resizing/scrolling is good only for apps with tons of settings, such as web browsers, file sharing apps/etc.
GPU-Z is none of those and at least for now has much less Settings to change than Firefox or Chrome for example.

 

[btarunr]

Looking great

 

[EarthDog]

It is up to W1zzard to decide.

Indeed. That doesn't mean people are not allowed to disagree with your assertions though, Naki. the poster was responding to you, lol!