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.
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 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].
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.
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©
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.
There are 1st party applications featured at Microsoft Design that uses Fluent: Windows Alarms & Clock, Mail & Calendar, Microsoft Photos, Groove Music, Windows Maps.
Looking at popular apps
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.
Cross-platform development strategies
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 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
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.)
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.
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.
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.
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.
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.
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.
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).
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.