Microsoft-ui-xaml: Logo Re-Design and Swag

[SavoySchuler]

[Update 10/18/19] We have a new logo and new swag!

Hello, wonderful community! A huge thanks to all of you for driving this home. We really wanted to create something that combined all the favorite work that everyone put in here. We believe this does that.

Let's debrief

We have the old Xaml logo here:

When @itsmichaelwest breathes fresh life into history, you get something wonderful:

From there, we turned to the community. After (nearly) another hundred submissions exploring re-colorization and styling, we fell in love with this simple, yet elegant twist to self-contain the brackets. As @embender put it, paraphrased, "I like the different heights on the brackets. It makes it a little abstract - paints some art onto the science," which is what UI coalesces to - art and science rolled into one."

As for the color - our user community spoke and demanded something that still "felt like Windows." @mdtauk made it easy to imagine this familiar blue representing our community once more:

Of course, in this brief summary, I am abridged the ~300 interactions from nearly 40 contributors here and volumes more on Twitter and offline. The short story is this: We couldn't have done this without all of you, and I hope you all see a little bit of your work and your story reflect in what we've created together. It somehow looks modern and retro at the same time, hip and yet also historical, precise and asymmetrical. It’s a bit of a conversation piece, and that’s by design. 😊

Looking forward

Considering how diverse this collaborative effort was and all the colorful variations we saw, how could we not keep things lively with all the ideas you've given us? We are excited to be experimental with the colors and theme. Keep an eye on Twitter as we share fun design work and try to come up with celebratory month, holiday, and release themed variants to share! 😊

We are also going to start iterating on exciting swag designs. Make sure to stop by our booth at Microsoft Ignite to pick up one of these stickers below!

We have swag to share!

Community Team, I heard you loud and clear. You wanted the chance to buy the same swag our internal team members will be rocking at Microsoft Ignite, on stage, and across the world. We chose to design and order our swag through a company that could make that happen for you.

I placed our final order of 100+ items today. Each team member got to choose one or the other. Many liked both so much, we took one and ordered the other ourselves (me included)!

Please let me know if you have any questions. I do have a few notes:

• If you were a winner of our "1000th Issue - Thank You!" giveaway, please hold off on placing an order for these items.
• The hoodies require a minimum order of 6. You can easily swap the product for one with no minimum or put a group order form together.
• If you order this week/ship to your hotel, you can get these in time to join us in wearing them at Microsoft Ignite in Orlando, FL, November 4th - 8th!

WinUI Hoodies Ordering Link

WinUI Shirt Ordering Link

---

[Closed 9/12/19} Logo Redesign!

The WinUI team is refreshing our logo and is inviting the community to join us in experimenting, creating, and iterating on new ideas!

Logo Requirements:

• Trendy, hip, professional
• Scalable from a native size of 64x64px down to 16x16px and arbitrarily large while still being recognizable.

Timeline:

To keep the effort scoped, we’re looking to pin down our final selection by September 6th.

Where will this be used?

• Product/repo branding
• Swag
• Stickers
• Media (Twitter, GitHub, etc.)

Legal Stuff:

We’re licensing a reference design under the Creative Commons Attribution-No Derivatives 4.0 https://creativecommons.org/licenses/by-nd/4.0/, which means we want you to freely distribute any reference design that is landed upon-commercially or non-commercially. However, we do not want thousands of variations of the logo running amok in the wild, which is why we chose a license that restricts the ability to further distribute adapted material.

If you have adaptations, please submit them to our GitHub project, and we will offer any adaptations submitted under the same Creative Commons license. As a reminder under the license, use of the referenced material may not be used to suggest that it is sponsored, endorsed, or granted official status by Microsoft or can be used in contexts that are illegal. In short, use common sense when referencing any of the logo designs—we’re excited for you to share, but will take action if used inappropriately.

Resources:

• Current logo:
  

• Current repo tile
  

[embender]

hi all! Windows IXP (formerly Composition) PM here who wanted to add my ideas to the mix :) here are a few I've been messing around with - let me know what you think!

[SavoySchuler]

Your submissions are incredible, @embender. I particularly like the last and first ones.

[iconredesign]

Quickly mocked up a WinUI icon that wouldn't be out-of-place parked to other products within the suite.

[SavoySchuler]

Incredible, @iconredesign! I love your use of shades in the icon to evoke app regions.

To avoid conflation with the Microsoft Word icon (below), what would you think about coopting some of the Fluent Design System colors or something similar?

[iconredesign]

Absolutely! I was trying to maintain the WinUI theme color, but it did pop in my head that perhaps at the briefest of glances they could look one and the same.

I'll take a look at the guidelines presented and submit a revision. Thanks!

[SavoySchuler]

@iconredesign

Absolutely! I was trying to maintain the WinUI theme color, but it did pop in my head that perhaps at the briefest of glances they could look one and the same.

I'll take a look at the guidelines presented and submit a revision. Thanks!

Here's the good news: you can help us standardize new theme colors. Our guidelines are intentionally loose in that respect so that we can have the freedom to make this awesome!

[shaggygi]

@SavoySchuler

Swag

Hope to see some shirts available to purchase once the logo is official.

[SavoySchuler]

@SavoySchuler

Swag

Hope to see some shirts available to purchase once the logo is official.

@shaggygi, noted! What kind of design is going to make you wear one of our shirts every week for the next few years? My bar for swag is at least that high. 😉

[shaggygi]

@SavoySchuler I don't like too flashy 😄. I usually wear my GitHub shirt every couple of weeks. Simple final logo would be nice... probably just enough for others to be curious to ask what it means to explain/promote.

[iconredesign]

I guess it's important for a designer to offer up a full manifesto, so here it is.

The logo, of course, evokes other software products by Microsoft. This makes it clear the organization behind it, and the iconography of a mock UI clearly defines what this app is for. The WinUI sets itself apart from an Office product, the use of brackets and slashes instead of a letter makes it markedly different and avoids conflation by letter. In all, the icon clearly communicates that 1) It is a Microsoft product, 2) It is a code-based tool for UI design, and 3) It is NOT an Office product.

The flat design incorporates the element where the main theme color of the app carries through to its background. Metaphorically, it is the "basis" of the app, and falls in line with the design scheme of an app like Excel. A conclusion can be drawn visually where "WebUI is the basis of the UI design that rests on top. It made it possible".

During my brief research of WinUI to ensure that my logo actually represents the product, it landed me on a flagship image showcasing a sample interface showcasing the breadth of interface elements. The grays were lifted from that image symbolically to accomplish 1) Simplicity of coloring to avoid an ugly design, 2) It is merely a shade difference from white and is also neutral, and 3) To highlight hierarchies that further reinforces it with the trade of User Interface Design (which I personally love), and 4) the differentiated tones of gray meant this metaphor will work regardless of the size of which the icon is rendered, most importantly, its size in the Taskbar.

So on the subject of standardization, what better colors to represent Microsoft User Interface than the colors already used to represent the design? It already flows perfectly with the white.

Hope you like it, and if you have concerns, please do not hesitate to raise them!

[iconredesign]

I do apologize if you feel that I'm stuck on this design, though, so I'm open to a refresh if it's more appropriate.

[goranalkovic]

@iconredesign
The idea behind your design is ok, but the execution has issues.

First, why are there 3 radii of rounded corners? Pick one for the master frame, and other for the box with in it and the cards.

Second, the colors need some adjusting, doesn't make sense to have a light shade on top, then dark underneath it.

Third, I assume you were trying to do a shadow with multiple dark squares with opacity? That would be fine for something more abstract, but in most cases it's not how it's done.

Also, the design kinda looks like you took an icon, vectorized it in Illustrator and changed stuff a bit (just how my first impression was).

[iconredesign]

That's why I need outside opinion because I'm immune to being stuck in my head.

I'll take your suggestions into account and refine it. Thanks!

Note that the drop shadow is still early, so the final won't look this disorganized. It's literally untouched from what was originally supposed to be just a mockup.

[saraclay]

Hi @SavoySchuler, I was wondering what the mission of WinUI is in your words? I ask because it'd be good to evoke those thoughts via the new logo. Thanks!

[goranalkovic]

@iconredesign

Note that the drop shadow is still early, so the final won't look this disorganized. It's literally untouched from what was originally supposed to be just a mockup.

Isn't clicking one button to get a shadow easier than making a rectangle, picking a color, reducing opacity and then copying it? 😄

[iconredesign]

Addressing all the issues:

1 - Unified all the radii, and fixed the top of the icon, which was a big oversight. The cards have been rectified to use the straight corners of the interface.

2 - The nav bar is now darker, sharing the same shade as the first menu item in the list.

3 - Finally clicked that aforementioned "one button" after rushing that part for the initial mockup so the drop shadow should look way nicer now.

Looking for something that might be missing from the icon, but I think it looks okay for now.

[goranalkovic]

@iconredesign
It's a bit better now with the fixes 🙂

IDK, might be just me, but maybe try a new direction? It reminds me of the Word icon too much...

[iconredesign]

You asked, I delivered! Different take, so the is part of the interface, and the elements are lifted from the sheet so the evocation element is still in play. Blue is WinUI blue.

[goranalkovic]

@iconredesign
Improving, but now we've gone too flat and too sharp corners. Fluent is moving towards (slight) gradients, shadows and rounded corners.

The gray/white boxes represent menu items or?

Edit: also, think about small sizes (as mentioned in first post), not sure how decipherable this one would be :)

[iconredesign]

This variant is designed with small sizes in mind. At that size, you can't really use gradients and rounded corners effectively due to how everything is shrunken down that these elements disappear.

Rest assured that this design is perfectly visible in the Taskbar. The main element is a drop-down menu from a nav bar.

[goranalkovic]

@iconredesign
Make a "bigger" version then :D

Also, you can use gradients even on smaller sizes, it'll still be noticeable ;)
Examples: Visual Studio (Code) icons, Sublime Text, Adobe suite, ...

[SavoySchuler]

I am certainly on-board with exploring several directions! I should note I really like this submission by @iconredesign:

There's a few things I like:

• The alignment with Microsoft Office Suite's icons a complement to the icon set. Visually, you know who offers the product and evokes trust.
• The app metaphor is excellent. The scrollbar and out-of-root-window flyout are crisp call outs to our control set, new and old.
• The text adds clarity to the concept that this is a tools for developers.

Ideas for the concept:

• The primary concern seems to be conflation with Word's color scheme. Something nice about @embender's designs that, by branch into a two-tone color scheme, her first and third design can successfully leverage color without straying too close Office icon territory. Could this design incorporate a pair of colors like @embender's green/violet or something else?
• The "app content" can be reconfigured also too look less like Word - perhaps something that shows a grid or uses a ProgressRing? The "Xaml Controls Gallery" app in the Windows Store will show our entire collection of UI controls and their icons.

[SavoySchuler]

A preview of control icons from the Xaml Controls Gallery app:

Perhaps some of the visuals here can be used for inspiration? All of these can be clicked into to see real, visual behavior of the UI controls as well.

[goranalkovic]

@SavoySchuler would be nice if those got some Fluent treatment as well, current style looks like VS2015/17 toolbar icons to me 😄

I'll make a mockup tomorrow and post it

[weitzhandler]

Maybe just the </> part of the current icon,

Or a retro of an old one, how about modernizing a familiar icon, e.g.

Please forgive my sloppy sketches.

Also like @iconredesign's one a lot, maybe use a different WinUI-friendly font for the gt-lt braces, and to me just the braces part itself would suffice, no need for the rest.

I do vote for it to be solid minimal and simple. No gradients please, makes me feel 97'.

@SavoySchuler The W icon IS beautiful, but is shouting MS Office Word, mabe instead of W something else, </> or anything geeky and familiar instead.

Hey, almost forgot to mention, the current logo works for me too!

[niels9001]

Maybe we should stay away from the new Office icon style. These icons are part of the Office 365 family of products - so to me it wouldn't make sense to slap it on everything Microsoft related.

Mind you, designing icons that scale well is really, really hard (as you guys just found out while putting it on a t-shirt :)). I'd recommend reaching out to the Microsoft Design team to see if there is anyone that can help us with this.

I tried, inspired by the very basic .NET Core logo. They don't really 'scream' a UI framework, so that might be an issue. On the other hand, it might fit in with other framework logo's like the .NET family.

Concept 1

Concept 2

Concept 3

[ryandemopoulos]

@neils9001 FWIW, I really like concept 1; good idea on the inspiration there. (I prefer the WinUI text all on one line, vs. Concept 2). Concept 3 is pretty good too; seems scalable, simple, and slick.

