Skip to main content

What's new in Microsoft Design Language 2 for Windows 10

Microsoft's forthcoming Windows 10 OS brings many new changes in terms of architecture and design. One of those updates is in regards to MDL2 also known as Microsoft Design Language 2.0. This term refers to the change in controls, fonts, and iconography found in the desktop and mobile versions of Windows 10.

Martin Anderson, who's interested in general technology and Microsoft's platforms, has cobbled together a neat image graphic (original size). It compares and contrasts the design language found in Windows and Windows Phone 8.1 to the new framework found in Windows 10 for mobile and desktop.

The template explicitly compares controls e.g. switches, toggles, pickers, dialog windows and gives a visual overview of how the design language has evolved.

Generally speaking, many of the lines have become much thinner in the Windows 10 design language when compared to 8.1. This change is further demonstrated with the wireframe icons found throughout the OS, giving a leaner and cleaner look for 2015.

Microsoft so far has not given a major manifesto on Windows 10 design, something that may come during Build next week in San Francisco. It certainly would be preferable if they announce something as definitive as Google's Material Design, alongside a design blog outlining, explaining and promoting its design language choice.

One of the appeals of the original Metro/Modern/Microsoft design language was the philosophy and guidance behind it. Microsoft needs to be as bold and clear for Windows 10 now more than ever. While they are at it, they should also come up with a snappy name. Metro is banned, Modern never caught on, Microsoft Design Language is perhaps too general, and just Windows apps is vague.

What do you think of the evolution of Microsoft Design Language for 2015? Let us know in comments.

Source: Martin Anderson (@mdtauk)

Daniel Rubino
Executive Editor

Daniel Rubino is the Executive Editor of Windows Central, head reviewer, podcast co-host, and analyst. He has been covering Microsoft here since 2007, back when this site was called WMExperts (and later Windows Phone Central). His interests include Windows, Microsoft Surface, laptops, next-gen computing, and arguing with people on the internet.

