We’ve upgraded the UI in Visual Studio 2022

Emily

In Visual Studio 2022, our team made a series of targeted investments to upgrade the Visual Studio user interface. We’re committed to spending time on the things that have meaningful impact to your product experience, so we grounded our work in real problems and suggestions surfaced by you and made sure to work with you every step of the way to ensure we got it right. The resulting refresh, we’re proud to say, supports improved wayfinding and visual cohesion, more intuitive and legible (yet still familiar!) iconography, improved accessibility, and the start of some customization options that let you make Visual Studio your own.

Visual Studio 2022 is clearly modern, and clearly Microsoft

From a basic wayfinding perspective, distinguishing updates to the look and feel and packaging of a new product make it easier for you to know when you’re using the new product versus other versions you may have running at the same time. From the product icon in menus, to marketing stories about the new release, to the splash and welcome screen, to the UI (theming and iconography) itself, establishing a recognizable style and theme for our 2022 product helps you make sure you’re working in the right place.

How we design that recognizable visual language matters, and we’ve taken advantage of opportunities to align more closely to the Microsoft brand, especially the signature Microsoft Fluent look and feel. Making this subtle but important shift showcases Visual Studio in its position as the best-in-class tool for developers and makes sure customers can feel confident and secure that this release has the power of Microsoft behind it.

 

Intuitive yet familiar iconography supporting improved efficiency and flow

We hear customers say they find our product user interface overwhelming, complex – even daunting. Yet, we’re keenly aware that even seemingly small changes in iconography can have a significant impact on the day-to-day flow for existing users. So, we started by asking developers like you simple questions: What works about these icons today? What could be better? No matter how much experience they had with Visual Studio, we got the same comments over and over:

  • Change is OK as long as it doesn’t alter meaning.
  • Meaningful and consistent color usage makes it easier to recognize and understand.
  • Sharp contrast and a recognizable silhouette are essential for legibility.

We turned what you care about into principles and, ultimately, acceptance criteria for our work: consistency, legibility, and familiarity.

 

Image 2019 Option02 2019

Image 2022 Option02 2022

Left: Consistency Middle: Legibility Right: Familiarity
Placing the pen / “edit” modifier in a predictable place, lower right

Choosing between “filled” and “open” styles

 

Using color to align and clarify real-world reference points

Leveraging what we know about contrast and accessibility to make each element recognizable to all audiences

Keeping symbols that have a long tradition of meaning, like the package

Preserving color where color is key to findability

 

 

Applying these principles and some functional considerations around consistent placement of modifiers and overlays, aligning and simplifying colors to limit, say, 10 blues to one, and we started testing the new icon set in internal builds.

Image old vs new icons example 1 215 2 2 Left: Visual Studio 2019.  Right: Visual Studio 2022.

 

After more than a year collaborating with customers to optimize the new icons for developers’ needs, and a month of shipping Visual Studio 2022 Preview 2 with the new icons on by default, we’re pleased with the response. In addition to helping us find and fix hundreds of little bugs, you’ve also given crucial feedback that aided us in identifying and addressing a couple of larger opportunities to optimize the icons for specific audiences. And the positive comments and feedback you shared with us gave us confidence that the icon refresh is landing just where we’d hoped – as something that feels modern, legible, and intuitive.

“They’re very sleek and work incredibly well with dark themes. Also easier to differentiate items with file nesting.”

“[B]etter contrast with the background makes it easier to identify what the icon is.”

 

An updated dark theme that’s easy on the eyes, plus new more accessible font options in editor

In Preview 4, existing dark theme users saw subtle but important updates to their existing theme. We’ve updated the dark theme with improved accessibility, better alignment with Microsoft design language, and more consistent color alignment. Over the last year, we’ve seen data that shows the dark theme has replaced light theme as the most popular, and we’ve also seen a growing trend toward dark theme in developer experiences within Microsoft and across the industry. So, what did we update and why?

 

Color contrast ratio adjustment

We hold ourselves to high standards for accessibility, so we’re adjusting overall color contrast to make the new dark theme accessible for more people. When an element is being focused on, the component gets a border with increased color contrast, so users can quickly tell the state has changed. The separation between layers and sections is more obvious so that the UI hierarchy is clear.

Image showing comparison between Visual Studio 2019 and Visual Studio 2022 dark theme menu item focus state.Left: Visual Studio 2019. Right: Visual Studio 2022

 

New accent color

On hearing feedback from you that the current highlight color gives a glaring spotlight effect in a mostly dark theme environment, we decided to make the accent color less intense, and to use it more sparingly, to reduce distraction and eyestrain. The new accent color now matches our latest product visual identity, which also helps users quickly find the right window when they are navigating among multiple tools such as Visual Studio Code or older versions of Visual Studio.

Image showing comparison between Visual Studio 2019 and Visual Studio 2022 dark theme accent color usage.Left: Visual Studio 2019. Right: Visual Studio 2022

 

Freedom to choose the theme that’s right for you

We think most of you will benefit from the improvements to contrast, accent color, and accessibility in the new dark theme. We understand that some of you may prefer to stick with what’s familiar, so we’ve made the Visual Studio 2019 dark theme available for download as an extension. In addition, there are a wide range of custom themes on the Visual Studio marketplace – so it’s easy to choose the theme that makes Visual Studio work best for you.

 

More accessibility and flexibility in editor fonts

