Fluent UI

This film was dedicated to celebrating the Microsoft’s latest design-to-code investments that enable designers and developers to scale up the next generation of Microsoft 365 experiences. To learn more, check out this article on Medium.

For this film we had very little UI to highlight, so we wanted to focus the story on joyful and playful moments that some of those micro-interactions can unlock for Microsoft customers. Also working to illustrate the imagination of creators using Fluent UI components.

 
 
MI-410_03_01_0016.jpg
MI-410_03_01_0066.jpg
MI-420_02_$cv01_0023.jpg
MI-420_02_01_0038.jpg
MI-430_01_01_0053.jpg
MI-440_02_01_0027.jpg
MI-310_05_01_0008.jpg
MI-320_03_01_0054.jpg
MI-340_03_01_0026.jpg
MI-340_03_01_0088.jpg
MI-340_11_3_0052.jpg
MI-350_03_01_0103.jpg
MI-RND-texture-I_V03_01_0051.jpg
MI-STAGE-BUTTON-A_V01_01.png
SH_120_01_01_0051.jpg
Snapshot.jpg
MI-STAGE-BUTTON-A_V01_02.png
MI-STAGE-BUTTON-B_V01_02.png
MI-210_05_01_0023.jpg
MI-210_05_01_0055.jpg
MI-210_05_01_0088.jpg
MI-220_01_01_0036.jpg
MI-220_03_01_0032.jpg
MI-220_03_01_0050.jpg
MI_STAGE_SCREEN_02_02_cc.jpg
MI_TEXTURE_TEST_07_01.png
MI_TEXTURE_TEST_07_03.png
MI-130_03_01_0060.jpg
MI-130_03_01_0116.jpg
MI-130_09_01_0081.jpg

One of the images I created (above) for the article’s header, and below are some of my renders for the type design Sawdust created for us.

 
designcode_002.jpg
designcode_001.jpg
designcode_003.jpg
designcode_004.jpg
designcode_005.jpg
designcode_006.jpg
designcode_007.jpg
designcode_008.jpg
 
 

Thank you!

 

Thanks to Jon Friedman, Benedikt Lehnert and Rachel Romano for the partnership throughout the production of this story.

Thanks to Vitaly Grossman, Vincent Schwenk and Zelig Sound for our joyful collaboration in this UX film. Thanks also to Sawdust Studio for working with us to create the typography treatment for this piece.

Previous

Premium Content
Next

Office Scripts