[MySelfMaruf]

[petroemil]

I think if we are already here, thinking about icons and branding for WinUI, maybe we could also consider "the other half", the system APIs (the Microsoft.Windows.SDK.Contracts NuGet package), lets call it WinAPI.

I could imagine an Office-like icon design with the text being "UI" or "API" and for the UI the rest of it would be something like one of those abstract fluent arts (something like these), and the "API" could be one ore more cogs... fluent cogs.

Maybe the strict logo, the little label could be just a Windows Logo and the text "UI" or "API" next to it. Plus of course the arty part with the abstract fluent stuff and the cogs.

[weitzhandler]

@MySelfMaruf personally I wish WinUI shouldn't be tied to Windows. TBH I wish the name would be non Win. So to be mentally open for future expansion of a .NET Core UI that works on any .NET Core (or even .NET Standard environment).
See this feature request.

[AmNotADev]

I actually had similar thoughts on the "UI" concept @petroemil

Here's a cleaned up, and edited, first attempt by me:

I want to draft a second submission that is separated from windows, agreeing with @weitzhandler that it might be a good idea to avoid connecting the style of this and Windows or Microsoft directly.

[weitzhandler]

@AmNotADev

@weitzhandler that it might be a good idea to avoid connecting the style of this and Microsoft directly

I was referring to Windows, not Microsoft.

[niels9001]

I actually had similar thoughts on the "UI" concept @petroemil

I want to draft a second submission that is separated from windows, agreeing with @weitzhandler that it might be a good idea to avoid connecting the style of this and Microsoft directly.

Agreed. Maybe something .Net Core UI or .Net UI would be interesting to think about. I'd however recommend to now affiliate these icons with the Office brand. Only the Office brand as of now is using the small cut out. with the droppanel.

Also, if this would trigger a complete rebranding and naming - how could we better integrate the Windows Community Toolkit?

WinUI
WinUI Community Toolkit?

[AmNotADev]

My bad, but I agree with that still @weitzhandler

To explain why I went this route for my first draft, these aren't just office brand style, other Microsoft platforms are using these styles of logos including Skype, OneDrive, and Microsoft Teams (Skype and OneDrive are missing the cutout, but Teams has it).

I thought it'd be a neat experiment to see what a branded logo, in that style, would look like before I tried anything else. cc @niels9001

[petroemil]

@niels9001 @weitzhandler WinUI is not .NET exclusive, it's the UI framework for native apps as well and I may have even remember something about future Python support? Not to mention it's also the underlying framework for things like Xamarin, Uno or the upcoming React Native solutions.

[itsmichaelwest]

It's always exciting to see the community come together on iconography! ✨

I've come up with an early draft that I think can scale pretty well across various media/merch. At the center is a rounded cube with each face shaded with various colors—currently picked from the Windows brand palette, this can obviously be changed.

The greater/less-than signs enclose the cube. These are not visible at smaller sizes, instead focusing on the cube.

The logo can also be outlined for merch purposes. Mocked up an idea of how it could look on a t-shirt.

Still a WIP, feedback is very much appreciated. 😊 Am concerned myself that it feels a little too abstract, but I'll let the community judge that!

[DominicMaas]

@itsmichaelwest swooping in and doing an excellent job as always :)

[mdtauk]

I've been sketching some ideas, and I will start trying to create them into more polished ideas.

Here is one based on Visual Studio's logo

[mdtauk]

[mdtauk]

[mdtauk]

[mdtauk]

Here is a Fluent Design site inspired logo

[mdtauk]

16px and 32px scale refined icons

[schemburkar]

I actually had similar thoughts on the "UI" concept @petroemil

I want to draft a second submission that is separated from windows, agreeing with @weitzhandler that it might be a good idea to avoid connecting the style of this and Microsoft directly.

Agreed. Maybe something .Net Core UI or .Net UI would be interesting to think about. I'd however recommend to now affiliate these icons with the Office brand. Only the Office brand as of now is using the small cut out. with the droppanel.

Also, if this would trigger a complete rebranding and naming - how could we better integrate the Windows Community Toolkit?

WinUI
WinUI Community Toolkit?

From Long term perspective, should the design be not using Windows (win) UI naming?

[prashrayBajpai]

[mdtauk]

[michael-hawker]

I actually had similar thoughts on the "UI" concept @petroemil

I want to draft a second submission that is separated from windows, agreeing with @weitzhandler that it might be a good idea to avoid connecting the style of this and Microsoft directly.

Agreed. Maybe something .Net Core UI or .Net UI would be interesting to think about. I'd however recommend to now affiliate these icons with the Office brand. Only the Office brand as of now is using the small cut out. with the droppanel.

Also, if this would trigger a complete rebranding and naming - how could we better integrate the Windows Community Toolkit?

WinUI
WinUI Community Toolkit?

Appreciate the call-out @niels9001. 🦙❤

However, the Windows Community Toolkit is more than just UI (though our controls and XAML work are the largest part of what gets used). I'm not sure how much co-branding makes sense here yet, especially as the WinUI team doesn't manage the Toolkit, we're separate organizations. So, that's going to be a larger discussion to have elsewhere.

As for input to the designs, I really liked the existing book icon, as it is a library of controls... 😛

That said there are some of the designs that make me think I can maybe change my mind... Do agree we should stay off the Office design pattern.

[SavoySchuler]

Hi @SavoySchuler, I was wondering what the mission of WinUI is in your words? I ask because it'd be good to evoke those thoughts via the new logo. Thanks!

This is a fabulous question, @saraclay! We do not have a formal mission for WinUI as it is constantly evolving to meet the needs of our community, but our goal for WinUI 3 is this:

"WinUI 3 will bring the modern Windows presentation platform to more developers, faster, in a more open way."

I can unpack the contents within this a little more if it will help - I just want to be sure not to crowd the creative spirit with the technical detail. Just let me know! 😊

[mdtauk]

[yoshiask]

Here's my take on the current book logo, stylized to look like Office's Fabric icons. I also took the liberty of creating concepts for "WinAPI", as @petroemil mentioned earlier.

WinUI Fabric

WinAPI Fabric [A]

WinAPI Fabric [B]

[SavoySchuler]

On the topic of naming

I actually had similar thoughts on the "UI" concept @petroemil

I want to draft a second submission that is separated from windows, agreeing with @weitzhandler that it might be a good idea to avoid connecting the style of this and Microsoft directly.

Agreed. Maybe something .Net Core UI or .Net UI would be interesting to think about. I'd however recommend to now affiliate these icons with the Office brand. Only the Office brand as of now is using the small cut out. with the droppanel.
Also, if this would trigger a complete rebranding and naming - how could we better integrate the Windows Community Toolkit?
WinUI
WinUI Community Toolkit?

From Long term perspective, should the design be not using Windows (win) UI naming?

I see a lot of excellent debate about the product naming. These are great questions to be asking!

As @petroemil noted, WinUI is not .NET exclusive. It's the modern UI framework for Windows native apps that can be leverage by several development frameworks including React Native as well as it is the underlying framework for things like Xamarin and Uno.

Our goal is to give you all fastest, easiest, most open way to create world-class UI. Think of the "win" in "WinUI" as "🏆UI". You think I'm joking - but we do this all the time on our 🏆Dev (WinDev) team.

If anyone can think of a way to translate the 🏆 into a legitimate logo, you will make @jeffbog's week.

[yoshiask]

I'd also like to point out that Fabric icons (I see it's referred to here as "Office icons") are _not_ limited to MS Office. For example, Your Phone and the new Windows Terminal all use Fabric icons, despite the fact that they are not related at all to Office.

It seems that the Fabric style is geared toward cross-platform services, including Your Phone, Terminal (as it contains Ubuntu), and Azure (the website uses Fabric). If WinUI is meant to be(come) cross-platform as well, it would be perfect to associate WinUI with other cross-platform services.

[AmNotADev]

@yoshiask I went with the same inspiration a few posts above yours! I also tried to make the same point about Fabric, but you drove it home way better than I did.

I like how yours turned out, but they feel a bit more compact than the current Fabric logos.

[yoshiask]

@AmNotADev Could you elaborate on "compact"? Do you mean color-wise (on the 'content' part), or the cutout (the 'card' with "")?

[AmNotADev]

@yoshiask the width of the "background" section of the logo doesn't seem to match any of the other Fabric logos proportions, it looks a bit... squished? I'd make it a bit wider so the overall logo feels more square.

I had the opposite problem and made mine a bit too wide to match.

[yoshiask]

Ah, fair point. I think I matched the proportions of the current design when I was working on it, and I forgot to change it back.

[AmNotADev]

Like, here's my edit to the previous submission by me if I fix my sizing and positioning.

[yoshiask]

