Metro Design Principles
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 110 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/51132 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
NDC Oslo 201292 / 110
1
2
3
5
7
9
11
12
15
19
20
23
24
27
28
29
31
32
33
35
36
37
38
39
41
43
46
47
51
52
56
59
60
61
62
63
65
67
70
71
74
75
77
79
80
81
83
87
91
92
93
94
95
96
97
98
100
103
106
108
110
00:00
Software developerArchitectureFunction (mathematics)Type theoryCartesian coordinate systemNatural numberSingle-precision floating-point formatLine (geometry)Right angleFormal languageProcess (computing)WindowBitTerm (mathematics)Interactive televisionAreaComputer architectureMultiplication signDataflowCellular automatonSkeleton (computer programming)DivisorPerspective (visual)Metropolitan area networkBuildingGraph coloringCodeGraphic designGradientAcoustic shadowSystem identificationInformationLimit (category theory)Category of beingCASE <Informatik>Software developerIdentity managementRenewal theoryPlanningInsertion lossTwitterComputing platformDifferent (Kate Ryan album)Sweep line algorithmMaxima and minimaNumberoutputContext awarenessArithmetic meanINTEGRALAndroid (robot)Computer animation
08:26
Software developerDedekind cutComputational complexity theoryTrigonometric functionsMultiplication signBit rateData Encryption StandardTouchscreenDifferent (Kate Ryan album)Axiom of choiceRevision controlComputer fontCASE <Informatik>Software developerCartesian coordinate systemLine (geometry)Multiplication signBitMultilaterationWeightRange (statistics)Functional (mathematics)Message passingProduct (business)Acoustic shadowWindowFormal languageConstraint (mathematics)Type theoryRight angleTablet computerVideoconferencingObservational studyFamilyNeuroinformatikKinematicsData structureStandard deviationObject (grammar)Arithmetic meanMoment (mathematics)Web pageForm (programming)Figurate numberTerm (mathematics)Android (robot)Graph coloringLatent heatAutomatic differentiationImage resolutionComputer iconChemical equationWebsiteCybersexDemosceneMultiplicationSingle-precision floating-point formatCone penetration test19 (number)HypermediaRule of inferenceUsabilityHand fanCue sportsSeries (mathematics)QuicksortWordComputer-assisted translationRaw image formatComputer animation
16:53
Software developerTouchscreenRule of inferenceCellular automatonAreaGreen's functionVideoconferencingReading (process)BitDirection (geometry)Graph coloringCartesian coordinate systemDecimalWindow2 (number)Group actionArrow of timeComputer animation
18:32
Software developerYouTubeMusical ensembleMultiplication signForm (programming)TwitterDemosceneRight angleFilter <Stochastik>Range (statistics)Moment (mathematics)Sound effectGraph coloringGreen's functionMereologyLetterpress printingComputer animation
19:48
Software developerRankingMultiplication sign2 (number)Right angleComputer fontYouTubeKinematicsComputer animationXML
20:47
Software developerElement (mathematics)TouchscreenCartesian coordinate systemWindowTouch typingTablet computerPresentation of a groupBitProduct (business)Letterpress printingWebsiteSource codeComputer animationMeeting/Interview
22:28
Computer iconFormal languagePattern recognitionTerm (mathematics)Video gameReal numberWorkstation <Musikinstrument>Transportation theory (mathematics)Graph coloringNewton's law of universal gravitationSign (mathematics)Similitude (model)Right angleCone penetration testComputer animation
23:46
Software developerComputer clusterIntrusion detection systemGraph coloringSimilitude (model)Line (geometry)NumberRational numberStandard deviationMultiplication signLaptopCartesian coordinate systemPresentation of a groupComputing platformGraphics tabletFluidGame theoryMobile appDifferent (Kate Ryan album)PixeloutputTablet computerLimit (category theory)NeuroinformatikTouchscreenTouch typingAreaStatisticsShape (magazine)Chemical equationOrder (biology)BitMedical imagingNatural numberMobile WebDirection (geometry)WindowTwitterInformationThread (computing)Game controllerArtistic renderingSummierbarkeitRepresentation (politics)Point cloudSoftware developerSpeciesContrast (vision)Prisoner's dilemmaRight angleUsabilityRange (statistics)Rule of inferenceStructural loadDemosceneWebsiteDirected graphArithmetic meanPrincipal idealE-book1 (number)Goodness of fitRemote administrationRaw image formatSymmetry (physics)LengthComputer animation
31:26
Software developerComputer clusterMenu (computing)Computer iconCartesian coordinate systemInformationShared memoryDesign by contractGraph coloringSource codeoutputImage resolutionContent (media)Acoustic shadowHypermediaVideoconferencingBitMedical imaging1 (number)DigitizingWindowVideo gameAnalogyData managementEnterprise architectureReal numberType theoryDifferent (Kate Ryan album)Compass (drafting)Term (mathematics)Latent heatContrast (vision)View (database)Bookmark (World Wide Web)Multiplication signSpacetimePoint (geometry)SurfaceMoment (mathematics)Musical ensembleWordFormal languageRight angleDemosceneUsabilityNetwork topologyComputing platformFunctional (mathematics)TouchscreenFacebookCurveKey (cryptography)Goodness of fitArchaeological field surveyComputer animation
38:50
Software developerWindowMereologyBitMultiplication signFeedbackComputer animation
39:50
Software developerDatabaseCartesian coordinate systemInternetworkingFrequencyTouchscreenBitIdentity managementComputer iconNetwork topologyTwitterMultiplication signTerm (mathematics)Content (media)Medical imagingInformationSystem callSpecial unitary groupTransportation theory (mathematics)Group actionConnected spacePhysical systemRepresentation (politics)Graph coloringMobile appWebsiteMappingSatelliteWindowRight angleClient (computing)Maxima and minimaWave packetView (database)Workstation <Musikinstrument>Cone penetration testResultantElectronic mailing listMereologyBit rateComputer fontPivot element
45:33
Software developerExecution unitQuadrilateralHydraulic jumpMultiplication signAdditionTesselationWindowFacebookCartesian coordinate systemLine (geometry)Real numberDesign by contractMobile appEmailService (economics)CodeTouchscreenUniform resource locatorInformationPlanningMathematicsPoint (geometry)Functional (mathematics)Type theorySet (mathematics)Keyboard shortcutComputer iconCycle (graph theory)Data managementVideoconferencingBeat (acoustics)Video gameGradient
51:16
Software developer8 (number)Zoom lensEvelyn PinchingCartesian coordinate systemInformationHydraulic jumpNP-hardMobile appView (database)File viewerGame controllerRight angleTouchscreenTemplate (C++)MathematicsComputer animation
52:25
Software developerView (database)Mobile appConsistencyInformationGame controllerDemosceneCellular automatonWindowVideoconferencingPopulation densityField (computer science)BitType theory2 (number)Template (C++)Marginal distributionCartesian coordinate systemExecution unitPoint (geometry)Forcing (mathematics)TelecommunicationSet (mathematics)View (database)Computing platform1 (number)Multiplication signMathematicsException handlingUsabilityEvelyn PinchingTouchscreen40 (number)Line (geometry)PixelOnline helpCausalityDesign by contractTablet computerContent (media)AdditionNumberElectronic mailing listVertex (graph theory)Uniform resource locatorForm (programming)Row (database)Computer animation
57:31
File viewerHydraulic jumpView (database)Electronic mailing listSoftware developerComputer iconComputer iconWeb pageCartesian coordinate systemHeegaard splittingProcess (computing)Software developerMultiplication signGoodness of fitComputer fontSoftware testingHydraulic jumpFile viewerView (database)Exception handlingWindowComputer simulationOrientation (vector space)Field (computer science)Mobile appExecution unitBitInformationGraph coloringLevel (video gaming)Different (Kate Ryan album)Differential (mechanical device)Vertex (graph theory)Template (C++)ThumbnailTouchscreenSet (mathematics)Electronic mailing listVector potentialVisualization (computer graphics)ExpressionGame controllerPeripheralUsabilityCone penetration testUniform resource locatorFreewareCausalityAmsterdam Ordnance DatumMultiplicationService (economics)Line (geometry)Network topology40 (number)Key (cryptography)Right angleZoom lensSemantics (computer science)AdditionConsistencyImage resolutionDemosceneVirtual machineLoop (music)Task (computing)Natural numberShared memoryClosed setComputer animation
Transcript: English(auto-generated)
00:03
All right, I guess we are going to get started. So yeah, OK. Hello, everyone. I'm very happy to be here to talk to you about design. And for those of you who saw some of my previous talks,
00:22
you might be surprised that we are not going to write a single line of code today. We are going to write a lot of code on Friday. But today, we really just talk about design from a history perspective and from an art perspective more. And I think it's interesting to know where the design comes from.
00:40
And Metro is taking such a big relevance in Microsoft nowadays in multiple properties that it's probably a good thing that we understand where it comes from and what is the thought behind that. So my name is Laurent Bunio. I work for IdentityMine. We are a user experience firm located in Seattle.
01:02
Myself, I'm in Zurich in Switzerland. And we work on a number of platforms from WPF with which we started, Silverlight, of course, Windows Phone 7, Windows 8, Xbox. And we do a lot of applications for the Kinect
01:22
nowadays, so it's quite exciting. We, of course, do also some work for other platforms such as iOS and Android. However, I would say that our heart lies in XAML, and mostly because it has enabled a much closer workflow with designers than anything we had before.
01:42
And that's really what we love to do. We have designers at home. Myself, I'm not a designer. I'm what we call an integrator or an interaction developer or whatever you want to call that. And with Metro, it's an interesting trend because in one hand, it's a little bit a simplified design.
02:04
So it is a little bit stricter in terms of guidelines than what we did before. However, there is also an encouragement more and more to use Metro as a basis, but to go a little bit wilder, to go a little bit further, and to push it to the limits.
02:20
And this is what you do when you work with professional designers. So in fact, I think what we can say is that the trend is really to give more and more importance to professional designers into UI development. And if we start, maybe it's interesting to define the terms, and Microsoft talks a lot about Metro nowadays,
02:41
and especially for two very distinct and different properties, I would say. The first one is a Metro design language. This is what we are going to talk about today. And this is really a design language which can be applied to any platform, there is no technology behind that.
03:00
For example, they use it in the Zune player, we are going to see some screenshot later. This is where it actually originated. Windows Phone is using it, Xbox is using it, as well as Windows 8. Now, of course, Microsoft like to confuse things sometimes a little bit, especially with names. And they talk about Metro style applications.
03:21
And Metro style applications are a special type of applications running on Windows 8. And you're going to hear, or you probably heard already quite a lot about Windows 8 applications during this session. And unfortunately, there is a confusion because a Metro style application doesn't have to be developed with Metro design language.
03:42
And similarly, the Metro design language doesn't have to be used in the Metro style application, it can be used in a Silverlight application or whatever application. I mean, you can do an iOS application with Metro if you want, probably wouldn't recommend it because this is not what the user is expecting, right? However, be aware of this confusion.
04:01
This is why I don't really like to talk so much about Metro style applications. I prefer to talk about immersive applications or tailored applications, which are two terms that you find also in the literature. That being said, let's talk a little bit about history and where does Metro come from?
04:21
There are a few main inspirations for Metro and one very big inspiration is the Bauhaus movement. Bauhaus is a design movement that originated in Germany in the 1920s. And you have to understand what kind of mood the people were in that time.
04:41
You might think that it was a very sad mood because of everything that had just happened, but actually it's exactly the contrary, right? We talk about the crazy 20s. I'm not sure if anybody is following a TV show called the Boardwalk Empire. It's a great show. I can really recommend it if you like this kind of historic show.
05:02
It happens in the 1920s in Atlantic City and you can exactly see that, right? The war was ended and people were sure that it was the last of the last. We know that it was not the case, but they didn't, right? Most of the young people had died either from the war or from influenza and that was over.
05:22
So there was this feeling of renewal, right? And also interestingly, the 1920s were also the time where industry was really taking over handcraft, mostly because of the war as well, right? Because the war is a great way to boost industry.
05:40
You have to invent new things. It's a terrible way to boost industry, but the fact is, right, that most inventions, I mean, many inventions are developed during that time. So suddenly, handicraft was taking less importance and industry was taking more importance and you can find all those trends into the Bauhaus movement.
06:00
This is a movement which proclaims that you should strip everything which is not necessary. So if you have a chair, this is something that you sit on, but you don't have to have all the frills and all the decorations around the chair. Keep the chair simple, make it do one job, but do it well.
06:23
Bauhaus was applied to architecture. In fact, the founder was an architect. The architecture came a little bit later in the picture. He really started with industrial design and graphic design. So those are the three areas that Bauhaus was concentrating on. And this is an example of a Bauhaus architecture.
06:41
It used to be a factory. This is now the seat of the Bauhaus Foundation in Germany, in Dessau. And you can see that it is very functional, right? So no decorations, the building is doing what it is supposed to do. Now this one is interesting because it's from 1923 and you can find in that ad quite a lot of principles
07:02
that Metro is recommending nowadays, okay? So you have a plain color, but vibrant. You don't have any gradients, any shadows, any icons. You have just typography, okay? And you have really the minimum information that you need in such an ad. You have Bauhaus, what it is, right, what it does.
07:24
You have Ausstellung, which in German means exposition. And you have the date and that's it. So this is really stripped to the minimum, okay? In terms of industrial design, again, the same principle apply. This typewriter is not a coffee machine.
07:42
You cannot mistake it, okay? It doesn't do everything, it just types. It just allows you to type. However, it has this kind of beauty in the simplicity of the design. Another example of typography here and again, the same principles, right? Some very vibrant colors, this orange and this blue,
08:02
which contradict each other, okay? And again, right, very minimal decoration. There is just this lamp in the middle. I'm not quite sure why, but it's here and nothing else. The rest is just text and information. This one is one that I like a lot because again, right, they are very efficient.
08:22
You can stack them, you can put stuff on it, you can probably sit on them, but they don't do anything else in what they advertise. Now in terms of design inspiration, another big design inspiration is actually Swiss and you cannot answer because you probably know the answer already,
08:41
but anybody has an idea why is Switzerland known for design? Nobody? Yeah? Exactly, Swiss typography, right? So Swiss typography was developed around the 1950s and we all heard about Elvetica, which is kind of the most known figure
09:03
of this particular movement. But basically, this is interesting because 30 years later, after Bauhaus, the same principles were taken again into the Swiss typography movement. So you have this idea of form follows function,
09:20
meaning that if you have to fulfill a function with a letter, with a character, with a type, you don't add any decoration, you just do what it does, right? And a lot of research is put into these things. So designing a font takes a lot of time. The readability is very important
09:42
and it's in fact even more important for us who do applications which run on screens. We all know that when you go out with a phone or with any backlit screen really, it's very difficult to read, right? So the readability of the font is extremely important. And the choice of the font is really very decisive in that
10:03
there are studies which show that if you choose the right type of font, you can speed up the readability of a page by up to 40% depending what you choose, right? So that's really very relevant.
10:20
Swiss typography is using some serif fonts. I'm going to show you in just a moment what some serif means. Serifs are small decorations in the letter and here we strip them, we remove them and also they use a lot of grids, a lot of rules, a lot of conventions. It's a very balanced movement. So there is this idea here of simplicity,
10:41
harmony and objectivity. Here is an example of a Swiss typography letter and again, right, you see the grid. Grids are very important in Metro, in design in general, but in Metro in particular and there is this balance and this research. Here, those ads are taken from Helvetica website
11:09
and they are all made with Helvetica and again, you can see that the same principles apply. Now this one is from 59, so it's 36 here after the ads that I showed you before and yet the same principles are used, right?
11:21
You have this vibrant color. It's actually by chance here the same color. You have the simple text and no icons. It's just information. This one I like very much because without decorating too much, they still manage to give this impression of movement
11:42
and you really have just text and those white bars which are giving, right, this impression of movement. So even without decorating too much, without putting icons or shadows or whatever, you can already entice the reader, okay?
12:03
This one is funny because it's an ad for a detergent or rather an additive for a detergent. I'm not sure exactly what it does. I'm not sure nowadays you could really sell anything like that because people are too lazy to read nowadays. So they expect to see a big picture
12:21
showing what is a product, right? Here you don't have any picture showing you what the product is. The whole message is into the typography. Again, I'm not sure it would work so well today but I thought it was interesting to show that just to show you what was done. Now in Helvetica you can also play or actually with any font, right?
12:40
You can play with the font weight to say I love you or to say I hate you. And what I want to say with that is that pay attention to those details when you design, especially when if you have text which is quite small, if you put too much decoration on it, it can make the text more difficult to read. Especially underlines are very difficult nowadays
13:02
and we try to shy away from underlines more and more. Instead, if you want to express something particular, you can just make, for example, the font bolder or maybe a little bit bigger depending where you are or maybe you can even play with colors but being reasonable about it
13:22
and maybe not wanting to go overboard. Again, think that the readability is the most important character. It's a very important character here. So I talked to you about the soon serif and here is an example of a serif font. And the serif are those small lines
13:41
that you can see at the end of the bars. And they used to have a function when the characters were made in lead, when they were really physical because they were helping with the structure of the character. But of course, now that we have everything on the computer we don't actually physically need them.
14:01
So you could say that they are a decoration which is not absolutely necessary to the intent of the letter. So now we have the soon serif fonts which strip those, which remove them. Sego UI is, or the Sego font family in general,
14:21
is a font which was developed by Microsoft. And developing a font is quite a big work. There is actually an interview of the guy who worked on the Sego font. And interestingly, he's also the guy who designed the Droid fonts for Android later. So he's an independent font developer.
14:40
And the interview is very interesting so if you manage to find it I will see if I can blog about that later. And Sego has multiple declinations. So in that case we use Sego UI which is a font for Windows 8. You also have a special version of Sego for the Windows Phone.
15:01
It's called Sego WP, Sego Windows Phone. And there are a few differences because you don't read a phone screen the same and you read a large Windows 8 tablet screen, right? So there are a few constraints that you need to take in considerations.
15:20
There is also a specific version of that for Xbox. It's called Sego Xbox, no surprise. There is one, for example, for the Media Center because Media Center runs on TV. And TV, well it's a little bit better now with HD but standard definition TV have a very crappy resolution. It's like 640 times 480 if I'm not mistaken.
15:41
So you have of course some specific challenges that you need to take in account, okay? So the Sego font is quite well adapted to computer screens. And Sego font comes in multiple font weights. So you have bold and light and you even have semi-bold and semi-light
16:01
which gives you quite a range of feelings that you can express thanks to that. Okay, and that can make quite a big difference into the character of your application into what you try to express there. Another inspiration for the Metro design language is the motion design.
16:21
And we talk also of kinetic typography sometimes. So I'm going to show you two small videos which illustrate that. The first video is a video by Saul Bass. Saul Bass was a designer in the 1960s who worked on many intro titles for movies
16:40
and especially for Alfred E. Chalk movies. And he used motion design and kinetic typography quite a lot. So we're going to see an example. And the other one I'm going to let you guess what it is. I'm sure you already heard about it. Actually it's in the title of my bar so nobody look at it. Anyway, I'm going to show the first one.
17:01
So let me go full screen, here we go. Okay, so this one is for the movie North by Northwest. And there are a few characteristic which are interesting. The first thing is there is this green background. It's quite an unusual color I would say for a movie. Then you have this grid
17:21
and the text which keeps moving, right? There is no text which stays still for more than just a few seconds. Now here they play with the typography a little bit because there is those arrows
17:41
which suggest right directions. It's called North by Northwest, so it illustrates. And here you have the transition into the picture. And now we understand what the grid actually was. It was an array of windows. And that particular technique of having text shown in front of a video or of a picture is something that we do quite a lot in Metro applications
18:02
because it can help you give a very interesting feeling to your application if you do these kind of things. But of course it means that readability has to be taken in account because if you put a video in the background and text in front, it can be very hard to read. So usually what we do is that we dim the video, the opacity of the video to something like 30, 40%.
18:22
We put a black background behind it and then we have a good readability even though you have a video and movement. Now the next one is much more recent but same principles apply. Yeah, I tried to filter the first few sentences.
18:44
I didn't quite manage this time. Anyway, that's of course the intro to Pulp Fiction. And again, you have the same kind of things, right? You have this motion, it keeps moving. And the typography is very important. They really use typography a lot here. You have those simple colors.
19:00
They don't use pictures. Even when they have some pictures, they transform the picture into drawing. We'll see an example of that in just a moment. That part is funny because you don't see the name anymore. You kind of guess it, which I think is a very, very cool effect. The title Pulp Fiction comes from the 1930s
19:20
when they were selling those magazines which were printed on very bad paper and it's because they were cheap, right? So when you were reading them, they were turning into pulp after a while. So that's why it's called Pulp Fiction. And here they use the typography to kind of suggest that you have this bleeding of the orange, right? Which is kind of suggesting that it is a bad print.
19:47
Again, some bold colors, right? And here, what I was saying before, even when they put pictures, they transform them. So it's not really a picture, it's just a drawing, right? And notice that the text moves all the time.
20:11
So really no text stays still for more than just a few seconds. And they play with typography quite a lot, right? Here you have a font which is used, but then suddenly they come with Umar Tohman
20:21
with a different font because they want to signify that she's very important to the movie which she actually is. So this is an interesting thing. There are a few more examples of this kind of motion design and kinetic typography. Like for example, another one which is quite well known is the intro to Catch Me If You Can
20:40
which is even more recent and which is a small masterwork. So if you have the occasion to find it on YouTube, it's very nice to see. So all that is quite important into Metro. And in fact, motion for us is also very important because it's not a pre-recording motion,
21:02
but it is a motion which is provoked by the user. So if you use motion and animations wisely, you can actually help your user to understand what the application is doing, right? So an example of that is, I'm going to lock my screen. Here we go.
21:21
And here, those are my daughters, by the way. Here, in every presentation you do, you should show a picture of your children. I'm not sure who said that, but I heard that in the presentation once. I think it's true. Anyway, if you do that on a slate and you touch the screen, this is not a touch screen, unfortunately,
21:40
but if you touch the screen, the screen is going to move immediately a little bit up because of the movement of your finger. So basically by this simple animation, you're helping your users to understand what he needs to do. He needs to move up, okay? If he tries to move sideways, nothing is going to happen. On the phone, it's the same. If you take, this is a Windows phone,
22:02
the Nokia Lumia 900, and if I switch it off and on again, if I try to press here, you see there is this small animation. It's very maybe difficult to see in the back, but there is a small bounce of the protection here. And by this bounce, what they say is that they tell me what I need to do.
22:21
I need to move it up. And then I understand, okay? So animations are very important in an application to help your users to understand what they need to do. And in fact, you should really spend a lot of your design budget on animations because animations are really hard to get right.
22:40
It's very easy to spend a lot, lot, lot of hours on a 300 millisecond animation just to make it right. Now in terms of Metro, coming back to that, Metro, of course, like the name shows, has also a lot of inspiration in the transportation signage. And here we have something which every traveler knows.
23:02
It's what you get in an airport or railway station, or if you go to an underground station. Even if you don't know the language of the place where you go, you immediately find your way because this is a convention. People know how to use those simple signage, simple icons.
23:21
The icons are very simplified. They don't actually represent real life luggage, but everybody knows what they mean anyway. And if you're running in an airport, it can be very useful to have this recognition immediately. This is a universal language.
23:41
So this is here an example in Japan. And this is an example in Wall Street in New York. And yet you have this similar principles used. So the colors are very important, but colors are used to express an intent. They are really useful. There is no decoration in the way. Here the colors signify the number of the line.
24:01
So it's very easy to find your way and know which line you take, even if you don't speak Japanese. The five design principles is something that the various designer teams at Microsoft have put together to kind of give a guideline to developers and to designers
24:21
who work with Metro. Those are principles, they are not rules. So you are free to use them or not. I recommend using them because if you use them, if you use everything that we talk about now, you kind of give to your users this feeling of, okay, I'm at home and I know what I'm going to do.
24:41
If I'm using a Windows 8 slate, I know what I expect. If I'm using an iOS slate, I know what I expect. And this is something else. Okay, the first one is a pride in craftsmanship. And this one means basically be proud of what you do, right? Don't hesitate to push your application to the limit of what you do.
25:01
Don't hesitate to spend many hours on it. And I think that I don't have to explain that to people who go to conferences. I have to explain that rather to people who don't go to conferences. Because when you go to a conference, it means that you're pushing yourself a little bit further already. So you have this pride into what you do.
25:21
Think of quality always. And remember that if you have a very good design, but you don't have performance, it's going to be awful, right? And when you design for mobile, it's even more true. Mobile platforms can have some design, some performance challenges sometimes, depending what you do. So maybe it happened to us already before
25:40
that we had maybe to tone down the design a little bit and maybe be a little bit more reasonable in order to have a good performance. Performance is nothing without features. So of course, if you have a blank application, an application which does nothing, the perf is great, but it's not very nice to use. And think of the balance of the symmetry, right? All those principles that I mentioned coming from Bauhaus,
26:03
from the Swiss typography apply in Metro as well. So don't hesitate to spend time on alignments. Differences of two, three pixels on the side can make a big difference into the perception of the user if they see that your texts are not aligned. It's really worth spending time on that
26:20
and giving your users a very polished application. Fast and fluid is the sentence that you always hear when you hear a Windows 8 presentation. So I try to avoid using it, but here I have to because it's really the name of the principle. And here we really talk about motion. Remember that designing for touch is different.
26:43
So it's really a different experience, right? A mouse is very precise. When you point with it, a finger is not, however. So when you design for touch, you should think of those things. Do your areas big enough so that the finger can reach it, right?
27:00
Motion should be fast and should be responsive immediately. Because again, when you use motion, when you use animations, you are helping your users to understand what your application is doing. So if the user touches the screen and your application takes even just a few milliseconds to start, it's already too much because he doesn't understand
27:21
that there is this one-to-one relationship between the gesture and the motion, right? So pay attention to those things. Nobody likes to wait. So when you start your application, please be fast until you present the user with something useful. And then after that, you can do the rest of your preloading, of your image loading, of your image rendering.
27:41
If you check many Windows phone applications, for example, when they have pictures, they load the picture in the background thread so that when you see, for example, if we take Twitter as an example, you will see the tweet. So this useful information is there already. And then the picture is loaded once the tweet is rendered
28:02
because rendering the picture takes time. But while this is done, the user can do something and actually read the tweet. This one, it's an image I found which is illustrating something that we need to think about. So when you design for Windows 8,
28:21
you design for a number of platforms. And it's not just laptops anymore, standard PCs, but also things that you hold in your hands, like slates. And when you do that, you have to think of the people who are using your slate. Now this here is taken, there was research
28:41
by the US Army of all places because they have a wide range of different people with different stature, with different body shapes and all that. And here you see the statistic representation of the length of sums. So when you think of a slate that people use
29:00
normally with two hands like that and then they touch the controls, they need to be able to reach those controls. So it would be a better idea to put those controls in the red area because most people won't be able to reach there while the green area is reasonably safe. So those things are important, right? If you don't think of those things,
29:21
it can be quite hard. And nowadays we develop for a number of input devices. If I take the Xbox applications as an example, we need to develop there for voice so you can voice control your Kinect. For the Kinect, so by waving at your Kinect you can control your app.
29:41
You have also remote controls, you have game pads and all that needs to be taken in account when you do your applications. So you will spend more time on each screen because of that. It's actually a good thing because it makes you think about your application. And you know there is a very famous design book
30:00
called Don't Make Me Think, but that's true for your users. It's not true for you as developers. You have to think of that, okay? So we need to think more so that our users don't have to think. Now authentically digital is an interesting principle and I'm not at all wanting to do any judgment here, right?
30:25
So don't take that as a judgment, but Apple is doing a lot of what is called skeuomorphism, which is basically trying to represent the reality into the computer. And they do that, for example, here in iBooks with wood, a lot of wood, a lot of those shelves,
30:42
which don't actually physically exist, right? If you touch your computer screen, it's still flat. They do also a lot of that with faux leather, stitched leather or metal or things like that. Skeuomorphism is, you know, it's all good. I mean, some people like that, it's not a problem,
31:01
but Metro is going to a totally other direction and this is called what they call authentically digital. So basically don't try to reproduce nature on your computer because your computer is not nature. Here we have the Kindle app and we see immediately the contrast, right? The background is quite plain.
31:21
You have a lot of typography, so you don't have buttons. For example, if you click on cloud or download it, you're going to switch. Those are kind of tabs if you want. However, they don't look like buttons. It's just typography. The color of the text is playing a role. So you see the selected one is the one which is orange.
31:42
And of course, the content is king. So the content, in that case, the books are what the user wants to use. So this is a very different approach to design. However, there are a few compromises.
32:01
Like for example, the books have some shadows, okay? And the shadows are not really Metro, but it's fine, okay? Because the designer thought it would add something to the image. It would make it maybe a little bit more, I don't know, interesting or maybe a little bit more attractive or whatever. The shadow doesn't have a function, but again, what I'm telling you,
32:22
those are principles and guidelines. They are not rules. So you can really deviate from that. It's not a problem. No application is ever going to be rejected because it doesn't follow the Metro design guidelines. Another example, the icons in iOS. And again, we see something which is quite lifelike.
32:41
Like the compass is a good example. This is a real analog compass, but in fact, most people don't use that, right? I didn't see one of those analog compass in many years. I used to use that when I was a kid and I was going camping. My kids probably never saw one in their life. They all saw compass,
33:01
but they all saw GPS and digital stuff. On the other hand, the icons on Metro, now those ones are definitely not my favorite. I think they went a little bit overboard with the simplification here, but it's just to show the contrast. And here, for example, the headset, it's clear that it's not a real headset.
33:20
However, it cannot be mistaken. It is a headset, so it has something to do with sound, obviously. Spend time on icons. Icons are really important. It is, again, helping your users to know what they need to do without you having to translate in different languages. However, think that you have to
33:40
localize your icons anyway, because some things in our culture can be offensive in other cultures, et cetera, et cetera. The fourth design principle is called do more with less. And here, the idea is don't try to solve all the words problem into your application.
34:00
And it's kind of interesting coming from Microsoft, because it kind of goes against quite a lot of things they have done in the past, right? If you take Microsoft Word, the only thing it doesn't do is coffee, but it does really everything else. And here, we have really something which is different. We try to shy away from that.
34:20
Instead, the guideline with those new Windows 8 applications is rather if you want to solve multiple problems, then develop multiple applications and have each application solve one problem. In the previous session, Billy Hollis was talking about the contracts a bit. And I think that Jonas is going to talk about that
34:41
in this room after my session two. Contracts are a new way to share information between applications. And it's really very easy to share that information now. So you can publish one application saying, hey, I can do something with a specific type of content.
35:01
And the other application says, hey, I have this particular type of content to offer. Cool, let's collaborate, okay? So doing that is an interesting principle, because it kind of tells you to collaborate with your competition sometimes and not to reinvent the wheel, which are actually good things, but which are sometimes difficult
35:21
for an enterprise manager to accept, right? But here we are really at a point in time where Windows 8 is starting. We need a lot of applications to start the platform, to make it popular, et cetera. And this is a good time to actually collaborate with people.
35:41
And maybe if you find that there is an application on the market, which is very good at sharing with Facebook, for example, or maybe it means that you don't have to implement that particular feature in your application, but you can collaborate with that one. WinS1 is a little bit bound with the previous one, again, right?
36:01
Collaborate, there are those contracts, there are those things which help you, and try to be consistent. It's really recommended to use things that people know, because like this, they will feel at home when they use your app, and they won't have to go through a learning curve again.
36:22
Good, so now I would like to show you a little bit some applications of Metro in the wild, because Metro is not new with Windows 8. It certainly became more popular now that Windows 8 is using it, but we already used Metro a lot in the past. And this one is the Zune music player, and video player on PC.
36:42
And Zune is where Metro was initially developed. And here you see all the principles that I mentioned before, right? You have a few icons, but they are very simple. They don't come in the way. You have a lot of usage of typography. This is another example of the Zune media player. And you have the content in the center, which is king.
37:02
In fact, you can see that the content is more or less the only source of color here. So everything is drawing your eyes to the content. I use the Zune media player quite a lot, and I have to say I really like it in terms of user experience. It has been sold very well.
37:21
So I can only recommend to try it out. This is another view of Zune here. Another place where Metro is used nowadays is the new Xbox dashboard and the new Xbox applications, which was released at the end of last year in December.
37:43
And here, again, we have the Metro look and feel. There are a few differences here, because this is typically running on the TV. So one big difference that we see is that there is really a lot of space. And space is critical, because TV screens tend to do some weird stuff to your apps,
38:02
like cutting the corners and making it smaller or bigger for some reason and all that. Also, another thing which is important here is that this is typically used with a Kinect. So Kinect needs a lot of space as a heat target, because it's a little bit difficult sometimes to reach a very precise place.
38:22
And also, you have to wait for a moment to activate the surface. So while you are waiting, your hand tends to move a little bit. So you have to have big surfaces. And Metro, in fact, fits quite well with that. Because of the size of the font, because of the size of the spaces and all that,
38:42
it actually works well with Kinect. Motion is very important also. In Xbox, I'm going to show you a video. And for that video, I don't need any sound. So just to show you here, for those of you who never saw the new dashboard,
39:02
so you see the animations here tend to be faster than, for example, on Windows Phone or on Windows 8. And part of the reason is that the user here is using a Kinect to control that. And because the Kinect is a little bit less precise, you need to immediately show that you have feedback.
39:23
Because if you don't do that, then the user is going to be frustrated and won't understand why is my hand not actually doing something. So again, I'm talking again about animations here. But by thinking of that, by timing your animations right and by using the correct accelerations,
39:40
you can actually give a very different mood, a very different feeling to your users. So spend time on animations, it's really worth it. Now, of course, another place where Metro became quite popular is Windows Phone. And here I'm going to show you a few examples.
40:02
Those are all applications that IdentityMind developed. This one is called SBB Mobile, and it was developed for the Swiss public transportation system. It's an app that you can use to see connections and buy your tickets. And here we see the connection screens. And there is quite a lot of information on those screens.
40:22
Also, there is a problem of the sun, right? Very often when you use that app, you're outside in the street and maybe even running. So you need to pay a lot of attention to presenting the content without too many decorations, which is why here we stripped most icons.
40:41
We use, yeah, there was an interesting discussion around the font. You might notice that this is actually not totally Metro here. The font of the title is actually Arial, and it's not Sego. And it's fine. It's just because it is SBB's corporate font. So they wanted to use that font, which we said was fine.
41:02
No problem at all. However, we didn't use Arial for the small text. For the small text, we used Sego, because Sego is more readable for small fonts than Arial is. So those are things that we need to pay attention to. Another thing which is not Metro is the capital C in the title and the period at the end of the title.
41:24
And I'm not sure how many hours exactly we talked about that, but we spent quite some time on that. But anyway, if the clients want that, in the end, it's his app. It's his corporate identity. And this is fine. Metro is flexible enough to actually, I mean, this is unmistakably a Metro app,
41:41
but there is a corporate identity of SBB into that app. Those are just other examples. When you work with maps, readability can be quite hard, because you have a lot of information in a map, especially when you use a satellite view. So the Bing maps in Windows Phone 7
42:00
don't use a representation of a pin, which is skeuomorphic. They use a flat representation, which is color-coded. And this way, it's a little bit easier to see. So those are some small details which can make your users a little bit happier. Or here, this is the ticket that you show to the conductor in the train.
42:22
And here, the efficiency is very important. The conductor doesn't have to look for information, because he has to spend as little time as possible with you, because he has a whole train of people to check, right? And Switzerland is small. The time between two stations is typically, I don't know, half an hour maximum, right? So they don't have a lot of time.
42:41
So the design here took us quite a lot of time to get right. Another example is the official Twitter application that we made. And here, it was interesting, because it was one of the very, very first Windows Phone applications. So basically, we had no idea how
43:00
it was working in terms of design. And there was quite a lot of things that were, in the beginning, when Windows Phone was released, which were a little bit controversial, like the fact that we cut the titles, the fact that we indicate to the user, by showing here a little bit of the next screen,
43:21
that there is something more, or here, right? This is a horizontal. This is called a panorama, a horizontal list box, or a pivot item, also, like here, pivot. And that was a little bit controversial. I think people tend to like it nowadays, because it really helps them to understand what they need
43:41
to do, without having an icon, like an arrow or whatever. But just by showing the part of the next screen, you're telling the user, hey, there is more. He should do something. Those are other views. Another example is IMDBs at the Internet Movie Database. And here, we went for something completely different,
44:01
and we use what I showed you before in North by Northwest. There is this image as a background, and then text in the foreground. And by using different images taken from different movies, you can also give a very different spirit to your app. However, remember that the readability is very important. So make sure to tone those images down.
44:22
The user is not here to see those images. He's here to read the text, okay? But if you add the image, it gives some spirit to your app. So there is always this compromise that you need to take into account. Another example here with the panorama here. By playing with typography,
44:40
you can do some interesting things, like the detail screen has less text, more titles, so that the user can find his way quite fast. But it's a transition screen. He's not spending a lot of time here. The next screen, the one with the review, is something where he spends a lot more time. So you can go with a small font, it's fine.
45:03
Food spotting is an interesting app. For those of you who don't know food spotting, it's a food website where you can go register yourself, and then you can rate food. So you take the picture and then you say, hey, I found that this dish here was really great. I use it a lot because I travel a lot.
45:20
And on my phone, I can easily find the next good restroom. So here, what we did is, by playing here with those pictures and changing the font color, you see that you can also change the mood of the app quite a lot. And it's still Metro. It's still using all those principles that we mentioned. But just by changing pictures
45:42
and changing some simple details, you can really change the mood of your app. So again, right, Metro can seem a little bit, when you read the guidelines, can seem a little bit naked and maybe a little bit unfriendly. But those are just guidelines. So don't hesitate to push it further. And especially by using pictures and videos, maybe to enhance your app, it can be very interesting.
46:03
Windows 8 uses Metro quite a lot. I'm sure that you already either played with Windows 8 yourself, or at least saw that a few times. I just want to illustrate a few interesting points. The Start screen is using what we call Live Tiles. And if I show you my real Start screen,
46:22
you see that those Live Tiles are even animated. Like for example, here the weather is actually changing. Or here, the social application is changing based on my Facebook feed, which is always a big bet when you show your live Facebook feeds to an audience like that.
46:41
But I hope that my friends keep it safe. Live Tiles are an interesting addition to the Windows Phone 7, which now is coming into Windows 8 as well. And that's very, very useful. So really take time to think of your Live Tiles. This is the entrance door to your application.
47:01
This is what makes your users want to use your app. I love Live Tiles on the phone, because they allow me in a glance to see what's going on. And I have one that I especially like. I'm using the service TripIt when I travel. It's a service where you can forward your email
47:21
from your travel agent, and then they are going to parse it, and they are going to make you a summary. And there is an app for Windows Phone 7, which is showing you as a Live Tile your next flight. And next flight is great. The status of the next flight is even more important. Is it okay, or is it bad? And if it's bad, it means that immediately when you're still in the plane, you can check what's going on.
47:42
You can call your travel agent and change your booking. And when you have something like that, your next plane is canceled, for example. If you're faster than your neighbor, you will get the seat, and he won't, right? So that's critical. All the things are quite nice, like for example, the weather. Immediately you have the weather information
48:00
without even starting the app. And here by planning your Live Tiles carefully, you can give to your users the need to press to see more information, and entice him to use it like that. The start screen also has what is called charms.
48:21
So the charms are those five icons here on the side. And the charms are a common way to execute some functionality in your app. For example, the search charm is interesting because it means that your app can implement a search dialogue
48:41
at a location which every user will immediately know. They won't have to look for it because they know, oh, okay, I used search into Windows 8, I used search into USA Today, I used search into another place, and now I know that if I press on the search button, I'm going to be able to search.
49:01
By the way, all that, there is a lot of comments, let's say like that, around the start screen of Windows 8, mostly because it's moving the cheese of the people, it's changing their habits. It's really not bad if you use it with a mouse and a keyboard. It's actually quite cool, but there are a few shortcuts that are interesting to know,
49:21
like win, and then the key C is opening the charms bar, or win I brings you immediately to the settings. So when you search the apps, this is what it looks like, and you see that you have a lot. I'm going to show you the actual search. So I'm going here to my settings,
49:41
and I'm going to press here the letter Q to start the apps, and now I can filter. I don't even have to go into that screen. I can just type on the Windows button and then start typing, like for example Kindle, and then I find the Kindle application. So it's actually quite fast, quite convenient to use with your keyboard,
50:02
but the interesting thing here is that it's not only searching the apps. It's also proposing you to search into installed applications, what you have here. Those applications implement what we call the search contract. So they say, hey, I can be searched, okay? Not going to show you code for that,
50:21
but it's really literally like five lines of code and a change in the manifest of your application to support the search. What it means is that by doing that, immediately you tell your users, okay, you don't have to search, to look into is it under edit find or is it into tool search or whatever. Immediately they know where to go.
50:41
So there is this kind of common knowledge. Settings, the same things, right? If I show the charms here, I have the settings. And then if I press on the settings, this is a common UI, which all applications can implement. Again, it's not a must, but it's recommended because it gives your users this feeling of familiarity.
51:02
And then you can here have your setting shortcut. And then after that, jump into your app. I think Jonas is going to show that in the next session. Oh, one thing I wanted to show you since I'm here. So here you see, you have a lot of apps, right?
51:22
It's kind of hard to find your way. And of course, if you have a mouse with a wheel, you can use the scroll wheel to scroll up and down, but still it's kind of hard. So there is something called the semantic zoom, which is pretty cool. It's a way to zoom out of your information and to change the view.
51:41
And here, if you have a touchscreen, you can of course just use a pinch gesture. Here I'm going to click here in the corner. And now I have another view of my apps. They are sorted by letter. This is super easy to implement. It's just a matter of implementing the templates, using the so-called jump viewer control
52:01
and implementing the templates. It's very easy to do. And it helps your user to dig into the application. For example, here I go to the letter R. And immediately I find my apps. There are other applications that you can see using the jump viewer, using the so-called semantic zoom. So I think it's an interesting way to do things here.
52:30
Or is it here? OK. When you develop your apps, you have to think. Billy already talked about that in the previous session, but it's important.
52:41
You have to think that it's not just for one side of screen, and it's not just for one way of using your app. For example, here we have the so-called snapped view. The snapped view is here. This is the USA2D application on the side.
53:00
And here you have the video, which is opened in what we call the field view. So for each application, you can have full screen, snapped, or filled. And you need to design for those. If you use the same design for the snapped view, it's going to look weird. Because the snapped view is a vertical type of scrolling,
53:21
while the full screen is rather horizontal type of scrolling. So you need to think of that. Also remember that if you design for a slate, users can turn the slate upside down, and then you have a portrait or landscape type of experience. Now, this is the same application,
53:40
but this time the USA2D is filled, and the video is snapped. So you see that the template is different. See the same type of information, but with a very different form. Try to implement a consistent experience, consistent throughout your app.
54:01
Use the same gestures to make the same things, but also consistent with other apps. A pinch gesture is used to zoom. I think everybody knows that now. Not even just on that platform, but even on iOS, which introduced it. So think of those things. Try to be consistent, because every time you're not
54:20
consistent, you're forcing your users to think, and they don't want that. For example, common location for settings, that's a good example. If I search for settings in any metro app, I'm going to go to the champs and press on the Settings button. That makes sense. Try to work with other applications.
54:41
Try to use contracts. And think of the lifestyles. It's quite important, because that's the entry point into your app. How do we do that, and what kind of help do we get from Microsoft to follow those guidelines,
55:00
to follow those principles? Well, the first thing is the grid. So the grid in metro is using 20 pixels times 20 pixels. So typically, when you align your items, you should align them at 20 or 40, but not at 30 pixels.
55:21
In Windows Phone, the magic number is 24 for some reason. So when you align on the side, it should be aligned at 24 pixels from the left margin, if you want to be consistent, which is kind of interesting. Those grids all come as soon as you start a new Windows 8 application with a new template.
55:42
You will get those things immediately. So it's very easy to actually apply that into your app. The title, the start of the content, should be at seven units, 140 pixels, if you want to be consistent. Again, this is a value which is used everywhere in Windows 8.
56:00
And the baseline for the title at five units or 100 pixels. So again, by using the grid in XAML, for example, it's very easy to make your rows with 100 pixels, 40 pixels additional for the beginning of your content, and then to fill with the rest. Of course, your applications don't have to look like grid.
56:24
Any content should start approximately at one, well, should start at 140 pixels. On the side, we typically leave six units or 120 pixels. You can have, of course, lists.
56:41
So by using lists, you can make them dense, where here you have just one unit of margin between the items, or here you have 1.5 unit, which is maybe a little bit more unusual, or here two units to give, again, a different feeling into your app by changing the density of your lists.
57:03
So when you start with those things, try to use the template, or at least if you don't want to use them, it's fine. But you can always take a look at them so that you see how the metro design team implemented that. And I'm going to show you that in just a second. And there are those new controls
57:21
which help you a lot, like the grid view. The grid view is this horizontal scrolling control that you have, like for example here. This is a grid view. A grid view, for those of you who come from Civilite or from WPF, it's just like a list box, except that they change the templates and the item template.
57:41
List view is the vertical scrolling control, and the jump viewer is the one that I showed you where you can semantically zoom out to get less information on your data to get a better view of your data. Those controls are there, and they do most of the heavy lifting for you,
58:00
so it makes sense to use them. And by the way, they exist in HTML as well, so you know that you can develop Windows 8 applications in HTML and JavaScript, and those controls are also available there. Expression Blend is really a great tool. I love Expression Blend, and now when you install Visual Studio, you get Expression Blend for free, so it really makes sense to use it.
58:21
There is no excuse anymore. And Blend is really helping you to do a lot of this work visually. In my talk on Friday, I'm going to show that, like how to use Blend to its full potential to design Windows phone applications and also Windows 8 applications with design time data, et cetera.
58:43
And really my recommendation is ask professionals, right? Professional designers cannot be replaced by a developer who thinks that he knows design a little bit, okay? I'm not a designer. I don't do design. I talk about it sometimes, but I really go to a professional designer when I want the job to be done right.
59:03
When you create a new app, this is, for example, what you get. There is a split application. You have two pages, so you can see how the navigation is done and all that. You don't really have to use those templates, but it's a good idea to see how they do that. You also have a grid application with three pages with different level of information.
59:23
This is Blend used here with the Windows 8 app, so you see that you can easily design those units that I was mentioning, the 140 on top, the 120 on the side, these kind of things. It's very much easier to do that in a visual manner, especially when you work with text
59:41
because text has a baseline issue, so it can be difficult to implement. Blend is also helping you with the, here you see you can change the view of your app directly in Blend without having to run your app, so you can change Blend to run the snapped view or the field view or even.
01:00:00
the portrait orientation. So that's very useful, because otherwise, you have to run your app and try it. By the way, there is also a simulator which comes when you install Visual Studio. So you can run your app not directly on your machine, but in the simulator, which allows you to do things like turning, which
01:00:21
here doesn't work. If I turn, there is no sensor here which is going to detect that I'm turning the screen. So you can use a simulator to use these kind of things. Or for example, to set your geolocation to a different place to test in the application what this is doing. Blend is also allowing you to simulate different resolutions, which can also
01:00:42
be useful if you don't have the actual physical device to test it. You can test directly in Blend. Font size, the whole Windows 8 experience is built with four font size. Those are the font size. So don't go overboard. Don't use too many font sizes. It's not a good idea because it's confusing the user.
01:01:03
Be consistent with your font sizes. And you can add additional differentiation between your text, for example, by using a different font weight, or like here, by changing the color or the opacity of the textbook to make it a little bit
01:01:21
less in the face, if I can say this like that. Colors in Metro are bold, right? We talked about that before. They are plain but bold. So it's courageous to make an application with Magenta font. But it's paying.
01:01:40
Nokia came out with those Seo and Magenta fonts, which are quite successful. So I think it's paying off. Those are, again, right? Those are the official Metro colors. You don't have to use it. But if you do, they give a sense of familiarity to your users, which is a good idea. And the icons, I already mentioned that.
01:02:01
Those are two places where you can download large sets of icons which are quite Metro-ified. And I'm sure we'll see more very soon. So this is another place where you can use icons for your application bar. The application bar, at this location, you have more than 150 different icons
01:02:22
for the application bar, which allow you to make sure that you're using something that your user knows. Quick question. Why is the button here on the left and on the right, and there is no button in the middle on the application bar? It's because I use my thumb sometimes with the application. And I need to be able to reach those buttons, right?
01:02:41
So remember that. Voila, that's the gist of the talk. So I think what I would love you to take home is maybe just one thing, is how important it is to involve designers in your application, not as an afterthought, but really from the start,
01:03:01
because design is taking really a place which is more and more relevant into our applications. Especially now with the challenges that we have, the multiple screen sizes, the backlight and certain don't play well together. All these things play a big role. So work with professionals, try to pay attention to that.
01:03:21
And if you have questions, I will be happy to answer those. If you don't, I wish you a very good day, and thank you for your attention. Thank you.
Recommendations
Series of 25 media