Windows 10 technical preview - design and news

Notas do Editor

• #9: Construire un ensemble logiciel et solutionnel qui soit cohérent, rationnel, volontariste, authentique et franc. Prévoir des paradigmes modulaires, industrialisables, reproductibles et culturellement intégrés. Faire entrer Microsoft dans un statut intemporel et permanent.
• #17: The use of a grid in the Metro design language goes back to its inspiration from Swiss graphics design, particularly as applied in transportation systems – on signage and maps. The focus is on cleanliness, readability and alignment so that content pops for easy and direct consumption.
• #21: Our first step in building Metro, was to look not at phones, or computers, but to step back and look at how users navigate information in their every day activities, our team had the inspiration of transportation graphics, where it’s a common design language that millions of people use everyday to find their way, be it at Narita or JFK or the London Underground, Transportation graphics use of universal icons, clean consistent typography and graphic elements, with strong bold colors was the foundation for Metro
• #23: .
• #27: Key Messages: Personality Patterns Principles Platform   Script: When we talk about designing Windows Store app for Windows 8.1, there are concepts we had in mind that guided us in the design of the Windows user experience itself that you can use in the design of your own app. This can best be summed up as the “4 P’s” of Windows Store app design. They are: Personality Patterns Principles Platform Transition: Transition to the next slide.
• #28:   Script: First, Windows has a visual and interactive design personality that you see when pixels, shapes, colors, animations come together to form the look and feel of Windows. We feel really good about this personality being unique and distinct to Windows. Understanding this personality is a design opportunity for your app to feel like it’s part of the users Windows experience, but it’s also just the starting point for you to create a personality that’s distinct to your app and your brand. It’s key to understand this personality so you know how/where to build on it to create the right personality for your app. But, how do you achieve that personality? We took a lot of time and effort to get it right for Windows and to craft it into Windows 8.1… Transition: Transition to the next slide.
• #29:   Script: First, Windows has a visual and interactive design personality that you see when pixels, shapes, colors, animations come together to form the look and feel of Windows. We feel really good about this personality being unique and distinct to Windows. Understanding this personality is a design opportunity for your app to feel like it’s part of the users Windows experience, but it’s also just the starting point for you to create a personality that’s distinct to your app and your brand. It’s key to understand this personality so you know how/where to build on it to create the right personality for your app. But, how do you achieve that personality? We took a lot of time and effort to get it right for Windows and to craft it into Windows 8.1… Transition: Transition to the next slide.
• #30: Script: First, Windows has a visual and interactive design personality that you see when pixels, shapes, colors, animations come together to form the look and feel of Windows. We feel really good about this personality being unique and distinct to Windows. Understanding this personality is a design opportunity for your app to feel like it’s part of the users Windows experience, but it’s also just the starting point for you to create a personality that’s distinct to your app and your brand. It’s key to understand this personality so you know how/where to build on it to create the right personality for your app. But, how do you achieve that personality? We took a lot of time and effort to get it right for Windows and to craft it into Windows 8.1… Transition: Transition to the next slide.
• #31: Script: First, Windows has a visual and interactive design personality that you see when pixels, shapes, colors, animations come together to form the look and feel of Windows. We feel really good about this personality being unique and distinct to Windows. Understanding this personality is a design opportunity for your app to feel like it’s part of the users Windows experience, but it’s also just the starting point for you to create a personality that’s distinct to your app and your brand. It’s key to understand this personality so you know how/where to build on it to create the right personality for your app. But, how do you achieve that personality? We took a lot of time and effort to get it right for Windows and to craft it into Windows 8.1… Transition: Transition to the next slide.
• #32:   Script: First, Windows has a visual and interactive design personality that you see when pixels, shapes, colors, animations come together to form the look and feel of Windows. We feel really good about this personality being unique and distinct to Windows. Understanding this personality is a design opportunity for your app to feel like it’s part of the users Windows experience, but it’s also just the starting point for you to create a personality that’s distinct to your app and your brand. It’s key to understand this personality so you know how/where to build on it to create the right personality for your app. But, how do you achieve that personality? We took a lot of time and effort to get it right for Windows and to craft it into Windows 8.1… Transition: Transition to the next slide.
• #33:   Script: First, Windows has a visual and interactive design personality that you see when pixels, shapes, colors, animations come together to form the look and feel of Windows. We feel really good about this personality being unique and distinct to Windows. Understanding this personality is a design opportunity for your app to feel like it’s part of the users Windows experience, but it’s also just the starting point for you to create a personality that’s distinct to your app and your brand. It’s key to understand this personality so you know how/where to build on it to create the right personality for your app. But, how do you achieve that personality? We took a lot of time and effort to get it right for Windows and to craft it into Windows 8.1… Transition: Transition to the next slide.
• #35: Script: Windows is grounded in a set of design principles. These design principles are a key aspect of the Microsoft Design Language, the design language we use company wide to provide harmony between our products and the experiences they provide. Harmony, but not sameness. Each implementation of these principles is specific to the user experience that’s being designed. These principles provide the roots of what we do so Windows, Windows Phone and Xbox experiences, and the apps that run on those experiences, are both familiar and approachable to users while providing the best possible experience, tailored specifically for that device or context. What does that mean to you as the designer of Windows Store apps? By understanding these principles, you’ll understand the basis of the decisions we made in designing Windows and the Windows Store app experience. This can be a valuable tool for you when you apply your design principles and brand, what makes up the basis of your designs, and apply them to Windows and your Windows Store app design. Your app will be the best of what makes you and your app unique, but it will feel natural and familiar to Windows users. Transition: Transition to the next slide.
• #53:   Script: The first is pride in craftsmanship. We engineered Windows and our Windows Store apps to be complete, thorough and polished at every stage. We sweat the details. For example, on the design team, when we design a dialog, we create pixel perfect “red-lines” of the dialog in every window size to make sure it’s beautiful and functional, then we work with the development team tto make sure it’s implemented as spec’d.
• #54:   Script: The first is pride in craftsmanship. We engineered Windows and our Windows Store apps to be complete, thorough and polished at every stage. We sweat the details. For example, on the design team, when we design a dialog, we create pixel perfect “red-lines” of the dialog in every window size to make sure it’s beautiful and functional, then we work with the development team tto make sure it’s implemented as spec’d.
• #55:   Script: The first is pride in craftsmanship. We engineered Windows and our Windows Store apps to be complete, thorough and polished at every stage. We sweat the details. For example, on the design team, when we design a dialog, we create pixel perfect “red-lines” of the dialog in every window size to make sure it’s beautiful and functional, then we work with the development team tto make sure it’s implemented as spec’d.
• #56:   Script: The first is pride in craftsmanship. We engineered Windows and our Windows Store apps to be complete, thorough and polished at every stage. We sweat the details. For example, on the design team, when we design a dialog, we create pixel perfect “red-lines” of the dialog in every window size to make sure it’s beautiful and functional, then we work with the development team tto make sure it’s implemented as spec’d.
• #57:   Script: The first is pride in craftsmanship. We engineered Windows and our Windows Store apps to be complete, thorough and polished at every stage. We sweat the details. For example, on the design team, when we design a dialog, we create pixel perfect “red-lines” of the dialog in every window size to make sure it’s beautiful and functional, then we work with the development team tto make sure it’s implemented as spec’d.
• #58:   Script: The first is pride in craftsmanship. We engineered Windows and our Windows Store apps to be complete, thorough and polished at every stage. We sweat the details. For example, on the design team, when we design a dialog, we create pixel perfect “red-lines” of the dialog in every window size to make sure it’s beautiful and functional, then we work with the development team tto make sure it’s implemented as spec’d.
• #59: Estimated Time: 1 minutes. Key Messages: Bullet 1. Bullet 2. Bullet 3.   Script: Here’s another example of a dialog in an early build. Should we ship this? No. Transition: Transition to the next slide.
• #60: Estimated Time: 1 minutes. Key Messages: Bullet 1. Bullet 2. Bullet 3.   Script: Looking at this design there are a number of improvements to the composition, type and implementation of this dialog to get the right level of quality. A fit and finish review by the design team would have lots of feedback on how this dialog could be improved. Transition: Transition to the next slide.
• #63: Estimated Time: 2 minutes. Key Messages: Bullet 1. Bullet 2. Bullet 3.   Script: In Windows 8.1, we made the visual language even richer. We looked at how we could evolve the personality forward and talked to engineering to make sure that that evolution was built into the platform. We did this so you would have the opportunity as an app designer and publisher to push the boundaries even further. Let’s talk about each of these 4 elements of the Windows personality, including: Composition. Typography. Color. Motion. Transition: Transition to the next slide.
• #64: The compositional layout of your app is an essential design element. The layout can create a hierarchy, organize your content, and create compelling and visually rich experiences. Structure your pages to reflect the key user scenarios of your app.
• #65: Units help in scaling across DPI   Script: In composition design of Windows Store apps, we start with the grid. This is the same grid you’re used to using in the design of print, web or other app experiences. We start with a grid that has 20px units and 5px sub units. 20px units are important to provide pixel scaling across all of the different devices and screens supported by Windows 8.1. More on that in a moment. Here are two app examples of app compositions from Windows 8.1, the Start screen and the Windows Store landing page. .
• #66:   Windows Store apps also have a consistent application of the grid throughout the app to provide a structure and a sense of quality. In the examples above, you can see how the silhouette of each app is applied to provide a header, margin and content area consistently from page to page. When designing your app, you’ll apply the grid to the composition of your UI and apply it consistently across pages to create a silhouette unique to your app. Transition: Transition to the next slide.
• #67:   Windows Store apps also have a consistent application of the grid throughout the app to provide a structure and a sense of quality. In the examples above, you can see how the silhouette of each app is applied to provide a header, margin and content area consistently from page to page. When designing your app, you’ll apply the grid to the composition of your UI and apply it consistently across pages to create a silhouette unique to your app. Transition: Transition to the next slide.
• #68:   Windows Store apps also have a consistent application of the grid throughout the app to provide a structure and a sense of quality. In the examples above, you can see how the silhouette of each app is applied to provide a header, margin and content area consistently from page to page. When designing your app, you’ll apply the grid to the composition of your UI and apply it consistently across pages to create a silhouette unique to your app. Transition: Transition to the next slide.
• #69: Estimated Time: 2 minutes. Key Messages: Bullet 1. Bullet 2. Bullet 3.   Script: Typography plays an important role in Windows and the Windows visual language. In many apps, much of the content is text, so it’s important that typography to be well designed and rendered cleanly and crisply on the UI. Again, when designing Windows, we were inspired by bold, beautiful graphical use of type. In these examples, you’ll see type as a strong expression of brand. Transition: Transition to the next slide.  
• #70: Estimated Time: XX minutes. Key Messages: Bullet 1. Bullet 2. Bullet 3.   Script: In Windows we use a type ramp with sizes that properly align to the grid, again to aid in pixel scaling to different screen DPI on different devices. The type ramp you see here is the base type ramp that we ship in the templates and default style sheets we ship with the platform. You can use this type ramp out of the box or use it as the starting point of your own type ramp that expresses your brand and the personality of your app. Whether you use this type ramp or your own, use a consistent subset of font sizes and weights to communicate structure to the information in your app. Use graphic type to create visual interest, but consider how graphical type can affect readability. Transition: Transition to the next slide.  
• #71:   Script: Here is a good example of what good type design can do to improve the UI of your app. In this early design of a SkyDrive dialog box, everything is treated the same at a glance, so it’s hard to distinguish what is the most important information here. Transition: Transition to the next slide.  
• #72:   Script: Here is the redesign, focusing composition and typography. By using the type ramp, the information in the dialog has a hierarchy, with the most important information standing out. Also note that negative space also helped the composition to help the user understand the goal of the dialog. Transition: Transition to the next slide.  
• #73: Estimated Time: 3 minutes. Key Messages: Bullet 1. Bullet 2. Bullet 3.   Script: Next, let’s consider the impact of color on personality. In Windows, color is rich saturated and vibrant to make for a beautiful digital experience. We use mostly flat applications of color, but if you look at these examples, you can see that event flat colors can be exciting and dynamic. We use techniques such as transparency, layering and blending to create motion and depth. When you design the personality of your app, there are most likely colors that will reflect your brand and the personality of your app. Optimize your use of color for digital experiences and build a pallet of colors that reinforce what you app is great at. Transition: Transition to the next slide.  
• #74:   Script: Motion brings experiences to life. We’ve built animation into Windows to add motion and make Windows feel fast and fluid. We’ve also built animation into the UI controls so you’ll be able to get that same fast and fluid motion in the apps you build. But, motion can also communicate something about your app as we’ll see in this example. Here an example of a ListView control (used to show lists of content item in a list or grid). The ListView has content entrance, leave, add, delete animations built in. On the left you’ll see an example of content entrance animation. Note the animation shows the content from top to bottom, left to right, communicating that there is more content to the right. On the right you see an animation for drag and drop, that clearly communicates to the user the result of their action. But again, this is just a start… The UI controls built into the platform have the base Windows personality animation built in. You also have the ability to use the Animation Library to build these animations into your custom controls. Taking it even further, you can use CSS3 animations and XAML storyboards to create custom motion experiences to convey the personality of your app in a way that totally unique. Transition: Transition to the next slide.  
• #76:   Script: Since the beginning of Windows 8, we’ve talked about the importance of patterns. Patterns allow users to learn something once and apply it again and again in their use of Windows app. It makes apps familiar so users can focus on the unique. As a designer, you can leverage these patterns and their support in the platform to solve common problems in a common way, allowing you to focus more effort on the uncommon problems that you want to solve in your design. Let’s look at some examples: UI Controls – Buttons, progress bars, sliders, the essential UI widgets for creating UI. Navigation – How users get around in apps to discover what makes the app great in a simple and intuitive way. Commanding – How users perform actions in apps, like direct manipulation or the app bar pattern. Presenting Data – Lists and grids of data, semantic zoom. Touch – How a universal touch language can be applied to apps so all users know how to use touch in all apps. Transition: Transition to the next slide.  
• #77:   Script: When we released UI controls in the platform that implemented the Windows personality and patterns. All of these controls are, of course, available in Windows 8.1. In some cases we have new controls to support patterns that are new in Windows 8.1, so some cases we’ve updated existing controls.  
• #78: Estimated Time: XX minutes. Key Messages: Bullet 1. Bullet 2. Bullet 3.   Script: There are three areas within the Navigation patterns that we’ve built upon in Windows 8.1. Hub – This is the front page of your app. It’s a place to make a big, bold, dynamic statement about your app, your content and your scenarios. Navigation Bar – A commanding surface that you can leverage in your apps to allow users to navigate quickly from section to section in a familiar way while letting you create a custom navigation experience that’s tailored to your app. In-App Search – Browsing is the primary way users discover in your app and search is a very close second. The search pattern and a great search experience in your app will help users find what they are looking for quickly and efficiently so they can become immersed in what your app is great at. Transition: Transition to the next slide.  
• #84: Key Messages: Personality Patterns Principles Platform   Script: When we talk about designing Windows Store app for Windows 8.1, there are concepts we had in mind that guided us in the design of the Windows user experience itself that you can use in the design of your own app. This can best be summed up as the “4 P’s” of Windows Store app design. They are: Personality Patterns Principles Platform Transition: Transition to the next slide.