{"id":234991,"date":"2021-10-18T11:59:09","date_gmt":"2021-10-18T18:59:09","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/visualstudio\/?p=234991"},"modified":"2021-11-03T07:02:57","modified_gmt":"2021-11-03T14:02:57","slug":"weve-upgraded-the-ui-in-visual-studio-2022","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/weve-upgraded-the-ui-in-visual-studio-2022\/","title":{"rendered":"We&#8217;ve upgraded the UI in Visual Studio 2022"},"content":{"rendered":"<p>In Visual Studio 2022, our team made a series of targeted investments to upgrade the Visual Studio user interface. We\u2019re 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\u2019re 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.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-234992 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/word-image.png\" width=\"531\" height=\"401\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/word-image.png 898w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/word-image-300x227.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/word-image-768x580.png 768w\" sizes=\"(max-width: 531px) 100vw, 531px\" \/><\/p>\n<h3>Visual Studio 2022 is clearly modern, and clearly Microsoft<\/h3>\n<p>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\u2019re 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\u2019re working in the right place.<\/p>\n<p>How we design that recognizable visual language matters, and we\u2019ve taken advantage of opportunities to align more closely to the Microsoft brand, especially the signature Microsoft\u00a0<a href=\"https:\/\/www.microsoft.com\/design\/fluent\/#\/?\">Fluent look and feel<\/a>. 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.<\/p>\n<p>&nbsp;<\/p>\n<h3>Intuitive yet familiar iconography supporting improved efficiency and flow<\/h3>\n<p>We hear customers say they find our product user interface overwhelming, complex \u2013 even daunting. Yet, we\u2019re 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:<\/p>\n<ul>\n<li>Change is OK as long as it doesn\u2019t alter meaning.<\/li>\n<li>Meaningful and consistent color usage makes it easier to recognize and understand.<\/li>\n<li>Sharp contrast and a recognizable silhouette are essential for legibility.<\/li>\n<\/ul>\n<p>We turned what you care about into principles and, ultimately, acceptance criteria for our work: <strong>consistency<\/strong>, <strong>legibility<\/strong>, and <strong>familiarity.<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/2019-Option02.png\"><img decoding=\"async\" class=\"wp-image-235024 alignnone\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/2019-Option02.png\" alt=\"Image 2019 Option02\" width=\"767\" height=\"99\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/2019-Option02.png 1728w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/2019-Option02-300x39.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/2019-Option02-1024x133.png 1024w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/2019-Option02-768x100.png 768w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/2019-Option02-1536x199.png 1536w\" sizes=\"(max-width: 767px) 100vw, 767px\" \/><\/a>\n<strong><span style=\"font-size: 10pt;\">2019<\/span><\/strong><\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/2022-Option02.png\"><img decoding=\"async\" class=\"alignnone wp-image-235025\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/2022-Option02.png\" alt=\"Image 2022 Option02\" width=\"764\" height=\"99\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/2022-Option02.png 1728w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/2022-Option02-300x39.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/2022-Option02-1024x133.png 1024w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/2022-Option02-768x100.png 768w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/2022-Option02-1536x199.png 1536w\" sizes=\"(max-width: 764px) 100vw, 764px\" \/><\/a>\n<strong><span style=\"font-size: 10pt;\">2022<\/span><\/strong><\/p>\n<table style=\"height: 148px; width: 0%; border-collapse: collapse; border-style: hidden;\">\n<tbody>\n<tr style=\"height: 28px;\">\n<td style=\"width: 285.9510803222656px; height: 28px; border-style: none;\"><strong>Left:<\/strong><strong> Consistency<\/strong><\/td>\n<td style=\"width: 288.0706481933594px; height: 28px; border-style: none;\"><strong>Middle: Legibility<\/strong><\/td>\n<td style=\"width: 294.7010803222656px; height: 28px; border-style: none;\"><strong>Right: Familiarity<\/strong><\/td>\n<\/tr>\n<tr style=\"height: 110px;\">\n<td style=\"width: 285.9510803222656px; height: 110px; border-style: none; vertical-align: top;\"><span style=\"font-size: 10pt;\"><em>Placing the pen \/ \u201cedit\u201d modifier in a predictable place, lower right<\/em><\/span><\/p>\n<p><span style=\"font-size: 10pt;\"><em>Choosing between \u201cfilled\u201d and \u201copen\u201d styles<\/em><\/span><\/p>\n<p>&nbsp;<\/td>\n<td style=\"width: 288.0706481933594px; height: 110px; border-style: none; vertical-align: top;\"><span style=\"font-size: 10pt;\"><em>Using color to align and clarify real-world reference points<\/em><\/span><\/p>\n<p><span style=\"font-size: 10pt;\"><em>Leveraging what we know about contrast and accessibility to make each element recognizable to all audiences<\/em><\/span><\/td>\n<td style=\"width: 294.7010803222656px; height: 110px; border-style: none; vertical-align: top;\"><span style=\"font-size: 10pt;\"><em>Keeping symbols that have a long tradition of meaning, like the package<\/em><\/span><\/p>\n<p><span style=\"font-size: 10pt;\"><em>Preserving color where color is key to findability<\/em><\/span><\/p>\n<p>&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 1rem;\">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.<\/span><\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/old-vs-new-icons-example-1x2-2.png\"><img decoding=\"async\" class=\"alignnone wp-image-235035\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/old-vs-new-icons-example-1x2-2-1024x484.png\" alt=\"Image old vs new icons example 1 215 2 2\" width=\"758\" height=\"358\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/old-vs-new-icons-example-1x2-2-1024x484.png 1024w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/old-vs-new-icons-example-1x2-2-300x142.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/old-vs-new-icons-example-1x2-2-768x363.png 768w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/old-vs-new-icons-example-1x2-2-1536x725.png 1536w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/old-vs-new-icons-example-1x2-2.png 1728w\" sizes=\"(max-width: 758px) 100vw, 758px\" \/><\/a>\n<span style=\"font-size: 10pt;\"><strong>Left<\/strong>: Visual Studio 2019. \u00a0<strong>Right<\/strong>: Visual Studio 2022.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p>After more than a year collaborating with customers to optimize the new icons for developers\u2019 needs, and a month of shipping Visual Studio 2022 Preview 2 with the new icons on by default, we\u2019re pleased with the response. In addition to helping us find and fix hundreds of little bugs, you\u2019ve 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\u2019d hoped \u2013 as something that feels modern, legible, and intuitive.<\/p>\n<blockquote>\n<p style=\"padding-left: 40px;\"><strong><em>\u201cThey&#8217;re very sleek and work incredibly well with dark themes. Also easier to differentiate items with file nesting.\u201d<\/em><\/strong><\/p>\n<p style=\"padding-left: 40px;\"><strong><em>\u201c[B]etter contrast with the background makes it easier to identify what the icon is.\u201d<\/em><\/strong><\/p>\n<\/blockquote>\n<h3><\/h3>\n<p>&nbsp;<\/p>\n<h3>An updated dark theme that\u2019s easy on the eyes, plus new more accessible font options in editor<\/h3>\n<p>In Preview 4, existing dark theme users saw subtle but important updates to their existing theme. We&#8217;ve updated the dark theme with improved accessibility, better alignment with Microsoft design language, and more consistent color alignment. Over the last year, we\u2019ve seen data that shows the dark theme has replaced light theme as the most popular, and we\u2019ve also seen a growing trend toward dark theme in developer experiences within Microsoft and across the industry. So, what did we update and why?<\/p>\n<p>&nbsp;<\/p>\n<h5>Color contrast ratio adjustment<\/h5>\n<p>We hold ourselves to high standards for accessibility, so we\u2019re 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.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-234997\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/image-showing-comparison-between-visual-studio-201.png\" alt=\"Image showing comparison between Visual Studio 2019 and Visual Studio 2022 dark theme menu item focus state.\" width=\"1395\" height=\"742\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/image-showing-comparison-between-visual-studio-201.png 1395w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/image-showing-comparison-between-visual-studio-201-300x160.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/image-showing-comparison-between-visual-studio-201-1024x545.png 1024w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/image-showing-comparison-between-visual-studio-201-768x408.png 768w\" sizes=\"(max-width: 1395px) 100vw, 1395px\" \/><span style=\"font-size: 10pt;\"><strong>Left<\/strong>: Visual Studio 2019. <strong>Right<\/strong>: Visual Studio 2022<\/span><\/p>\n<p>&nbsp;<\/p>\n<h5>New accent color<\/h5>\n<p>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.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-234998\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/image-showing-comparison-between-visual-studio-201-1.png\" alt=\"Image showing comparison between Visual Studio 2019 and Visual Studio 2022 dark theme accent color usage.\" width=\"1398\" height=\"724\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/image-showing-comparison-between-visual-studio-201-1.png 1398w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/image-showing-comparison-between-visual-studio-201-1-300x155.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/image-showing-comparison-between-visual-studio-201-1-1024x530.png 1024w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/image-showing-comparison-between-visual-studio-201-1-768x398.png 768w\" sizes=\"(max-width: 1398px) 100vw, 1398px\" \/><span style=\"font-size: 10pt;\"><strong>Left<\/strong>: Visual Studio 2019. <strong>Right<\/strong>: Visual Studio 2022<\/span><\/p>\n<p>&nbsp;<\/p>\n<h5>Freedom to choose the theme that\u2019s right for you<\/h5>\n<p>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\u2019s familiar, so we\u2019ve made the Visual Studio 2019 dark theme available for <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=MadsKristensen.DarkTheme2019\">download as an extension<\/a>. In addition, there are a wide range of custom themes on the <a href=\"https:\/\/marketplace.visualstudio.com\/search?target=VS&amp;category=Tools&amp;vsVersion=&amp;subCategory=Themes&amp;sortBy=Installs\">Visual Studio marketplace<\/a> \u2013 so it\u2019s easy to choose the theme that makes Visual Studio work best for you.<\/p>\n<p>&nbsp;<\/p>\n<h5>More accessibility and flexibility in editor fonts<\/h5>\n<p>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 \u201cligatures\u201d \u2013 glyphs automatically created by combining characters that many developers find more readable.<\/p>\n<p><img decoding=\"async\" width=\"1206\" height=\"143\" class=\"wp-image-234999\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/10\/background-pattern-description-automatically-gene.gif\" alt=\"Background pattern Description automatically generated with low confidence\" \/><\/p>\n<p>&nbsp;<\/p>\n<h4>Pulling it all together<\/h4>\n<p>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\u2019s clearly Microsoft.<\/p>\n<p>&nbsp;<\/p>\n<h4>We want to know what you think<\/h4>\n<p>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 <a href=\"https:\/\/developercommunity.visualstudio.com\/\">Developer Community<\/a> or let us know if something\u2019s broken by submitting a ticket through <a href=\"https:\/\/docs.microsoft.com\/en-us\/visualstudio\/ide\/how-to-report-a-problem-with-visual-studio?view=vs-2022\">our Report a Problem<\/a> dialog.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Visual Studio 2022, our team made a series of targeted investments to upgrade the Visual Studio user interface. We\u2019re 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<\/p>\n","protected":false},"author":61890,"featured_media":234992,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[155],"tags":[],"class_list":["post-234991","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visual-studio"],"acf":[],"blog_post_summary":"<p>In Visual Studio 2022, our team made a series of targeted investments to upgrade the Visual Studio user interface. We\u2019re 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<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/234991","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/61890"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=234991"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/234991\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/234992"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=234991"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=234991"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=234991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}