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.

[aminulmaruf]

[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]