High–density Fluent

After Microsoft announced the Fluent Design System in 2017, I was assigned to integrate its design aesthetics into our visually demanding developer applications.

High–density Fluent

After Microsoft announced the Fluent Design System in 2017, I was assigned to integrate its design aesthetics into our visually demanding developer applications.

High–density Fluent

After Microsoft announced the Fluent Design System in 2017, I was assigned to integrate its design aesthetics into our visually demanding developer applications.

Visual Studio for Mac interface showing code editor, file explorer, and project structure for a software application named HappyFormsApp.

Screenshot of Visual Studio for Mac with code, Solution Explorer, Debug Console, and Property Tool Window, showing a mobile application development workspace with an error notification and Code Editor open on C# settings file.

Visual Studio for Mac interface showing code editor, file explorer, and project structure for a software application named HappyFormsApp.

Screenshot of Visual Studio for Mac with code, Solution Explorer, Debug Console, and Property Tool Window, showing a mobile application development workspace with an error notification and Code Editor open on C# settings file.

Visual Studio for Mac interface showing code editor, file explorer, and project structure for a software application named HappyFormsApp.

Screenshot of Visual Studio for Mac with code, Solution Explorer, Debug Console, and Property Tool Window, showing a mobile application development workspace with an error notification and Code Editor open on C# settings file.

Client:

Microsoft

Client:

Microsoft

Client:

Microsoft

Year:

2017

Year:

2017

Year:

2017

Roles:

User Interface Design, Icon Design

Roles:

User Interface Design, Icon Design

Roles:

User Interface Design, Icon Design

Team:

Visual Studio for Mac, Visual Studio Code

Team:

Visual Studio for Mac, Visual Studio Code

Team:

Visual Studio for Mac, Visual Studio Code

Conclusion

As the lead designer, I played a key role in exploring and integrating new design concepts for Visual Studio for Mac, influencing the significant redesign of Visual Studio for Mac 17 with a blend of Fluent Design System and macOS design principles.

Key development phases

Pioneering the Transition to Figma: Along with Hylke Bons, I led the shift from Sketch to Figma within Microsoft, revolutionizing UI/UX design processes through Figma’s real-time collaboration and cross-platform compatibility.

Challenges in Design Adaptation: Navigating the integration of Fluent into developer tools posed unique challenges, especially in adapting to compact, information-dense interfaces for professional developers.

Impact and legacy

The journey culminated in my significant contribution to the redesign of Visual Studio for Mac 17, setting a precedent for future design directions and showcasing the potential of adapting design systems across different platforms.

Conclusion

As the lead designer, I played a key role in exploring and integrating new design concepts for Visual Studio for Mac, influencing the significant redesign of Visual Studio for Mac 17 with a blend of Fluent Design System and macOS design principles.

Key development phases

Pioneering the Transition to Figma: Along with Hylke Bons, I led the shift from Sketch to Figma within Microsoft, revolutionizing UI/UX design processes through Figma’s real-time collaboration and cross-platform compatibility.

Challenges in Design Adaptation: Navigating the integration of Fluent into developer tools posed unique challenges, especially in adapting to compact, information-dense interfaces for professional developers.

Impact and legacy

The journey culminated in my significant contribution to the redesign of Visual Studio for Mac 17, setting a precedent for future design directions and showcasing the potential of adapting design systems across different platforms.

Conclusion

As the lead designer, I played a key role in exploring and integrating new design concepts for Visual Studio for Mac, influencing the significant redesign of Visual Studio for Mac 17 with a blend of Fluent Design System and macOS design principles.

Key development phases

Pioneering the Transition to Figma: Along with Hylke Bons, I led the shift from Sketch to Figma within Microsoft, revolutionizing UI/UX design processes through Figma’s real-time collaboration and cross-platform compatibility.

Challenges in Design Adaptation: Navigating the integration of Fluent into developer tools posed unique challenges, especially in adapting to compact, information-dense interfaces for professional developers.

Impact and legacy

The journey culminated in my significant contribution to the redesign of Visual Studio for Mac 17, setting a precedent for future design directions and showcasing the potential of adapting design systems across different platforms.

The Xamarin acquisition and Figma’s groundbreaking introduction

