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

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

2. by @mdtauk

3. also by @mdtauk

4. by @niels9001

5. by @NoahFeller

6. 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...

[yaira2]

Rough concept based off the concept from @ratishphilip

[yaira2]

[mdtauk]

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