Václav Vančura Designer and Developer Work Articles About

Back to Work

Visual Studio for Mac 17 Shell

After years of dreaming about the future of Xamarin Studio and then Visual Studio for Mac, I directed the redesign, and created a new, modern application style.

ClientMicrosoft
Year2021
RoleUser Interface Design, Icon Design
TeamVisual Studio for Mac
MoreVisual Studio for Mac
Screenshot of Visual Studio for Mac 17 interface when running in the dark theme, displaying C# code for ASP.NET Core application startup configuration, File Explorer on the left, and Properties Panel on the right.
Screenshot of Visual Studio for Mac 17 interface when running in the dark theme, displaying C# code for ASP.NET Core application startup configuration, File Explorer on the left, and Properties Panel on the right.

Conclusion

Before leaving Microsoft in 2021, I spearheaded the transformative redesign of Visual Studio for Mac 17. Having designed Xamarin Studio since 2013, I utilized my cumulative experiences and learnings, especially from the High–Density Fluent project, to create a modern, efficient, and enduring IDE design.

See where it started:
High–Density Fluent
After Microsoft announced the Fluent Design System in 2017, I integrated its design aesthetics into our developer applications.
High–Density Fluent

Context and Background

Visual Studio for Mac, previously known as Xamarin Studio, is a comprehensive, integrated development environment (IDE) tailored for Mac users. It enables developers to create mobile and web applications using Xamarin. This platform allows C# and .NET developers to build native mobile applications for various platforms. The evolution of Xamarin Studio into Visual Studio for Mac marked a significant shift, not just in name but in its design philosophy and functionality.

Key Development Phases

Collaborative Design Approach: In redesigning Visual Studio for Mac 17, I worked closely with Hylke Bons and a dedicated team of engineers. Our cohesive teamwork and Hylke’s support as a co-designer were instrumental in the project’s success.

Incorporating High–Density Fluent Learnings: The High–Density Fluent project, which focused on integrating Fluent Design into developer applications, provided valuable insights. This experience was crucial in informing the redesign approach for Visual Studio for Mac 17.

Design Execution and Details: The redesign process included the creation of wireframes and redlines, ensuring that every aspect of the IDE was meticulously planned and executed for optimal functionality and aesthetics.

Impact and Legacy

The redesign of Visual Studio for Mac 17, under my direction, not only modernized the application but also set a foundational design that the team continued to build upon after my departure. This design has become the basis for the IDE’s evolution, demonstrating the lasting impact of a well-executed redesign in shaping software development tools for years to come.

A screenshot showing Visual Studio for Mac 17 in the light theme.
Light Theme
A screenshot showing Visual Studio for Mac 17 in the dark theme.
Dark Theme
A screenshot showing Visual Studio for Mac 17 in the high contrast light theme.
High Contrast Light Theme
A screenshot showing Visual Studio for Mac 17 in the high contrast dark theme.
High Contrast Dark Theme
Main editor window, showing the Tab Bar with many tabs. Main editor window, showing the Tab Bar with many tabs.
Status Bar showing the status of the package restoration process. Status Bar showing the status of the package restoration process.
Status Bar indicates available updates, as well as the count of errors and warnings. Status Bar indicates available updates, as well as the count of errors and warnings.
Status Bar showing the building process progress bar. Status Bar showing the building process progress bar.
The main editor window, showing the Unity view with a C# script open in the Code Editor. The main editor window, showing the Unity view with a C# script open in the Code Editor.
Info Bar showing a warning message about a trial license expiration. Info Bar showing a warning message about a trial license expiration.
Screenshot of a Solution Explorer, showing a redline markup for spacing and alignment, with detailed annotations for properties such as indentation levels and gap measurements.

Screenshot of a Solution Explorer, showing a redline markup for spacing and alignment, with detailed annotations for properties such as indentation levels and gap measurements.

Color-coded mockup of the IDE main windows with redline annotations indicating margins and dimensions for layout design, featuring distinct sections for header, content, and sidebar areas.
Color-coded mockup of the IDE main windows with redline annotations indicating margins and dimensions for layout design, featuring distinct sections for header, content, and sidebar areas.
Mockup of a the IDE with redline annotations for element spacing and layout, featuring a Code Editor and tool panels, against a minimalistic design with placeholder text.
Mockup of a the IDE with redline annotations for element spacing and layout, featuring a Code Editor and tool panels, against a minimalistic design with placeholder text.
Screenshot of Visual Studio for Mac 17 interface when running in the dark theme with vertical tabs, Code Editor displaying C# code, and a notification about trial license expiration at the top.
Screenshot of Visual Studio for Mac 17 interface when running in the dark theme with vertical tabs, Code Editor displaying C# code, and a notification about trial license expiration at the top.
See as well:
Welcome Screen
The Welcome Screen is the first thing you see when you open Visual Studio for Mac. Explore its evolution and how it has changed over the years.
Welcome Screen

Collaborators and Consultants

Hylke BonsSenior Designer
Vsevolod KukolPrincipal Software Engineer Manager
Iain HolmesSenior Software Engineer
Let’s create some UI together!
If you have a project that could benefit from my UI skills, please contact me via the about page to get things moving.
Scroll to the Top