As Design Lead, I led the exploration and integration of new design concepts for Xamarin Studio, which we soon rebranded as Visual Studio for Mac. This journey was more than just a design overhaul; it was a pathway to redefining the user interface of our developer tools. While directly implementing Fluent was not the end result, my efforts and experiments significantly influenced the later redesign of Visual Studio for Mac 17, which blended Fluent principles with modern macOS design.

The acquisition of Xamarin by Microsoft in February 2016 was a milestone, not just for Microsoft but for the entire community of mobile developers. This move opened new avenues for C# developers and others to leverage Xamarin’s technologies in creating cross-platform mobile applications. It represented a substantial leap towards unifying development experiences across different operating systems, making Visual Studio for Mac an even more versatile and powerful tool for developers.

The Xamarin acquisition and Figma’s groundbreaking introduction

As Design Lead, I led the exploration and integration of new design concepts for Xamarin Studio, which we soon rebranded as Visual Studio for Mac. This journey was more than just a design overhaul; it was a pathway to redefining the user interface of our developer tools. While directly implementing Fluent was not the end result, my efforts and experiments significantly influenced the later redesign of Visual Studio for Mac 17, which blended Fluent principles with modern macOS design.

The acquisition of Xamarin by Microsoft in February 2016 was a milestone, not just for Microsoft but for the entire community of mobile developers. This move opened new avenues for C# developers and others to leverage Xamarin’s technologies in creating cross-platform mobile applications. It represented a substantial leap towards unifying development experiences across different operating systems, making Visual Studio for Mac an even more versatile and powerful tool for developers.

The Xamarin acquisition and Figma’s groundbreaking introduction

As Design Lead, I led the exploration and integration of new design concepts for Xamarin Studio, which we soon rebranded as Visual Studio for Mac. This journey was more than just a design overhaul; it was a pathway to redefining the user interface of our developer tools. While directly implementing Fluent was not the end result, my efforts and experiments significantly influenced the later redesign of Visual Studio for Mac 17, which blended Fluent principles with modern macOS design.

The acquisition of Xamarin by Microsoft in February 2016 was a milestone, not just for Microsoft but for the entire community of mobile developers. This move opened new avenues for C# developers and others to leverage Xamarin’s technologies in creating cross-platform mobile applications. It represented a substantial leap towards unifying development experiences across different operating systems, making Visual Studio for Mac an even more versatile and powerful tool for developers.

The video showing the advanced layouting in Figma.

The video showing the advanced layouting in Figma.

The video showing the advanced layouting in Figma.

Hylke and I were the first within Microsoft to transition from Sketch to Figma for UI/UX design. The company approached design in a revolutionized way after this pivotal shift. Figma’s real-time collaboration features and cross-platform compatibility brought about a new era of efficiency and fostered an environment of seamless teamwork and creativity. Our early adoption and success with Figma demonstrated its immense potential, setting a new standard for UI/UX design processes at Microsoft.

Hylke and I were the first within Microsoft to transition from Sketch to Figma for UI/UX design. The company approached design in a revolutionized way after this pivotal shift. Figma’s real-time collaboration features and cross-platform compatibility brought about a new era of efficiency and fostered an environment of seamless teamwork and creativity. Our early adoption and success with Figma demonstrated its immense potential, setting a new standard for UI/UX design processes at Microsoft.

Hylke and I were the first within Microsoft to transition from Sketch to Figma for UI/UX design. The company approached design in a revolutionized way after this pivotal shift. Figma’s real-time collaboration features and cross-platform compatibility brought about a new era of efficiency and fostered an environment of seamless teamwork and creativity. Our early adoption and success with Figma demonstrated its immense potential, setting a new standard for UI/UX design processes at Microsoft.

Navigating the design transformation

My journey with the Fluent Design System, introduced by Microsoft in 2017, was about understanding and interpreting its principles for professional developer tools​​. Adapting Fluent’s design, initially intended for consumer applications, to meet the compact and information-dense interfaces developers require posed unique challenges.

Insights from the Redmond workshop

The Redmond workshop, a collaborative effort across Microsoft’s design teams, was vital in exploring how Fluent could be adapted to professional-grade applications. This experience was enriching and instrumental in our design process, shaping our understanding and approach to integrating new design concepts into developer tools.

Navigating the design transformation

My journey with the Fluent Design System, introduced by Microsoft in 2017, was about understanding and interpreting its principles for professional developer tools​​. Adapting Fluent’s design, initially intended for consumer applications, to meet the compact and information-dense interfaces developers require posed unique challenges.

