From outline icons to switch designs, the UIs of major OSes are all starting to look similar.
If you’re like me, you get excited by major new software releases and enjoy reading roundups of every new feature and UI tweak, comparing them to the previous version. With the release of Windows 11, Android 12, and iOS 15 this year (and last year’s macOS Big Sur), I’ve noticed quite a few similarities in the designs of the major operating systems. And in some cases, what appears to be convergence. These range from the use of outline icons to variable UI fonts and inset elements.
These similarities show that designers are coming up with new standards for digital user interfaces and offer hints as to where UIs are headed over the next decade and how the thinking behind UI design is shifting.
I’m a front-end engineer at Rowy, and I recently redesigned its UI with the primary goal of improving the information-dense desktop experience. I also wanted to move away from the 2015-era, mobile-first Material Design we were following to something more modern and better complements the UIs we see today. The trends I noticed helped inform this redesign and will hopefully assist you when designing your apps.
- Outline icons by default, complementing text
- Personalization based on the wallpaper
- Rounded corners are harmonious
- Variable UI fonts with optical sizes
- Focus on content
- Inset everything
- Differentiation beyond color
- And a standard switch design
Outline icons by default, complementing text
Icons play a significant part in UIs and have proven to be emblematic of the trends in UI design over the past few decades. When graphical user interfaces were novel, icons mimicked real-world objects to as great detail as possible within the limitations of display technology; they were made to bridge the user experience from the physical to the digital. This can be seen from Susan Kare’s icons for the original Macintosh to Microsoft’s photorealistic set in Windows Vista and 7.
When UIs moved from this skeuomorphic style to a “flat” style with Windows 8 and iOS 7, icon design also shifted to a monochromatic, outline style. And with the release of Android 12 and Google’s new version of Material Design called Material You (or Material Design 3), all major OSes now use this style.
But why does everyone use this style for icons? Designers aren’t just investing more into creating cohesive and complementary icon sets for design systems—designers are making icons just like typographers make type. This style recognizes how integral icons have become to the user experience, as important as text itself.
Icons are designed with similar considerations to typefaces, and often appear alongside text.
— Material Design 3 guidelinesIconography [is] designed to integrate seamlessly with San Francisco, the system font.
— Apple Human Interface Guidelines
Apple’s SF Symbols is the prime example of this: it’s designed in the same nine weights as their system font and aligns with the text’s cap height. This also means icons can respect the user’s accessibility settings for bolder UI text.
Uber’s design team similarly made icons to complement their UI font Uber Move, set in three weights for different degrees of emphasis.
Icons are designed to mimic our writing systems
So it becomes clear why system icons are monochromatic and drawn with outlines: instead of mimicking physical objects, they mimic our writing systems. Modern alphabets, Latin in particular, are fundamentally composed of lines instead of filled shapes. They made a similar transition from pictographs that resemble physical objects (like Egyptian hieroglyphs) to more abstract representations of physical objects. For example, you don’t need to draw a bird to talk about a bird; you just write a set of letters or symbols that mean ‘bird’.
By designing icons that resemble text, designers recognize that icons are a vital medium to communicate information to users. Icons can break language barriers, while text remains essential for those unfamiliar with icons. And designing both to appear similar can reduce cognitive load when reading icons alongside text.
Another benefit of defaulting to outline icons is that filled icons can now be used to represent state or emphasis, like bold text. For instance, “active states are represented with filled icons” in Material Design 3 and Apple suggests to “use the fill variant to indicate selection” or “to give a symbol more visual emphasis” in their Human Interface Guidelines. Twitter’s 2021 redesign takes this a step further, with the active page being differentiated only by a filled icon and bold text, without any color change.
Predicting the future is a fool’s errand, but looking at the history of writing systems, they’ve seen convergence on what symbols represent what sounds and ideas: the symbol ‘a’ always means ‘a’ and the letters ‘ant’ mean the insect named ant. There remain variations in how these symbols are drawn (the capital A can have serifs or not) but they all fundamentally look the same across different typefaces.
Iconography seems to be heading this way too—the “add folder” icon above has the same basic design across Apple’s, Google’s, and Microsoft’s icon sets: an outline of a closed Manila folder with a ‘+’ symbol. As icons become more commonplace in GUIs, people tend to agree on what symbols represent what ideas and differences become purely stylistic, just like text.
How can I achieve this? When using icons in your apps, you should use the icon set designed with the font you’re using: this is trivial if you’re using system fonts, which now all have system icon fonts. But if you’re using another UI font, there probably isn’t an icon set designed specifically for that font. Using an outline icon set is sufficient, such as the open-source Feather icons or Iconic.app. And if you were using filled Material Icons like us, you can easily switch to the outline style. (It seems Google has now made this style the default as part of Material Design 3.)
Personalization based on the wallpaper
Personalization is becoming an increasingly important element of UI design. While customization has been present since the ’90s with custom wallpapers and themes, designers are now finding more ways to personalize UIs throughout the system, primarily from the user-selected wallpaper. Google’s Material Design blog says it best: “Users customize their desktops in the physical and digital worlds with images that are personal and provide comfort and joy.” The wallpaper is the first thing a user sees and serves as a backdrop for the UI. So it’s a no-brainer to adapt the rest of the UI to this element.
The technique of blending the wallpaper into the UI has been around for a while, from the semi-transparent dock and menus in Mac OS X’s Aqua interface to the translucent window title bars in Windows Vista and 7’s Aero Glass theme. iOS 7 famously brought blurred backgrounds to many parts of its UI, with entire screens like the Notification Center and Control Center using a blurred version of the user’s wallpaper.
More recently, the wallpaper has started to influence almost the entirety of the UI. When Apple introduced dark mode in macOS Mojave, they incorporated a tint in window backgrounds based on the wallpaper, called Desktop Tinting. According to the Human Interface Guidelines, it “helps windows blend more harmoniously with their surrounding content.”
They later expanded on this in their major redesign in Big Sur by applying Desktop Tinting to light mode as well:
Windows 11 introduces a similar element with its Mica material, which their design guidelines describe as “an opaque material that incorporates the user’s theme and desktop wallpaper to create its highly personalized appearance.” It also uses this tint as a signifier for the currently active window.
Taking it to the next level is Material You in Android 12, which tints the app’s background, the bright accent colors for buttons and other controls, and down to the more neutral text colors. An entire color palette is generated from each user’s unique wallpaper.
It’s a critical element of their new design philosophy, “Instead of form following function, what if form followed feeling?” It’s a radical rejection of the status quo in UI design, which seeks a “universal” design with the most technically superior interface to fulfill user needs. It will be interesting to see if others follow suit in this philosophy.
Material Design built a color system
What the Material Design team left out of their announcements is how they achieved this, especially since they say they “had to find a way for any color combination to also have accessible contrast […] without testing each one.” Diving into the recently-published Material color utilities repo on GitHub unveils all the mystery:
- The Material team built their own color system: ‘hue, chroma, tone’, or ‘HCT’, based on the CAM16 and CIELAB (or LAB) color appearance models. CAM16 is a successor of LAB, designed to match how humans perceive color.
- Key to these models is the ‘tone’ or L* value, which describes a color’s perceived luminance or lightness, with an L* value of 0 being black and 100 being white. This is very useful when creating accessible color palettes, ensuring colors have enough contrast based on perceived luminance.
- On the web, the WCAG 2 guidelines prescribe a minimum contrast of 4.5:1 for body text. Directly using perceived luminance as a value to describe a color makes this much more straightforward, as the Material team explains: “Unlike contrast ratio, measuring contrast in L* is linear, and simple to calculate […] a difference of 50 guarantees a contrast ratio >= 4.5.”
- With this knowledge, all that’s left is to generate a palette of colors with different tones or L* values and apply any hue to it. Then use sufficiently contrasting pairs for UI elements. For example, a button can have a background color with L* = 40 and white text (L* = 100), and it would easily pass the minimum contrast requirement (L* difference > 50).
LCH for the rest of us
This is a powerful technique to effortlessly generate accessible colors, but it doesn’t require Material color utilities. LAB can be represented as LCH (luminosity, chroma, hue), similar to Material’s HCT, where the L value can be used to calculate contrast. (This is a better representation than existing ones like HSL, which can vary in perceived lightness even if the lightness value is the same.) You can learn more about LCH in this article.
(Also, LCH is making its way into web standards as part of CSS Color Level 4! So you can write lch(40% 44 49) in CSS without needing to convert it to HSL or RGB, but this is currently only supported in Safari. Lea Verou, who wrote the article linked above, is part of the W3C CSS Working Group developing this very standard.)
So, all you need is a starting color, convert it to LCH, and modify the L value to make a palette. Then use a pair of colors that have a difference of 50 or more in luminosity to ensure accessible contrast.
We can see how this technique is used in the Material color system below: the tones in the palette match the LCH luminosity value. (They also modify the chroma (similar to saturation) and hue slightly across tones.) I made a small web app that displays the palettes generated by the Material color utilities to get the LCH values below.
Before Material’s HCT, the design teams of Lyft and Stripe explored the same issue, and Stripe also ended up using LCH. I’ve linked both of their explorations, which are excellent reads.
How can I achieve this? There are a few tools to convert to and from LCH:
- Lea Verou made an LCH color picker,
- the Colord website lets you convert from LCH to hex or RGB,
- if you have a Mac, Sindre Sorhus’ System Color Picker is excellent, and
- Accessible Palette generates a palette using LAB/LCH.
I used this technique to add theming to Rowy, allowing users to choose their own accent color while maintaining accessibility and tinting key UI elements. The source code has the exact LCH values I used.
Rounded corners are harmonious
When you have a box with rounded corners in a design and want to nest an inner box with a small gap, the inner element should have a smaller corner radius, with the difference being the gap size. If you make the corner radii equal for both, the inner box looks out of place. This technique has been known for a while in digital design and is even part of the CSS3 spec.
This is also present in hardware design: the screen’s rounded corners match the device frame on the iPad Pro and iPhone X designs. On iPhones with rounded screens, the dock matches the screen’s curvature—Apple even provides the exact point size in the software. You can also see other elements in the video player matching the screen curvature.
Oddly, this principle was not applied to UI elements, which used a single corner radius. In Material Design 2, both dialogs and inner buttons have a corner radius of 4dp, despite having a gap of 8dp in between. macOS was similar in the Yosemite-era design, and Windows 10 used square corners for almost all UI elements.
However, with Big Sur and Windows 11, this effect is approximated by increasing the corner radii of larger UI elements. In macOS, buttons now have a corner radius of 5pt and dialog windows 10pt, plus they all use ‘smooth corners’ to match the corners of Apple’s hardware. Meanwhile, Windows 11 famously rounds previously sharp corners, with buttons at 4px and windows 8px.
It also seems that UIs are becoming more rounded in general:
- Big Sur increases corner radii and uses smooth corners, which look more rounded;
- iOS 15 introduces button styles with fully-rounded corners;
- Windows 11 removed sharp corners on most UI elements; and
- Android 12 increased the radii for dialogs, navigation drawers, and fully round the corners of buttons, in stark contrast to all previous versions of Material Design.
How can I achieve this? Set the smallest UI elements to some base corner radius, then set the larger containing elements like dialogs to a larger corner radius. Try to make them proportional to the distance between the smaller element, or double the smaller corner radius to simplify. Here’s how it looks in our app, with the corner radii doubled:
Variable UI fonts with optical sizes
When typefaces were first developed, they were physical designs etched in metal, with fixed font sizes. When a typographer designed the same typeface for a different size, they modified the design to be optimal by altering facets like spacing and proportion: this is known as optical size. You can learn more about optical size in this article.
Variable fonts are a new font format based on OpenType that allows the designer to customize specific ‘variation axes’ (or variables) of a type design, such as a non-fixed weight, slant, and optical size. You can learn more about variable fonts in this excellent Variable Fonts Primer, which uses Roboto Flex, a variable font extension of Google’s Roboto typeface.
In 2021, all major OSes now use this variable font technology to implement optical sizes in UI typography:
- Apple’s system font San Francisco was released in 2015 with two optical sizes: ‘Display’ for sizes 20 points and larger, and ‘Text’ for everything smaller. In 2020, Apple released these fonts as a single variable font, SF Pro, with optical size as a variation axis. Apple’s system icons, SF Symbols, also use variable font techniques.
- For Windows 11, Microsoft redesigned its system font Segoe UI as Segoe UI Variable with its own optical size axis.
- And as part of Material Design 3, Google introduces GS Text and GS Variable, an evolution of its corporate font Google Sans.
Also of note: these typefaces are all different styles of sans-serif. San Francisco is neo-grotesque, Segoe is humanist, and Google Sans is geometric.
How can I achieve this? Variable fonts are a relatively new technology, and producing them is expensive, so there aren’t as many of them around, especially in the free and open source space. So far, the only open source variable font with optical sizes that I’ve found is Roboto Flex, but it doesn’t seem to be finished yet. Rasmus Andersson’s increasingly ubiquitous Inter typeface has a display size in beta. In the meantime, using a more expressive typeface for prominent titles can elevate your design. For Rowy, I used Inter as the typeface in small text and Space Grotesk in headings for brand expression.
Focus on content
Flat design has been with us for over a decade, and its primary goal is to focus on the content by stripping away the clutter and ornamentation of UI elements. The iOS 15 design guidelines state, “a crisp, beautiful interface help[s] people understand and interact with content while never competing with it.”
The most recent OS releases iterate on this concept by having even less “chrome”. Navigation bars are transparent in iOS 15 and Android 12 and blend into the background until you scroll.
On the desktop, macOS Big Sur blends the title bar and toolbar until you scroll or hover over the bar for a few seconds. And some apps in Windows 11 don’t distinguish the title bar at all but house the content in a distinct card-like layer.
These elements all achieve the same goal: to reduce the amount of visual clutter around and elevate the visual prominence of the content.
How can I achieve this? If you have a navigation bar docked to an edge, blend it into the background when it doesn’t need to be distinguished, such as when the user hasn’t scrolled. And if you have primary content, house it in a subtle layer distinct from the background. We use a React UI library, MUI, which makes it easy for us to achieve this effect where the navigation bar is only distinguished on scroll:
Inset everything
In a similar vein, more UI elements are inset, no longer taking the entire width of their containers. When the iPhone X introduced an on-screen home indicator in place of the home button, Apple changed their guidelines to prescribe inset buttons with rounded corners, eschewing the full-width buttons introduced in iOS 7. Best practices changed for many other elements fixed to the bottom of the screen to adapt to the new iPhone design.
With iOS 15, Apple is insetting ‘table views’ in more apps like Settings and Mail. It seems to be in response to the growing size of iPhone screens, with the guidelines noting, “in a compact environment, an inset grouped table can cause text wrapping, especially when content is localized.”
In macOS Big Sur, they extend this design to the lists in Mail, consistent with the iPadOS design. It’s also present in menus throughout the system, including the menu bar. Note the click targets extend to the edge of the menus, like the previous full-width design. Windows 11 shares the same style in its menus and navigation items. Android 12’s system UI and apps generally follow this style too.
This style could improve accessibility as the separation between elements and their containers now extends to all four sides, but I haven’t found any research supporting this. When paired with harmoniously rounded corners, it can make menus look more modern.
Differentiation beyond color
Designers are adding more ways to display states without relying on color, which is inaccessible for people with color blindness. Here are some examples I noticed:
- Spotify added dots below the shuffle and repeat buttons instead of relying solely on changing their color in 2017.
- Material Design 3 displays a pill-shaped indicator and uses filled icons for active pages in the navigation bar.
- Windows 11 adds a consistent, distinct line to selected items in lists and navigation panes.
This informed the decision to redesign toggle buttons for Rowy:
And a standard switch design
With Android 12, switches now have the same fundamental design across the major OSes. This makes it easier for a user to switch between these platforms and reduces cognitive load.
Where is UI design headed?
The overarching theme I notice in all these design decisions is that designers put user interface design into perspective. They’re acutely aware of where digital interfaces fit in the human experience and interact with the physical world.
- The convergence on outline icons to mimic text recognizes the importance of icons in communication.
- Increasingly personalized interface elements—especially the direction Material You is taking—acknowledge how people like to make the things they use their own, including the tech they use every day.
- Harmoniously rounded corners and inset elements are inspired by physical objects and industrial design, so our software matches the hardware more closely.
- The use of variable fonts with optical sizes hearkens back to typography’s origins, and along with differentiating elements beyond color, they improve usability for all, especially those with disabilities.
- The more minor things help, too: reducing visual clutter to elevate content allows users to focus on what they want to do. And using a standard switch design eliminates any cognitive load required to figure out what a UI element does.
This kind of thinking behind UI design sets us up nicely for the next generation of computing centered on AR/VR the metaverse, where metaverse-first experiences will have to answer how they improve the human experience and interact with the physical world. Designers are already looking at how to adapt design systems for this change. Looking at the decisions above, applying color science (Material’s HCT takes viewing conditions into account) and inset elements that elevate content help these UI elements transition from the 2D world to the 3D metaverse.
Hey 👋 if you enjoyed this, you can follow me on Twitter @nots_dney, where I talk more about my work as a front-end engineer. Also, check out Rowy, where we’re building an improved user experience for working on cloud platforms, starting with Google Cloud and Firebase.
rowyio
/
rowy
Low-code backend platform. Manage database on spreadsheet-like UI and build cloud functions workflows in JS/TS, all in your browser.
✨ Airtable-like UI for managing database ✨ Build any automation, with or without code ✨
Connect to your database and create Cloud Functions in low-code - without leaving your browser.
Focus on building your apps
Low-code for Firebase and Google Cloud
Live Demo 🛝
💥 Explore Rowy on live demo playground 💥
Features ✨
20211004-RowyWebsite.mp4
Powerful spreadsheet interface for Firestore
- CMS for Firestore
- CRUD operations
- Bulk import or export data - csv, json, tsv
- Sort and filter by row values
- Lock, Freeze, Resize, Hide and Rename columns
- Multiple views for the same collection
Automate with cloud functions and ready made extensions
- Build cloud functions workflows on field level data changes
- Use any NPM modules or APIs
- Connect to your favourite tool with pre-built code blocks or create your own
- SendGrid, Algolia, Twilio, Bigquery and more
Rich and flexible data fields
- 30+…
Top comments (2)
Nice article! Really good at explaining small details in design that makes a huge difference 😊
Wonderful article, really complete, thanks for taking the time to gather all these little details together!