Width is fixed (the 'undercard', it's the wrong shade of blue, whoops. I don't want to spam though, so I'll leave it for now)

[yoshiask]

Redid @AmNotADev 's design using my Fabric template.

[yoshiask]

@SavoySchuler

It almost looks like PowerPoint word art

[mdtauk]

Scaled versions, Office like, Windows 10 Fluent Icon style (including Acrylic Noise), retaining the Book metaphor.

[mdtauk]

[yoshiask]

Flat and monochrome versions of the same design I shared before, plus a t-shirt mock-up. It's Fabric on fabric!

[zeealeid]

Hello there!

Here are my early design ideas.
What do you think?

[lorisobi]

Hi there!
This my Idea for WinUI

[petroemil]

On the topic of naming

I actually had similar thoughts on the "UI" concept @petroemil

I want to draft a second submission that is separated from windows, agreeing with @weitzhandler that it might be a good idea to avoid connecting the style of this and Microsoft directly.

Agreed. Maybe something .Net Core UI or .Net UI would be interesting to think about. I'd however recommend to now affiliate these icons with the Office brand. Only the Office brand as of now is using the small cut out. with the droppanel.
Also, if this would trigger a complete rebranding and naming - how could we better integrate the Windows Community Toolkit?
WinUI
WinUI Community Toolkit?

From Long term perspective, should the design be not using Windows (win) UI naming?

I see a lot of excellent debate about the product naming. These are great questions to be asking!

As @petroemil noted, WinUI is not .NET exclusive. It's the modern UI framework for Windows native apps that can be leverage by several development frameworks including React Native as well as it is the underlying framework for things like Xamarin and Uno.

Our goal is to give you all fastest, easiest, most open way to create world-class UI. Think of the "win" in "WinUI" as "🏆UI". You think I'm joking - but we do this all the time on our 🏆Dev (WinDev) team.

If anyone can think of a way to translate the 🏆 into a legitimate logo, you will make @jeffbog's week.

I'd like to apologize in advance for my design skills, please use your imagination when you look at the following sketch:

What if the logo would be a coin, a medal (instead of a cup/trophy)?

In case of WinUI it could be a silver coin with golden paint palette inside? Or the outer curve of the palette could be more perfect circle and the remaining part of the circle could be filled-in by a silver piece.

And WinAPI could be a silver coin with - contrary to the illustration below - a relatively thin cogwheel on the edge with many teeth.

One side of the coin could be either the text UI / API or the symbol </> / { # } (though symbols within symbols might be a bit too much symbolism), and the other side could be a Windows logo.

It needs a bit of imagination, but I can imagine this actually looking good.

Some extra examples from the interwebs:

• The kind of cogwheel coin design I had in my head: link
• And as I was there already, looking for examples, I realized that the BitCoin coin looks pretty cool as well: link

[schemburkar]

Here is my concept

[yoshiask]

Based on a couple of @mdtauk's sketches

[IUsername]

[IUsername]

[IUsername]

[r7dev]

@SavoySchuler Change name for Hybrid + UI = HybrUI
UI for all plataforms. HybrUI on GitHub.

[SavoySchuler]

THANK YOU FOR YOUR AMAZING IDEAS: Colors and XML Theme open to variation too!

I think we may have pushed the poll a little by having a pre-existing logo as many of these designs refer an XML theme. This is just fine! But XML is also _just one_ of the programming languages you can use. Same with the color scheme - no need to stick to blue and white!

If you can think of hip and trendy ideas that subvert these themes and/or colors, you are encouraged to share them!

That being said - renaming WinUI is not an object of this effort, but if your logo idea hinges on a rename, please feel free to submit it anyways. Please just know that logos embracing the "WinUI" name are likely to receive more attention from those who will be making the final choices.

You all are the best. This turn out is incredible! 🏆

[IUsername]

[SavoySchuler]

@IUsername - What incredible turn around time and incredible designs!! 🎺 What do you think, @MikeHillberg? Are these striking a chord with your creative spirit? @mdtauk and @embender also had some experimental color schemes above.

[mdtauk]

I saw the use of the cube and brackets imagery as XAML rather than XML more broadly. But yes WinUI is more than XAML, so moving beyond the XAML iconography may be better.

I've tried focusing on the Book/Library aspect, and the XAML aspect (as right now, XAML is the only UI framework that WinUI uses, with WPF and GDI bringing in XAML into their frameworks)

[MinnaJyvala]

Here's my turquoise ideas today, enlarged 3x from 64px. FUN!

[yoshiask]

Honestly, I don't see anything wrong with sticking to the blue & gray color scheme. Blue and purple (especially blue) seem to be the most strongly associated with Windows, so I don't see a problem with keeping the WinUI logo blue. (Unless "Windows" and "Win" are removed from the name.)

Another opinion: Fluent Design interfaces are centered heavily on a single accent color, whether it be the app's color or the user's accent color. Most of the colors in a Fluent app use only neutrals and variations of the accent color. WinUI's color palette should reflect this by sticking to only one accent color, plus neutrals like black, white, and gray.

[mdtauk]

Here is an idea paired down to the minimum.

[NoahFeller]

Microsoft seems to be going in a new direction with their icons. The redesigned Office Icons and newer Fabric Icons (as I saw they were referred to by someone here) share many elements that help them be part of a cohesive design language. I noticed is that many of them incorporate depth, have vibrant colors, abstractly represent their service, and are built of what I'm calling blocks. Take the Excel icon. The blocks are vibrantly colored green (in a cool almost pixelated gradient fashion) and they abstractly represent the cells in a spreadsheet. Their is depth with the square containing the "E" casting a shadow on the rectangle below it. I made sure to incorporate these elements in my designs.

I wanted to stray from the structure of the Office Icons which I depicted in the example above. As WinUI is not an Office service, having a square with text floating above a rectangular pane was not a direction I chose for my designs. Instead I decided to use some of the elements I mentioned above which allows for a lot of room for creativity while at the same time classifying the icon as a Microsoft product.

For the colors in my design, I wanted to incorporate the solid color gradient look (shown in many of the Office/Fabric icons). Because I am not a expert in how to get a mix of colors that work well together, I just used the colors from the Outlook icon. It worked because I wanted the designs to be blue (like the original). I really just wanted to get the general idea across and those shades worked.

In many of my designs I used blocks to abstractly represent a user interface. To accomplish this in some of my designs, I used a grid which is undefined and accommodating to any layout that could be devised using the WinUI components. This felt like one of the best ways to represent the library of components and the interfaces that can be built with it.

I used depth shown with shadow in many of my designs to. The depth effect needs to be refined on some of them but as I said before, these should get the general idea across.

[NoahFeller]

[NoahFeller]

[NoahFeller]

And here are some of my initial sketches if any of you are curious:

[NoahFeller]

[NoahFeller]

I have four designs that each have multiple iterations which are shown above. I'll go into a little more detail with each of the ones pictured.

1. A modernized version of the original logo. I really like the book and library metaphor of the original. The cover could be interpreted as showing an abstracted UI. So it contains multiple metaphors which is kind of cool. The text is done in a style similar to the new Terminal icon. The book mark showcases depth which was important to me because it's a main attribute of Fabric icons and Fluent Design.

2. Taking the name WindowsUI somewhat literally, this design shows a user above a Windows style interface.

3. Verticle navigation is an important piece of Windows UI, showcased in many apps and sites. This design shows a simplified version of it in a similar style to the Windows Terminal logo (both in shape and how they both emphasize a major interface element. For the Terminal icon, it's the tabs instead of the verticle navigation). The colors should probably be mixed up a bit to make the text more legible. I thought this fit the Windows design language pretty well.

4. I tried to showcase an extreme abstraction of UIs (and the components which make them up) with the different iterations of this design. They're pretty simple but I think they look cool.

[stmoy]

@NoahFeller - I'm really digging icon 1! I like maintaining the book metaphor, but I'm not sure I understand the grid on the book cover. I think the blue colored grid adds a bit of noise to the icon making it difficult to parse from a distance - what would it look like with a simpler "cover"?

[NoahFeller]

@stmoy That's also one of my favorites. The idea behind the grid was my way to represent a UI in a very simplified and abstract fashion. I was also thinking it represents the framework that WinUI is. I agree with your point though. Maybe the color shades being more similar would help it seem less noisy. I tried my best to implement blocks to match the style of other Fabric Icons (Your Phone, Terminal, Office Icons). I have a version of the icon on the bottom left of my first image which doesn't have the grid. I'll try some different variants because I don't love the look of that one. The colors and layout of the rectangles could be improved. I'm also considering widening the bookmark a bit. Thanks for the feedback!

[danzil]

@itsmichaelwest, what does the cube represent in your design? To me it looks more like a 3D, AR, space symbol than a Markup based UI Framework

[stevenbrix]

@itsmichaelwest, what does the cube represent in your design? To me it looks more like a 3D, AR, space symbol than a Markup based UI Framework

@danzil, I'm not sure, but maybe it's the cube from Fluent that represents material?

[mdtauk]

@stmoy @NoahFeller I was inspired to try combining a few of those elements you used for your logos, along with the book idea of the original, and your No. 1 example.

[mdtauk]

@stevenbrix AFAIK the Fluent Design team have moved away from the cube designs, to simpler outlines which exhibit dimensionality.

[ratishphilip]

Hope I am not too late to the party!

Here is a contribution from my side

These are my thoughts behind it

• WinUI is primarily for Windows so the logo is derived from the Windows logo.
• Since the UI remains in the forefront interacting with the user, here the blue component represents the UI as it is in front of the other (gray) components of the logo.
• Added transparency and drop shadow to the blue component to represent Fluent Design.
• Rounded the corners a bit to make it a little more polished.

What else can be done to it

• the symbol can be added to the blue component to emphasize WinUI

Hope you like it.

Suggestions are welcome.

[mdtauk]

@ratishphilip Its a similar idea to one I was sketching around with, but I couldn't get it work well in small sizes when fleshed out.

[ratishphilip]

@mdtauk, you are right. In really small sizes the transparency, shadows will not work out.

[ratishphilip]

Here is another one - similar concept as my previous submission, but inspired by Microsoft's Oct 2 invitation. :)

If you rotate the logo counter-clockwise 45 degrees you can see the element in the logo.

[itsmichaelwest]

@itsmichaelwest, what does the cube represent in your design? To me it looks more like a 3D, AR, space symbol than a Markup based UI Framework

@danzil The cube is a Fluent rendition of the glass/glossy cube originally used in the XAML logo:

I thought it would be good for the logo for WinUI to somehow represent what it's providing: a set of XAML controls and styles.

[mdtauk]

Not super happy with this, but if anyone is inspired to do something with it, I'd love to see it!

[mdtauk]

Will/Should these logos be kept in sync? And should they all share the WinUI name, if it is to be all encompassing for Windows UI and XAML?

[SavoySchuler]

@mdtauk Yes - it is our ambition to cross-pollinate all of our icons with imagery from the new logo. 😄

[SavoySchuler]

Timeline Update: Announcing Top 5 Next Week!

Dear community, your ideas are incredible! Every time I anticipate that you will raise the bar, you raise it higher. We are so excited to be working with you all on a project like this. 😊

We are aiming at early next week to telegraph our top 5 picks so far so that everyone can have a chance to put any last spins on them before we narrow it down to one on September 9th.

Until then we will continue joining you to brainstorm and create!

[mdtauk]

A unified family of Icons - These are all based on the 16px grid, so as you scale up, the details could become more subtle, as I have demonstrated in previous logo ideas I posted

[ratishphilip]

Here is another one

Concept behind this

• WinUI comprises of code + XAML. The code is represented by curly braces and the XAML is represented by .
• It also represents a square with rounded corners denoting a window with rounded corners.

Another version of this emphasizing the XAML

[NoahFeller]

I quickly wanted to showcase how one of my designs could be adapted for the WinUI icons that accompany the main logo. My goal with design 1 was to modernize the existing icon in the Fabric/Fluent style. I was aiming for a fresh and new, yet familiar look. The same strategy was used on the accompanying icons. Obviously I made a few modifications, but I did my best to leave the basic structure of each of the WinUI icons intact while using the modernizing approach. That way if these icons are rolled out, users will still understand what they represent and their shared look ties them together as part of a single service. Sharing more general elements with other new icons shows that they represent a Microsoft product. Because some parts of the icons were made thicker (lettering and other details), they actually scale pretty well.

[ratishphilip]

Here is a improvised version of my previous submission

[goranalkovic]

My take on the logo

A simple modernization of the current logo, I feel some of the concepts above, while looking nice, deviate too much from the idea of the WinUI icon. Although the icon could be something like a box, a notebook sums it up much nicer.

The design is relatively simple and made with scaling in mind, with rounded corners and subtle gradients. Some elements from other Microsoft dev(-related) tools are here, like < and > from the Terminal icon.

Detail (64px+ version):

Logo with a _WinUI_ wordmark

[mdtauk]

I have taken a previous idea, changed the colours, and added examples of the Toolkit and Gallery logos

[ratishphilip]

Here is another take on my previous logo

[ratishphilip]

Another concept

[ratishphilip]

Improvising the previous logo

[dbeavon]

I really like that ratishphilip!

I was never happy about the fact that the symbol, , looks like an "end tag". IE. it bothers me that the symbol shows up in code where things are ...

</finished> or </ended> (or </dead>, heaven forbid).

But your latest icon (and others like it) are stylized to take the focus off the slash.

Was wondering if you could stylize it just a little bit further ... perhaps you could put a round dot at the bottom of the slash to make it look a bit more like an exclamation point!

Exclamation points are relevant and show up in XAML comments , as in ...

<!-- WinUI is awesome -->

[mdtauk]

Just to illustrate the scaling from my previous logo ideas, here are the 16px and 128px icons - you can see the changes in proportions, increase in detailing

_I also adjusted the elevation of the I part of the icons, so they cast shadow on the U part_

[mdtauk]

Improvising the previous logo

@ratishphilip Hope you don't mind, but I decided to have a go at tweaking your idea...

_Edit: restored the alternating Brace symbols from the original design_

[ratishphilip]

@ratishphilip Hope you don't mind, but I decided to have a go at tweaking your idea...

No problem :)

[mdtauk]

@ratishphilip Hope you don't mind, but I decided to have a go at tweaking your idea...

No problem :)

@ratishphilip Thanks. How do you see that logo expanding for the XAML Controls / WinUI Gallery, and the Windows Community / WinUI Toolkit?

[ratishphilip]

@mdtauk Here is my concept for WinUI Gallery, library and toolkit

[mdtauk]

@mdtauk Here is my concept for WinUI Gallery, library and toolkit

@ratishphilip Thank you, and here are my takes on them

[goranalkovic]

@mdtauk

While it looks interesting, it looks too busy with too many overlapping elements and shadows. Just my $0.02

[mdtauk]

@mdtauk

While it looks interesting, it looks too busy with too many overlapping elements and shadows. Just my $0.02

Personally I agree, but I was just taking the idea as presented, and adding the detail

[yoshiask]

Here is a few more concepts. The WinUI Toolbox one is pretty rough...

These concepts are based on the Dev Tools icon

[ratishphilip]

Here is another one

[ratishphilip]

Another attempt

[mdtauk]

Here is another one

These kind of look like a bad moire pattern, the shadow is a little too strong, and the stripes don't seem to represent elevation well.

Another attempt

These are neater, but the Library logo and Gallery logos are very similar, and the toolbox one doesn't look like it would fit into the square grid, so not useful at a 16 x 16 pixel size

[mdtauk]

Timeline Update: Announcing Top 5 Next Week!

Dear community, your ideas are incredible! Every time I anticipate that you will raise the bar, you raise it higher. We are so excited to be working with you all on a project like this. 😊

We are aiming at early next week to telegraph our top 5 picks so far so that everyone can have a chance to put any last spins on them before we narrow it down to one on September 9th.

Until then we will continue joining you to brainstorm and create!

Any idea what day you plan to whittle down some of these ideas?

[ratishphilip]

Another one derived from the Microsoft Word logo

[SavoySchuler]

Timeline Update: Announcing Top 5 Next Week!
Dear community, your ideas are incredible! Every time I anticipate that you will raise the bar, you raise it higher. We are so excited to be working with you all on a project like this. 😊
We are aiming at early next week to telegraph our top 5 picks so far so that everyone can have a chance to put any last spins on them before we narrow it down to one on September 9th.
Until then we will continue joining you to brainstorm and create!

Any idea what day you plan to whittle down some of these ideas?

Timeline Update: Announcing Top 5 Next Week!
Dear community, your ideas are incredible! Every time I anticipate that you will raise the bar, you raise it higher. We are so excited to be working with you all on a project like this. 😊
We are aiming at early next week to telegraph our top 5 picks so far so that everyone can have a chance to put any last spins on them before we narrow it down to one on September 9th.
Until then we will continue joining you to brainstorm and create!

Any idea what day you plan to whittle down some of these ideas?

@mdtauk I am meeting with @ryandemopoulos this afternoon (September 3rd) and we will either have our top five then or a more specific timeframe that I can report back with. 😄

[niels9001]

@SavoySchuler Hi Savoy, thanks for the update! Awesome to see the community being so active on this :)!