Insights from the Redmond workshop

The Redmond workshop, a collaborative effort across Microsoft’s design teams, was vital in exploring how Fluent could be adapted to professional-grade applications. This experience was enriching and instrumental in our design process, shaping our understanding and approach to integrating new design concepts into developer tools.

Navigating the design transformation

My journey with the Fluent Design System, introduced by Microsoft in 2017, was about understanding and interpreting its principles for professional developer tools​​. Adapting Fluent’s design, initially intended for consumer applications, to meet the compact and information-dense interfaces developers require posed unique challenges.

Insights from the Redmond workshop

The Redmond workshop, a collaborative effort across Microsoft’s design teams, was vital in exploring how Fluent could be adapted to professional-grade applications. This experience was enriching and instrumental in our design process, shaping our understanding and approach to integrating new design concepts into developer tools.

Group of designers gathered around a wall displaying various software interfaces and data visualizations.

Group of designers gathered around a wall displaying various software interfaces and data visualizations.

Group of designers gathered around a wall displaying various software interfaces and data visualizations.

Group of designers gathered around a wall displaying various software interfaces and data visualizations.

Group of designers gathered around a wall displaying various software interfaces and data visualizations.

Group of designers gathered around a wall displaying various software interfaces and data visualizations.

For an in-depth exploration of the challenges and creative solutions involved in adapting the Fluent Design System to Microsoft’s suite of developer tools, I highly recommend reading Jamie Young’s insightful article, The Same, Only Different. Jamie, a member of Microsoft Design, offers a fascinating perspective on the collaborative process and design considerations in this transformation. It provides valuable context and complements the insights shared in my own journey with Visual Studio for Mac.

For an in-depth exploration of the challenges and creative solutions involved in adapting the Fluent Design System to Microsoft’s suite of developer tools, I highly recommend reading Jamie Young’s insightful article, The Same, Only Different. Jamie, a member of Microsoft Design, offers a fascinating perspective on the collaborative process and design considerations in this transformation. It provides valuable context and complements the insights shared in my own journey with Visual Studio for Mac.

For an in-depth exploration of the challenges and creative solutions involved in adapting the Fluent Design System to Microsoft’s suite of developer tools, I highly recommend reading Jamie Young’s insightful article, The Same, Only Different. Jamie, a member of Microsoft Design, offers a fascinating perspective on the collaborative process and design considerations in this transformation. It provides valuable context and complements the insights shared in my own journey with Visual Studio for Mac.

Integrated development environment interface showing code editor, file explorer, and mobile app design preview for a software project named Confetti.

Screenshot of a Visual Studio Code with Code Editor panels open on C# files and a visual storyboard designer, illustrating a user interface layout for a mobile application development project.

Integrated development environment interface showing code editor, file explorer, and mobile app design preview for a software project named Confetti.

Screenshot of a Visual Studio Code with Code Editor panels open on C# files and a visual storyboard designer, illustrating a user interface layout for a mobile application development project.

Integrated development environment interface showing code editor, file explorer, and mobile app design preview for a software project named Confetti.

Screenshot of a Visual Studio Code with Code Editor panels open on C# files and a visual storyboard designer, illustrating a user interface layout for a mobile application development project.

Influence on Visual Studio for Mac 17

While our project did not result in a direct Fluent implementation for Mac, the research and development conducted provided valuable insights. These were later applied to the redesign of Visual Studio for Mac 17, where we drew from both Fluent’s and macOS’s design principles to innovate and adapt UI controls suitable for professional development environments.

Influence on Visual Studio for Mac 17

While our project did not result in a direct Fluent implementation for Mac, the research and development conducted provided valuable insights. These were later applied to the redesign of Visual Studio for Mac 17, where we drew from both Fluent’s and macOS’s design principles to innovate and adapt UI controls suitable for professional development environments.

Influence on Visual Studio for Mac 17

While our project did not result in a direct Fluent implementation for Mac, the research and development conducted provided valuable insights. These were later applied to the redesign of Visual Studio for Mac 17, where we drew from both Fluent’s and macOS’s design principles to innovate and adapt UI controls suitable for professional development environments.

Set of icons representing software development stages and tools including Code, Design, Debug, Test, Profile, Services, Git, and Deploy.

