{"id":10035,"date":"2017-03-08T09:30:55","date_gmt":"2017-03-08T17:30:55","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudio\/?p=10035"},"modified":"2019-02-14T15:27:29","modified_gmt":"2019-02-14T23:27:29","slug":"iterations-on-infinity","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/iterations-on-infinity\/","title":{"rendered":"Iterations on infinity"},"content":{"rendered":"

<\/a><\/p>\n

Developers like you live with the Visual Studio icons every day: clicking on them multiple times, staring at them side by side on the taskbar, and seeing them attached to project files. So when we update them, it’s a big deal. After all, icons matter. For pictures that are at most just under a centimeter wide on a normal display (or under half an inch, for those of you who aren\u2019t British like me), icons are huge. They pack a lot of meaning into a small space. They offer clues as to what kind of experience you\u2019ll have with the application the icon represents. Some icons even establish an emotional connection: they make you feel<\/em> something about something.<\/p>\n

We\u2019ve started rolling out a new series of icons to represent the Visual Studio product family. The classic purple infinity shape that you already know and recognize is sticking around. But you might say it\u2019s gotten a promotion of sorts: the purple infinity by itself now represents the entire suite of products you\u2019ve come to rely on. That includes our flagship Visual Studio IDE<\/a>, Visual Studio Team Services<\/a>, Blend for Visual Studio, and Visual Studio Mobile Center<\/a>. The family also includes a macOS-style icon for Visual Studio for Mac<\/a>, and a new icon for Visual Studio Code<\/a> that will be revealed soon.<\/p>\n

But the infinity symbol by itself isn\u2019t enough. One of the problems our users have brought up for some time is not being able to tell different versions of Visual Studio products apart. For example, we had light blue icons for both Visual Studio Code and Visual Studio Team Services. That\u2019s our fault, not yours. Even our own designers couldn\u2019t always tell you which blue was which, and why. That got confusing for us, which meant it had to be confusing for you.<\/p>\n

So we literally went back to the drawing board, if you\u2019ll forgive the pun. We had a friendly competition among multiple design teams across three continents working on and iterating different concepts for the icon set. Icons for a major product family like Visual Studio should be visually attractive, but the requirements don\u2019t stop there. They have to effectively communicate to a worldwide audience.<\/p>\n

<\/a><\/p>\n

We faced several challenges designing this new icon set. Because the infinity shape has such strong brand recognition in the developer space, we wanted the new icons to look and feel as if they were an extension of that brand. To achieve this, the new icon set needed to be in the same style as the existing infinity shape. Deconstructing the infinity shape, it fits onto an underlying grid with two-point perspective. It\u2019s got a thin vertical line on the left and a thick vertical line on the right, and the shape as a whole is made entirely of straight lines and strong angles that could be created by folding a ribbon. Finally, one of the most crucial directives our designers had was to follow was to use only a single flat color for each icon. Each new icon had to follow all these rules, using only one color, straight lines, ribbon folds for all corners, and trying to retain a thin vertical line on the left and a thick vertical line on the right. Different but similar. It wasn\u2019t an easy task, even for some of the best artists and designers in the industry.<\/span><\/p>\n

\"start-menu\"<\/p>\n

Within these constraints and with the objective of building\u00a0a whole icon set that conveys\u00a0a sense of family, I\u2019m quite proud of what our designers have accomplished. Most importantly, this new icon set has the familiar feeling of a Microsoft product family that\u2019s part of the existing Microsoft brand. This familiar feeling is hard to pin down, but it\u2019s essential. As I mentioned earlier, the purple infinity symbol is still around. In its classic dark purple, it now represents the whole Visual Studio family of products. In a lighter hue and with a stylized border, it represents our main IDE. You\u2019ll absolutely know what to expect when you click on it. That\u2019s a good thing.<\/p>\n

The stylized border in the refreshed Visual Studio IDE icon is used in our other updated product icons as well. But instead of having to remember which icon is Visual Studio Code and which icon is Visual Studio Team Services based solely on color, each product icon now includes a unique pictogram that captures the individual flavor of each product. As each icon gets finalized and hard-coded into our different products, you\u2019ll be able to tell that Blend and Code are both Visual Studio products, but are not the same thing. You\u2019ll be able to tell the difference between Visual Studio Mobile Center and Visual Studio Team Services, and at the same time see that they\u2019re part of the same product family.<\/p>\n

<\/a><\/span><\/p>\n

If you\u2019re using Visual Studio for Mac, you’ll notice that the new product icon combines elements of both macOS and\u00a0Windows visual design. We\u2019ve used the purple infinity symbol, and set it against the common macOS pattern of a rotated\u00a0rectangle. To make it pop on the macOS Dock, the Visual Studio for Mac icon has some added shading and detail.<\/span><\/p>\n

Ultimately, the reason we put so much time and energy into refreshing these icons was to make your job easier. We always want you to be confident when you click on one of our icons, so you can get down to coding and focus on what you really want to focus on: making the best software in the world. Did we get it right? Tell us at UserVoice<\/a> or use the Send Feedback tool in Visual Studio.<\/p>\n\n\n\n
\"john-lea\"<\/a><\/td>\nJohn Lea<\/strong>, Principal Design Director, Developer Division<\/span><\/p>\n

John heads the DevDiv design studios responsible for the design of Microsoft\u2019s developer tool products including Visual Studio, Visual Studio Code and Visual Studio Team Services.\u00a0 John has been designing and building user interfaces and leading teams for over 18 years, and before joining Microsoft he was Head of UX Architecture and Delivery at Canonical where he spent seven years designing the Ubuntu Linux operating system UI.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Developers like you live with the Visual Studio icons every day: clicking on them multiple times, staring at them side by side on the taskbar, and seeing them attached to project files. So when we update them, it’s a big deal. After all, icons matter. For pictures that are at most just under a centimeter […]<\/p>\n","protected":false},"author":13,"featured_media":255385,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1028,155],"tags":[237,156],"class_list":["post-10035","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","category-visual-studio","tag-net","tag-visual-studio-2017"],"acf":[],"blog_post_summary":"

Developers like you live with the Visual Studio icons every day: clicking on them multiple times, staring at them side by side on the taskbar, and seeing them attached to project files. So when we update them, it’s a big deal. After all, icons matter. For pictures that are at most just under a centimeter […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/10035","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\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=10035"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/10035\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/255385"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=10035"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=10035"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=10035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}