Yesterday was one of the most important days in the history of Microsoft as they finally revealed more details about the future of Windows – specifically Windows 10 and how it will work across Windows devices of all sizes and shapes.
This past decade Microsoft has taken a beating from the technology press, Apple, Google and smaller more nimble companies. Some of this negativity was certainly well deserved, but much of it was unnecessarily taken to the extreme to make Microsoft look bad no matter what.
However this past year, Microsoft has started to really come into it’s own and changed the company around into one that is clearly still very relevant in today’s world. We have seen the revolutionary Surface Pro 3, the launch of Microsoft Band, the major growth of Azure, Office365, Xbox One and other services that make up the 16, billion dollar solutions Microsoft provides.
Yesterday Microsoft took that success another step further by showcasing the flexibility, power, usability of the new Windows – Windows 10. In addition to Windows 10 Microsoft announced their latest big screen, touch friendly display called the Surface Hub and the never seen before, innovative, “virtual reality” device called the HoloLens.
There is no way I could write in depth about all that Microsoft announced yesterday, so I have decided to start compiling a list of related articles from other sites that I can reference in the future as we learn more about Microsoft’s future for Windows and Windows 10.
IE / Spartan Browsers
The “Modern” design language – formally known as “Metro” is Microsoft’s “new” set of design guidelines which has been integrated across many of their software products. Microsoft is just now starting to really push this modern design language as a standard within the company, we can actually see hints of it in some of their older applications like Windows Media Center and the Zune music player – both of these products started the trend for Microsoft to start focusing on elegant design, typography and animation.
Where did this Modern design language come from?
It’s actually influenced on three external foundations:
- The Modern Design Movement (The Bauhaus)
- International Typographic Style (Swiss Style)
- Motion Design
The Modern Design Movement (The Bauhaus)
The Bauhaus movement was geared towards the removing of any extra decorations and ornaments and leaving the focus solely on the purpose and ultimate functionality. This approach to design is distinctly different from what Apple created with iOS which has for the most part relied on a more Skeuomorphism approach. An approach that tries to replicate real world imagery and functionality through realistic ornamental elements.
Here is a good example of from iBooks that shows a Skeuomorphic approach to design with it’s wood grain background, shelves, heavy use of shadows and of course actually showing what looks to be books on the shelf.
Take that compared to Kobo Reader on Windows Phone, you can se a striking difference between the two images – the popular new term for this style is “Flat”, we are starting to see many other companies adopt this Flat style. Google’s Android is probably the biggest company outside of Microsoft to adopt this new style – I have to commend them for making their UI much more consistent and clean through flat design.
I’m not going to get into the debate on which is “right” Skeuomorphism or Flat Design, I think they both have their advantages and disadvantages and the user simply needs to pick a style they like and join a platform that is attractive to them. I’m a big fan of the flat design style I tend to design towards the functionality rather than an ornamental style.
International Typographic Style (Swiss Style)
The Swiss style emphasizes cleanliness, readability and objectivity with a strong focus on layout and grid systems and the use of bold flat color. You have seen this style of typography almost anywhere that you go, it is used in signage at airports, bus stations the Olympics and many other information dense environments.
The elegant use of typography in Microsoft’s design language is one of the main reasons I love designing on their platform. It used to be that great typography was only for print design, Microsoft was able to bring it into the digital realm in an aesthetically pleasing and functional way.
As you can see below, Windows 8 and Windows Phone applications are based very strongly on the grid, you can read a lot more about how Microsoft uses the grid here: Laying out an App Page
Grid Unit Structure
Application Grid Template
In addition to the grid structure, Microsoft has also used big bold colors in their new Modern environment.
Windows 8 Start Screen
Color gives the sense of emotion, attraction and makes it feel more organic as well – especially when the color is used on the hardware itself.
The final and certainly not the last, Motion Design is the third external influence of the Modern Design Language. Similar to Typography, we see motion design everywhere – from the Television and Movies we watch, to digital billboards and scoreboards and of course animations in the applications we use on our phones and computers.
The best Motion design in my opinion is motion that is used in a subtle and simple way, whether it’s a link background color fading in and out as you mouse of it or as various UI elements slide or flip into place as you use your phone.
When you take these 3 external influences and pair them up with Microsoft’s five design principles (Pride in Craftsmanship, Fast and Fluid, Authentically Digital, Do More With Less and Win as One) you get a very strong foundation and understanding of how to design for Windows 8 and Windows Phone. We’ll dive deeper into the 5 design principles in our next exploration article coming up soon.
Check out our initial Exploration Introduction Article: Exploring Modern App Design and User Experience
Soon we’ll be starting a new blog series of exploration articles digging into the exciting world of Microsoft’s Modern Design Language and User Experiences guidelines that has been defined for Windows 8 applications and then encourage you to break those guidelines to provide your users with a unique and beautiful experience.
Throughout this series we will talking about the numerous controls available within Windows 8 applications, we’ll talk about how, where and why these controls are used, and explore the experiences around those controls. We’ll also show some real-world examples of how application designers are using these controls today within their applications.
Every article will be focused on a very specific part of Windows 8, this will allow our users to gain a solid understanding of how each feature within Windows 8 works from a “tutorial” or “average user” type of experience while still providing some of the more technical and creative information that designers and developers may find beneficial.
The end goal is for anyone who is interested in designing Modern applications to gain an in-depth, start to finish set of tutorials to help you provide your users with a useful, creative and interactive experience as they use your Windows 8 applications.
Here are some of the topics we’ll be covering in the coming months:
- Overview of the Modern Design Language
- Microsoft’s Five Design Principles
- Start Screen
- Charms Bar
- Live Tiles
- Hub Pages, Detail Pages
- App Bar
- Semantic Zoom
- Listview, Gridview, Variable Sized Grid
- And so much more…
We are open to your suggestions as well, if there is something specific you’d like us to dig into, feel free to let us know and we’ll do our best to fit it in.
Be sure to check back often to keep up with this exciting new series, we hope you will learn something new and are able to take your application design and experiences to the next level!