200 Comments
  • Good, but Microsoft needs to add an accessibility feature which could make stuff "bolder", and not just larger, since the new thinner font and iconography will be difficult to read/see for elderly people.
  • True!
  • Wow..!
  • Lets have a naming contest.
    I'm going with... Graphene.
    Thin and grey.
  • Microsoft Design language 2.0 for Modern Universal Apps for Windows 10 for phones. Done it. Fine name for MS.
  • @Wam1q... Lol! Nooooo!! Don't give them any ideas!! :P. I bet they will call it that now... Lol.
  • Or MDL2FMUAFW10 for short. Beautiful. Rolls off the tongue.
  • The article already call it microsoft evolution design, just call it Microsoft Evo, seems selling to me.
  • Material destroyer design language
  • That's a nice name but how about 'Poor Store Android' ??
  • Satya Nutella Design Language.
  • Satya nadella
  • and the joke wooshes over this ones head
  • I love gray on phones since it's a sign you will be able to keep using the black theme for all your apps to save a lot on battery life, also love how the dark gray mimics the look and feel of professional desktop software like Adobe Photoshop.  Maybe it's just me but I think gray should be the default theme in Windows 10 not just for phones, but also for PC's and Xbox.
  • Gray runs battery relatively quickly on AMOLED. From the images it seems as though black backgrounds are gone for good
  • Nah..from the recent screenshots we've seen, there'll 3 themes in W10 instead of the current 2.
    Black, Grey & White
  • Hamburger OS.
  • LOL! Appropriate indeed.
  • Satanic Nutella Application Markup Language.
  • Metro *is love, metro *is life. *was
  • Metro wasis love, metro wasis life?!
  • It certainly wasis :)
  • It's a shame to see the "Metro" design language be deprecated, but people weren't responding to it, so it had to change.
  • I don't see it as depreciating so much as it's evolving. While I love the older style for its aesthetic, ultimately they decided it wasn't providing optimal functionality and needed to change. Hamburger menus and whatnot I've still yet to see any real evidence to suggest they're abandoning the original philosophy behind it.
  • It's not so so much that it wasn't providing optimal functionality, it's that people were refusing to give it a chance and learn how to use it. I found Metro to be much more functional and efficient than old Windows.
  • It's actually moreso the developers.  A lot of developers don't have too much time, and when the design langauge was TOO different from the competitor products, they would have to redesign their apps completely.  Now, it's a bit more consistent to allow devs to port their apps over without too much design differences.  However, i think once we get lots more apps coming over, Microsoft can experiment with a more drastic UI change.
  • Was it the porting or was it the financial of upkeeping the app to date. So what's the real issue?
  • Well, I work for a company that publishes an app for WP. I can tell you it's both. Layout in WP is pretty different and we had to hire a dedicated UI artist/ designer since our Android/iOS ones "didn't understand" WP. Idiots. Anyhow, then there is the coat of maintaining parity with our apps in the other stores. We only started supporting WP because of the MS promotion to developers and continue its support because our new CEO wants universal support of mobile OS (top 3).
  • Idiots lol Posted via the Windows Central App for Android
  • "Metroidios" design language. Was metro the inhibitor of developer adoption? Were devs waiting for MS to introduce the hamburger? Will this approach of adopting the universal apps and language of other platforms be MS's big savior? Final question, is metro finally dead?
  • Yeah, so is windows phone. It's windows 10 mobile now
  • Swiss Style isn't really an option for a name, but I wish it could. Using WP always made me feel like I was interacting with something from that time period (sans Helvetica).
  • How about Microsoft iOS+Android Copycat Mix Design??
  • Android and Windows had a baby.....now choose the name....
  • iWindroid. Born 2015.
  • If the shoe fits....!
  • How about giving users the option to choose between the original three dots and the big mac?
  • This "option" would be a nightmare for app developers and extra burden likely to result in people shunning app development. For every "option" you guys want, it increases the barrier to app design. That is a very bad thing if you are trying to lure new devs.
  • Yup, a line must be drawn. Otherwise it will just become convoluted. Not to mention the increased coding hours for debugging and testing.
  • If hamburger is what we are going to get then I would like to see some design magic from Microsoft. Just one example, the "photo hub" was beautiful and the new "photos" is pretty stark and boring. Now I get the function/Windows10 part, but how about your selected fav photos as a background?? Same with all design for this new design, make it really appealing with transitions, changeable backgrounds, whatever. This can be done, it is Microsoft after all, right. Just impress us, please.
  • The photos hub did used to be beautiful. Now it's average and in W10 it's a terrible mess :( Photos hub used to be one of the things that attracted me to the OS, with the favorites in the background and swiping across.
  • Lol. Three lines were drawn creating the Hamburger Menu icon.
  • I think enough users are vocally angry about the menu design that options need to be considered at this point. If not options then a definitive change is necessary. Are they designing this OS solely for developers and at the expense of users now? A lot of users are clearly angry with the menu/navigation changes, take the feedback seriously and adjust as necessary. Users are making strong rational arguments against the current Microsoft design model. The fact that there's so much inconsistency from app to app means even Microsoft is not settled on a workable template yet.
  • "Enough users"? You mean a very vocal small percentage of the already tiny percentage that uses WP. Yeah, they should listen to those people and dismissed the usability research. /s
  • Daniel w10 for mobile will have side loading..?
  • Are you sure?
  • Well acceptable changes
    Now you are talking Microsoft
  • +L920
  • I saw today early morning the fake news and pics designed by Microsoft fan boy he named it SURFACE PHONE and dude its reaaaaaaaalllly awesome concept
  • Do you never like metro but used WP anyway?
  • Horrible change the thinner fonts and icons and new switches
  • Personal perspective. I like them.
  • Of course its a personal perspective. Isn't everyone's perspective only personal?
  • I like most of the changes. I wonder what my fellow designers think...
  • Looks better than what's in the preview at least. My main nitpick is the light grey buttons on the message dialogs for mobile. Eyesore and harder to read next to the PC version which is a lot prettier in comparison. Seems a strange decision.
  • There are some improvements in some areas and some downs in others.
    Downs on my view are:
    - The removal of the circle around image buttons require more spacing between buttons and they also look less button-ish;
    - Those same buttons are less bold, I wonder if those are enough visible for people with vision problems;
    - Sliders and toggles look alien now in a sharp-edge UI, seems like a change for the sake of change. Sliders should have followed Win Phone 8.1 style;
    - The message dialogue in Win10 Mobile is different from PC, it should follow the PC style. All the rest looks great. And as a very personal preference I did not like the grey background over black.
  • "Horrible" is a bit strong, but at least on the phone they're smaller and harder to hit even on a 5-inch L830. Have to think it's even tougher on a 4-inch screen.
  • Omg those switches... I got to check on the WP 8.1 switches to see which one is "on" for the WP10 switches. Definitely not clear, I'm not sure why empty/filled needed to change. The rest I'm fine with, even though I prefer black background and thick white lines for mobile but it's just a matter of taste (also I use my phone a lot under the sun, high contrast is a necessity for me, and I feel like the new design might be a pain to use in this case).
  • While I'm not a fan of the new option switches, the new design fixes two issues. 1. It's more consistent with check boxes and radio buttons. Now, all three controls denote "on" by having their outlines redraw in the accent color. 2. Now, since the graphic is on the left, as it is for check boxes and radio buttons, the option text (i.e., "on" or "off" or something else) is very close to the control.
  • Good observations :)
  • Good write up. Branding and promotion is needed because as an end user, I'm not liking what I'm seeing so far. Hoping that BUILD and the activities afterwards will help to convince me.
  • Another name = 5 rounds of renames which get worse each time
  • MSN, no Bing, no Xbox, lol
  • Message dialog and context menus still don't give a premium feel. Other are ok.
  • None of these are final yet.  I agree the dialog/context menus are not premium feel yet.  But also they are not consistent between PC/mobile, so that means it's not done yet.
  • Ugly design language, how about that?
  • Perfect option!
  • You can argue, bitch, and send all the feedbacks you want. MS, Joe Billiford, and Al Goul has made their choice. The feedback is meant more or less to find bugs and add features, not go back to previous designs.
  • Agreed - am already shopping for a Sony flagship that actually HAS a design language
  • I really like the date picker in WP 8.1 .
    The one on Windows 10 for phone looks lame
  • Well, the new date picker in Win 10 is actually faster. In the old one you first had to click date, then choose your date, then click month, then choose month, then click year, and the choose year. In Win 10 you open one "window/picker", and then you can scroll date/month/year at the same time, without having to go out of one to scroll the other. This is indeed faster, and imo much better. Less clicks is better...
  • And they removed the day from the date picker
  • The controls are adaptable, so you can have them show the year only, or the Day and month only, etc.  Same with the Timer Picker - this can be 12 hour, or 24 hour.
  • Me too. The metro date / time picker is beautiful.
  • How about micrometro
  • Metrosoft lol
  • 10/10 would use.
  • Hamburgers. What's with Microsoft NOT being modern enough? They always accept things when the entire world has almost chewed that thing for years and spit out. Smartphone, Hamburger etc.
  • MS made Smartphones before google existed.
  • I did like the old design already but I really like the new one, too. I'm satisfied with this change and I really love that it's consistent now between all devices.
  • IMO, the toggle switches in Windows 10 aren't as practical as the ones in Windows 8.1. They're smaller and the difference between on and off is more subtle. The wireframe icons are less visible too.
  • I'm ok with most of it but not convinced on the toggles. They should've kept square look with thinner lines.
  • Agreed. Not a fan or the toggles and think the date picker could be better. I'm liking the iconography though!
  • Seems like Eldar Murtazin was right. The next Windows Phone OS update blew up Metro ui/ux. I guess we can stop calling bs on his twitter rumors.
  • To be honest I like the metro design on Windows, but not the carrousel style on WP. Is just confusing.
  • Funny that, there are lots of Stores called "etc etc Metro", there is also a newspaper called "The Metro". I guess since MS has deeper pockets they (the chain that sued) thought they could get some licensing dollars off Microsoft.
  • I dig the wire frames. I wonder if Xbox One will follow suit.
  • I'd like them to make windows 10 more personalized by allowing us to maintain the color of the keyboard or at least making the keyboard's color change to the theme color of the phone. This will be a really great move by Microsoft!
  • Looks slick so far.  Everyone has to remember this is not final yet, and this is not officially from Microsoft.  But it's a good recap of what's in the Win10 TP so far, and the direction they are going.  I like it, but I hope this time around they actually give a proper "official" design guide for developers, because it was too up in the air with metro/modern that developers were not being consistent.
  • Let's see next week
  • I like how some of the controls take advantage of the accent colours... subtle yet sexy :)  
  • Windows Universal Design
  • I love the reasoning behind this design since developers can build once and app will run on every platform. For ex.  outlook and calendar are 2 wonderful apps that show how universal apps work for all platforms (phones, desktops and TV's with Xbox), I'm sure these apps are not ready yet for primetime but what I would add for the calendar and mail apps on the phone is to adapt to your phone's theme (black or white) so if you choose the dark gray theme, you also can get a dark gray background with white fonts on your calendar and outlook app.
  • I like it all, except for the toggles.  I feel they are too short, if they were the same height as the old rectangle controls, I would prefer that.  OR just make a wire version of the rectangle controls. :)
  • I really dont like what i see in 10 TP. Contacts, People hub a else become worse than in 8.1 =(
  • IMO, every image in that template shows a clear improvement for win10 over 8.1, everything is more consistent, and mobile and pc is now done the same way. Well, maybe the toggles can get the accent colour back when turned on, makes it easier to see which ones are on. No hamburgers shown in that image btw, I still don't quite know what to think about those...
  • Atleast remove wireframe icons. Battery icon sucks.
  • Yeah
  • I actually like the changes and welcome them. Nothing lasts forever. 
  • I agree that design language name must come to exist and it must be catchy like Metro was. We need a new name now, and it must be simple again.
  • How about "Mish Mash?" Two syllables, very catchy, quite apt. Alternate: "Smorgasbord." Three syllables, but respects the Lumia line's Scandanavian heritage.
  • Have you played with Windows 10. Have it on an older 920 and I'm not impressed at all. Outlook is horible to say the least. I liked my three mailboxes pinned seperatly on my start screen..I don't really care for a combined box. Messaging is so-so. the Calender is horrible. I'm not sure what they are really doing. I hope the in the end I'll like it. You you look at the CBS News App as how to write an app for WP 8.1 that is the gold standard.
  • Metro for both phone and pc are great. Can't stand the new look.
  • Microsoft needs to explain the reason behind every choice they made with this UI. As a developer, i liked the way Metro 1.0 was documents to its finest details such as the recommended margins between list view items and so on. It was documented in a way that basically would force the developer to follow the guidlines or risk making the app look alient to the platform. As a warrning, if MS doest take the same documentation approach, then we can all say good bye to the unified UI between apps as every developer will be doing stuff his/her own way which means we will have the same Android fiasco when it comes to the UI.
  • I saw the developers Keynote for Windows 10 UI guidelines with Visual Studio 2015, I think the reason is because Windows 10 is a consolidation of Windows Phone + Windows (desktop) + Xbox all using the same design but on different form factors. Demos show how you can build an app for the Desktop and with simple XAML changes you can have it supported on both smartphones and bigger screens like Xbox on a TV.
  • I agree with you on that and i have seen the demos you are talking about, but i was talking more about how they documented every aspect of the design in METRO 1.0 and i just want them to do the same with this MDL2 (i hate the new name BTW, prefer Metro)
  • Been using the tp for awhile now and so far I like most I've seen so far. Like the new date switcher and how the pop up message boxes appear in the middle of the page now. I agree the toggles could be larger but the shape doesn't bother me. Definately has some bugs but can't bring myself to go back to 8.1 after using the new messaging app. I like how it looks in app and use the actionable drop down respond to txt feature constantly.
  • If an app uses checkbox, button, radiobutton, etc does the design changes automatically to Microsoft design language 2 on Win10 for phone and uses old design on win8.1 for phone OR is there new api in Win10 that developers has to use in order to get the Microsoft desing langue 2 ?
  • Don't worry guys, I'm slowly wondering to iOS. You'll get the same experience there but more established. You'll get the same no pivot, hamburger, touch here, touch there, touch everywhere type of user interface.
  • Just want to point out how Windows 8.1 and Windows 10 contrast with Material design from Android, the reason Windows Phone uses gray colors instead of white is the reason I think Android users have a lower battery life on their phones.  I really love WP for that simple fact, you can choose black/dark gray theme which looks fantastic just like professional desktop software (Adobe Photoshop for example) and also helps to save a lot on battery life. The only Android skin comparable to these dark colors and backgrounds from Windows Phone 8.1 and 10 is Cyanogenmod 
  • I thought (and correct me if i am wrong) bright colors (white) effect the AMOLED screens only when it comes to battery consumption. AMOLED uses very little amount of power when displaying dark colors, unlike bright colors which consume alot. Other types of screen maintain a steady usage voltage no matter what color a pixel is.
     
  • The ONLY thing I dont like in this comparison is the Toggle buttons. Please, this HAS TO BE CHANGED in the "final" product!
  • @Daniel: excellent point: Microsoft needs a catchy name for its design language like they had with Metro and Google now with Material. And again a branding problem at Microsoft: Modern or Windows apps just doesn't do it!
    "Universal Apps" was pretty cool and explains a lot, especially as I can imagine that apps created in Visual Studio will soon run on iOS and Android. So "Universal Design" would make a lot of sense...
    But I think Microsoft took the wrong path... again....
  • Seriously, why not calling it Visual Flow, or simply V-Flow, it's catchy and gives a clue of how fluid and smooth the OS can be in all devices.
  • These images make me believe that Microsoft will deliver on a cohesive design. The current preview builds have been lacking in this area. It's something that will be a major factor for me in staying with Windows.
  • the way they are going to put all pieces together are more important than watching them individually, individually they look nice. i need to see the final design for everything -.-'
  • Sliders and toggle switches have REGRESSED. Uservoice! The others I like.
  • Everything just got a whole lot sexier..
  • Why they aren't using any colors !!!
  • Looks hot!
  • Looks Saucy!
  • What's new? It will be changing forever. Nothing stays the same.
  • I prefer the WP 8.1 design language in every category except Date Picker, Combobox, and Context Menu.
  • MSN2 is the name of the design language.
  • Let's call it the Encarta design language.
  • i don't like the toggle and slider
  • Those toggles are so ugly. They shuld be rectangular.
  • Please vote for toggle change in Uservoice: Here https://windows.uservoice.com/forums/265757-windows-feature-suggestions/suggestions/7009306-remove-rounded-ui-elements-in-new-windows-10-9926 or Here https://windows.uservoice.com/forums/265757-windows-feature-suggestions/suggestions/7088017-radius-corners-and-oval-toggle-switches-like-grad
  • Hugs Bro that you already wrote it!
     just cant stand the face of Toggle Switches, Slider Buttons and Hamburger Menu.
  • Frankly its amazing they were able to combine mobile and desktop, while keeping the heart and soul of both. Thumbs up Microsoft.
  • The thinner lines and wireframe icons are a clever system to extend battery life as there are fewer lit pixels. I'm sure they'll sort the scaling out by RTM though. At the moment it doesn't take screen size into account. But then... IT'S A PREVIEW.