Fluent design language

Fluent Design language (project name Neon) is design system for creating adaptive, empathetic, and beautiful user interfaces. To get the aspects of real environment (3 dimensional) to digital space (2 dimensional), we have explored design with light, material and depth in actual space.

ExlusionLayer.png

1.Studies of elements

Captures and studies in the transformation of physical elements.

Bring materiality to the digital

Create Physical & Digital harmony

Amplify the experience

Layering

Explore the interaction between layers, the transition of colors and the motion of depth. Explore the solidity and physicality of color collisions.

Media1.gif

Organic transition and movement of color, growing color, depth, level of transparency, blending, gradient, transmission, diffusion, edge glow

Media2.gif

Tactility

Explore the motion of the visual perception of color and material.

Media3.gif

Motion of glow, fast and slow transition

Media4.gif

Amplified color

Explore the journey of an amplified color (saturation)

Media11.gif

Gradient, blending, Intensify/amplify, Building up of color. Level of color and emotion, Highlights

Media5.gif

2. Depth of field

Explorations on the visual application based on current studies

Experiment with depth, focus and materials

depth_2.gif
depth_1.gif

Focus in physical environments  

Picture1.jpg
Picture2.jpg
Picture3.png

Shadow casts in physical environments  

Shadow casts in shallow depth

Picture5.png

Shadow casts in deep depth

Picture4.png

Transfer into digital surface

Picture6.png

Scale changes in physical environments  

Picture7.png

In order to suggest depth color values are important.

Nearby objects are seen as having more contrast and more saturated colors.

As the distance of an objects increases, its color and shading will be perceived with less contract and less saturation

3. Material studies

Materials in physical environments  

Picture15.jpg
Picture19.jpg
Picture12.png
Picture13.png

How material effect shadow color

Picture11.png

Direct transfer into digital surface

Transfer into digital surface

4. Apply to design

Explorer_Light_2.png
3.All+SmartShadow+Tint.png
Explorer_Dark_7.png
Picture26.png

Credit to former window design direction team

Jeremiah Whitaker, Lori Kratzer, Karen Scott, Ryan Vulk, Lauren Beckwith, Conroy Williamson, Sergey Kisselev, Karina Dion, Ryan Gagnier. Chris Abbas and Jeff Fong

Volta Mitte

The objective was to create a series of posters, which display the architecture of Volta Mitte, a new mixed-use urban planning project in Basel.

Each poster displays a different theme using distinct shapes and a custom typeface based on the triangular architectural elements of Volta Center, a residential building within Volta Mitte’s campus.