Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 23, 2021 03:02 pm GMT

UI design trends of today and how to apply them in your apps

From outline icons to switch designs, the UIs of major OSes are all starting to looksimilar.

If youre 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 years macOS Big Sur), Ive 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.

Im 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

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 Kares icons for the original Macintosh to Microsofts 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 Googles new version of Material Design called Material You (or Material Design 3), all major OSes now use this style.

Icon designs of Segoe Fluent Icons, SF Symbols, and Material Icons. Icons are: account, heart, share, edit, reload, and search.

But why does everyone use this style for icons? Designers arent just investing more into creating cohesive and complementary icon sets for design systemsdesigners 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 guidelines

Iconography [is] designed to integrate seamlessly with San Francisco, the system font.
Apple Human Interface Guidelines

Apples SF Symbols is the prime example of this: its designed in the same nine weights as their system font and aligns with the texts cap height. This also means icons can respect the users accessibility settings for bolder UI text.

From Apple: A diagram showing the square and arrow up symbol in all 27 weights and scales.

Apples SF Symbols icon set is designed with the same nine weights as their system font. Source: Apple

From Apple: 3 images of the plus circle symbol followed by the capitalized word add. In each, the word is the same size, but the symbol is a different size: small, medium, and large. 2 parallel horizontal lines appear across all three images. The top line shows the height of the capital letter A and the bottom line is the baseline under the word. Small: circle touches both lines. Medium: circle extends slightly above and below the lines. Large: vertical line of the plus sign almost touches both.<br>

They also align to the system fonts cap height to better complement text. Source: Apple

Ubers design team similarly made icons to complement their UI font Uber Move, set in three weights for different degrees of emphasis.

Uber Move icon set in light, medium, and bold weights.<br>

Source: Uber

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 dont 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. Twitters 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.

Twitter navigation UI, with the Home page active. The home icon is filled and the text is bold, while other icons are outlined and in regular font weight.<br>

Twitter only uses filled icons and bold text to differentiate the current page. The jury is still out on whether this is accessible enough.

Predicting the future is a fools errand, but looking at the history of writing systems, theyve 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 toothe add folder icon above has the same basic design across Apples, Googles, and Microsofts 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.

Add folder icon in Segoe Fluent Icons, SF Symbols, and Material Icons.

How can I achieve this? When using icons in your apps, you should use the icon set designed with the font youre using: this is trivial if youre using system fonts, which now all have system icon fonts. But if youre using another UI font, there probably isnt 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. Googles 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 its a no-brainer to adapt the rest of the UI to this element.

From the left: Windows 11 menu with translucent background that blurs the wallpaper, macOS app sidebar with similar translucent background, iOS control center with similar translucent background, and Material You app design with color palette generated from wallpaper colors.

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 Xs Aqua interface to the translucent window title bars in Windows Vista and 7s 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 users 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.

Two screenshots, split vertically, of the System Preferences window in dark mode in macOS Mojave, with different wallpapers behind. The left half uses a wallpaper with dark blue tones. The right half uses a wallpaper with lighter orange tones. The window has a different background color that's slightly tinted to match the colors of the wallpapers.

Source: Apple

They later expanded on this in their major redesign in Big Sur by applying Desktop Tinting to light mode as well:

Two screenshots, split vertically, of the System Preferences window in light mode in macOS Monterey. The left half has Desktop Tinting enabled and the right has it disabled.

On the left, the window background is tinted purple to match the wallpaper. On the right, tinting is disabled, and the window background is pure gray.

Windows 11 introduces a similar element with its Mica material, which their design guidelines describe as an opaque material that incorporates the users 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 apps 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 users unique wallpaper.

Its a critical element of their new design philosophy, Instead of form following function, what if form followed feeling? Its 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.

Multiple phones arranged in a grid with different wallpapers and different UI color palettes derived from the wallpapers.

Source: Google

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:

  1. 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.
  2. Key to these models is the tone or L* value, which describes a colors 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.
  3. 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.
  4. With this knowledge, all thats 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).

Light color palette generated from a user-supplied red floral wallpaper. All the colors have warm, red tones, with different levels of lightness.

Source: Google

LCH for the rest of us

This is a powerful technique to effortlessly generate accessible colors, but it doesnt require Material color utilities. LAB can be represented as LCH (luminosity, chroma, hue), similar to Materials 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.

13 tones derived from a key color. Tones are: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100. Underneath each tone is the associated LCH value. The L value matches the tone number.

Source: Google

Before Materials HCT, the design teams of Lyft and Stripe explored the same issue, and Stripe also ended up using LCH. Ive 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:

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.

Two UI themes based on a different primary color. On the left, the primary color is purple and on the right, it's red. The UI colors for backgrounds and shadows are displayed as LCH. The L and C values are the same across the two themes, but the H value matches the hue of the primary color.

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 screens rounded corners match the device frame on the iPad Pro and iPhone X designs. On iPhones with rounded screens, the dock matches the screens curvatureApple even provides the exact point size in the software. You can also see other elements in the video player matching the screen curvature.

