The making of Fluent emoji for Windows 11


  • Staff

A year-long effort to design a more expressive emoji system for Microsoft​

In the Fall of 2020, when we set out to explore a new direction for Microsoft's emoji system, little did we know that it would soon come to life in our products and be experienced by customers all the globe. After taking some time to look back at what we accomplished together, I decided to put together this post as a summary of our adventure.

Animation of Exploding Head emoji.


Our story began in October of 2020 during "Fix Hack Learn", a week-long quarterly event aimed at creating space for Microsoft employees to explore concepts they are passionate about. At that time, our project’s goal was focused on making our system of reactions more inclusive, enabling customers to choose their skin tone when reacting to a message or post on Teams and Yammer. But it was clear that we also had an opportunity to re-imagine our emojis under a completely new light. And ultimately, that’s what we did.

With potentially endless aesthetic directions, our instincts led us to borrow from the dimensional look and feel we had established through our UX storytelling efforts. In a few years, we had amassed a sizable collection of UX films and articles that pushed the limits in how our products were depicted, and which in turn created waves across our design language. It was time to take this direction one step further.

To bring this vision to life we partnered with our longtime collaborator Studio Tendril, and started the design process by leaning into customer feedback we had received about our existing emojis. As seen in the compilation below, the emojis in Windows 10 were simplistic, flat, and almost iconographic. This was in clear alignment with our old design language Metro, which had its roots in classic Swiss graphic design, but for that reason, was also at odds with the latest Fluent design direction and its principles.

Image compiling an assortment of 28 or our old emojis.


While bold outlines and a reductive color palette made the designs clear and accessible, it inadvertently prevented them from showing off the kinds of nuanced details that made them more expressive. The more we learned from customer feedback, the more we realized we were on the right path, where dimensionality would end up yielding a more human and approachable quality to the designs.

Animated Fire emoji


In retrospect, our very first explorations took us a little too far in visualizing materiality. The image below shows how in some of the early designs we borrowed from a rougher aesthetic inspired by wood carvings and clay sculptures. They were heartwarming and appeared to tap into a more universal, child-like aesthetic.

We even explored the use of fingerprint indentations to convey human influence in the making of each design, as well as a staccato quality to animations that was akin to stop motion, seen above in the Fire emoji. But in the end, given that our customers would be experiencing them in mostly small sizes, we felt this was not the approach forward as the most delightful details would be lost.

While the roughness of these designs wasn't appropriate, we fell in love with their boldness and vibrancy. After all, it was clear that reaching the right degree of expression would require putting as much focus on the color palette of our emojis as we did to the shapes themselves. We would move forward from here with determination to embrace these ideas across the entire set.


Read more:
 

Attachments

  • emoji.png
    emoji.png
    7.8 KB · Views: 0
like rounded corners
The Rounded Corners UI is not completed.

The Volume slider (on Volume button press) and Brightness is still a flat corners.
 

My Computer

System One

  • OS
    EndeavourOS, Windows 11 Pro
    Computer type
    PC/Desktop
    Manufacturer/Model
    custom PC
    CPU
    Core i5 8400
    Motherboard
    Gigabyte B360M-HD3
    Memory
    8gb DDR4-2400
    Graphics Card(s)
    iGPU
    Sound Card
    Realtek
    Monitor(s) Displays
    some generic 1080p 75hz monitor * 2
    Screen Resolution
    1080p * 2
    Hard Drives
    GIGABYTE NVMe SSD 256GB (GP-GSM2NE3256GNTD)
    Internet Speed
    200MBit/s
    Antivirus
    WD
The Rounded Corners UI is not completed.

The Volume slider (on Volume button press) and Brightness is still a flat corners.
Time to move to Linux.
 

My Computer