I really like lots of concepts, especially the ones where the Gallery, Library and Toolkit have a similiar look and feel. We cpuld even extend this to align the UIs of the Community Toolkit and Gallery app to have a uniform message for new UWP devs.

I was wondering if you have someone from the design team looking at the submissions as well? Color shading (for accessibility) and scalability are things that are really important and designers tend to have way more experience about these things then us developers :)!

[mdtauk]

Here are some Wordmark Ideas, and naming conventions. WinUI _________ so everything feels like it belongs to a comprehensive family.

Any _flavours_ of WinUI should have an equally simple naming convention, so WinUI _for_ _____

[SavoySchuler]

@SavoySchuler Hi Savoy, thanks for the update! Awesome to see the community being so active on this :)!

I really like lots of concepts, especially the ones where the Gallery, Library and Toolkit have a similiar look and feel. We cpuld even extend this to align the UIs of the Community Toolkit and Gallery app to have a uniform message for new UWP devs.

I was wondering if you have someone from the design team looking at the submissions as well? Color shading (for accessibility) and scalability are things that are really important and designers tend to have way more experience about these things then us developers :)!

Great question, @niels9001! We have design and accessibility experts on our team as well as a required global compliance check - all of which will ensure an accessible and appropriate logo for everyone. 😊 I am waiting until we have our top candidates selected before applying this process as it would otherwise create undue overheard for the 121 awesome and unique submissions we have seen so far!

[mdtauk]

I don't think any of us expected a single design to be taken as is, of course they all serve as a kind of Mood board, which Microsoft's design experts will take, and mould, and produce a finalised design/framework which future logos and icons can be based on.

The fact that those of us who have contributed, will have influenced each other, will hopefully mean a final design, will exhibit recognisable bits from many ideas 🙂

[SavoySchuler]

I don't think any of us expected a single design to be taken as is, of course they all serve as a kind of Mood board, which Microsoft's design experts will take, and mould, and produce a finalised design/framework which future logos and icons can be based on.

Great call out, @mdtauk! That is correct - we may alter the final selection based on the feedback from the resources above, but I would also be excited to showcase the original work of a community member so we will have to see what the future holds in store for our final selection.

The fact that those of us who have contributed, will have influenced each other, will hopefully mean a final design, will exhibit recognizable bits from many ideas 🙂

As for this, I will certainly be encouraging variations and alternate takes on the top 5 after we get those posted! 🙂

[mdtauk]

@SavoySchuler Will you be including feedback on the 5 you pick? And feedback on any that just fall short. The Feedback from you both and the team, will help us to refine them further, and contribute tweaked versions of each other's chosen designs.

[SavoySchuler]

@SavoySchuler Will you be including feedback on the 5 you pick? And feedback on any that just fall short. The Feedback from you both and the team, will help us to refine them further, and contribute tweaked versions of each other's chosen designs.

@mdtauk Another great question! I have been internally polling 86 people throughout the last few weeks in a variety of means on our (now) 121 submissions. Due to the volume, I will not be able to offer comprehensive feedback, but I can synthesize some personal notes on the final 5 and encourage particularly interested parties to do the same. I have been hesitant to provide feedback during this open round as I am cautious to create any limitations that inhibit the creativity of this thread, but I also understand wanting to gauge your direction, I have synthesized some general feedback below:

• Angle brackets + cube/hexagon designs are nearly universally favored. Stylistically, these designs are simple, unique, recognizable across the spectrum of logos, and well-scaled at several sizes. The general consensus I've observed is that the angle brackets (while controversial to some) speak to our history and indicate a product rooted in software while the cube/hexagon pays homage to the Fluent Design System ecosystem and abstractly conveys things along the lines of color, depth, lighting, material, etc.
• The classic library book, Office-style abstract "app window", and circular .NET designs are relatively tied as preliminary runners up. I believe this is due to similarity, precedent, and familiarity to other Windows developer ecosystem product logos. They also tend to be simple, crisp, and clear.
• Inverse to the first bullet, logos that are stylistically complex with several banded shades and components invoke concern with regard to scaling for small sizes without looking busy.

And feedback on any that just fall short.

As for this - feel free to DM me about any submissions you're particularly interested in and I can see what I can get you. 🙂

[mdtauk]

I eagerly await seeing the 5 that are favoured @SavoySchuler , and hopefully some comments on those 5 that offer some direction as to what changes would be sought 💙

[ratishphilip]

Yeah @SavoySchuler, eagerly awaiting to see the top 5.

Any feedback is always welcome. As @mdtauk already mentioned, these comments wouldsurely help us to move in the right direction. Hopefully the collective effort rom all of us shall result in getting the best logo for WinUI.

[NoahFeller]

I wanted to add that I could see some designs on the Fluent Design website being adapted/tweaked to work as the WinUI logo (ex. top image). Same story with some of the Fluent icons (I was thinking light or material could be a good starting point). I thought some of you might find the bottom images interesting. They showcase depth and aspects of Microsoft's new icon design style. They might serve as inspiration for the finalists for thinking about their designs in a 3D space.

[mdtauk]

_Logo layers and depth_

_Logo grid_

_Depth and forward slashes from Build 2019_

_Current and updated Fluent Imagary_

_Maybe early versions of the Office Icons_

[NoahFeller]

I know it's a bit late but the rightmost icon on your second to last image (the one with the black background and white icons) would also work really well for the WinUI icon. It's simple, clean and works with colors (I could see different shades of blue) or as is with the outline design.

[mdtauk]

I know it's a bit late but the rightmost icon on your second to last image (the one with the black background and white icons) would also work really well for the WinUI icon. It's simple, clean and works with colors (I could see different shades of blue) or as is with the outline design.

I gave doing something similar a go early on.

[NoahFeller]

MERCH mock-ups for fun! (Of one of my designs)

[NoahFeller]

Also this sweatshirt looks super comfy and now I kinda want one. I'm going to try to restrain from sweatshirt shopping now lol.

[SavoySchuler]

Fabulous community, we have arrived at first round results!

Internally and externally, the polling was clear enough for us to arrive at a pack-leading number 1! But before I say anything...

Thank you!

On behalf of the entire WinUI team, "thank you!" to everyone who collaborated and contributed here and across our social media streams. By the numbers we had...

• 121 submissions
• 30 issue contributors
• 86 team members polled

This was a _show of force_ we never expected! You are AWESOME!

The preliminary new WinUI logo submitted by @itsmichaelwest!

This elegant design remains the top submission on the issue thread AND was nearly unanimously top picked across all polled team members. There's too much to love about this logo to detail it here. Style, elegance, scalability, theme-ability, it all rocks. Thank you @itsmichaelwest for creating this dynamite logo.

Incredible Runner-Ups!

To provide some inspiration for riffing on @itsmichaelwest's design, here are our other favorites...

1. by @mdtauk

1. also by @mdtauk

1. by @niels9001

1. by @NoahFeller

1. by @ratishphilip

And honorable mention to @IUsername for these colorful and original submissions:

Congrats again and thanks everyone!

Where do we go from here?

We would love to see some riffing and variations on this design! Because of Microsoft Ignite, our deadline has moved up to 8am PST Friday September 6th, so we will be accepting variant submissions until midnight PST Thursday September 5th.

For inspiration, these are variations on @itsmichaelwest's logo that we would like to explore as a community until then:

1. Brackets?

We have explored the idea of expanding WinUI beyond markdown language and may do so in the future which would mean moving beyond this "< >" syntax. Do you think the cube could be strong enough to stand on its own? If so, does anyone have ideas that could help it do so?

2. Text inside?

For Microsoft Ignite, we will be making hexagonal stickers. This design fits perfectly in that shape, but we will need to move the "WinUI" text in the cube. Does anyone have ideas for how we could make that variant look great?

3. Colors?

Does anyone have some alternately color proposals? We are happy with the blue theme but we are also not particularly married to it. We are open to explore alternate proposals!

4. Standalone or +text?

Do we need the "WinUI" text _as part of_ the logo or is the cube design strong enough to stand on its own? With the < >? Without?

[mdtauk]

If the Cube is going to act as the overarching symbol, it will need to be given a visual treatment that will make it unique.

At 16 x 16 there is not much room for anything but the cube, so things like the Toolkit, and Gallery, will need to be clever to include the cube and more at the smaller sizes.

Does this WinUI logo become the new XAML logo too? Because XAML uses the Cube in brackets, so what makes this more than just XAML?

[mdtauk]

Here are Microsoft's Corporate brand colours

Approved colour combinations

Universal Windows Colours

[NoahFeller]

Congrats @itsmichaelwest!

[mdtauk]

[ratishphilip]

[ratishphilip]

Here is another concept based on the cube and the angle brackets...

[yaichenbaum]

Rough concept based of @ratishphilip

[yaichenbaum]

[mdtauk]

We need to be sure not to get confused with the Unity logo...

[yaichenbaum]

@mdtauk I didn't think of that!
Honestly I think the cube angle is different enough but anyways it seems like we have the top 5 ideas picked already.

[yaichenbaum]

A few more ideas I had.

[mdtauk]

[mdtauk]

[IUsername]

[ratishphilip]

[itsmichaelwest]

Woah 😮I am so thrilled the team loved my logo!

Logo updates