A set of eight sidebar icons I designed for use in the Fluent Visual Studio sidebar.

Set of icons representing software development stages and tools including Code, Design, Debug, Test, Profile, Services, Git, and Deploy.

A set of eight sidebar icons I designed for use in the Fluent Visual Studio sidebar.

Set of icons representing software development stages and tools including Code, Design, Debug, Test, Profile, Services, Git, and Deploy.

A set of eight sidebar icons I designed for use in the Fluent Visual Studio sidebar.

Integrated development environment interface showing code editor, mobile app design preview, and project structure for an iOS app.

Screenshot of an experimental software development environment featuring Code Editor with C# source code, a main storyboard panel for user interface design, and properties pane, indicative of mobile application development.

Integrated development environment interface showing code editor, mobile app design preview, and project structure for an iOS app.

Screenshot of an experimental software development environment featuring Code Editor with C# source code, a main storyboard panel for user interface design, and properties pane, indicative of mobile application development.

Integrated development environment interface showing code editor, mobile app design preview, and project structure for an iOS app.

Screenshot of an experimental software development environment featuring Code Editor with C# source code, a main storyboard panel for user interface design, and properties pane, indicative of mobile application development.

Code editor interface showing a debugging session with a NullReferenceException error highlighted at line 72 of a C# or similar programming language file.

Screenshot of an experimental software development environment with an error dialog showing a 'System.NullReferenceException', overlaid on Code Editor displaying C# source code, part of a mobile application development project.

Code editor interface showing a debugging session with a NullReferenceException error highlighted at line 72 of a C# or similar programming language file.

Screenshot of an experimental software development environment with an error dialog showing a 'System.NullReferenceException', overlaid on Code Editor displaying C# source code, part of a mobile application development project.

Code editor interface showing a debugging session with a NullReferenceException error highlighted at line 72 of a C# or similar programming language file.

Screenshot of an experimental software development environment with an error dialog showing a 'System.NullReferenceException', overlaid on Code Editor displaying C# source code, part of a mobile application development project.

Integrated development environment interface for a mobile app project named Confetti, showing file explorer, app design preview, and layout properties panel.

Screenshot of an experimental software development environment with a storyboard design panel open, showing a user interface layout for an iOS application with navigation controller and table view elements, alongside a properties inspector detailing layout configurations.

Integrated development environment interface for a mobile app project named Confetti, showing file explorer, app design preview, and layout properties panel.

Screenshot of an experimental software development environment with a storyboard design panel open, showing a user interface layout for an iOS application with navigation controller and table view elements, alongside a properties inspector detailing layout configurations.

Integrated development environment interface for a mobile app project named Confetti, showing file explorer, app design preview, and layout properties panel.

Screenshot of an experimental software development environment with a storyboard design panel open, showing a user interface layout for an iOS application with navigation controller and table view elements, alongside a properties inspector detailing layout configurations.

Integrated development environment interface showing a debugging session for a mobile app project named Confetti, with a NullReferenceException error highlighted at line 72 of the code.

Screenshot of an experimental software development environment displaying C# code for a mobile application, with a focus on a table view data source and delegates within an app's project files and folders. An error alert for 'System.NullReferenceException' is also visible.

Integrated development environment interface showing a debugging session for a mobile app project named Confetti, with a NullReferenceException error highlighted at line 72 of the code.

Screenshot of an experimental software development environment displaying C# code for a mobile application, with a focus on a table view data source and delegates within an app's project files and folders. An error alert for 'System.NullReferenceException' is also visible.

Integrated development environment interface showing a debugging session for a mobile app project named Confetti, with a NullReferenceException error highlighted at line 72 of the code.

Screenshot of an experimental software development environment displaying C# code for a mobile application, with a focus on a table view data source and delegates within an app's project files and folders. An error alert for 'System.NullReferenceException' is also visible.

Integrated development environment interface showing multiple code editor windows for a mobile app project named Confetti, with file explorer and code completion suggestions visible.

Screenshot of an experimental software development environment with a File Explorer on the left, Code Editor in the center showing C# source code for a UITableView data source, and auto-complete suggestions visible. A warning icon indicates a potential issue in the code or environment setup.

Integrated development environment interface showing multiple code editor windows for a mobile app project named Confetti, with file explorer and code completion suggestions visible.

