In this article, you’ll learn more about the Windows design language, what has changed, and how to make your applications look their best on Windows11, view the webinar’s recording.
Table of Contents
The Five Eras of Windows UI
- Windows Classic
- Windows XP (Luna)
- Windows Aero
- Metro (aka Microsoft) Design Language
- 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 the basis for Fluent Design
Microsoft Fluent Design System
- Developed in 2017 by Microsoft
- Is a Revamp of Metro Design Language
- Used as a 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
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 the 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
- The 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
- The accent color is used to emphasize important UI elements
Windows 11 VCL Styles
- Available via GetIt Package Manager
Detect Dark Mode
- Open Source library to check registry github.com/checkdigits/delphidarkmode
Works with Delphi & C++Builder - Detecting theme change at runtime
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 the contiguous element or separated into cards that segment content
Elevation in Windows 11
- The elevation is the depth component of the spatial relationship
- Different elevations result 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
- youtu.be/uOpbLLDh1hc (Ian Barker)
- Fluent UI Look and Feel – Part 2
- youtu.be/lGcj8AG7M0o (Ian Barker)
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 signaling to block interaction below a modal UI such as a dialog
Overhauling Icons
Skia4Delphi – SVG Support
- Open-Source and Cross-Platform Skia wrapper for Delphi
- Move Your UI to the 23rd Century-Build a Data Dashboard with Delphi & Skia. Engage!
- youtu.be/mGdeomuIP_M w/ Ian Barker
Looking for great GUI components and styles for App development on windows 11? Try the IDE software, which simplifies your design and allows you to take advantage of the infinite design possibilities.