In Visual Studio 2022 we added Cascadia Code and introduced Cascadia Mono as a default font. Cascadia is a new, modern, monospaced font family that provides better flexibility for command-line applications and text editor experiences. Cascadia Mono, which you may recognize from the new Terminal, was designed for optimal legibility and accessibility. Cascadia Code is also included in 2022 as an option for developers who use programming “ligatures” – glyphs automatically created by combining characters that many developers find more readable.

Background pattern Description automatically generated with low confidence

 

Pulling it all together

All these changes seen together give Visual Studio 2022 a distinctly updated feel that demonstrates our commitment to accessibility and continuous improvement, in close collaboration with you. The result is a modern Visual Studio that’s clearly Microsoft.

 

We want to know what you think

Download Visual Studio 2022 Preview to see the refreshed UI. Let us know if you have any feedback on specific aspects of the icon or theme updates on Developer Community or let us know if something’s broken by submitting a ticket through our Report a Problem dialog.

87 comments

Comments are closed. Login to edit/delete your existing comments

  • Shiraz Adam

    We’ve used Git (within Azure DevOps and GitHub) and it’s rubbish! We’ve gone back to TFVC.

    Is there TFVC support using Azure DevOps? Or has this been removed?

    • Taysser GherfalMicrosoft employee

      Thanks for the feedback Shiraz, just to clarify – are you saying that you didn’t like Git as a source control system or you didn’t like the Git tooling in Visual Studio 2022?

      Regarding your question on TFVC support in Visual Studio 2022, it is still supported through Team Explorer. You can get started by going to View > Team Explorer. Let us know if this is what you are looking for. We would appreciate it if you can clarify your first comment. Thanks!

  • Hanifi GÜVENBAŞ

    BEGINERS READ IT CAREFULY
    Don’t waste your time on any Microsoft or Apple technology. Always focus on opensource technologies. When I was a student, .Net was easy to learn with good documentation. But now everything has changed and all of the companies prefer nodejs, php, phyton etc. Do your research and you will understand.

  • Aleksandr Blekh

    Nice work! I’m wondering about whether/when VS team could implement a *single-point* font size scaling (zoom) feature that would significantly improve that part of DX, especially considering that it’s also an accessibility issue.

  • Dalibor Čarapić

    Can we petition to make VS an Electron application (like VS Code)?
    I believe it would dramatically improve the performance and usability of the application and it would probably use less ram as well.
    This way the VS team could spend lot less time fiddling with WPF and concentrate on things that matter.

  • Black Elijah (BT-AI/ETW2-PAI)

    Looks good, I suppose 🙂 Personally, I prefer filled icons. Would be nice to be able to choose between filled and outlined styles 🙂

  • Nathan Moyer

    I just wish Microsoft products would stop with all the purple ._.

    • Cherry Wang (DEVDIV)Microsoft employee

      Thank you for sharing your thoughts with us! We do understand that people have different color preferences, as well as different accessibility needs. The team is actively working on improving the customization experience. You may be interested in checking out this blog post about Bring VS Code themes to Visual Studio 2022!. Again, thanks for sharing your valuable insights with us!

  • Bin Dong

    The way VS team colorize icons is very weird. I don’t think there is anyone who consider 2022 icons are more recognizable than 2019 icons.
    I like the way you unify and align how sub elements placed, I like how you use more modernized elements to represent functionalities. But their colors are just getting worse.
    Like the ring bell shape notification icon, just fill it will opaque yellow, that’s enough, two-tune icon make it harder to recognize.
    Worst is the toolbox icon, it’s completely a disaster. red lines are almost invisible in dark mode.

    • Cherry Wang (DEVDIV)Microsoft employee

      Thanks for sharing your likes and dislikes with detailed examples with us! Really appreciate this helpful insights. I’ll pass this to our icon design team and see how we can improve.

      I can share a little bit about the story behind how we landed on mostly outline style icons. We did accessibility user studies and have participants compare several different icon styles within context. Participants with low vision reported that outline style makes the icon shape a little more easier to make out, as the shape is more recognizable. Although we do understand that Visual Studio has a good portion of customers who are used to seeing old solid icon styles coming from previous versions, we also want to make Visual Studio’s out-of-box experience more inclusive for both existing and new customers, people with or without low vision, etc.

      Like Dante mentioned in another reply, what’s ideal for one customer could be nightmare for another. We are learning from different customers’ feedback and constantly looking for ways to improve the customization experience and extensibility for Visual Studio. 🙂

  • Micah Stauffer

    I’d like to drop a little note of thanks to the Visual Studio team. Ya’ll did a great job with the redesign. The icons are superb. Vivid and easy to recognize. Startup times are greatly improved and I see good progress on the problems that have come up.

    I’m not exactly sure where to mention this, but VS frequently drops TypeScript syntax highlighting. (very small projects with <50 files are OK) 🤷‍♂️ i7-7700K w/ 32GB RAM so power isn't the problem…

    Otherwise, splendid job. Keep it coming.

  • Maciej Pilichowski

    I don’t see improvement in the icons, quite contrary. At your second screenshots when you compare two big blocks, there are for example such icons as copy (two piece of papers), accept (v), cancel (x) and the old ones are much better because of the clarity. In case of copy the new icon is more complex (which for icons is a killer), while new accept and cancel use much thinner inner lines — so readability is worsen.

  • Evžen Černý

    Cascadia Mono is very heavy and blurry font. Really was it “optimal legibility and accessibility”?

    Does someone knows which font was used in 2019 version?

    • Adam Csintalan

      The font is the same, but something was surely changed in the rendering. The text in VS2022 seems bolder and more blurry, it simply looks bad. VS2019 is perfectly fine with the same font settings.

      Try to play with TextSharp extension