Screenshot of an experimental software development environment with a File Explorer on the left, Code Editor in the center showing C# source code for a UITableView data source, and auto-complete suggestions visible. A warning icon indicates a potential issue in the code or environment setup.

Integrated development environment interface showing multiple code editor windows for a mobile app project named Confetti, with file explorer and code completion suggestions visible.

Screenshot of an experimental software development environment with a File Explorer on the left, Code Editor in the center showing C# source code for a UITableView data source, and auto-complete suggestions visible. A warning icon indicates a potential issue in the code or environment setup.

Integrated development environment interface showing multiple code editor windows for a mobile app project named Confetti, with file explorer and code completion suggestions visible.

Welcome Screen of experimental Visual Studio for Mac showing recent projects and a sidebar with options to learn about new features, explore .NET Framework and Team Services updates, alongside a list of webinars and announcements.

Integrated development environment interface showing multiple code editor windows for a mobile app project named Confetti, with file explorer and code completion suggestions visible.

Welcome Screen of experimental Visual Studio for Mac showing recent projects and a sidebar with options to learn about new features, explore .NET Framework and Team Services updates, alongside a list of webinars and announcements.

Integrated development environment interface showing multiple code editor windows for a mobile app project named Confetti, with file explorer and code completion suggestions visible.

Welcome Screen of experimental Visual Studio for Mac showing recent projects and a sidebar with options to learn about new features, explore .NET Framework and Team Services updates, alongside a list of webinars and announcements.

Integrated development environment interface for a mobile app project named HappyFormsApp, showing code editor, file explorer, and project structure with code completion suggestions visible.

Screenshot of experimental Visual Studio for Mac configured for a mobile application development project named HappyFormsApp, with file structure on the left, Code Editor in the center showing C# code, and a Properties Tool Windows on the right.

Integrated development environment interface for a mobile app project named HappyFormsApp, showing code editor, file explorer, and project structure with code completion suggestions visible.

Screenshot of experimental Visual Studio for Mac configured for a mobile application development project named HappyFormsApp, with file structure on the left, Code Editor in the center showing C# code, and a Properties Tool Windows on the right.

Integrated development environment interface for a mobile app project named HappyFormsApp, showing code editor, file explorer, and project structure with code completion suggestions visible.

Screenshot of experimental Visual Studio for Mac configured for a mobile application development project named HappyFormsApp, with file structure on the left, Code Editor in the center showing C# code, and a Properties Tool Windows on the right.

Reflecting on the outcome and legacy

The focus on user-centric design and the lessons learned from experimenting with Fluent principles set a foundation for future design directions. Although we didn’t create a Fluent-designed product for Mac, our efforts were instrumental in influencing the user interface of Visual Studio for Mac 17, showcasing the potential of adapting design systems across different platforms.

Collaborators and consultants

Reflecting on the outcome and legacy

The focus on user-centric design and the lessons learned from experimenting with Fluent principles set a foundation for future design directions. Although we didn’t create a Fluent-designed product for Mac, our efforts were instrumental in influencing the user interface of Visual Studio for Mac 17, showcasing the potential of adapting design systems across different platforms.

Collaborators and consultants

Reflecting on the outcome and legacy

The focus on user-centric design and the lessons learned from experimenting with Fluent principles set a foundation for future design directions. Although we didn’t create a Fluent-designed product for Mac, our efforts were instrumental in influencing the user interface of Visual Studio for Mac 17, showcasing the potential of adapting design systems across different platforms.

Collaborators and consultants

David Siegel

Head of Design

David Siegel

Head of Design

David Siegel

Head of Design

Jamie Young

Design Manager

Jamie Young

Design Manager

Jamie Young

Design Manager

Hylke Bons

Senior Designer

Hylke Bons

Senior Designer

Hylke Bons

Senior Designer

Vsevolod Kukol

Principal Software Engineer Manager

Vsevolod Kukol

Principal Software Engineer Manager

Vsevolod Kukol

Principal Software Engineer Manager

Iain Holmes

Senior Software Engineer

Iain Holmes

Senior Software Engineer

Iain Holmes

Senior Software Engineer

Marius Ungureanu

Senior Software Engineer

Marius Ungureanu

Senior Software Engineer

Marius Ungureanu

Senior Software Engineer

Thanks for reading

Thanks for reading

Thanks for reading