Fluent design

19. okt. 2017
16. mar. 2025

Fluent design hvor og hvornår?

Fluent design introduceres langsomt ind i Windows 10, og de første skridt blev taget i denne måned (oktober 2017) med deres "Fall Creator Update". Hen over slutningen af 2017 og starten af 2018, hvor der især i Redstone opdateringen forventes, vil der komme mange flere ændringer.

Hvad er Fluent design?

Fluent design er udarbejdet af Microsoft i 2017, og startede under kodenavnet "Project Neon". 

Fluent design bygger på 5 elementer inden for design:

  • lys
  • dybde
  • bevægelse
  • materialer
  • størrelse

Det er disse 5 elementer der fokuseres på, og alle 5 elementer skal bygges ind i apps, animationer mv. 

Man vil se større brug af f.eks. bevægelse og dybde i designet.

I næste afsnit kan du se en video, som viser eksempler på Fluent design

Eksempler på Fluent design

Du kan se mere om Fluent design i denne video


Du kan også læse og se mere om Fluent design i videoer på nedenstående links

Ofte stillede spørgsmål om Fluent Design

Hvad er Fluent Design System?

Fluent Design System er et designsprog udviklet af Microsoft i 2017, tidligere kendt under kodenavnet "Project Neon". Det blev introduceret for at skabe en mere sammenhængende og engagerende brugeroplevelse på tværs af forskellige enheder og platforme. Fluent Design fokuserer på fem nøgleelementer: lys, dybde, bevægelse, materialer og skala. Disse elementer arbejder sammen for at skabe et moderne og intuitivt design, der forbedrer interaktionen mellem brugeren og applikationen.

Hvordan adskiller Fluent Design sig fra tidligere designsystemer som Metro og Aero?

Fluent Design bygger videre på tidligere designsystemer som Metro og Aero, men introducerer en mere omfattende og fleksibel tilgang til design. Mens Metro fokuserede på enkelhed og typografi, og Aero på gennemsigtighed og glaslignende effekter, kombinerer Fluent Design disse elementer med yderligere fokus på lys, dybde og bevægelse. Dette resulterer i en mere dynamisk og engagerende brugeroplevelse, der tilpasser sig forskellige enheder og skærmstørrelser.

Hvordan implementerer jeg Fluent Design i mine egne applikationer?

For at implementere Fluent Design i dine applikationer kan du benytte Microsofts officielle ressourcer og værktøjer. Microsoft tilbyder Fluent UI, en samling af UX-rammeværk, der gør det muligt at skabe smukke, platformuafhængige apps med fælles kode, design og interaktionsadfærd. Du kan finde komponenter og vejledninger til React, web, Windows, iOS, Android og macOS platforme.