Replies: 22 comments
-
|
Seems cool, would you like to contribute the change? :) |
Beta Was this translation helpful? Give feedback.
-
|
Having a new icon for the test app would be amazing, @mdtauk do you already have something specific in mind? Maybe something that incorporates the WinUI logo? If we have settled on the new logo, I would be more than happy to help create a PR to update the logo! |
Beta Was this translation helpful? Give feedback.
-
|
I was just toying around with one idea - using the green colour used by the Dev tag for Edge and other apps - but keeping the tool iconography. Its not a high priority item for sure, and could be a community derived design. |
Beta Was this translation helpful? Give feedback.
-
|
Sounds like a good idea. I think it could be more consistent with other fluent icons though - here's a quick mockup I made based on your idea:
|
Beta Was this translation helpful? Give feedback.
-
This is not a public facing app, so it shouldn't match the others too closely IMO. The green Dev badge is used for in-development apps, so that is why I used it for my quick idea |
Beta Was this translation helpful? Give feedback.
-
|
Speaking from a "user" point here, ideally, I would be able to know what MUXControlsTestApp is about because right now the logo and it's purpose have little connection. I really like @mdtauk idea with the "dev badge" green. |
Beta Was this translation helpful? Give feedback.
-
Is there an established visual metaphor for tests or testing? It is a developer app, and tests the UI and features of WinUI - so if you break it down, there is
As an Icon...
|
Beta Was this translation helpful? Give feedback.
-
|
I'm not sure if there is iconology for testing really, Something that is used sometimes is some form of checkmark (or checklist) or test tube (Reference), but not sure how good those look when incorporated into the logo. |
Beta Was this translation helpful? Give feedback.
-
|
This adds more of the UI elements - but nothing for testing A modern window with NavigationView, extended into titlebar area - the "material" with the acrylic like Wrench |
Beta Was this translation helpful? Give feedback.
-
Thanks for the input! I don't think your icon would hold up at small sizes though - in particular, the use of the gradient and acrylic effect on the wrench, as well as the partial obscuring of the 'dev' badge, would likely cause readability issues at small sizes. My other criticism, though it's more my opinion than an actual usabilty problem, is that I don't agree with the switch to using a navigation pane to illustrate the app window. I prefer to emphasise the title bar rather than the navigation pane, since it's a universal component shared by all windows, and should generally be more recognisable and 'window-like'. Based on the feedback in this thread, I've made some changes to my original design to try and improve it - notably, I've switched from the blue icon colour used by Windows apps to the grey icon colours from Windows Terminal, to give it more of a 'development' feel and to visually separate it from other apps on the system at a glance. I did like the 'dev badge' icon idea, so I've added it too. How's this?
|
Beta Was this translation helpful? Give feedback.
-
The detail would be reduced as the icon size gets smaller of course, the added details come as you scale up.
The titlebar as an element is not exactly modern, and most modern apps blend into it, so whilst I appreciate the window-like representation, but this app is less about the app, and more about testing UI - the NavigationView has become the key pattern for app layout and navigation. |
Beta Was this translation helpful? Give feedback.
-
While I agree with your general logic, and do agree that NavigationViews are important, I still don't think it justifies the change. In a desktop environment, the most common way of representing an interface in an icon is to represent it's window chrome. Users will generally be most familiar with this design, as it has been used across a majority of apps for the past few decades across multiple operating systems and desktop environments. It is important that we don't unnecessarily change widely accepted and used metaphors, otherwise it might be confusing or unintuitive to users. While it's true that many apps don't visually distinguish their title bar from their main content area, the title bar portrayed in icons is still an important visual cue - it communicates to the user that the shape they're looking at represents a window. The title bar shape in the icon therefore serves an important functional purpose; it provides context to the otherwise abstract shapes of the icon. I can't see any benefit from changing the title bar representation to highlight a navigation pane instead - it makes it less clear that the app icon represents an interface, because it abandons the design which users have come to know, instead favouring a novel design that is not widely used or immediately obvious. To talk more specifically about your proposed design, I also think that attempting to use this navigation pane design is introducing a few problems with the composition of the icon in general. The navigation pane in your icon takes up a lot of space on the left side of the icon, meaning the right side of the icon has to accomodate four elements in a limited space:
This is problematic - it means that, at the smallest sizes, your design ends up rather cramped on the right hand side. This hinders the readability of your icon, because the distance between separate elements of your design is significantly reduced. In fact, in the 16x16 variant of your icon, the wrench shape (which is arguably one of the most important shapes in the icon for recognisability) only gets 1px of room around the top and sides:
This is bad because oftentimes these icons might be displayed on light backgrounds - the user has to rely on a handful of pixels to define the shape of the entire wrench. By sticking to the title bar design, the composition of the icon can be greatly improved at these smaller sizes by allowing each element of the icon to have sufficient spacing for easy recognition. There's even enough space to allow the text to stay present at 16x16, which helps because it keeps the design more consistent across multiple icon scales:
The composition here makes more sense - the title bar is free to occupy the upper region of the icon without disturbing the other elements. The 'content area' rectangle then has a lot of space free for it to occupy, giving the wrench shape a much larger background to stand out against, improving readability. Finally, the 'dev' badge can sit unobstructed in the corner, without interfering with the wrench or throwing off the balance of the icon. Of course, I'm open to change and further discussion, these are just my thoughts right now 🙂 |
Beta Was this translation helpful? Give feedback.
-
|
Maybe the team can also way in on this, after all they are the ones confronted with this logo the most. @StephenLPeters @ranjeshj feel free to let them know, don't want to mass ping everyone here. I don't think that the wrench is set in stone here, it existed in the old logo, but I don't think it is something you need to keep up. An issue with the "dev" badge I see is that it suggests there is a non "dev" version (like edge or chrome have). |
Beta Was this translation helpful? Give feedback.
-
Yeah - I initially had reservations about the dev badge for that reason. I don't think it's too big of a deal, but I'd definitely welcome more feedback. |
Beta Was this translation helpful? Give feedback.
-
The current logo has a hammer, but the wrench is easier to draw geometrically 😜
This is why I created a Discussion rather than a proposal or PR for this. Everyone should weigh in with ideas or comments. Once some kind of consensus is reached, then we can worry about the implementation. |
Beta Was this translation helpful? Give feedback.
-
Problem is that there aren't many options that indicate "testing" or development.
Oh haha yes, totally forgot that haha, you are totally right.
👍 @mdtauk Could you rename the discussion while we are at it? The MUXTestApp is already open source so having a logo is something that shouldn't have to wait on WinUI 3 open source. |
Beta Was this translation helpful? Give feedback.
-
Done - I included the bit about opening source because I figured it would not be a priority until then, and the community can get more involved in ongoing work. |
Beta Was this translation helpful? Give feedback.
-
|
There is this Icon used previously by Xbox for developement/construction
|
Beta Was this translation helpful? Give feedback.
-
|
What about a small crane holding the WinUI logo (just uttering random thoughts here). Or how about a wrench working on the WinUI logo? |
Beta Was this translation helpful? Give feedback.
-
|
The WinUI logo would be pretty small if it has to fit inside a wrench, especially at 12 x 12 or 16 x 16 sizes |
Beta Was this translation helpful? Give feedback.
-
|
Maybe not inside but rather underneath it or partially obstructed by the wrench? |
Beta Was this translation helpful? Give feedback.
-
|
Here's some ideas I came up with that involve the WinUI logo - haven't tried cranes or anything yet, but I quite like the look of the three on the right personally;
They're all designed on a 16x16 grid, so they'll be easy to scale up later and should look crisp at any size: edit: tested them out on some splash screen mock ups too, to get a better feel for what they'd look like within Windows:
|
Beta Was this translation helpful? Give feedback.
-
Discussion: [your title here]
Should the current Logo used for the WinUI MUXTestApp get updated to something more fluent once the project is fully open sourced.
Related Links
The Current logo is a bit of a Metro throwback...
Beta Was this translation helpful? Give feedback.
All reactions