The Great Modern UI Debate Thread

[Michael Scrip]

HM, generally I don't really like things living in the title bar, but I may go back and toy with the idea.

I was just noticing a lot of empty space up there:

 

 

It's really noticeable when both bars are the same color.

 

But overall a beautiful concept!

[DeadEndAccount]

I was just noticing a lot of empty space up there:

 

 

It's really noticeable when both bars are the same color.

 

But overall a beautiful concept!

 

True, combine the top and menu bar (the one with the hamburger menu) into a single one and it would do the trick.

[Dot Matrix]

True, combine the top and menu bar (the one with the hamburger menu) into a single one and it would do the trick.

 

Okay, here we go... I got the Ribbon UI finished. (Please, nothing about the icons. They are placeholders, obvs. I don't have the time of day to draw out all new icons.) I abandoned the thought of the icons taking on the custom highlight theme for either white or black icons/text based on user color preferences. All the icons currently on the Ribbon in build 9926 are there. No functionality is lost. I've increased the white space in the Ribbon to what I feel is a more acceptable layout, rather than shoving everything so close together, there's no way to tell what is what without needing a closer look.   

 

It seems the custom color I have selected for the mockup isn't that popular. Well, just imagine your favorite color there. Personally, I like the "Metro Green".

 

I have two versions of the Black theme to show here. First, is the traditional layout...

 

 

 

Second, is a new horizontal scrolling layout, inspired by the Start Screen and designed for tablet users (Invoked by tablet mode, automatically), or by those who prefer the new horizontal layout of Metro/Modern.

 

[Ian S.]

Okay, here we go... I got the Ribbon UI finished. (Please, nothing about the icons. They are placeholders, obvs. I don't have the time of day to draw out all new icons.) I abandoned the thought of the icons taking on the custom highlight theme for either white or black icons/text based on user color preferences. All the icons currently on the Ribbon in build 9926 are there. No functionality is lost.  

 

It seems the custom color I have selected for the mockup isn't that popular. Well, just imagine your favorite color there. Personally, I like the "Metro Green".

 

I have two versions of the Black theme to show here. First, is the traditional layout...

 

 

 

Second, is a new horizontal scrolling layout, inspired by the Start Screen and designed for tablet users (Invoked by tablet mode, automatically), or by those who prefer the new horizontal layout of Metro/Modern.

 

what if there was an option to put the navigation pane into the ribbon? BTW, what software are you using to make these concepts?

[Dot Matrix]

what if there was an option to put the navigation pane into the ribbon? BTW, what software are you using to make these concepts?

You're limited in space for navigation with the Ribbon. TBH, I'm thinking of removing it all together in favor of using the Breadcrumb toolbar for main navigation, but I know people would cry foul over that.

 

I'm using Paint.Net 4.0.5 to create these mockups.

[Dot Matrix]

New render:

 

[Dot Matrix]

New new render!

 

[+Random Stranger Subscriber¹]

New new render!

 

 

 

this looks awesome.    why cannot MS with all the money they have, hire a competent designer!    so many people (even in neowin) can do better designs.   

[Dot Matrix]

this looks awesome.    why cannot MS with all the money they have, hire a competent designer!    so many people (even in neowin) can do better designs.   

Thank you!

 

 

I added some finishing touches:

 

Dark:

 

Light:

 

With the About flyout:

[+Random Stranger Subscriber¹]

Thank you!

 

 

 

if microsoft offered anything close to that,  i would be happy and this threads would not happen.

too bad they are really bad at it.

[Chris123NT]

Wow, DM that looks really nice, much more elegant than anything MS is capable of coming up with I fear.

[Dot Matrix]

Mobile:

 

Mobile with expanded 'mini' Ribbon:

[Dot Matrix]

if microsoft offered anything close to that,  i would be happy and this threads would not happen.

too bad they are really bad at it.

I wouldn't say they're bad at it. I really feel as if Windows 8 development fell to a bunch of bureaucratic BS. As much as I enjoy it, it really is incomplete. Microsoft is hard at work with a new development process that wasn't present in Windows 8. I genuinely feel that things will be different by RTM.

[indospot Veteran]

Oh wow, Dot, that is a really cool concept. I'm assuming all that green uses your theme color, right?

[Dot Matrix]

Oh wow, Dot, that is a really cool concept. I'm assuming all that green uses your theme color, right?

Yep! Since very few found the green pleasing to look at, here's another shot, this time with a neutral blue theme.

 

[Jarrichvdv]

Anyone who judges the current builds by their UX/UI, apparently doesn't understand the word 'Technical'.

UI always comes last in the development process.

[Chris123NT]

Anyone who judges the current builds by their UX/UI, apparently doesn't understand the word 'Technical'.

UI always comes last in the development process.

This is true, however offering UI based feedback early is essential in getting things changed before it's too late.  Hence why I honestly think the icon rage is warranted.  MS clearly didn't want anyone to see those icons yet, but the leaks foiled that, but why pay designers to make icons if you're not intending on them being in the final product?

[Ian S.]

Dot, if you use this blue, it will be nicer, also remove the dark grey around the breadcrumb:

 

 

https://onedrive.live.com/?cid=141B95E2677204F2&id=141B95E2677204F2%21224899&v=3&authkey=%21AGE7SNRLhdkwpbM

[indospot Veteran]

@Dot: Well, I do use green for my accent and theme colors on all my devices, but I felt like it was too much. I think maybe a grey-ish (black for the dark theme) ribbon with colored icons and text could work better? Did you try that?

[rfirth]

Since we're on the topic of concepts... here is my Project Spartan concept... which I have actually implemented with WinRT/XAML/C#...

 

The best feature in my version is that I scan the webpage for the dominant color in the top 10% of the page, and use that color in the title bar. So, as you can see from my picture, dark gray is the dominant color in the toolbar at the top of Bing search, so I choose that color. (That's why the text is a little difficult to read on the other tabs... black on dark gray... I'll fix that) It's not matching the color around the minimize/maximize/close buttons because I just haven't gotten around to that part yet.

 

It's a fully working prototype, so it's something I can release on the Windows Store. But I'm going to add a settings page first.

 

 

[Ian S.]

Since we're on the topic of concepts... here is my Project Spartan concept... which I have actually implemented with WinRT/XAML/C#...

 

The best feature in my version is that I scan the webpage for the dominant color in the top 10% of the page, and use that color in the title bar. So, as you can see from my picture, dark gray is the dominant color in the toolbar at the top of Bing search, so I choose that color. (That's why the text is a little difficult to read on the other tabs... black on dark gray... I'll fix that) It's not matching the color around the minimize/maximize/close buttons because I just haven't gotten around to that part yet.

 

It's a fully working prototype, so it's something I can release on the Windows Store. But I'm going to add a settings page first.

 

 

Whoa it works? That's cool... so you can call it Spartan Concept Preview or something...

[Dot Matrix]

This is true, however offering UI based feedback early is essential in getting things changed before it's too late.  Hence why I honestly think the icon rage is warranted.  MS clearly didn't want anyone to see those icons yet, but the leaks foiled that, but why pay designers to make icons if you're not intending on them being in the final product?

I'm tired of all this "icon rage" tbh. Microsoft gets it. The icons suck. They've heard this over and over by now, it's time to move on to a new topic.

 

Dot, if you use this blue, it will be nicer, also remove the dark grey around the breadcrumb:

 

 

https://onedrive.live.com/?cid=141B95E2677204F2&id=141B95E2677204F2%21224899&v=3&authkey=%21AGE7SNRLhdkwpbM

Hate to ask, but am I looking at a Windows mockup, or an iOS screenshot? Quite ugly.

 

The colors in my mockups aren't hardcoded, they can be changed and set by the user as they can in Windows 7 and Windows 8.

 

I'm not sure about removing the dark grey, as I feel it prevents the UI from becoming whitewashed. I'll toy with the idea, though.

 

@Dot: Well, I do use green for my accent and theme colors on all my devices, but I felt like it was too much. I think maybe a grey-ish (black for the dark theme) ribbon with colored icons and text could work better? Did you try that?

I haven't tried setting a separate ribbon color. I pretty much have the titlebar merged with the ribbon.

[Jarrichvdv]

 

Hate to ask, but am I looking at a Windows mockup, or an iOS screenshot? Quite ugly.

 

I certainly wouldn't call it ugly, but it's just not Modern UI so it won't really fit.

[Ian S.]

Should Microsoft keep the round user "tile"?

[Ian W]

Should Microsoft keep the round user "tile"?

I don't know why it was added to begin with. It doesn't match the rest of the UI at all.