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

Leave a comment

  • David N

    I love using ligatures, but the -> symbol still doesn’t work (the first one shown in your animated gif above). Working a lot in #fsharp that would be really useful (and for C++ too).

    17.0.0 Preview 5 on Windows 11 Insider Dev.

  • hitesh davey

    Appreciate your efforts!

    Last para…”We want to know what you think”

    Did you know the majority of the DotNet developers (or let me say except VS team) disliked the NEW PROJECT dialog box and they requested to restore the CLASSIC NEW PROJECT dialog box? Even the new redesigned project properties screen is not well accepted by the VS users but you want to force your ideas without listening to end-users. MS VS team is not bothered to respect the genuine feedbacks of real VS users. Such an attitude is discouraging VS users to give feedback and suggestions anymore.

    • Bas van Harten

      I think you can’t say that the majority of the .NET developers dislike the new project dialog or the project properties screen: The developers that like the change (or are just indifferent about it) are not that vocal. (I for one like those changes and just wished there were more of them).

      • hitesh davey

        When I say the majority of the VS users disliked the new project dialog; I am not bluffing or commenting here for the sake of commenting and without reading the facts.

        Fyi, here is the link you read the user’s comments explaining the real issues with the new dialog in comparison with the classic one…

        https://devblogs.microsoft.com/visualstudio/redesigning-the-new-project-dialog/
        https://devblogs.microsoft.com/cppblog/new-start-window-and-new-project-dialog-experience-in-visual-studio-2019/

        and if this is not sufficient then google it, you will find tens of thousands more.

        If MS puts an online survey abt like and dislikes of VS features then I am sure new project dialog will take the top position in the dislike section.

        Like Dotnet and C# open source discussion; Before revamping the UI design, MS should share the UI prototype screenshots on Github and listen to the views of developers before committing the UI changes.

        VS IDE is not just for few developers who like every change MS brings in.

        I use VS IDE 365 days and I like and appreciate efforts put in to build this fantastic tool but some UI design decisions are just not making sense!

        • Atlas RainMicrosoft employee

          Hi folks – thank you for the feedback. I work on the Visual Studio platform team and we’ve been hearing yours and other feedback come in about the NPD experience and where some customers feel like it’s lacking or difficult to use. Thank you for giving your feedback as well and we will review it in planning as a top issue for the team. You can also follow here on this item in developer community with lots of background discussion around the experience and it’s changes.
          https://developercommunity.visualstudio.com/t/vs-2019-preview-new-project-dialog-is-unstructured-1/401508

          • hitesh davey

            For 18 good years, we have used classic new project dialog, start screen, project properties dialog and almost none complained about its UI experience, and all of a sudden you introduced a modern new project dialog in VS2019 without giving top five good reasons to use modern new project dialog over classic one by compromising its useability.

            Like many other users, several times in the past I have echoed my voice on the various blogs and feedback forums. I have nothing more to add again. I was hoping VSTeam may restore the classic dialog back in VS2022 based on user feedback but you just prefer to be ignorant of the user’s voice.

            Users give real feedback about their experience and this does not mean users are having NPD (narcissistic personality disorder). Problem seriously existing in VS team who just want to force their ideas without giving due consideration to existing UI design.

            Somewhere in the comment section, @Jens Samson well said it…”We could fight the symptoms or we could remove the cause. If lots of people complain about the same thing, that must mean something. But MS never listens and just does what they think is right.”

            If you really want to improve VS then there are many other areas you can invest your valuable time, resource, and money. I am not against bringing change to the product but not at the cost of something working very well.

            If you are really serious about users’ voices then you should have provided an option in VS2022; Use Modern or Classic dialog in VS Option screen and let the end-user set its own preference and you may use telemetry to find what the user really likes instead of forcing users to like what you provide. (and this is not difficult!)

            Why don’t you invest in developing unified pixel-perfect designers for all new project types like WinForms, WPF, ASP.net core, Blazor, MAUI, Xamarin? This will be more productive than revamping the UI of something working very well.

            Slowly Visual Studio is now becoming less Visual and more of a search & find tool. Gone are the days where one can simply drag and drop controls on the form and start writing a solution. With the modern project types; one has to juggle between numerous files, markups, and n-layers of code, and to add more to it is diff pattern (MVC, MVP, MVVM), etc) making things even diffuclt and the learning curve is also steep.

            Invest your time & resource in providing a simple event-driven model like WinForms to develop new project types for mobile apps. Let user design and start coding without much bothering about the nitty gritty of markups and scripts. This will improve developer productivity and also the community will adopt technology very fast.

            In short, invest your valuable time & resources in something which will make sense to the large user base!

          • Super Coco

            I do not understand the reason to destroy things in Visual Studio 2019 like the “New Project Dialog” and “Start Page” that works well, are perfect, no user has complained and no one has asked for changes.

        • Johnathan Hayter

          Had a perfect example of this earlier today. Went to make an updated MAUI project for my YT content and found the thing had disappeared. Check the docs: MAUI – Build your first app

          I am making content for developers interested in preview content. “This is still in dev…” Nope! This is exactly for developers trying to FOLLOW the development. Had it been the good ole classic dialog you’d scroll alphabetically.

          Features like “alternative” views truly should be a plugin or extension approach rather than natively forcing the issue of something that worked. Been using Visual Studio since 1998 (VB6) and honestly this is making for another vid on “Where did they put the MAUI option in the new project box?“.

  • Goda Attila

    Could you make icons easier to recognise? Maybe ones that look good at the same time? The best thing would be to somehow bring back the look of visual studio 2010, just add a dark theme. By the way, this is true for windows too. Since windows 8, it is also very ugly but in return much harder to understand than for example XP.

    On the old windows, the window was a window, the push button was a push button, the radio button was a radio button. Now with the new “modern” design, you see a filled rectangle or circle with a letter or a caption, and guess if it’s a push button or if the designer was having a bad day. As a developer, it’s not a big problem for me, but besides being ugly, it makes people’s lives harder.

    • Guido Geurts

      I could not agree more,
      microsoft,
      please stop thinking that you are improving the UI
      please start listening to people
      bring back windows, get rid of this bad impersonator of windows and other software and finally do what people ask you to do

    • Daniel Smith

      100% agree. VS2010 had the best looking icon set. The icons were high quality, professional, and easy to distinguish.

      I remember when the icons were ruined in 2012, and there were literally thousands of negative comments about it on Connect. It all fell on deaf ears sadly.

      • Khoi Vo Minh

        Sorry Emily, after 3 days I used VS 2022 official release, I realized icons are very very hard to recognize.

        Before VS 2010, icons are easier to read. After VS 2012 icons became bad, but still recognize easy, but now 2022 everything look like same.

    • Super Coco

      100% agree. Actually all Microsoft designs are ugly. Very ugly since Windows 8. Now icons are like hieroglyphs that are very difficult to decipher. Understandable.

      • Vsevolod Kvachev

        Microsoft designs are awesome from Win8.1 to Win10. Perfectly minimalistic and clear. Now I’m expecting for everything to be ruined with apple style, as in Win11.

        It’s great that in Visual Studio they left an option to stay with the VS2019 theme, though, thanks!

        • Theo Betten

          Now I’m expecting for everything to be ruined with apple style, as in Win11.

          Agree with this. On a phone I can understand they use three dots or three dashes for a menu, because on a phone every pixel counts. But on a computer with an enormous, hi-res screen it is much better to use a proper menu. Why does a computer have to look like a phone? There is no sane reason for it.

          Also “modern” icons tend to all look the same. Microsoft is not the worst in that, Atlassian is. Confluence, jira, bitbucket, all totally nondescript icons that all look the same. Seems to be a trend though. For me, they don’t have to be modern. They don’t even have to be pretty. They just have to be recognisable and say as clearly as possible what they’re supposed to do.

          On the other hand, I really don’t understand why people get so worked up about the new start window. Works fine for me.

    • Jan Đonny Záruba

      Definitely agree. But we can see the light at the end of the tunnel! So in 201x – don’t remember which, MS removed all the nice icons they had in 2010 and replaced them with monochromatic ugly glyphs. But since then with every new version of Visual Studio we can see nicer (= more colors) and nicer icons. So, by 2035 we will be back in 2010 – just 25 years of our lives wasted arguing for better icons :-(.

  • Esben Sundgaard

    In the Git Changes (Git commit) window we cannot use TAB to switch between the fields. So we cannot jump to the massage-field or to the Commit drop-down without using the mouse.
    This was working in VS 2019.
    Aside from that, I like the new look and feel of VS 2022.

  • Lân Bùi Tấn

    when be Analysis Services, Integration Services, and Reporting Services projects will add to VS 2022? Can it add on release day?

  • Guido Geurts

    In stead of fantasizing what users would like, and put all your efforts and resources in this useless and unwanted stuff,
    why don’t you start with fixing bugs in VS first ?
    My VS crashes at least once a week, often I need to restart it just to get the properties window working again, and lots and lots of other bugs…
    Yes, this is clearly microsoft on that we can agree, ignore users, ignore feedback and just do stuff that nobody asked for

    • Jens Samson

      I second that.
      VS still has lots of dialog boxes with a Cancel button that does not do anything. It has been reported by me and others numerous times, but still nothing is being done. I’ve had to Unload the biggest project in out solution, otherwise I’d be waiting multiple times a day for multiple minutes while VS tries to find a reference, or tries to commit a line, or whatever…

      Another bug that is madening is that if you draw down the splitter in a code window and haven’t saved (Ctrl-S) your work in a long time, it will just crash.

      Fix your bugs, why is that so hard ?

  • Froggie Frog

    Please release an official version of the font “Consolas” which includes all symbols from “Nerd Fonts”.
    There is an unofficial patched version “Consolas NF”, but please release an official one.

    Consolas is so much better at a small size (10) and way less stressful to read (at least for me).

  • Jonathan Willis

    Sad to see the state of comments. Disgusting and toxic with no constructive criticism to be found.

    The design language looks good, I enjoy Windows 11 Ui so more cohesiveness is great.

    No one wants Vs 2008 or 2010. They are outdated and ugly. I’ve no idea who this “majority of vs developers” are, as if you know more than 1 other person with a formed opinion after testing these changes.

    I personally like some of the older icons and some of the new ones in the comparison shots. Not sure how one can say time is being wasted developing dark mode, sounds daft to me.

    • MgSam

      While I agree one or two of the posts here could be phrased more politely, I don’t see anything toxic here, unless they were already removed.

      “Opinions you disagree with” != “Toxic”

      • Rand Random

        Its a matter of opinion to classifly posts as “could be phrased more politely” or “toxic” there isn’t really an objective measure what is “toxic” or not polite enough, so in Jonathan’s opinion the above posts are toxic and your opion is they could be more polite.
        So, I strongly believe Jonathan didn’t describe “Opinions you disagree with” as “Toxic” and just simply the same things you considered “could be phrased more politely” as “toxic”.

        IMHO design choices will always trigger bad and good reviews alike, since what is appealing to one could be absolutly horrifing to the other.

      • Michael Taylor

        You can scan the comments from a few folks on this post and see name calling and insults. That is toxic. I don’t know why the blog site doesn’t allow some sort of reporting for CoC violations (at least that I can find). Name calling/insults doesn’t help anyone and is just ignored even if embedded in the middle of otherwise helpful information.

    • Andrew Witte

      “Windows 11 Ui so more cohesiveness is great”
      — Sooo in short Linux you mean 😉

      Win11 looks like some combo of ChromeOS & Linux-Mint or other Linux distro’s.

    • Kristoffer

      Agree! Progression and development is a good thing. But sometimes it hard to see! Many people are afraid of changes – both in their life and in the tools they use in their daily work.

  • MgSam

    “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…”

    Is there any scientific study that says less contrast decreases eyestrain? Everything I’ve ever read suggests that dark modes and decreased contrast actually increases eyestrain.

    • Steven Baugus

      In my experience I have to scan my code more to find words in dark theme, which results in more eye stress. It seems like people in their 20s all prefer Dark theme though.

      • Dante GagneMicrosoft employee

        This is a particularly complicated question, to be fair. There are folks with eyesight that will degrade over the day until they are practically blind in the evening and the speed of the degradation can be reduced through dark mode. For these folks, dark mode with as few bright colors as possible can literally mean minutes or hours of eyesight at the end of the day.

        There’s a neurological condition whose name I can’t remember at the moment where too high a contrast will make letters “shiver”, making them difficult to identify. For these folks, too high a contrast is the issue and a pastel background actually helps more.

        Then there are folks for whom too low a contrast makes letters appear nearly invisible, and for those folks, VERY high contrast is the only way to be able to read.

        The bottom line is customizability, and it’s something we’re really working on. Folks need to be able to configure the Visual Studio experience with the brightness, darkness, high or low contrast, etc… because what’s ideal for one person can be a nightmare for another.

        I’m not going to say we’re there yet, but it’s very much on our radar and something we’re working on.

        • David Lowndes

          Anyone with eyesight problems should probably have Windows configured accordingly so that any application they use is legible to them. Similarly, if someone prefers to read text on a blackboard, they could configure Windows to do that for everything they use. Windows used to be configurable like that!

          The fad (though it’s been here for well over 20 years now) of every application having its own color themes, should never have happened.

      • Cherry Wang (DEVDIV)Microsoft employee

        Thanks for sharing your experience with us! At this moment the dark theme update is mainly focused on the shell UI. You may have noticed that the editor syntax highlighting colors have not yet changed much compared to the old dark theme. The reduced intensity and more sparing accent color usage currently affect the surrounding environment, so that people can focus more on the centerstage – which is the editor area – for most of the time.

        We’ve done user studies and especially invited low vision users to help us iterate and land on a more inclusive solution as an out-of-box experience. I can share some example feedback from low vision users:

        – “I prefer the [experimental dark theme], as it is much better than the current dark theme in terms of text readability and contrast. E.g., the highlighted items have better visibility now and the purple highlight also reduces the strain in my eyes as it is less bright than the blue highlighting.​”
        – “The new icons have better legibility in both blue and dark theme, as it is following the line iconography.​”

        We understand that one size does not fit all, and one color contrast ratio number does not guarantee the best experience for everyone in every occasion. Just as Emily talked about in “Freedom to choose the theme that’s right for you“, and Dante also mentioned, we’re working on improving the customization experience. The out-of-box experience is meant to set most people up with as little friction as possible. You can accomplish most tasks and navigate to more customizations if needed. 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!

  • JASON BOCK

    It’s tiring to read an article from this site where the comments constantly devolve into a quagmire. I wonder sometimes if the goal for some people is to always post negative comments to any article written on a Microsoft site.

    If there’s an enhancement to be made here, let people flag comments as spam/disrespectful/etc. so conversations can be reasonable.