Designing native Windows and macOS apps in 2021

How to use guidelines, learn from 1st party apps and find resources to design native Windows and macOS apps

Designing native Windows and macOS apps in 2021

Let's begin with the basics. Apple has the Human Interface Guidelines for macOS, iOS, watchOS, and tvOS. This website is a useful destination to learn about principles (themes) what Apple advocates on their platforms, get to know the platform-specific terminology, and familiarize yourself with the latest patterns and components. There is also a video library, where design-related videos are collected from Apple's World Wide Developer Conferences.

What's New section displays core visual differences 

With macOS 11 (Big Sur) there are many interface changes were introduced. In the What's New section the core changes are collected and explained.


Microsoft Design

Microsoft currently advocates its Fluent Design System as an "open-source, cross-platform design system that gives designers and developers the frameworks they need to create engaging product experiences—accessibility, internationalization, and performance included". [source: Microsoft Design].

Intro to app design - Controls

The trendy 3D mockups on the Microsoft Design website are linked to the boxy Universal Windows Platform (UWP) controls and the descriptions are tailored to the developer community.

Learning from 1st party apps

Next to the guidelines it worth taking a look at Apple's and Microsoft's own, built-in applications, how they implemented their guidelines for specific use cases.

Finder, Mail, Calendar

I love this disclaimer from the first Human Interface Guidelines from 1987 that admits that none of the 1st party apps are perfect implementations of the guidelines.

"Although you can find examples of most of the features described in this book by looking at existing applications, no one program has fully implemented these guidelines, and perhaps none ever will. Taken together, the Finder (version 5.5), MacWrite® (version 4.5), MacPaint® (version 1.5), and MacDraw® (version 1.9) come close to containing the full set of features as described here. Because these applications evolved in parallel with the Human Interface Guidelines, none of them is a perfect implementation of the guidelines: where the application differs from the guidelines, follow the guidelines."

Apple Human Interface Guidelines: The Apple Desktop Interface (1987) by Addison-Wesley©

Photos, Messages, Maps, Music

It is worth the time to dissect these apps, look them through in detail, learn from them, and get inspired by these best practices. Do not mindlessly imitate, borrow or steal but go one step further and apply these patterns from 1st party applications.

In case you get inspired by other apps, here are quotes you can misquote:

  • "A good composer does not imitate; he steals,” Igor Stravinsky
  • “Lesser artists borrow; great artists steal” Pablo Picasso  
  • “Good artists borrow, great artists steal.” Steve Jobs

Some of the 1st party applications available today, made by Apple: Finder, Mail, Calendar, System Preferences, Rich text editor, Maps, Photos, Messages, Music, Safari, Preview, Keynote, Numbers, Pages, Xcode, iMovie.

Windows Alarms & Clock, Mail & Calendar, Microsoft Photos, Groove Music, Windows Maps

There are 1st party applications featured at Microsoft Design that uses Fluent: Windows Alarms & Clock, Mail & Calendar, Microsoft Photos, Groove Music, Windows Maps.

Recently these are apps I keep an eye on:

  • macOS: Fantastical, Things 3, Bear, Pixelmator, Craft
  • Windows: Netflix

There are different ways to build desktop applications. It is an attractive option to reuse code from the web or mobile technologies and turn those existing apps into desktop ones.

Slack's Electron apps on macOS and Windows
Microsoft Teams on macOS and Windows

Popular desktop apps are using web technologies to build cross-platform desktop apps with JavaScript, HTML, and CSS (Electron: Microsoft Teams, Visual Studio Code, Skype, Slack, Figma, Notion, Discord, or Chromium Embedded Framework: Spotify). There are many speculations around why many tech giants in the industry favor this path. The result is that many of these apps are struggling with taking full advantage of the performance and capabilities of the operating systems.

Cross-platform development strategies

 Mac Catalyst - Human Interface Guidelines - Apple Developer