I've been looking into alternative takes on the cube that draw inspiration from the other designs in this thread. I particularly liked @mdtauk's use of the colors from the Fluent website, and so have developed a version of the cube that uses these gradients (_this isn't final!_). I also dropped the brackets for now, perhaps this "Fluent cube" can stand on its own:

Stickers

Here is a couple of sticker ideas. The first shrinks the cube and adds the WinUI text as well as a link to the repository. The second adds an overlay on the cube, with the WinUI text. Unsure as to which works best and if having a link to the repo is needed.

The second sticker could also work as a social media logo.

Will continue developing this. Thanks to everyone who's providing inspiration in this thread! 😃

[mdtauk]

Toolkit version of this logo

[yaichenbaum]

A few different angles for a concept based off one of @ratishphilip's icons. I included versions with and without shadows.

[yaichenbaum]

[mdtauk]

[niels9001]

Cool.. I like this direction.

Just for sense keeping.. what do we believe 'the cube' represents? Would be nice to have a bit of a rationale there.

I like the link to Fluent Design

[mdtauk]

The Cube wasn't my initial preference, because it is difficult to own that symbol as a logo or brand. With the brackets it intrinsically links it to XAML, and who knows what other UI paradigms may emerge in the future.

So... I have been treating the cube as a core, so either a cube within a cube, as one part of the core.

In the original XAML logo, I believe the cube is an object, as in Object Orientated coding, or an XML/XAML Element.

[mdtauk]

[MySelfMaruf]

[mdtauk]

[SavoySchuler]

Does this WinUI logo become the new XAML logo too? Because XAML uses the Cube in brackets, so what makes this more than just XAML?

@mdtauk If I misunderstood the question please let me know, but there is no intention of replacing or updating the classic Xaml logo at this time - this is just for WinUI. I am also not sure the classic Xaml logo is being actively used in any capacity beyond legacy doc articles. If you have seen otherwise, please let me know!

@mdtauk Your brand colors post is an excellent resource on this thread. Thank you for being a heavy lifter on this thread!

Here is another concept based on the cube and the angle brackets...

@ratishphilip - @ryandemopoulos, @stmoy, and myself really like how self-contained this design is. @mdtauk, also an interesting switch in colors. I am exploring some alternate color combinations of this right now. If I can come up with anything meritorious, I will post it.

[mdtauk]

Gallery version added alongside the others

[mdtauk]

Here are some logos from other frameworks - so we can try to avoid making any similar designs.

Anglar JS

Xamarin

TypeScript

Node JS

React

Flutter

Ionic

HTML / CSS / JS

Material Design

Swift UI

[SavoySchuler]

Semi-Final Round Update

We just wrapped meeting again to review everything that has has come in since last nice. First thing we discussed: Wow, you all are amazing! And fast!

Second, three designs (in addition to @itsmichaelwest's original) stood out to us and we have some questions for each....

1. > I've been looking into alternative takes on the cube that draw inspiration from the other designs in this thread. I particularly liked @mdtauk's use of the colors from the Fluent website, and so have developed a version of the cube that uses these gradients (_this isn't final!_). I also dropped the brackets for now, perhaps this "Fluent cube" can stand on its own:
   >

We really like what you did here! Is there any chance you have a high-fidelity version you could use to show us what this looks like with brackets on the side? We're imagining something like this:

1. @mdtauk and @ratishphilip, we like the bold orange take both you posted! We would love to see some more color variants that you think are awesome. I mocked up some alternate color schemes below. The top uses the Microsoft brand colors @mdtauk posted above. The one below does not follow any particular brand pallet, I was just exploring. Does anyone have any color combinations that you think "pop"? I am also not against gradients - my skills just aren't there yet!

1. @mdtauk, we really like this one you posted! Is there any chance you could share versions of this that a.) don't have text and b.) have black backgrounds (with and without text)?

[yaichenbaum]

@SavoySchuler I really like this one that you posted.

[mdtauk]

1. @mdtauk, we really like this one you posted! Is there any chance you could share versions of this that a.) don't have text and b.) have black backgrounds (with and without text)?

🚨 Large Images Incoming 🚨

Sizes Include 1024 x 1024 (with and without text) - 16 x 16 - 32 x 32 - 64 x 64 - 128 x 128 - 256 x 256 - 4096 x 4096

Light and Dark versions

[yaichenbaum]

I love the icon @mdtauk just posted! Looks amazing!

[mdtauk]

@SavoySchuler >Does anyone have any color combinations that you think "pop"?

Purple and Orange is a classic complimentary colour combo. But having two colours on a single cube would look a little odd

Green and Yellow

Blue and Pink

[yaichenbaum]

[SavoySchuler]

@SavoySchuler >Does anyone have any color combinations that you think "pop"?

Purple and Orange is a classic complimentary colour combo. But having two colours on a single cube would look a little odd

Green and Yellow

Blue and Pink

@mdtauk Are any of these color combinations you could see being applied in any of these designs?

[SavoySchuler]

@itsmichaelwest I just realized I was missing a picture in bullet point 1 above - added now!

[mdtauk]

@SavoySchuler

Blue > Pink

Teal > Blue

You could do something like this, an Analogous scheme across the Cube

[yaichenbaum]

That second one with the Teal > Blue is my favorite so far!

[SavoySchuler]

Cool.. I like this direction.

Just for sense keeping.. what do we believe 'the cube' represents? Would be nice to have a bit of a rationale there.

I like the link to Fluent Design

Great question, @niels9001! People have offered a few takes throughout this now massive thread.

For many its an homage to the Fluent Designs System principles shown here (in cube form):

Its also an homage to the original Xaml logo:

But others, like myself and @pag3, have described it as a "building block" and the WinUI platform and its offerings as exactly that - the building blocks for UI.

[SavoySchuler]

@SavoySchuler

Blue > Pink

Teal > Blue

You could do something like this, an Analogous scheme across the Cube

I also love these! Great choices, @mdtauk!

[NoahFeller]

Here's a design I made a while ago for a different project but didn't end up needing it. I've decided to submit it here! It works super well here because it showcases a lot of the Fluent Design System's principles:
Light - The glow from inside the cube.
Depth - It's a 3D cube with visible depth.
Material - Has a cool Acrylic look.
Scale - Small cubes within a big cube, has size contrasting.

I also think it looks pretty cool and is somewhat unique. It avoids the problem with some designs here as being generic. There are a lot of hexagon/cube logos out there so it can be difficult to be different (I think this design accomplishes not being generic). Also the light bit in the middle can be used for other complimentary designs and patterns. Here's an example:

Open to feedback!

[yaichenbaum]

@NoahFeller That looks amazing! Do you have a darker version for putting on lighter backgrounds?

[NoahFeller]

Thanks @yaichenbaum. (You commented right before I was going to post this explanation lol)

.
.
.
.

I'm pretty sure I've seen this grid structure somewhere related to Fluent Design. On a white background the design either needs a shadow directly behind it or the cube color to black. I'll be sure to do some more experimenting!

[mdtauk]

[mdtauk]

I'm pretty sure I've seen this grid structure somewhere related to Fluent Design. On a white background the design either needs a shadow directly behind it or the cube color to black. I'll be sure to do some more experimenting!

[mdtauk]

[mdtauk]

[ratishphilip]

@ratishphilip - @ryandemopoulos, @stmoy, and myself really like how self-contained this design is.

Thanks for the feedback.

Here is a more refined logo.

Here is another take on the previous logo. My goal here is to depict that a part of the cube has been cut off to show the core of the cube (just like it is shown in earth diagrams)

[mdtauk]

Here is another take on the previous logo. My goal here is to depict that a part of the cube has been cut off to show the core of the cube (just like it is shown in earth diagrams)

First thing I see is a Play symbol

[ratishphilip]

Here is another based on @NoahFeller 's Fluent cube

[ratishphilip]

Here is the previous logo without the cut

[mdtauk]

Another take on @NoahFeller 's cube

[ratishphilip]

Another take on @NoahFeller 's cube

Dont you think this throws the angle brackets a bit out of balance?

[mdtauk]

Another take on @NoahFeller 's cube

Dont you think this throws the angle brackets a bit out of balance?

It does, sure - but it conforms to the faces of the cube. I just wanted to try out the colouring style.

And what's a little asymmetry between friends 😄

[SavoySchuler]

Not my proudest work, but I tried adding the brackets to @NoahFeller's idea. If done properly, perhaps, but as is I worry it looks busy/overdesigned?

[NoahFeller]

I see what you were going for @SavoySchuler. I feel that the icon might not need the brackets and its powerful enough to stand on its own. I’ll definitely iterate on the design (simplify and/or modify) and upload some different versions, some with and some without brackets. I feel the icon doesn’t look as good rotated though that can be fixed 🙂. By uploading, I was just trying to gauge whether or not people would like a design similar to this. Feedback seems to have been good so I’ll keep working. Thanks for the suggestions.

[yaichenbaum]

Another take on @NoahFeller 's cube

I love the two shades on the bracket!

[mdtauk]

4096

1024

256

128

64

32

16

[mdtauk]

4096

1024

256

128

64

32

16

[mdtauk]

4096

1024

256

128

64

32

16

[itsmichaelwest]

We really like what you did here! Is there any chance you have a high-fidelity version you could use to show us what this looks like with brackets on the side? We're imagining something like this:

@SavoySchuler here you go! Sorry for the wait, this thread seems to move pretty fast!

[mdtauk]

Mono Coloured version

[mdtauk]

@itsmichaelwest >here you go! Sorry for the wait, this thread seems to move pretty fast!

Sorry... 😛

[mdtauk]

Here are some but using Michael West's colour treatment...

4096

1024

256

128

64

32

16

1024 Cube Only

4096 Cube Only

[mdtauk]

I think I am done with these variations, unless @SavoySchuler @itsmichaelwest or others want anything in particular from me?

https://www.figma.com/file/KCQQ1wtMBnWxsXrmDOHmhB/WinUI-Logo-Share?node-id=0%3A1
_Here is the Link to the Figma file with some of my logos in_

[stmoy]

@mdtauk - thank you so much for all of your input and variations. A quick question - a lot of the designs are "cube within a cube". What is this double cube intended to convey?

[mdtauk]

@itsmichaelwest originally suggested using the XAML Icon as the basis of the logo, and his design was chosen in the first round of submissions.

I look at the cube as a core, a core part of building Windows apps, and so I decided to illustrate the concept of a core, by having a part of the cube stand out. I also toyed around with having a "void" space, to show that this is a space to build in.

But making the cube and bracket design something "ownable" and distinct, among the thousands of other cube based iconography out there, plays some role.

[yaichenbaum]

[NoahFeller]

Dark/Light version. Still working on the blue color a bit. As always, feedback is appreciated.

[ryandemopoulos]

@yaichenbaum I wanted to see what a monochrome version of the cube you posted might look like, but I'm not an artist so I literally mocked this up crudely in Paint: :)

Is this what you'd foresee a monochrome version looking like, or do you have another idea in mind of what a monochrome version might resemble?

[mdtauk]

I would like to redraw it completely if it is under consideration, but here is a quick edit with my thinking, These are only at the 16px scale, so redrawing it completely will be needed.

[NoahFeller]

Quick (not quite finished) monochromatic mock up of my design. Pretty fluenty 😄.

[yaichenbaum]

Totally new direction thats really fluent and can easily use different colors to fit on swag, stickers etc. This design indicates building blocks as well as a hidden one in the middle. I can show in other colors for lighter backgrounds if people are interested.

And a 3d version as well, with and without an outline.

[mdtauk]

@yaichenbaum I wanted to see what a monochrome version of the cube you posted might look like, but I'm not an artist so I literally mocked this up crudely in Paint: :)

Is this what you'd foresee a monochrome version looking like, or do you have another idea in mind of what a monochrome version might resemble?

@SavoySchuler Is this OK?

Single Coloured

4096

1024

256

128

64

32

16

[SavoySchuler]

FINAL ASK

@itsmichaelwest and @mdtauk our final two picks have come down to one proposal from each of you. We just wrapped up nearly two hours of deliberation with several team members and it has not been easy! We have one last ask for each of you before we decide...

@itsmichaelwest

For your logo, there is some concern about how the 2d brackets and 3d cubes hang together. Are there any alterations you can think of making that could help these components present themselves more cohesively? We're not sure exactly what's needed--if it's spacing, colors, etc... just that it feels a bit disjointed.

@mdtauk

For your logo here, several polled individuals responded that they were confused by thinking that the brackets inside the cube were supposed to be letters such as "I" and "J". To phrase this another way - there was concern that they lost the feeling of brackets. It seemed to get better on the most recent update when you thinned them a bit, but we are not sure if there's anything that could be done to make them feel more like brackets?

We would also love to see both hollowed and filled bracket lines on the monochromatic takes if relevant:

Both

For any final submissions, we would love to see them:

• Colored and monochrome versions against both black and white backgrounds
• In 16x16px, 64x64px, and high res sizes

Thank you

We know have asked a lot. When we started this whole process, we didn't know we would have so many great options to deliberate across and that the quality of submissions would be so incredible.

You all have raised the bar so high that I find we are now nitpicking over every little pixel and curve. The reason we're being so picky is because you all have given us gold.

If any of these final requests are too much to ask - we understand. Regardless of any continued effort, we will be sending you both and several others some well-deserved "thank you!" swag that bears the contributions you have made here.

[yaichenbaum]

Congratulations to both @mdtauk and @itsmichaelwest.
It is possible the issue you mentioned with people seeing it as an I and J have to do with the fact that using two colors for the left bracket make it look like a reflection on the top. Perhaps using the same color for the whole bracket would fix this 'reflection' issue and then the other bracket will no longer be seen as a J.

[mdtauk]

@SavoySchuler

@itsmichaelwest
For your logo, there is some concern about how the 2d brackets and 3d cubes hang together. Are there any alterations you can think of making that could help these components present themselves more cohesively? We're not sure exactly what's needed--if it's spacing, colors, etc... just that it feels a bit disjointed.

I have a suggestion for this, but it will be for Michael to propose a solution.

The shading on the brackets is inline with the shading on the cube.

[NoahFeller]

Congrats guys! A bit of feedback/ideas: I feel on @itsmichaelwest's design, the brackets should only be only partially rounded instead of the 'pill' shape which is more of a Google look. (Like what you just posted @mdtauk) Also I feel like the way the bracket wraps around on @mdtauk's design could be improved because it doesn't look right to me. Also you might want to make the glow a bit more spherical in shape because the dark purple bit seems to extend a little far down. Nice designs, just a few possible refinements I thought of.

[ryandemopoulos]

@yaichenbaum The bracket that looked like a J was the right-most one (on @mdtauk's logo); some team members felt it was too J-ish. Personally, I thought it got a bit better with the most recent version posted, as they were thinned out a bit. I know there is a desire to keep them thick enough that you can see the brackets on small versions.

Anyway, I'm not a designer nor do I even play one on TV. There could be any number of other ways to make them look more bracket-y; I'll leave that up to @mdtauk.

These designs are sooo good though. We're talking about minutia at this point.

[mdtauk]

I have scope to thin the lines out as the logo scales up. I can also tighten up the curves to make it more of a pointed edge, on the cube and the Bracket.

Do the three shades of colour hamper the Bracket like appearance?

[yaichenbaum]

@mdtauk what if you changed the brackets to a gradient? That way it would still have more the one color but they would blend in to each other better giving it more a of a unified shape.

[mdtauk]

...Also I feel like the way the bracket wraps around on @mdtauk's design could be improved because it doesn't look right to me. Also you might want to make the glow a bit more spherical in shape because the dark purple bit seems to extend a little far down. Nice designs, just a few possible refinements I thought of.

I used a Diamond gradient, rather than round, to hint at the idea of there being a coloured cube inside the frosted "acrylic" cube.

[mdtauk]

@mdtauk what if you changed the brackets to a gradient? That way it would still have more the one color but they would blend in to each other better giving it more a of a unified shape.

The problem with that would be maintaining the idea that the brackets are on the surface of the cube, but I will try to adjust it a bit more, straighten and thin them out some.

[NoahFeller]

...Also I feel like the way the bracket wraps around on @mdtauk's design could be improved because it doesn't look right to me. Also you might want to make the glow a bit more spherical in shape because the dark purple bit seems to extend a little far down. Nice designs, just a few possible refinements I thought of.

I used a Diamond gradient, rather than round, to hint at the idea of there being a coloured cube inside the frosted "acrylic" cube.

I see, it's too undefined to really tell IMO so maybe you can modify it a bit. You don't have to, just wondering if it could be improved.

[ryandemopoulos]

@mdtauk For me, I liked the different coloring/shades on the brackets. If there's a way to make them appear more bracket-y without losing the different colors I'd love to see that. But I suppose it's worth playing around with different shading and less colors to see if that helps too.

[NoahFeller]

@mdtauk what if you changed the brackets to a gradient? That way it would still have more the one color but they would blend in to each other better giving it more a of a unified shape.

It might also look cool to have the cube have a stronger glow of each color to the point where the cube is pretty much those three colors and the brackets could contrast the cube being either white or black. Just throwing ideas out there.

[yaichenbaum]

@mdtauk For me, I liked the different coloring/shades on the brackets. If there's a way to make them appear more bracket-y without losing the different colors I'd love to see that. But I suppose it's worth playing around with different shading and less colors to see if that helps too.

I liked them as well, its just having two different shades splits them up, it also make the bottom half of the left bracket a similar height to the right one giving it a look like a "abc" block with an I and J.

This might help improve it a little bit but in my opinion ruins the good look it had before.

[NoahFeller]

I think part of the problem with the brackets is you have a 3D shape with a lot of color and lighting behind them and they're just a solid color so the don't mesh as well. Looks a bit funny with both designs but it's more prominent when the brackets are on the cube.

[mdtauk]

@mdtauk For me, I liked the different coloring/shades on the brackets. If there's a way to make them appear more bracket-y without losing the different colors I'd love to see that. But I suppose it's worth playing around with different shading and less colors to see if that helps too.

4096

Single Colour

@ryandemopoulos Is this moving in the right direction?

[ratishphilip]

Congratulations @mdtauk and @itsmichaelwest.
Great designs so far!

[mdtauk]

I think part of the problem with the brackets is you have a 3D shape with a lot of color and lighting behind them and they're just a solid color so the don't mesh as well. Looks a bit funny with both designs but it's more prominent when the brackets are on the cube.

Not sure it works as an inverse

[ryandemopoulos]

@ryandemopoulos Is this moving in the right direction?

I'm just one opinion, but yeah, that looks more bracket-y to me. I think the sharper edges helped. For the monochrome version, the brackets still look super thick--what would it look like with the brackets just outlined, sorta like this? (except using your most recent geometry)

[NoahFeller]

Not sure it works as an inverse

Yeah you're right. I take this back ⬇. Thanks for testing it.

It might also look cool to have the cube have a stronger glow of each color to the point where the cube is pretty much those three colors and the brackets could contrast the cube being either white or black. Just throwing ideas out there.

[ratishphilip]

My opinion is the brackets should retain the same shape as in the logo for XAML with a little rounding

Here is my suggestion

[mdtauk]

@ryandemopoulos Is this moving in the right direction?

I'm just one opinion, but yeah, that looks more bracket-y to me. I think the sharper edges helped. For the monochrome version, the brackets still look super thick--what would it look like with the brackets just outlined, sorta like this? (except using your most recent geometry)

At the 32px and 16px sizes, the brackets will need to be filled to be legible, but how is this, for the larger sizes?

[SavoySchuler]

My opinion is the brackets should retain the same shape as in the logo for XAML with a little rounding

Here is my suggestion

@ratishphilip Is the left bracket vertically smaller or is it the shading causing a perceived difference?

[SavoySchuler]

@ryandemopoulos Is this moving in the right direction?

I'm just one opinion, but yeah, that looks more bracket-y to me. I think the sharper edges helped. For the monochrome version, the brackets still look super thick--what would it look like with the brackets just outlined, sorta like this? (except using your most recent geometry)

At the 32px and 16px sizes, the brackets will need to be filled to be legible, but how is this, for the larger sizes?

Tagging this geometry for @stmoy.

[ryandemopoulos]

@ryandemopoulos Is this moving in the right direction?

I'm just one opinion, but yeah, that looks more bracket-y to me. I think the sharper edges helped. For the monochrome version, the brackets still look super thick--what would it look like with the brackets just outlined, sorta like this? (except using your most recent geometry)

At the 32px and 16px sizes, the brackets will need to be filled to be legible, but how is this, for the larger sizes?

To be honest I'm not sure which I like better--filled, or outline. I'll need to stare some more. :) I think they both work, even at higher res. (and agree that at lower res, filled is the only real choice)

[mdtauk]

@ryandemopoulos @SavoySchuler @stmoy

4096

1024

256

128

64

32

16

Single Colour

[ratishphilip]

@ratishphilip Is the left bracket vertically smaller or is it the shading causing a perceived difference?

Both brackets are of the same size...

[ratishphilip]

Here is another with a 3d bracket

[ratishphilip]

Here is the outline

[SavoySchuler]

Here is another with a 3d bracket

This definitely solves the strange perspective I was seeing earlier. Nicely done!

[mdtauk]

Here is another with a 3d bracket

This definitely solves the strange perspective I was seeing earlier. Nicely done!

The cube is not rotated cleanly, there are diagonal lines top and bottom

[yaichenbaum]

Here is another with a 3d bracket

That also fixes the issue with it looking like it has an I and J.

[ratishphilip]

The cube is not rotated cleanly, there are diagonal lines top and bottom

:D yeah a slight rotation... thanks for bringing it to my notice @mdtauk ... can be easily fixed.

I am also thinking of removing the roundness from the innermost corner (which touches the edge of the cube) and making it sharp.

[mdtauk]

[ratishphilip]

Here is the updated logo

[ratishphilip]

Hi Res logo

[weitzhandler]

This one (or its dark counterpart) is beautiful. I like the gradient because it mixes a Fluent element.

Maybe the above should be divided into a 222 cube too, incorporating this, what a great idea! Would change the colors to stick out a bit more maybe.

However this one gives me an Apache Cordova connotation:

Especially those glossy black brackets.

[ratishphilip]

Especially those glossy black brackets.

@weitzhandler How about this?

[mdtauk]

@SavoySchuler posted the two preliminary logos on twitter, and the main comment I took from the responses, is that it doesn't feel very Windows like. So here is the same logo, but in the Microsoft Blue colour. I wonder if this helps?

[Felix-Dev]

I think the left and right brackets should look identical to each other in size as they also have the same size in XAML syntax (< >). Hence making them appear optically as different in size just looks weird to me (i.e. left bracket looks bigger than right bracket). I prefer the way @ratishphilip is displaying those brackets right now.

[mdtauk]

@Felix-Dev
@ratishphilip 's brackets are overlayed over a cube, not actually conforming to the sides of the cube. There is also a literal representation, versus a figurative interpretation. By that I mean you can actually have brackets, or you can represent brackets.

[yaichenbaum]

Even though not every logo needs to be blue, it makes sense with this. When I think of Win UI I think of Windows User interface. I also associate blue with Windows.
That last logo from @mdtauk calls out Windows in my opinion and has its own identity and I would be able to recognize what it means compared to the many other cube logos.

[NoahFeller]

@SavoySchuler posted the two preliminary logos on twitter, and the main comment I took from the responses, is that it doesn't feel very Windows like. So here is the same logo, but in the Microsoft Blue colour. I wonder if this helps?

I really like this @mdtauk! Big improvement in my opinion. I think having more of a reflective look versus a glowing look is better in this circumstance. Maybe just make the right side a tiny bit lighter or having a more similar gradient. But other than that great job.

[mdtauk]

Is this Dark gradient better?

[elalexg]

Hi Res logo

@mdtauk what if you try to implement the end of the brackets in @ratishphilip design in your brackets? I think the brackets will be confused by letters less if they both end in the same way.

[Felix-Dev]

If @mdtauk's designs were to be chosen, I would love for the brackets to be like @ratishphilip's brackets -- the brackets should both appear to be of the same size. @mdtauk Please also create a version of your logo with @ratishphilip's brackets.

[NoahFeller]

If @mdtauk's designs were to be chosen, I would love for the brackets to be like @ratishphilip's brackets -- the brackets should both appear to be of the same size. @mdtauk Please also create a version of your logo with @ratishphilip's brackets.

@ratishphilip's brackets don't make sense in 3D space. They're just floating there, and the shadows don't cast onto the cube properly. Part of the point of @mdtauk's desgn is that the brackets wrap around the cube.

[Felix-Dev]

@NoahFeller The brackets, IMO, should reflect XAML's brackets though, which are of equal size. This should be reflected in the logo. The issue I have with @mdtauk's design is that when looking at the brackets isolated - especially on smaller image sizes - I get the impression of the bracket sizes as this:

(The left bracket clearly being bigger compared to the right one. In XAML that simply isn't the case.) In some image resolutions, i.e.

this is pretty glaring to me and it throws me off, quite frankly. Bracket pairs <> are so prominent in XAML that I believe it is justified to "just slap" them on the cube as is, or at least give this plenty of consideration.

[elalexg]

@NoahFeller The brackets, IMO, should reflect XAML's brackets though, which are of equal size. This should be reflected in the logo. The issue I have with @mdtauk's design is that when looking at the brackets _isolated_ - especially on smaller image sizes - I get the impression of the bracket sizes as this:

(The left bracket clearly being bigger compared to the right one. In XAML that simply isn't the case.) In some image resolutions, i.e.

this is pretty glaring to me and it throws me off, quite frankly. Bracket pairs <> are so prominent in XAML that I believe it is justified to "just slap" them on the cube as is, or at least give this plenty of consideration.

I think @mdtauk's 3D bracket design is the way to go, but if the left bracket end the same way the right one does, it will make it look the same size, even with the 3D effect, I'm attaching a pretty ugly example just to make the point.

[NoahFeller]

@NoahFeller The brackets, IMO, should reflect XAML's brackets though, which are of equal size. This should be reflected in the logo. The issue I have with @mdtauk's design is that when looking at the brackets _isolated_ - especially on smaller image sizes - I get the impression of the bracket sizes as this:

(The left bracket clearly being bigger compared to the right one. In XAML that simply isn't the case.) In some image resolutions, i.e.

this is pretty glaring to me and it throws me off, quite frankly. Bracket pairs <> are so prominent in XAML that I believe it is justified to "just slap" them on the cube as is, or at least give this plenty of consideration.

I think @mdtauk's 3D bracket design is the way to go, but if the left bracket end the same way the right one does, it will make it look the same size, even with the 3D effect, I'm attaching a pretty ugly example just to make the point.

I see what you guys mean. You're probably right. Here's a quick version that's symmetrical and still 3D. It's very unfinished (no shadows, the brackets are too big, coloring could be better, etc.) but you can get the general idea of what I'm going for. Kind of a cool optical illusion effect where you can look at it two ways. Of course it's totally up to @mdtauk to decide what direction to take the design.

[ratishphilip]

@ratishphilip's brackets don't make sense in 3D space. They're just floating there, and the shadows don't cast onto the cube properly. Part of the point of @mdtauk's desgn is that the brackets wrap around the cube.

@NoahFeller the brackets do make sense in the 3D space. If you look at the cube in the direction shown by the red arrow below, the brackets would look like this

[ratishphilip]

Is this Dark gradient better?

@mdtauk A small suggestion... If the left bracket is conforming to the surface of the cube, then the two corners in the middle of the bracket should have a zero corner radius... same as the edge of the cube.

[SavoySchuler]

We've done it.

Community - you're amazing and I can't emphasis that enough. After, very literally, _hours_ of deliberation we have decided on one. It is the combination of @itsmichaelwest and @mdtauk designs:

Color:

(note: cube shadow not reflected here as I could not find a shadowed version with these corner radii)

Monochrome:

(note: see item 2 of the bottom section regarding symmetrical vs. asymmetrical brackets)

Thoughts

As @ryandemopoulos put it, "This logo is badass. It somehow looks modern and retro at the same time, hip and yet also historical, precise and asymmetrical. It’s a bit of a conversation piece, and that’s by design."

Calling designers for our last few steps

We're not totally done, but we're closer. These are the loose ends we're tying up:

1. We like this color scheme but we still need to explore some different color variants (and mix that with shadows/glows on various background too).

2. We received two really good versions: one with symmetrical brackets and the other with asymmetrical brackets. We're leaning toward asymmetrical (as shown right). Thoughts?

1. We need to design some swag. Shirts, stickers, bags, perhaps a physical model, etc. There's always the obvious, but I bet we could come up with something _really_ cool. 😄

[ratishphilip]

We've done it.

Community - you're amazing and I can't emphasis that enough. After, very literally, _hours_ of deliberation we have decided on one. It is the combination of @itsmichaelwest and @mdtauk designs:

Congratulations @itsmichaelwest and @mdtauk!

[SavoySchuler]

We've done it.

Community - you're amazing and I can't emphasis that enough. After, very literally, _hours_ of deliberation we have decided on one. It is the combination of @itsmichaelwest and @mdtauk designs:

Congratulations @itsmichaelwest and @mdtauk!

@ratishphilip I see you have been working hard helping us get here so congrats to you to for your influence and impact. I'm going to be looking at several of your proposed color schemes before we lock this down. 😊 Great work and thank you!

[NoahFeller]

@ratishphilip's brackets don't make sense in 3D space. They're just floating there, and the shadows don't cast onto the cube properly. Part of the point of @mdtauk's desgn is that the brackets wrap around the cube.

@NoahFeller the brackets do make sense in the 3D space. If you look at the cube in the direction shown by the red arrow below, the brackets would look like this

@ratishphilip if you were wondering what I meant by my comments on your design not working in 3D, I’ll explain it here. On your design, the shadows don’t match up with the light source illuminating the cube. They’re facing opposite directions. If the left bracket is perpendicular to the top face of the cube, it should have a long shadow cast behind it. Currently it just looks like a stretched bracket with a shadow that doesn’t make sense. If you look at the other bracket’s shadow, it seems to be facing the wrong way. Also the brackets look strange and morphed at an angle like that. The goal of the illusion is for the brackets to look good at the angle they’re being viewed from. I don’t understand why they’re distorted like that. There is no frame of reference for the original bracket shape (show on your right image) because it’s just an icon. I don’t mean to be super critical, I just want to provide you with feedback so you can be an even better designer.

[ratishphilip]

@ratishphilip's brackets don't make sense in 3D space. They're just floating there, and the shadows don't cast onto the cube properly. Part of the point of @mdtauk's desgn is that the brackets wrap around the cube.

@NoahFeller the brackets do make sense in the 3D space. If you look at the cube in the direction shown by the red arrow below, the brackets would look like this

@ratishphilip if you were wondering what I meant by my comments on your design not working in 3D, I’ll explain it here. On your design, the shadows don’t match up with the light source illuminating the cube. They’re facing opposite directions. If the left bracket is perpendicular to the top face of the cube, it should have a long shadow cast behind it. Currently it just looks like a stretched bracket with a shadow that doesn’t make sense. If you look at the other bracket’s shadow, it seems to be facing the wrong way. Also the brackets look strange and morphed at an angle like that. The goal of the illusion is for the brackets to look good at the angle they’re being viewed from. I don’t understand why they’re distorted like that. There is no frame of reference for the original bracket shape (show on your right image) because it’s just an icon. I don’t mean to be super critical, I just want to provide you with feedback so you can be an even better designer.

Thanks @NoahFeller. Appreciate your feedback.

[ratishphilip]

@NoahFeller is this how you were expecting the logo to be?

[NoahFeller]

@NoahFeller is this how you were expecting the logo to be?

It would probably look something close to that (the shadow probably wouldn't be so dark) but the problem is that the design doesn't look great being rendered accurately in 3D space. As I said earlier, the brackets look strangely compressed and not suited to the direction the the view is from. I could see it working better with properly shaped brackets floating parallel to the 'camera's' view and the shadows being accurately cast. Or it could be cool to see the brackets recessed into the cube or something. IMO your design doesn't work that great in its current form. But the good news is it can definitely be altered for the better in some different ways.

[NoahFeller]

Thoughts on the Final Design

While the last tweaks are happening, I have a few things I want to mention about the design. First off, it's really cool to see the acrylic cube + glow combination being used. Also I have a bit of concern about the solid colored brackets on top of the 3D cube. The cube is emitting a light and there seems to be a directional light to the side of the cube so it doesn't make sense that the brackets are solid colors. They should probably have a slight gradient look that matches the lighting sources (not so much gradient that it looks tacky, only so it's realistic). Otherwise it doesn't make sense in 3D space at all and looks off. The last thing I wanted to ask is would you (@SavoySchuler, @stmoy) consider making the brackets symmetrical like this?

As I said earlier when I posted it, this is a very rough design (no shadows, the brackets are probably too big, coloring could really be improved, etc.). Even so, it addresses a lot of the problems I've seen here and on Twitter about the brackets being asymmetrical and different shapes and does so while still wrapping around the cube in a similar fashion to before. Just imagine the right bracket being extended on @mdtauk's cube. Feels like a big improvement to me because the change more distinctly makes the brackets look like what they are instead of letters or something. Also symmetry when possible is nice, and provides balance! Obviously the style would be added to @mdtauk's acrylic cube with the glow and not his blue cube (that's shown in the picture above), but would you be open to the idea of seeing this modification experimented with further?

Also congrats @itsmichaelwest and @mdtauk!

[chingucoding]

First of all congratulations to @itsmichalwest and @mdtauk and a huge thank you to @mdtauk for sharing his figma files !!!

As to @SavoySchuler comment:

1. We like this color scheme but we still need to explore some different color variants (and mix that with shadows/glows on various background too).

Here is my take on @mdtauk awesome design:

I have switched out the teal,blue and pink with variations of the windows theme blue to give it a more "Windows" feel.

[yaichenbaum]

Really excited to see the final icon! Looks really polished! @mdtauk and @NoahFeller in particular shared a lot of incredible ideas and view points that are going to be helpful for any designs I do in the future.

[NoahFeller]

The left image is @chingucoding's take on @mdtauk's design. The right image is my revised version where the brackets are symmetrical (By symmetrical I mean not just in height but also in shape as you can see). Looking at them side by side, the asymmetry completely throws me off. In my opinion, the symmetry brings balance and the icon feels less complex. A lot of angle brackets I've seen actually have their ends at angles vs being flat like the left bracket was originally so this change doesn't hurt readability (possibly the opposite). If you think of a hexagon as 6 triangles, the angled ends more elegantly cradle the shape giving the icon a more geometric nature for the top GIF version. Below are some GIFs showing the difference between the revised and unrevised versions for both of @chingucoding's designs. Let me know what you all think. Also great job @chingucoding.

[ratishphilip]

@NoahFeller doesn't it become the same as one of my previous submissions (by making the brackets the same color)

[NoahFeller]

@NoahFeller doesn't it become the same as one of my previous submissions (by making the brackets the same color)

Sort of. The brackets being multi colored gives them the look of wrapping around the cube so its a bit different. The color differences are somewhat significant. As I've mentioned earlier, @mdtauk's brackets work much better for making sense in 3D. Also @mdtauk's brackets are a bit thicker. But yeah you can think of it as a combination of the two designs. I was trying to improve the implementation of the brackets of each. A happy medium 🙂.

[NoahFeller]

Oh I totally forgot to mention that this version has a cube within a cube design which I've seen featured on a few designs on this page. I think it's a really cool aspect to integrate and has some cool meaning behind it. Below is what @mdtauk said when explaining his cube within a cube designs in response to @stmoy:

@mdtauk - thank you so much for all of your input and variations. A quick question - a lot of the designs are "cube within a cube". What is this double cube intended to convey?

@itsmichaelwest originally suggested using the XAML Icon as the basis of the logo, and his design was chosen in the first round of submissions.

I look at the cube as a core, a core part of building Windows apps, and so I decided to illustrate the concept of a core, by having a part of the cube stand out. I also toyed around with having a "void" space, to show that this is a space to build in.

But making the cube and bracket design something "ownable" and distinct, among the thousands of other cube based iconography out there, plays some role.

[NoahFeller]

And here's a symmetrical bracket cube within a cube design based on @mdtuak's green/blue/purple design.

[ratishphilip]

My opinion is that the width of the brackets should be 1/4th of the width of the outer cube. The inner cube should be half the size of the outer cube which will place the brackets at a distance, of 1/4th the width of the cube, from the edges of the outer cube.

[NoahFeller]

And here's a symmetrical bracket cube within a cube design based on @mdtuak's green/blue/purple design.

I tweaked the brackets to be slightly closer. I think it looks a bit better like this.

[mdtauk]

@SavoySchuler Is this the kind of colour you would want to go with?

[goranalkovic]

Symmetrical brackets are definately much nicer. Would like to see a concept where the inner corners are also rounded.

[NoahFeller]

Symmetrical brackets are definitely much nicer. Would like to see a concept where the inner corners are also rounded.

Totally agree. It's hard to tell that they're angle brackets otherwise. Can you clarify what you mean by inner corners?

[mdtauk]

[NoahFeller]

Cool new color combinations @mdtauk! You've done some awesome work. I was wondering if you had an opinion on whether or not to have angle brackets symmetrical in shape. I've seen @Felix-Dev, @elalexg, and @goranalkovic post here about how they prefer symmetrical brackets. I'm curious if you have a contrasting viewpoint. @Felix-Dev's post is below for context.

@NoahFeller The brackets, IMO, should reflect XAML's brackets though, which are of equal size. This should be reflected in the logo. The issue I have with @mdtauk's design is that when looking at the brackets _isolated_ - especially on smaller image sizes - I get the impression of the bracket sizes as this:

(The left bracket clearly being bigger compared to the right one. In XAML that simply isn't the case.) In some image resolutions, i.e.

this is pretty glaring to me and it throws me off, quite frankly. Bracket pairs <> are so prominent in XAML that I believe it is justified to "just slap" them on the cube as is, or at least give this plenty of consideration.

[mdtauk]

Visual Studio Purple

[mdtauk]

Cool new color combinations @mdtauk! You've done some awesome work. I was wondering if you had an opinion on whether or not to have angle brackets symmetrical in shape. I've seen @Felix-Dev, @elalexg, and @goranalkovic post here about how they prefer symmetrical brackets. I'm curious if you have a contrasting viewpoint. @Felix-Dev's post is below for context.

@NoahFeller Making them symmetrical would mean separating the Brackets from the Cube. I produced a version with the brackets of the same size (but not symmetrical in shape) - and the team making the decisions seems to be siding towards keeping the Asymmetry.

If you view the Brackets as being a literal representation of the angle brackets from XAML/XML, then you will surely take umbrage with the stylised approach.

But if they shapes are symbolic of the brackets, but the Cube itself is the logo, then the asymmetry hints at the brackets, whilst being stylised enough to be an interesting logo.

Making the brackets symmetrical, whilst keeping them laid onto the cube, would mean rotating the cube, and that has not been asked for, and is another move away from the XAML logo inspiration.

[SavoySchuler]

Colors

@mdtauk - you have been amazing. All we need is your vector format files for the logos below (left and center shapes preferable if available). Otherwise, please do not feel obligated to lend us anymore of your time unless you wish. We couldn't ask for any more without feeling guilty!

Excluding, @mdtauk's most recent submissions (which we will evaluate shortly), these are the three color combinations we like most so far. They all nod toward either Windows or our Developer Tools branding colors which we seek to align closely with.

As a last exploration, we'd like to see if it’s possible to work this design in the official Microsoft colors nicely (if at all possible). I've been exploring this offline and I have not yet come up with anything I would be proud to post. Unless anyone here can, we will be selecting from the color schemes above.

As for bracket/height shape, our interest is in whatever best complements the colors. So far, I believe the left and center images above do this the best, but that does not by any means rule out the right item above or any alternate color submissions that deviate from this.

[mdtauk]

Colors

@mdtauk - you have been amazing. All we need is your vector format files for the logos below (left and center shapes preferable if available). Otherwise, please do not feel obligated to lend us anymore of your time unless you wish. We couldn't ask for any more without feeling guilty!

Excluding, @mdtauk's most recent submissions (which we will evaluate shortly), these are the three color combinations we like most so far. They all nod toward either Windows or our Developer Tools branding colors which we seek to align closely with.

As a last exploration, we'd like to see if it’s possible to work this design in the official Microsoft colors nicely (if at all possible). I've been exploring this offline and I have not yet come up with anything I would be proud to post. Unless anyone here can, we will be selecting from the color schemes above.

As for bracket/height shape, our interest is in whatever best complements the colors. So far, I believe the left and center images above do this the best, but that does not by any means rule out the right item above or any alternate color submissions that deviate from this.

I too have tried to use the Microsoft Four Square logo colours, and couldn't get them to look good together whilst still preserving the cube's dimensionality.

What tool are you using to work with? I have been using Figma, as I believe it is a tool Microsofties are familiar with, but I can transfer them into Illustrator if that is preferred?

[NoahFeller]

Thanks for sharing you viewpoint on symmetry/asymmetry @mdtauk.

@NoahFeller Making them symmetrical would mean separating the Brackets from the Cube. I produced a version with the brackets of the same size (but not symmetrical in shape) - and the team making the decisions seems to be siding towards keeping the Asymmetry.

Making the brackets symmetrical, whilst keeping them laid onto the cube, would mean rotating the cube, and that has not been asked for, and is another move away from the XAML logo inspiration.

I don't see what you mean by saying that making the brackets symmetrical means they would have to be separated from the cube. I'm also not sure what you mean by the need to rotate the cube in order to keep the brackets symmetrical. I didn't have to do either of those things when I iterated on your design, I only slightly modified the height and shape of your brackets to achieved symmetry ⬇. Unless I'm misinterpreting what you're saying, those parts of your statement don't seem right.

@elalexg also clarified that point in his comment:

I think @mdtauk's 3D bracket design is the way to go, but if the left bracket end the same way the right one does, it will make it look the same size, even with the 3D effect, I'm attaching a pretty ugly example just to make the point.

I was partially inspired by him for modifying your design.

I also don't see how your brackets are symbolizing angle brackets. They just seem to be angle brackets, only with one a bit bigger than the other. As @Felix-Dev said, the original XAML brackets are symmetrical so it would seem symmetry would actually be closer to the previous XAML designs, not moving away from it.

I can see what you mean by wanting the logo stylized though. It feels unnatural to me and the others I mentioned to see the different sized brackets but I can totally see how you see differently. I feel like the logo is complex enough with texture, glow, a bunch of different colors, etc. and doesn't need more interest but again I can see how you think otherwise.

Really it's up to @SavoySchuler and his team to decide which way to go, I'm just trying to understand your rationale. Thanks again for explaining!

[NoahFeller]

FYI I'm planning on designing (in 3D) and 3D printing myself a real life version of whatever the (final) final logo ends up being. I'm going to use some translucent filament to emulate the acrylic effect (example below). I'll be sure to share a photo of the result if any of you are interested!

[ryandemopoulos]

FYI I'm planning on designing (in 3D) and 3D printing myself a real life version of whatever the (final) final logo ends up being. I'm going to use some translucent filament to emulate the acrylic effect (example below). I'll be sure to share a photo of the result if any of you are interested!

Awesome. We've already spoken a bit internally about making physical objects like this based on the logo; can't wait to see what you come up with!

[yaichenbaum]

I tried with the Microsoft brand colors as well and it didn't quite work out, I think the color scheme to go with is Windows since this is Win(dows) UI after all.
@mdtauk had an interesting idea with the Visual Studio colors that could make sense too.

Looking at all the comments about symmetry/asymmetry for the brackets, I lean more toward the asymmetric design as that gives another unique look to the logo and somehow seems to draw out the cube a little better.

[mdtauk]

I don't see what you mean by saying that making the brackets symmetrical means they would have to be separated from the cube. I'm also not sure what you mean by the need to rotate the cube in order to keep the brackets symmetrical. I didn't have to do either of those things when I iterated on your design, I only slightly modified the height and shape of your brackets to achieved symmetry ⬇. Unless I'm misinterpreting what you're saying, those parts of your statement don't seem right.

I also don't see how your brackets are symbolizing angle brackets. They just seem to be angle brackets, only with one a bit bigger than the other. As @Felix-Dev said, the original XAML brackets are symmetrical so it would seem symmetry would actually be closer to the previous XAML designs, not moving away from it.

I can see what you mean by wanting the logo stylized though. It feels unnatural to me and the others I mentioned to see the different sized brackets but I can totally see how you see differently. I feel like the logo is complex enough with texture, glow, a bunch of different colors, etc. and doesn't need more interest but again I can see how you think otherwise.

Really it's up to @SavoySchuler and his team to decide which way to go, I'm just trying to understand your rationale. Thanks again for explaining!

I wanted the "marks" on the cube, to align to the sides of the faces of the cube. By cutting the left bracket's end strokes at a diagonal angle, it feels un-natural to the contour of the cube, and makes it feel like it is disconnected from the rotation.

But it is now for @SavoySchuler and the team to take the design, and interpret and mould it into what the team want and need from it.

I am just finishing up Adobe Illustrator versions, stripped of all colour, so they can take it as a starting point.

[mdtauk]

Here is the Illustrator file, zipped
Final Logo Shapes.zip
_EDIT: Updated Illustrator File with Filled Mono Coloured versions added_

16

32

64

128

256

1024

4096

[NoahFeller]

Ok thanks for clarifying @mdtauk. I did it that way to achieve the subtle cube within a cube design that I've talked about in an earlier post. Because the angle of the line cap is 45° it's on the diagonal line of the square so I don't feel it's too unnatural. I see what you mean though. I think I prioritized fitting the shape as a hexagon while you prioritized fitting it as a cube and there is a little bit of compromise either way (balanced symmetry with cube within a cube design vs added character and better wrap). Anyways, I really appreciate the explanation!

[mdtauk]

Ok thanks for clarifying @mdtauk. I did it that way to achieve the subtle cube within a cube design that I've talked about in an earlier post. Because the angle of the line cap is 45° it's on the diagonal line of the square so I don't feel it's too unnatural. I see what you mean though. I think I prioritized fitting the shape as a hexagon while you prioritized fitting it as a cube and there is a little bit of compromise either way (balanced symmetry with cube within a cube design vs added character and better wrap). Anyways, I really appreciate the explanation!

Neither approaches are better than the other, just different ideas at the core. As you say, I didn't want to lose the fact this is a cube, with depth, and texture, as the original intention behind the XAML logo.

[embender]

Here is the Illustrator file, zipped
Final Logo Shapes.zip
_EDIT: Updated Illustrator File with Filled Mono Coloured versions added_

16

32

64

128

256

1024

4096

hey friend! we would love to have both the original multi-colored & the blue logo designs you made as you initially sent it, one .ai file in a zipped folder. they look great! thank you for helping us, we really like your work so much that we want to keep it as is :) thanks again

[mdtauk]

@embender Hopefully these are what you want 😃

Blue Logo no shadow.zip

Multi Colour Dark Logo.zip

Multi Colour Light Logo.zip

[mdtauk]

@SavoySchuler @embender I have updated the Figma with the final logos and colours, these include the shadows which would have ballooned the filesize of the Adobe Illustrator files.

https://www.figma.com/file/KCQQ1wtMBnWxsXrmDOHmhB/WinUI-Logo-Share?node-id=0%3A1

[michael-hawker]

Is it just me or do the smaller grey cubes look fuzzy? Is that just an image compression artifact or something?

[mdtauk]

Is it just me or do the smaller grey cubes look fuzzy? Is that just an image compression artifact or something?

The Greyscale Logos I posted previously?

The images should be crisp when viewed at 100% zoom, as they are designed to look crisp on a pixel grid.

[stmoy]

@mdtauk - thank you again for all of your contributions and rapid responses. You have been invaluable during this process. Thank you also for providing monochromatic logos - I think they will look great on swag!

If it is not too much trouble, could you send along assets that demonstrate the outline version of the logo including the asymmetrical brackets? Something like this, but updated to the latest designs:

Also, what are your thoughts on the outline thickness? I know there have been conversations about ensuring that the outline thickness helps maintain the logo at small pixel sizes, but for swag, I wonder if thinner lines would be more effective?

[dbeavon]

I really like the asymmetrical version of logo where lines extend to the outer edges of each face. Ie.
Multi Colour Light Logo.zip

It allows each face to be coherent in its own right, and allows you to imagine what the hidden faces would look like if the cube was rotated.

On that note, it might be cool if the design was used for rubik's cubes.

[mdtauk]

@stmoy I did thin the outlines slightly as scaling up, but for 16 and 32, I wanted to keep it to 1 px thickness.

Anyway I have added thinner Monoline weight icons to the Figma.

[michael-hawker]

Is it just me or do the smaller grey cubes look fuzzy? Is that just an image compression artifact or something?

The Greyscale Logos I posted previously?

The images should be crisp when viewed at 100% zoom, as they are designed to look crisp on a pixel grid.

Ah, silly me and DPI scaling! 😛

[SavoySchuler]

Logo Finalized

Hello, wonderful community! As I'm sure you've seen over the last week, we've definitely, most certainly, without question, 100%, for real landed on a logo that we are SUPER excited about! A huge thanks to all of you for driving this home. We really wanted to create something that combined all the favorite work that everyone put in here. We believe this does that.

Let's debrief

We have the old Xaml logo here:

When @itsmichaelwest breathes fresh life into history, you get something wonderful:

From there, we turned to the community. After (nearly) another hundred submissions exploring re-colorization and styling, we fell in love with this simple, yet elegant twist to self-contain the brackets. As @embender put it, paraphrased, "I like the different heights on the brackets. It makes it a little abstract - paints some art onto the science," which is what UI coalesces to - art and science rolled into one."

As for the color - our user community spoke and demanded something that still "felt like Windows." @mdtauk made it easy to imagine this familiar blue representing our community once more:

Of course, in this brief summary, I am abridged the ~300 interactions from nearly 40 contributors here and volumes more on Twitter and offline. The short story is this: We couldn't have done this without all of you, and I hope you all see a little bit of your work and your story reflect in what we've created together. It somehow looks modern and retro at the same time, hip and yet also historical, precise and asymmetrical. It’s a bit of a conversation piece, and that’s by design. 😊

Looking forward

Considering how diverse this collaborative effort was and all the colorful variations we saw, how could we not keep things lively with all the ideas you've given us? We are excited to be experimental with the colors and theme. Keep an eye on Twitter as we share fun design work and try to come up with celebratory month, holiday, and release themed variants to share! 😊

We are also going to start iterating on exciting swag designs. Make sure to stop by our booth at Microsoft Ignite to pick up one of these stickers below!

Swag Link?

I saw there were requests to make personal swag purchasing links available. As soon as we have our swag lineup finalized, I will look into whether I can make this happen and report back to this thread. I will hold off on closing the issue until then!

[SavoySchuler]

We have swag to share!

Community Team, I heard you loud and clear. You wanted the chance to buy the same swag our internal team members will be rocking at Microsoft Ignite, on stage, and across the world. We chose to design and order our swag through a company that could make that happen for you.

I placed our final order of 100+ items today. Each team member got to choose one or the other. Many liked both so much, we took one and ordered the other ourselves (me included)!

Please let me know if you have any questions. I do have a few notes:

• If you were a winner of our "1000th Issue - Thank You!" giveaway, please hold off on placing an order for these items.
• The hoodies require a minimum order of 6. You can easily swap the product for one with no minimum or put a group order form together.
• If you order this week/ship to your hotel, you can get these in time to join us in wearing them at Microsoft Ignite in Orlando, FL, November 4th - 8th!

WinUI Hoodies Ordering Link

WinUI Shirt Ordering Link

[shaheedmalik]

That final logo turned out great. It really pops.