Controls and patterns and capabilities that work on the
Windows platform. All stuff you can use when
You're using windows experiences.
I know most of you are developers. Are there any designers? great.
Just for your reference, there is quite a few other topics.
We will give you some technical depth about what fluid is.
We will talk about the tools we use at microsoft and some of the
Tools we create for you to use at microsoft and that will be
Shipping pretty soon. So i saw it was mentioned this
Morning and it will be indicated in talks later.
This is about the engaging experiences on windows and
Experiences on a device. Whether desktop or xbox environment.
And more than ever we want to create experiences that are
Intuitive, powerful and so you can create productive
Experiences. Some say, that's great, but what
Does that mean for me? what does it mean to make a
Fluent app. If you have the tools and
Resources that you need to build to build these experiences.
So we want to make sure we give that to you.
So if you go to the developer on microsoft.Com and everything we
Talk about today is there. Now most of
You are developers, but if you aren't a designer, you will
Create names and experiences. So sometimes it is useful but
Many of times for a variety of reasons what you want to do is
Try a bunch of ideas first. And for the design to develop
And work flow is if the designs that currently don't have any
Ship used and so part of the tools and in talking about
Design tool case as well. So k.C. And i will spend about
20 Minutes talking about these tools. Giving an update on some of the
Tool kits we have available again and in the tool kits.
I'm going to pass it over it k.C. Now and she will do a
Little demo of how to build these apps.
This is a sample that we will be talks.
I will show you what is demo in the section on the floor.
And after technical talks we will go it build the app.
And then this is a sm many of a control app.
So i will hand it over to k.C. >> Hi, i'm k.C.
So as you can see, this is the app we will be using to show the
Design process. It is basically a smart writes
Controlling app. Here i can change the color of
The bulbs and there is a shop flow involved with it as well.
Today we will design this screen, the mylights screen.
So let's get dedisieping. Designing.Let's go from the begin ning.
As joey mentioned, tool kits are available on the web.
Xd is a great tool that has the link to that site right here
Under microsoft windows. And but we're going to look at a
Preview version of the next. So here is your tool kit.
And so let's make this a little bigger.
And so this has all of our common controls as they are true
To the flat form. The tool kit is a good place to
Start when you're beginning to design an app.
It has all of our common controls as they are and it is a
Good baseline to start with. And you will see as i pan around
In here, and the update, you will see changes and new things.
Since we only have 20 minutes today, i'm not going into gra et
Detail about every single change but a high level there and a
Bunch of actions, buttons, navigation and some other
Elements like color and type. Also, some material on there as well.
Let's go back to the app and i'm another place app where you can
Get the tool kit is here and get you all of the kits and
Microsoft windows. Let's go back.
So here is our app. And i have already copied and
Pasted it, all of the controls and ingredients using to create this app.
I have common controls here and custom that i have drawn.
And i have also prepared my work area with a common desktop
Windows desktop screen size of 1920x1080 and since we have the
3-D consent in the center i have place hold image in one of the
Lamps as well. So when you are starting to
Design ann, a good place to start is with the overall streuk
Are of the app. So i will come up here and copy
And paste that in. So in nav view is new this
Release. Did you want to talk about that
Here? >> we provide complete robust
Tools with the tool kit, with the framework. So you guys have everything you
Need right out of the box. But you can't design for every
Case you have until we make sure we have the completeness of the
Control. And a real component of
Flexibility. So there is sections in this
Tool. Can you do a lot of custom in
Your navigation. If you have a more complex app
You can add customization. And add design app control as well.
>> This is relatively simple. We don't have search
Functionality. I will hide the search box there.
So i will go to desktop preview mode like we were in before just
For ease of presenting this. So this is another screen that i
Have already put together. You can see that i've updated
Our navigation with the correct page titles and also, our
Different panels here being the list selector, lamp selector
Panel and properties panel. >> And since there is a little
Background, on this case, it is floating above that 3-d
Environment. So there is a system we are
Introducing in the next release of windows that projects shadows.
You will hear about that in other talks.
But in this case we use projective shadows on this
Surface to give that sense much depth.
So standard drop shadows, real directed shadows.
>> And in this screen, i have laid in a great view for our
Lamp selector and also a custom buton at the top to add another
Room to this view. And as you can see, there is a
Lot of little lines here. Like there is an underline under
The group header and i have a divider here and a bunch of
Horizontal lines happening in this one view. And i can actually make this
Line transparent and customize the way that is presented.
So controls are flexible enough to suit your content.
And if i just go into here, here is the screen with all of those
Items populated and underline isn't here.
But also, about the -- i will switch back over to the design
View. Bear with me for a moment.
And one of the reasons why we to another
Control, like list view, we have full content here.
And there is also with the view comes a little bit of space and
Margins and padding as owe possessed to having it go edge
To edge. So picking the right control for
Your content is important. Hing about the
Ther things like input specific context commanding.
This is the mouse sizing. But not only can you select for
The lamps to modify appearance here but also manage them and do
Things like rename. Delete. Or move them to a different group.
That's this area here. >> And in this
Context, what we are uploading and including this
System by defaulting and projected shadows without a
Custom code used here. >> And also because we have used
The review we can easily add a swipe control to tell us the
Same commands. Again, rename and delete are
Available here. This gives me a good idea as to
What the apple actually looked like. >> And the standard that i show,
Talking about being natural, this is what we mean.
We want to make sure we optimize for any type available in the
Device that you are using. And a lot of times that's the
Best app. So with various inputs, touch,
All of our controls come optimized for those inputs.
>> And now moving on to the properties panel.
And a toggle switch to power the lights and some other controls
Here and when dropping in a new control in an area like this,
And the thing to move around and the control like this for
Example or on/off text, even though the toggle switch itself,
And even removing items. However, having these -- what
You are turning on and off and retaining that on and off text
Retains the clarity of the controls. So you know what you will get
When you interact with that buton.
>> Can i interrupt? can you hear me this is the
Other thing that is nice, if you use common controls, can you be
Sure that we do a lot of exhaustive testing to make sure
That we shift controls that are as clear as possible.
In addition clarity here, you might need to localize your
Strings in different languages. This layout is control and no
Matter what language and no matter how many characters that
The control is not going to break. >> Yes.
And other controls straight from the tool kit are the slider an
Radial buttons. And also, let's see -- we also
Have a color picker. And again, here is another place
Where we are using the transient ui styles as well so you can see
Some of the acrylic popping through. >> Yeah.
And so we talk about acrylic last year at bold.
Since then we have gotten a lot of great feedback and how to use
The new component and capability.
And we realize it is to emphasize the relationship of
Ui. So flyouts is a great place to
Use acrylic. This is the file control that
Uses that as well. And there are still apps where
You might want custom ui. It might be because there is
Functionality that is special for your app or present the
Content m a unique way. We have a few custom areas here
As presets area and also in the color picker in the swatch.
>> With this custom ui, even when you are designing custom
Ui, you don't have to start from scratch.
Can you take elements or capabilityes from other things.
Whether it is the icon set or type size or the same projected
Shadows used in other controls. So if you use them in your
Custom ui, you have a big head start in the design of your experience.
So let's go back into the preview.
And here i've updated all of the content in here.
We have all of the text cables updated for this app.
Awesome. We have a relatively
Out-of-the-box style app using controls.
>> This is great. But a lot of you guys represent
Brands and brands come with your own colors.
One thing that's been difficult in the last couple of years with
Windows app design is windows by default uses the user define
Acts of color. Which is great.
Puts the usener control. But if you want to represent
Your brand in a really colorful way you may want to override it
With your own grand colors. There are resources to update to
Make that happen and you have to manage the accessibility of
Color values. Whether text should be white or
Black. And so we have spent the bulk of
The time talking about the xd but also in the design
Department at microsoft we are working on shifting tools that
You can use to make this process of color management a lot more
Easy. So k.C. Will show you within of
The neutrals that we will release in a couple of months.
This is a color demo tool where, and the goal of this is to, like
I said, make the designer and work flow a lot easier.
So a designer can come in and say, my colors are black and
Cold for this brand. Or red.
Or whatever it is. I want to see what that looks
Like cascaded through the app. You have controls showing us
Different states. You can see the different colors
And the impact on the different states.
We put in the hard work to make sure we know when to flip the
Text back to white so the ui is also legible.
At best part is at end you press the export buton and this is
Where the work flow is useable. Can you copy and paste into your
Project and update all of the colors. You don't have to go through one
By one and have to check the effect of that.
>> So the handoff is more seamless.
Nothing is lost in translation when you are making a custom
Application of colors. So let's go back to our app.
And using something like that, the color app, i request update
Pieces of my ui to the brand. I have added purple at the top
And some gold in the selection seats.
>> So that's it. Like i said at the beginning,
Here are links for guidance and tool kit downloads and sample apps.
This sample app, the source code for it as well as xd files will
Be available in the next couple of months on
Developer.Microsoft.Com. Tool kits are available at this
Url as well. We will update those with new
Updates with the next release of windows shortly.
Then once again, there is lot of them wanting to talk, ours is
One of them. Specifically the fluent did
Design using our design system, that will give you a 30,000-foot
Overview for the updates of fluent. Yeah, that's it.
>> Yeah. >> I think we have time for
Questions if anyone has questions.
[ Inaudible ] >> yeah.
React fluent basically is what you are talking about? [ inaudible ]
Yeah, there is no fluent web solution right now.
As satya mentioned this morning, what we are focused on in the
Next release of windows is making sure that every windows
Developer can use all of the new ones.
Whether you are building wpf apps or win apps, you will have access.
For now, the fabric, fabric tool kit is great place to start for
Web design. We are working closely with
Them. We don't have anything official
Right now to talk about. Yeah.
>> Is there anything coming for mixed reality?
>> Yeah. So if you are interested in
Is creative experience using visual
Air and fluent path to spatial computing is 1, 2, 3.
We are working with the holographic side of the team to
Introduce depth. Some of the areas where we are
Showing shadow depth in desktop we are starting exploration of
Introducing that into those experiences as well.
And one thing also i will plug, is at the fluent booth we have a
Lot of swag. As you are leaving here, this
Gentleman here has some cards to redeem for some stuff.
Shirts and what not. And also, i will say, another
Great case study you should look at is print design system inside microsoft office.
So some folks from the windows team will talk about how they
Hat you saw today. It is a great case study as well.
I would take a look that. Great. Thank you.