Mac Catalyst lets creators turn their iOS app into a Mac version. This requires some additional effort to define proper keyboard, mouse, drag and drop interactions, shortcuts, menus, and window management. Still, Apple bets on this to migrate part of the iOS app store's 1,8 million (source: Apple) apps to the desktop environment.

Microsoft Design website shows Fluent Design System as cross-platform

Microsoft shows a very honest mirror to the reality when it displays the "cross-platform" design system, where React for web, native frameworks and React native UI support is listed next to each other. The level of support varies in these, but this view accurately displays what many creators are using today to build apps.

Practical design resources

macOS

Built-in text styles on macOS

San Francisco Pro (SF Pro) is the font used on macOS. You can download San Francisco Pro font and learn more about all the fonts used on Apple platforms from the Fonts page on the Apple Developer website.

In case you use Figma and, I would recommend checking out the Fix San Francisco plugin: it will fix tracking (letter-spacing) and selecting the right variant from the SF Pro font family. (Inspired by a sketch plugin called Sketch-SF-UI-Font-Fixer.)

SF Symbols Version 2.1 (44)

San Francisco Symbols (SF Symbols) is a system of icons, which are designed to use in the same way as the San Francisco font. For exploring and using this icon set, an official application is available on the Apple Design Resources page.

macOS specific templates on the Apple Design Resources page
Sketch resources are organized in a .dmg (Disk Image) file
Preview of 'Design Templates + Components + Guides.sketch' file
Sketch file resources for designing document icons and app icons
Sketch file resources for colors and materials

Apple provides a handful of useful resources for prototyping and designing apps in Sketch, Adobe Photoshop, and Adobe XD formats. These templates include controls, windows, dialogs, popovers, notifications, cursors, and guides to design document and application icons.

Windows

Windows Insider Blog – Updated Segoe UI font – Build 21376

Segoe (/ˈsiːɡoʊ/SEE-goh) UI is the default font for Windows apps. The font can be downloaded for prototyping (Mac only) from Microsoft Design.

Segoe MDL2 Assets font

Guidelines are still promoting MDL2 (Microsoft Design Language 2) icons, which are packed in a font called Segoe MDL2 icons.

Microsoft Fluent System Icons (Community)

An icon set that seems to be more up-to-date and actively worked on is the Fluent System Icons. As Microsoft Design states: "It is used for products across Microsoft. The Fluent System Icons are friendly - including rounded corners, simplified shapes and come in 2 themes: Regular and Filled". Editable versions and a guide to expand these icons are available on Microsoft's Figma Community page.

iconwerk - Microsoft

I am very suspicious that iconwerk is responsible for the Microsoft Teams' icons and the framework behind the Fluent System Icons. Nevertheless, Fluent icons are currently actively worked on, supports more use cases, and include more icons than MDL2.

Example of 'Basic Inputs' from FluentWinUI Figma file

Fluent WinUI Figma templates are available from Microsoft Design. Not much movement around this file in the last year especially compared to the growing resources of Microsoft Teams.

Microsoft Teams UI Kit (Community) Figma file

In the Microsoft Teams UI Kit, there is more to find than templates for their productivity app. Many style choices are getting closer to the popular aesthetics we see in software nowadays. Consistent color usage, softer rounded controls, sheets, panels, and patterns from mobile interfaces. It is not surprising that the company invests most of its design muscle in Teams as its reported daily active user base reached 145 million people.

Color guideline for Microsoft Teams Design System – Microsoft Teams UI Kit (Community) 

It is not so easy to find but as I was digging deeper into Fluent UI for React I found an interesting tool called FluentUI builder. This web application is made for drag and dropping React web components and assemble a user interface using real code components (Microsoft's own take on Framer).

Fluent UI Builder alpha

A radical facelift of Windows 10/11 is also suggested in Panos Panay's Instagram post in March 2020. We are getting more and more hints about this project code-named Sun Valey, where these aesthetics from Microsoft Teams are part of an entire OS-level visual update.

Hopefully designing native apps for macOS and Windows will be more streamlined in 2021, but as you can see from this article there are a handful of resources available to get started.


Jurassic Park 1993 Steven Spielberg