Have an amazing solution built in RAD Studio? Let us know. Looking for discounts? Visit our Special Offers page!
News

Windows 11 Styles and Effects – Updating Your GUI – Webinar

windows11stylesandeffectsupdatingyourguifluentui

Watch the replay of this webinar to understand the Windows design language, what’s changed, and how to make your applications look the best on the latest version of Windows11.

The Five Eras of Windows UI

  1. Windows Classic
  2. Windows XP (Luna)
  3. Windows Aero
  4. Metro (aka Microsoft) Design Language
  5. Microsoft Fluent Design System

Windows Classic

  • From Windows 3.11
  • Simple outlines and few colors
  • From Windows 95
  • Shaded bevels for slight 3D
  • Gradient title bars introduced in Windows 98

Windows Luna

  • From Windows XP
  • More gradients for a greater 3D rounded look

Windows Aero

  • Introduced in Vista
  • Added transparency and glass effects

Microsoft Design Language

  • Previously known as Metro Design Language
  • Used and popularized by Windows 8 / 8.1
  • Microsoft Design Language 2 (MDL2) developed alongside Windows 10
  • Served as basis for Fluent Design

Microsoft Fluent Design System

  • Developed in 2017 by Microsoft
  • Is a Revamp of Metro Design Language
  • Used as design guideline for all Windows 10 / 11 devices
  • Transition to Fluent is a gradual long-term project

Fluent vs Metro vs Aero

  • Fluent Preserves the clean look and feel Metro introduced
  • Still simple though not as flat as Metro
  • Renews the visuals of Aero
    • Blurred Translucency
    • Drop Shadow
    • Highlight effects following mouse pointer

Windows 10 Fluent’s Key Principles

w10-8062574

Windows 11 Design Principles

  • Effortless
    • Easy to do what users want, with focus and precision
  • Calm
    • Fades into the background to help stay calm and focused
  • Personal
    • Flexes to an individual’s needs and preferences
  • Familiar
    • Refreshed look and feel with no learning curve
  • Complete + Coherent
    • Consistent Windows experience across Devices

Windows 11 Signature Experiences

  • Geometry
  • Layering & Elevation
  • Color
  • Materials
  • Iconography & Typography
  • Motion

Geometry in Windows 11

  • Geometry describes the shape, size and position of UI elements on screen
    • Progressively rounded corners
    • Nested elements
    • Consistent gutters

Geometry: Rounded Corners

  • Windows 11 applies rounded corners to all top-level app windows
  • The same applies to most common controls such as Button and ListView

Color in Windows 11

  • Color indicates a visual hierarchy and structure between user interface elements
  • Color is context appropriate, emphasizing significant items only when necessary
  • Both Light and Dark color modes use neutral colors for optimal contrast
  • Accent color is used to emphasize important UI elements

Windows 11 VCL Styles

  • Available via GetIt Package Manager

Detect Dark Mode

Layering in Windows 11

  • Layering is the concept of overlapping one surface with another, creating two or more visually distinguished areas within the same application
    • The base layer is an app’s foundation. It is the bottommost layer of every app, and contains controls related to app menus, commands, and navigation
    • The content layer focuses the user on the app’s central experience. The content layer may be on contiguous element, or separated into cards that segment content

Elevation in Windows 11

  • Elevation is the depth component of the spatial relationship
  • Different elevations results from greater drop shadows

Materials in Windows 11

  • Materials are visual effects applied to UX surfaces
    • Acrylic 
    • Mica 
    • Smoke

Acrylic in Windows 11

  • A semi-transparent material that replicates the effect of frosted glass
  • Used for transient, light-dismiss surfaces such as flyouts and context menus

AlmediaDev

  • Most powerful, functional, unique solutions with Fluent UI, Themes, Styles, Skins, GDI+, DirectX for Delphi and C++ Builder
  • Developing Fluent User Interfaces 
  • Fluent UI Look and Feel – Part 2 

Mica Material in Windows 11

  • New opaque material 
  • Subtly tinted with the user’s desktop background color
  • Use for primary content areas

Smoke Effect in Windows 11

  • Smoke emphasizes an important UI surface by dimming the surfaces beneath so that they recede into the background
  • Smoke is used to signal blocking interaction below a modal UI such as a dialog

Overhauling Icons

icons-6484694

Skia4Delphi – SVG Support


Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition

About author

Chief Developer Advocate for Embarcadero Technologies.

2 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

IN THE ARTICLES