System One

  • OS
    Windows 10 Pro + others in VHDs
    Computer type
    Laptop
    Manufacturer/Model
    ASUS Vivobook 14
    CPU
    I7
    Motherboard
    Yep, Laptop has one.
    Memory
    16 GB
    Graphics Card(s)
    Integrated Intel Iris XE
    Sound Card
    Realtek built in
    Monitor(s) Displays
    N/A
    Screen Resolution
    1920x1080
    Hard Drives
    1 TB Optane NVME SSD, 1 TB NVME SSD
    PSU
    Yep, got one
    Case
    Yep, got one
    Cooling
    Stella Artois
    Keyboard
    Built in
    Mouse
    Bluetooth , wired
    Internet Speed
    72 Mb/s :-(
    Browser
    Edge mostly
    Antivirus
    Defender
    Other Info
    TPM 2.0
The Rounded Corners UI is not completed.

The Volume slider (on Volume button press) and Brightness is still a flat corners.
What! MS still has work to do on rounded corners? They're wasting too much time and effort on emojis.
 

My Computers

System One System Two

  • OS
    Windows 11 Canary Channel
    Computer type
    PC/Desktop
    Manufacturer/Model
    PowerSpec B746
    CPU
    Intel Core i7-10700K
    Motherboard
    ASRock Z490 Phantom Gaming 4/ax
    Memory
    16GB (8GB PC4-19200 DDR4 SDRAM x2)
    Graphics Card(s)
    NVIDIA GeForce GTX 1050 TI
    Sound Card
    Realtek Audio
    Monitor(s) Displays
    Samsung SAM0A87 Samsung SAM0D32
    Screen Resolution
    1920 x 1080
    Hard Drives
    NVMe WDC WDS100T2B0C-00PXH0 1TB
    Samsung SSD 860 EVO 1TB
    PSU
    750 Watts (62.5A)
    Case
    PowerSpec/Lian Li ATX 205
    Keyboard
    Logitech K270
    Mouse
    Logitech M185
    Browser
    Microsoft Edge and Firefox
    Antivirus
    ESET Internet Security
  • Operating System
    Windows 11 Canary Channel
    Computer type
    PC/Desktop
    Manufacturer/Model
    PowerSpec G156
    CPU
    Intel Core i5-8400 CPU @ 2.80GHz
    Motherboard
    AsusTeK Prime B360M-S
    Memory
    16 MB DDR 4-2666
    Monitor(s) Displays
    23" Speptre HDMI 75Hz
    Screen Resolution
    1920x1080
    Hard Drives
    Samsung 970 EVO 500GB NVMe
    Mouse
    Logitek M185
    Keyboard
    Logitek K270
    Browser
    Firefox, Edge and Edge Canary
    Antivirus
    Windows Defender

My Computers

System One System Two

  • OS
    22631.3374
    Computer type
    PC/Desktop
    CPU
    i5-11400F
    Motherboard
    Gigabyte
    Memory
    32GB
    Graphics Card(s)
    Geforce GT-1030
    Keyboard
    Logitech K400
    Mouse
    Logitech M720
    Internet Speed
    600 Mb
    Browser
    Edge
  • Computer type
    Laptop
    CPU
    Pentium N4200
    Motherboard
    ASUS
    Memory
    4GB
    Graphics card(s)
    Intel HD Graphics 505
    Sound Card
    HD Definition Audio Device
    Screen Resolution
    1366 x 768
    Mouse
    M510
    Internet Speed
    100Mb +
    Browser
    Edge
    Antivirus
    Windows Security
MS has ADHD. seriously! :lmao:

They are just all over the place. Spending time and resources on unnecessary things just for them to completely scrap it a couple years later.

But I guess thats the privilege of having bazillion of money.
 

My Computer

System One

  • OS
    Windows 11 x64 Build 22621
    Computer type
    PC/Desktop
    Manufacturer/Model
    Acer
... super excited to unveil the new icon of the Windows Insider Program.

0002150.png

Very important! :unsure:
 

My Computers

System One System Two

  • OS
    Windows 11
    Computer type
    PC/Desktop
    Manufacturer/Model
    ASUS ROG Strix
  • Operating System
    Windows 11
    Computer type
    Laptop
    Manufacturer/Model
    ASUS VivoBook

My Computers

System One System Two

  • OS
    Windows 11 Canary Channel
    Computer type
    PC/Desktop
    Manufacturer/Model
    PowerSpec B746
    CPU
    Intel Core i7-10700K
    Motherboard
    ASRock Z490 Phantom Gaming 4/ax
    Memory
    16GB (8GB PC4-19200 DDR4 SDRAM x2)
    Graphics Card(s)
    NVIDIA GeForce GTX 1050 TI
    Sound Card
    Realtek Audio
    Monitor(s) Displays
    Samsung SAM0A87 Samsung SAM0D32
    Screen Resolution
    1920 x 1080
    Hard Drives
    NVMe WDC WDS100T2B0C-00PXH0 1TB
    Samsung SSD 860 EVO 1TB
    PSU
    750 Watts (62.5A)
    Case
    PowerSpec/Lian Li ATX 205
    Keyboard
    Logitech K270
    Mouse
    Logitech M185
    Browser
    Microsoft Edge and Firefox
    Antivirus
    ESET Internet Security
  • Operating System
    Windows 11 Canary Channel
    Computer type
    PC/Desktop
    Manufacturer/Model
    PowerSpec G156
    CPU
    Intel Core i5-8400 CPU @ 2.80GHz
    Motherboard
    AsusTeK Prime B360M-S
    Memory
    16 MB DDR 4-2666
    Monitor(s) Displays
    23" Speptre HDMI 75Hz
    Screen Resolution
    1920x1080
    Hard Drives
    Samsung 970 EVO 500GB NVMe
    Mouse
    Logitek M185
    Keyboard
    Logitek K270
    Browser
    Firefox, Edge and Edge Canary
    Antivirus
    Windows Defender
Have a better one:

Insiders Emoji:
ssInsider.png

MS Reaction:
ssGif.gif

Just look at "rounded" shapes around us, they are inspiring. All rounded thigs in the world are charming and calming :hug: , specially rounded shapes and curves which are above our waist and those which are a little lower than it :loveit: (just think about rounded shapes of human anatomy, not more)…, and all pointy things are harsh, aggressive and fighting (I like pointy shapes too :star:).

New emojis inspired by organic rounded shapes, they are not even perfect circle, like planet Earth, they are somehow circular but MS and its design team call it "Imperfect Circle" (what a great perfect "Imperfect" term/name). They are also calling things as an organic and different way :winkt:

New MS "Rounded-Therapy" era is beginning … Sit back and relax :coffee:
 

My Computer

System One

  • OS
    Win 11 Enterprise
    Computer type
    Laptop
    CPU
    i7
    Hard Drives
    SSD
:lmao:
 

My Computers

System One System Two

  • OS
    Windows11
    Computer type
    Laptop
    Manufacturer/Model
    Huawei Matebook X Pro
    CPU
    intel 8250 I5
    Memory
    8gb
    Graphics Card(s)
    intel uhd 620
    Monitor(s) Displays
    built in laptop display
    Screen Resolution
    1920x1280
    Hard Drives
    Samsung 970 Evo 500gb M2
    Browser
    Edge
    Antivirus
    Defender
  • Operating System
    Windows 10
    Computer type
    Laptop
    Manufacturer/Model
    Acer A515-43-R6DE
    CPU
    AMD Ryzen 7300U
    Memory
    16 GB DDR4
    Graphics card(s)
    AMD Raedon RX Vega graphics onboard
    Monitor(s) Displays
    15"6 FHD IPS Slim Bezel
    Hard Drives
    512cb PCie NVME SSD
    Case
    Pure Silver
    Mouse
    Touchpad and Logitech external mouse
    Keyboard
    Inbuilt
    Browser
    Edge
    Antivirus
    Defender
Mark my words in few years time the written word will no longer exist, people will communicate with meaningless images on round screens. :eyeroll:
 

My Computers

System One System Two

  • OS
    Windows 11 22H2 OS Build 22623.1095
    Computer type
    PC/Desktop
    Manufacturer/Model
    Self Build
    CPU
    AMD Ryzen 7 3800X
    Motherboard
    Asus PRIME B350-PLUS
    Memory
    16GB Corsair Vengeance LPX DDR4 @3000Mhz
    Graphics Card(s)
    ASUS - GeForce RTX 3070 Ti 8 GB TUF GAMING OC
    Sound Card
    On Board Realtec
    Monitor(s) Displays
    Acer KA241
    Screen Resolution
    1920 x 1080 @60Hz
    Hard Drives
    240GB PNY CS900 SSD - OS
    2 x 1TB Crucial MX500 SSD
    1 x 500GB Crucial MX300 SSD
    2TB Seagate ST2000DM001-1ER164
    2TB Seagate ST2000DM008-2FR102
    PSU
    750 Watt Corsair TX750 Plus
    Case
    Cooler Master 690 III
    Cooling
    Akasa AK98 5 Case Fans
    Keyboard
    Logitech K270 - wireless
    Mouse
    Logitech - M185 wireless
    Internet Speed
    BT Fibre 75 Mbps
    Browser
    Firefox
    Antivirus
    Windows Defender
    Other Info
    Use hardware KVM to switch monitors on three PCs and software (input director) to use mouse and keyboard on all 4 PCs.
  • Operating System
    Windows 11 Pro 22H2 build 22621.900
    Computer type
    PC/Desktop
    Manufacturer/Model
    Dell Inspiron 3881 - modified with SFX PSU fitted internally
    CPU
    Intel i5 - 10400
    Motherboard
    Dell 032w55 version A00
    Memory
    16GB of HyperX Fury @ 2133 Mhz
    Graphics card(s)
    EVGA 6GB GTX 1060.
    Sound Card
    Builtin
    Monitor(s) Displays
    ACER KA241
    Screen Resolution
    1920x 1080 @60Hz
    Hard Drives
    256GB SK hynix NVMe
    1TB Western Digital WD10EZEX-75WN4A1
    PSU
    Modular 450 Watt Corsair SF450 Platinum ( Mod to replace the Dell 265 Watt PSU)
    Case
    Inspiron Small Desktop
    Cooling
    Dell stock cooler
    Mouse
    Dell
    Keyboard
    Dell
    Internet Speed
    BT Fibre 75 Mbps
    Browser
    Firefox
    Antivirus
    Windows Defender
    Other Info
    Use hardware KVM to switch monitors on three PCs and software (input director) to use mouse and keyboard on all 4 PCs.
I have a emoji for MS to show my support for their emoji effort but I can't post it.
 

My Computers

System One System Two

  • OS
    Windows 11 Canary Channel
    Computer type
    PC/Desktop
    Manufacturer/Model
    PowerSpec B746
    CPU
    Intel Core i7-10700K
    Motherboard
    ASRock Z490 Phantom Gaming 4/ax
    Memory
    16GB (8GB PC4-19200 DDR4 SDRAM x2)
    Graphics Card(s)
    NVIDIA GeForce GTX 1050 TI
    Sound Card
    Realtek Audio
    Monitor(s) Displays
    Samsung SAM0A87 Samsung SAM0D32
    Screen Resolution
    1920 x 1080
    Hard Drives
    NVMe WDC WDS100T2B0C-00PXH0 1TB
    Samsung SSD 860 EVO 1TB
    PSU
    750 Watts (62.5A)
    Case
    PowerSpec/Lian Li ATX 205
    Keyboard
    Logitech K270
    Mouse
    Logitech M185
    Browser
    Microsoft Edge and Firefox
    Antivirus
    ESET Internet Security
  • Operating System
    Windows 11 Canary Channel
    Computer type
    PC/Desktop
    Manufacturer/Model
    PowerSpec G156
    CPU
    Intel Core i5-8400 CPU @ 2.80GHz
    Motherboard
    AsusTeK Prime B360M-S
    Memory
    16 MB DDR 4-2666
    Monitor(s) Displays
    23" Speptre HDMI 75Hz
    Screen Resolution
    1920x1080
    Hard Drives
    Samsung 970 EVO 500GB NVMe
    Mouse
    Logitek M185
    Keyboard
    Logitek K270
    Browser
    Firefox, Edge and Edge Canary
    Antivirus
    Windows Defender
I have a emoji for MS to show my support for their emoji effort but I can't post it.
I did that earlier! I think I offended some folks! :censored:
 

My Computers

System One System Two

  • OS
    Windows 11
    Computer type
    PC/Desktop
    Manufacturer/Model
    ASUS ROG Strix
  • Operating System
    Windows 11
    Computer type
    Laptop
    Manufacturer/Model
    ASUS VivoBook
I did that earlier! I think I offended some folks! :censored:
You won't offend me. :)
When I'm ticked off it's my favorite word.
 

My Computers

System One System Two

  • OS
    Windows 11 Canary Channel
    Computer type
    PC/Desktop
    Manufacturer/Model
    PowerSpec B746
    CPU
    Intel Core i7-10700K
    Motherboard
    ASRock Z490 Phantom Gaming 4/ax
    Memory
    16GB (8GB PC4-19200 DDR4 SDRAM x2)
    Graphics Card(s)
    NVIDIA GeForce GTX 1050 TI
    Sound Card
    Realtek Audio
    Monitor(s) Displays
    Samsung SAM0A87 Samsung SAM0D32
    Screen Resolution
    1920 x 1080
    Hard Drives
    NVMe WDC WDS100T2B0C-00PXH0 1TB
    Samsung SSD 860 EVO 1TB
    PSU
    750 Watts (62.5A)
    Case
    PowerSpec/Lian Li ATX 205
    Keyboard
    Logitech K270
    Mouse
    Logitech M185
    Browser
    Microsoft Edge and Firefox
    Antivirus
    ESET Internet Security
  • Operating System
    Windows 11 Canary Channel
    Computer type
    PC/Desktop
    Manufacturer/Model
    PowerSpec G156
    CPU
    Intel Core i5-8400 CPU @ 2.80GHz
    Motherboard
    AsusTeK Prime B360M-S
    Memory
    16 MB DDR 4-2666
    Monitor(s) Displays
    23" Speptre HDMI 75Hz
    Screen Resolution
    1920x1080
    Hard Drives
    Samsung 970 EVO 500GB NVMe
    Mouse
    Logitek M185
    Keyboard
    Logitek K270
    Browser
    Firefox, Edge and Edge Canary
    Antivirus
    Windows Defender
I have a emoji for MS to show my support for their emoji effort but I can't post it.
Share with us. We are (Insiders!) as a team ( :woozy: ) and have to push MS design team to create more creative ( :loveit: ) "Emojis" with rounded and curvy shapes (no 6y fantasy). I am working on some new fluent emojis (not 3D just 2D version in Lunacy), any new ideas (design idea) are very warm welcome.
 

My Computer

System One

  • OS
    Win 11 Enterprise
    Computer type
    Laptop
    CPU
    i7
    Hard Drives
    SSD
Is it just me or does the green progress glow have rounded corners too!?!?!?

000613.png

YES!!! It does!!! My life is complete!!! 🙏
 

My Computers

System One System Two

  • OS
    Windows 11
    Computer type
    PC/Desktop
    Manufacturer/Model
    ASUS ROG Strix
  • Operating System
    Windows 11
    Computer type
    Laptop
    Manufacturer/Model
    ASUS VivoBook
Today I noticed Edge updated to "98.0.1108.43" and its overlay scrollbar became rounded corner (instead of pointy corner). The old pointy corner (rectangular) scrollbar was a real eyesore but now I am more calm and relax while browsing universe with "Microsoft Edge". What a great browser and ecosystem (full of rounded things :hug::woozy: …).

Also OS rounded corner ecosystem had an strong impact on my unconscious mind too! Even my new SS(s) has rounded corner annotations!

ss.png
 

My Computer

System One

  • OS
    Win 11 Enterprise
    Computer type
    Laptop
    CPU
    i7
    Hard Drives
    SSD
Fun Fact: Microsoft added 2D Fluent Emojis instead of the 3D ones, it became controversial after that. Here's the reason, the Segoe UI Emoji Font uses 2D characters only and it does not support 3D characters as well. 3D Emojis only exist in some Microsoft apps like Whiteboard, Microsoft Teams, etc. Microsoft employees are trying to add support for 3D Emojis, but 3D Emojis have not been added for about a year or so. That is why 2D fonts never go in 3D at all, it's not been great.
 

My Computer

System One

  • OS
    Windows 11
    Computer type
    Laptop
    Manufacturer/Model
    Lenovo YOGA 730-15IKB
    CPU
    Intel Core i5-8250U
    Motherboard
    Lenovo LNVNB161216
    Memory
    8.00 GB
    Graphics Card(s)
    Intel(R) UHD Graphics 620
    Sound Card
    Realtek ALC236 @ Intel Sunrise Point-LP PCH - High Definition Audio Controller, Intel Kaby Lake HDMI @ Intel Sunrise Point-LP PCH - High Definition Audio Controller [C1] PCI[C1] PCI,
    Monitor(s) Displays
    CMN N156HCE-EN1
    Screen Resolution
    1920x1080
    Hard Drives
    G-TECH ArmorATD SCSI Disk Device
    HFS256GD9TNG-62A0A
    PSU
    OEM Define 1
    Case
    Unknown Case
    Cooling
    Intel Sunrise Point-LP PCH - Thermal Management Controller [C1]
    Keyboard
    Standard PS/2 Keyboard
    Mouse
    HID-compliant mouse
    Internet Speed
    292500 kbps
    Browser
    Microsoft Edge, Google Chrome, Etc.
    Antivirus
    Trend Micro Internet Security
    Other Info
    Computer Type: ACPI x64-based PC
    Computer Name: DESKTOP-JGTBO6N
    Printer: Canon MG5300 series Printer (Copy 1)
    Printer: Canon MG5300 series Printer WS
    Printer: Canon MG5300 series Printer
    DMI BIOS: Lenovo BIOS 7KCN33WW(V1.14)
    Total Bluescreens: 4
    Secure Boot
    Trusted Platform Module 2.0
Back
Top Bottom