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!

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

[yaira2]

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

Looking at all the comments about symmetry/asymmetry for the brackets, I lean more toward the asymmetric design as it gives a 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.