Annotated screenshot of iPhone dock. The display corner radius is 47.33pt, the gap between the display and dock is 12pt, and the dock corner radius is 35.33pt.

These values were measured using the image provided in Sketchs built-in iOS App Icon template and the display corner radius for the iPhone 12 from Kyle Bashours ScreenCorners library. The app icon radius remains consistent across the system, so it does not match the screens 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 Apples hardware. Meanwhile, Windows 11 famously rounds previously sharp corners, with buttons at 4px and windows 8px.

Annotated side-by-side screenshots of Windows 11 and macOS 12 dialog windows. The Windows 11 design uses 8px for the window corner radius and 4px for the button. The macOS design uses 10pt for the window and 5pt for the button.

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. Heres how it looks in our app, with the corner radii doubled:

Annotated screenshot of a dialog window in Rowy. The window's corner radius is 8px and the button's is 4px.

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 Googles Roboto typeface.

Text samples of Segoe UI Variable, SF Pro, and Google Sans at different optical sizes that highlight the differences in designs at different optical sizes.

In 2021, all major OSes now use this variable font technology to implement optical sizes in UI typography:

  • Apples 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. Apples 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 arent 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 Ive found is Roboto Flex, but it doesnt seem to be finished yet. Rasmus Anderssons 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.

Typography scale used in Rowy. Headings use the font Space Grotesk and smaller UI text use Inter.

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.

A 22 grid of screenshots of navigation bars in iOS 15 (left column) and Android 12 (right column). The top row shows the navigation bars before scrolling, with a transparent background. The bottom row shows the bars with backgrounds after the user has scrolled.

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 dont distinguish the title bar at all but house the content in a distinct card-like layer.

On the top, two screenshots of the macOS toolbar design. On the left, the toolbar blends into the background by default. On the right, the toolbar has a shadow underneath as the user hovers over the toolbar. Below is a screenshot of the Windows 11 settings app, which always has a transparent background for the toolbar. The content below is housed in a card-like layer with a lighter background and shadow.

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 doesnt need to be distinguished, such as when the user hasnt 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:

Two screenshots side-by-side of navigation bars in Rowy. On the left, the navigation bar blends into the background in the initial state. On the right, the navigation bar has a white background and shadow after the user has scrolled.

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.

Screenshot of the Windows 11 Settings app, macOS 12 Mail app, iOS 15 Settings app, and Android 12 notification panel. In all screenshots, none of the UI elements touch the edge of the windows or screens and are contained in elements with rounded corners.

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. Its 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 12s 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 havent found any research supporting this. When paired with harmoniously rounded corners, it can make menus look more modern.

Two screenshots of menus in Rowy. In both, the menu items do not touch the edge of the menu container and items have rounded corners.

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.

Three screenshots. From the left: a Windows 11 navigation pane with a line on the left of the active page, the Spotify playback controls with repeat enabled and a dot below the repeat icon to signify state, and an Android 12 navigation bar with the current page signified by a pill shape behind the page icon.

This informed the decision to redesign toggle buttons for Rowy:

Two screenshots of toggle button designs. On the left: Material Design 2, which uses a different background to signify the active button. On the right: Rowy, which uses a line on the bottom of the button to signify the active button.

And a standard switch design

Screenshots of toggle switch designs in Windows 11, macOS 12, iOS 15, and Android 12.

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. Theyre 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 elementsespecially the direction Material You is takingacknowledge 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 typographys 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.

Woman with VR headset on and controllers in hands at sunset.

Photo by Vinicius "amnx" Amano on Unsplash

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 (Materials 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 were building an improved user experience for working on cloud platforms, starting with Google Cloud and Firebase.

GitHub logo rowyio / rowy

Open-source Airtable-like experience for your database (Firestore) with GCP's scalability. Build any automation or cloud functions for your product.

Rowy

GCP as easy as ABC

Build on Google Cloud Platform in minutes

Manage Firestore data in a spreadsheet-like UI, write Cloud Functions effortlessly in the browser, and connect to your favorite third party platforms such as SendGrid, Twilio, Algolia, Slack and more

Live Demo

Check out the live demo of Rowy

Quick Deploy

Set up Rowy on your Google Cloud Platform project with this one-click deploybutton.

Run on Google Cloud

Documentation

You can find the full documentation with how-to guideshere.

Features

Powerful spreadsheet interface for Firestore

  • CRUD operations
  • Sort and filter by row values
  • Lock, Freeze, Resize, Hide and Rename columns
  • Multiple views for the same collection
  • Bulk import or exportdata - csv, json

Automate with cloud functions and ready made extensions

  • Effortlessly build cloud functions on field level triggers right in the browser
    • Use any NPM modules or

Original Link: https://dev.to/notsidney/ui-design-trends-of-today-and-how-to-apply-them-in-your-apps-47kn

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To