Microsoft Office 2010 Engineering
The official blog of the Microsoft Office product development group

Office 2010: Visuals and Branding

Office 2010: Visuals and Branding

  • Comments 76

Hello, I’m Keri Vandeberghe and I work in Microsoft’s Office Design Group (ODG) as a User Experience Designer. I would like to share the story behind the visual approach and brand integration for Office 2010. I’ll give you a behind the scenes look at the philosophy that led us to the current design direction.

Philosophy

Office 2010 is not a complete makeover but a visual refresh to refine surfaces and remove unnecessary visual elements so the focus is on users’ content and less on the borders and widgets that frame the content part of a window (this frame is also known as the “chrome”). In order to achieve this we’ve reduced the number of borders, boxes, and horizontal banding which gave 6 extra pixels of vertical space back to the content area. By adding more white space, and carefully placed visual elements, we strove to create an interface that appears less intrusive, lightweight, and leaves more room for the self-expression of those using it.

For Office 2007 the Ribbon was a new UI paradigm and the visual styling was emphasized to expose features, show the relationship of controls, and bring forth functionality that was buried in menus and dialogs. Boxes and borders around each control and Ribbon group acted as “visual cues” to guide the user. The Office 2007 Ribbon used a high gloss glass surface, which aligned with the Windows Vista aesthetic, and added an additional “WOW” to a new interface.

RibbonCompare 
Comparison of Office 2007 and Office 2010 Ribbon

In Office 2010 we feel the UI has matured and taken on a more refined appearance without sacrificing the overall structure of the Ribbon and its functionality. A major change for Office 2010 visuals is that the default theme is no longer blue. We chose a neutral palette to minimize sensorial overload when creating documents and we also made a departure from flashy finishes. The Ribbon is still the most prominent UI piece and sets the pace for all that follows. The user interface below the Ribbon is more subdued. The soft gradients and the use of light and color are meant to call attention to or draw the users’ eye to a specific area. There is a visual rhythm defined by white space and a few highly contrasted elements like the Office brand orange to indicate selection and the individual product colors in the File tab.

Office2007_2010compareLarge

We’ve continued the tradition of shipping three UI themes; Silver, Blue, and Black. All of the text in the Silver theme now has a 5:1 contrast ratio (the perceived difference in a color that occurs when it is surrounded by another color) with its background. This is a common request from our users with low vision and we’ve found that most users also benefit from the enhanced readability and improvements.

image

You’ll find the control for switching themes by clicking on the File tab > Options > General > Color Scheme.

optionsDialog

Consistency across Platforms

Consistency in the overall visual styling across Office applications, SharePoint, and Web Applications was a major goal this release. We wanted the experience to feel familiar and consistent when moving from one product to the other. The neutral color palette in SharePoint provides a platform for individual company branding to shine with much less effort. Carrying over the neutral color palette to the Web Apps pairs well with a variety of host chromes and ties the experience back to the full service Office applications.

 platform_compare

Alignment with Brand Strategy

The Office Design Group worked closely with Microsoft’s brand team to evaluate, refine and identify the in-product branding opportunities. This collaboration ensured that the brand was infused in the product in a relevant and distinctive way.

With Office 2010 we’ve unveiled a new Office brand system. The logo has evolved, moving from the original four colors that signified Word, Excel, PowerPoint and Outlook to a mark that fully embraces the Office orange brand. The logo also completes the evolution from the puzzle pieces last seen in Office XP to a mark that conveys energy, impact, and connection.

OfficeBrand_compare

The application icons have been re-designed for the release of Office 2010. The new icon designs respond to research that informs us that users can more easily associate icons by letter and color than by abstract design. We’ve adopted an alphabet system to bring a more uniform approach to the wide variety of Office family products.

ProductIcons

We’ve also chosen to play up the individual application colors this release and have updated the spectrum of colors to use a more vibrant and pure color palette. We’ve added the product color to the File tab and a few select elements in the Backstage view to make it easier to quickly identify the Office application you are working in. Think of the application colored File tab as a sneak peek into the Backstage view.

FileTabCoreSet

Backstage_all

The new Microsoft Office brand gesture and updated orange color palette is showcased in the animated splash screen. The animation adds energy, expressiveness, and an element of delight to the product launch experience.

 splashsequence

It’s not just a pretty picture
Designing and implementing the visuals for Microsoft Office goes beyond the icons and the age old desire simply to “make it look pretty”. It’s about bridging the gap between the familiar and the unknown, conveying and building on a brand, and helping users complete their daily tasks without getting in the way. Hopefully this quick overview has given you a better understanding of the visual refresh you’ll see in Microsoft Office 2010.

Leave a Comment
  • Please add 5 and 7 and type the answer here:
  • Post
  • What I'd really like to know is why there isn't a setting to just *disable* the Office interface themes? There are a lot of people out there who don't want to have to use a High Contrast Windows Theme just to get Office to look and feel like the rest of the OS.

    Office doesn't fit in with Aero-based themes properly and most definitely doesn't fit in with the classic theme -- why not just give the user the option to turn off theming? It's not like it's impossible: the themes will be disabled for high contrast user themes (and using a program like 3d color changer, you can almost get your system to feel like a classically-themed one, with the exception that a few apps behave oddly with the "high contrast bit" set in a theme (firefox, the login screen, to name a few).

    Seriously, this is the ONLY reason I'm now uninstalling office 2007 to put 2003 back on again -- it just looks awful to have bright white scrollbars and buttons when I've selected slightly darker colors for standard chrome elements.

    Then again, perhaps this is just in keeping with the Microsoft tradition of not creating proper theming engines. XP, Vista, and now 7 all show that windows "themes" are hackey-hacks, not properly thought out or actually available to the user for customisation.

  • Why not make the group labels in on the ribbon buttons/links to the relevant dialogs? The tiny southeast-pointing arrow buttons that currently perform that function are far too easy to fail to see and hard to hit with the mouse.

    One of the objectives of the ribbon was to make the functionality of Office more "discoverable." Well, tiny, inscrutable buttons don't make the dialogs tucked behind them very discoverable. Nor does clicking on words like "Font," "Paragraph," and "Styles," as clicking there has no effect at all.

  • I believe that changing the default blue theme to a gray one was a great loss. The idea of focusing on the users work (for example, the document "paper" in word) is really wrong. By using a gray backgroung, I have the impression that this backgroung is almost part of the document, as it has a very light color and doesn't contrast with the paper, making the entire "thing" a gray and white screen.

  • I have read many of the comments and have my point where I agree, but the biggest of all is the icons.

    Many people have said that they seem like rip off of Adobe,qould be fine, if they looked good while doing it. These icons are really hideous.

    I have recently replaced the icons with 2007 ones just so I can open the application. Its really that bad.

    Please consider changing them back, because clearly your "reserach" into abstract icons and what we apparently want is WAY off.

    I just hope that you can fix this as otherwise the suite has been great for me.

  • I hunted this blog down, I knew this would be discussed somewhere.

    The new icons are awful. They look like they are something from when we could only have 16 color icons. Whoever decided it would be a god idea to use these icons, needs to look at the kinds of icons being produced elsewhere. They are not imaginative, stylish or well designed.  

  • To answer Tony's question above - our blog post covers WinOffice only and the MacOffice plans will be coming from MacBU at a later date.

  • I wont even waste my time saying in detail how bad this design is...  its the worst possible result from a company with the most resources.  truly insulting design

  • Love everything but the icons... im sure there is a way to get them back to the current version once installed. Otherwise- excellent release!

  • You often see this kind of write up in undergraduate art schools, a lot of bull trying to back up not very good design choices. It's impressive that Microsoft actually employs designers, but for whatever reason it appears they are forced into bad practices and poor directions. The UI for Office applications isn't refined, it's not exciting, there's no "WOW" factor anywhere. It's confusing and rather unrefined, as it always has been. While the effort to remove many of the unnecessary visual cues and banding is admirable, it's useless without a concerned effort to better organize the remaining elements and buttons.

    That said, the new branding for the applications is absolutely abysmal. The icons have gone from bad to worse in an effort to respond to user feedback. Icon design is a difficult task to get right so I'm not surprised there have been stumbles, but to make these mistakes the final drafts is a signifier of truly bad practices. Take a moment to consider the rather cryptic illustrations for each of these icons. What are they trying to say? I can barely discern Word, Powerpoint, and Outlook. Excel I get because of the X. Other than that, I can't tell which is which. Add to that the very confused nature of the typography and it's a full on disaster. The spacing isn't consistent, the letterforms are just plain ugly, and the gradients and strokes are unnecessary visual information.

    A better idea for Microsoft here would be to start over, from scratch, and come back to us with a new and more useful UI and consistent branding across the suite of applications.

  • Everything Microsoft has done from the begging has been an insult to design. From creating a bootleg version of Helvetica – Arial – in stead of paying the proper creative right for it, to trying to ruin apple, a company who truly understands the power of design.

    Microsoft has so much money to put behind fixing this, but it makes no difference, because they are too unsophisticated to understand the problem. That is why apple is constantly gaining market share.

    PS Microsoft is supposedly bootlegging another font – i believe it is frutiger – in this release.

  • Three icons prominently featuring the letter "P," distinguishable almost entirely only by color?

    I award you no points, and may God have mercy on your soul

  • As Office 2007 was an interface disaster, this one is no better. I couldnt care less if the Microsoft identity is visible in my app. I want i to be utmost functional. Period. Which 2007 and 2010 definitely are not. On a minilaptop too much screen is taken up wih a huge strip of blue blubber where most functions i regularly used in 2003 are hidden in all new places. I de-installed 2007 after a few days, for it has more problems. Many documents which we worked hard to make were unreadable in 2007. Pictures got black, thousands of hours would be lost using 2007. The workarounds were hilarious. Money wasted, a brand damaged even more.

    I really hate new applications (and their developers) who think for me. You would help many users by adding an 'old windows-view' option. Users can think and choose for themselves. Microsoft tends to forget those things a few times too often.

  • I, too, lament the loss of the clean, efficient, dependable functionality.  A number of months ago, I was so frustrated with Office 2007 running on Windows 7 (with a new Intel Core 2 Quad machine with all the bells and whistles) that I simply returned the entire computer for a refund (after trying a second one to confirm that my problems were due to software and not hardware issues).  Then, I immediately went back to my old machine: a dual Pentium III Xeon running Windows 2000 Advanced Server, running Office 2003.  

    Several days ago, while away from my desk, I needed to touch up a Word document on a friend's brand-new computer.  My document was created on Office 2003, but opening it in Office 2010 brought a steady stream of nightmares.  Somehow, a font was substituted (without my permission), and the entire documented was reformatted (again without my permission).  And, some figures were screwed up.  It would actually have been more efficient for me to hop into my car and drive 90 minutes back to the computer where I created the original document!

    Interestingly, my old dual P3 Xeon machine running Windows 2000 runs my Excel spreadsheets and Access databases FASTER than the shiny-new Windows 7 Core 2 Quad machine did!  And, the old machine is much more reliable than the Windows 7 one.  Friends of mine familiar with Windows 7 (and also Vista) agree that Windows 7 and Vista are inefficient and unreliable, especially when compared to Windows 2000.

    My old machine (Windows 2000) runs 3-4 years without rebooting...and when I do reboot it, it's only because I need to replace the batteries on the backup power supply (UPS).  In contrast, the aforementioned Windows 7 machine experienced 12 crashes (while I was using Office) in the brief period of time that I used it.  (After the 12th incident, I packed it up and immediately took it back for a refund.  They gave me another machine, also high-end and with the same software, and I had the same nightmares.  All the problems were software crashes...there were no hardware issues.)

    Keri, your write-up about how why Microsoft Office 2010 was redesigned (as 2007 was) with a new UI (user interface) completely ignores the fact that there are many people out there who have learned to use the existing versions of the software and who like things just the way they are.  While you do raise some good points, and while there will indeed be some people out there who fall in love with the new UI, you fail to make a cogent argument in favour of handcuffing every user to the new UI ribbon-based concept.  Why on earth can there not be an option for the user to simply switch back to the old user interface?  If such an option were given at the beginning (i.e. at installation or at first use), then the overhead dedicated to the new UI could be permanently deleted at that point.

    Another concern is the issue of efficiency.  It seems that each new iteration of software coming from that hallowed complex near Seattle makes greater and greater demands on the computer hardware.  Presumeably this is to induce the user to "upgrade" his/her hardware too.  What bothers me here is that the newest software versions seem to be wasting ever-increasing numbers of processor cycles.  In other words, for a given task (say, reformatting a given page of text in a given document), the number of calculations that need to be done by the CPU on a computer running Office 2007 on Windows 7 seems to be far greater than what would be needed if the exact same task were done on a machine running Office 2003 on Windows 2000.

    As someone who uses computers to model natural processes (groundwater flow), I demand maximum efficiency out of my computers.  That means I want the operating system (as well as all software loaded on the machine) to waste as few processor cycles as possible.  The fact that modern chips are faster than old ones does not make me any more willing to waste processor cycles.  Furthermore, wasted processor cycles equate to wasted electricity.

    Windows Vista was noted for its slowness.  Apparently, one reason for this slowness was the continual background execution of nebulous calculations for the sole purpose of guarding against the user making illegal copies of DVDs on the computer.  As someone who does not watch movies and has no interest in copying DVDs, I find such a waste of computing resources to be absolutely disgusting.  Given how Microsoft appears to be strongly motivated to bury "hidden calculations" in all its software, I guess it's not surprising that all of its newest software packages bog down so much.  What unwanted behind-the-scenes calculations is Office 2007/2010 doing while the user is anxiously awaiting a response to his/her command?

    And, of course, more-complex software means more opportunities for bugs to crop up.  For people like myself, who only use a portion of the features in Office 2003, why should I buy Office 2007 (whose added features would probably never be useful to me anyway)?  One thing is for sure: I deeply resent it when computers are sold packaged with Windows Vista or Windows 7.  Microsoft should be forced to continue indefinitely selling Windows XP (which was very good, especially when compared to Vista and 7), as well as supporting both Windows XP and Windows 2000 indefinitely.  For people who need maximum reliability, the only Microsoft OS that provided server-grade reliability and efficiency was the Windows 2000 Server Family.  Microsoft's announcement of discontinuance of Windows 2000 support really irks me.

    I think it's high time that the user interface and internal workings of widely-used computer software be standardized.  The auto industry has been doing this for many years: not only are the user interfaces of all cars essentially identical, but the mechanical workings (and thus the troubleshooting when problems arise) are generally quite similar across the various makes and models.  Can you imagine how a car would sell if the manufacturer arbitrarily decided to use a dashboard lever as a substitute for a gas pedal, a button on the rear bumper for the gearshift, and a knob on the windshield as an "improved" brake pedal?  And, can you imagine how such a car would handle, since it would have the engine on the roof, and it would have six wheels.  Computer software is no less indispensable than transportation, but for some unfathomable reason, such strange-car design absurdity is considered acceptable in the software realm.

    Could it be that Microsoft's impetus for continually launching reworked versions of its products is simply to keep its out-of-touch employees busy (and so a department head can have a nice project to add to his/her resume), and so that the firm can use planned obsolescence to get us to buy "upgrades" we really don't need?  Let's face it: software does not wear out.  Software is just a set of instructions for a computer to follow.  So, once you have a nicely-honed (and bug-free) piece of software that does everything the user needs, you theoretically could just keep selling it as it is.  (Of course, then "user experience designers" such as yourself might end up having too much free time.  Herein lies my point: I don't need my user experience to be designed by someone who poorly understands my priorities.  Microsoft needs to devote more staff to designing reliability and efficiency into its products, not interfaces.)  

    In my opinion, all the new software versions should run efficiently on all the computers dating back 10 years.  A good performance benchmark would be the standard Pentium III chip running at 1GHz.

    Maybe we need Google to come up with its own operating system and office-software suite.  Google already has its Linux-based operating system (which runs its millions of servers) and its online GoogleDocs.  All we need is this kind of functionality on an offline basis (so that I can use my computer to work on documents without any Internet connection, such as when I am gathering field data in a remote location with no Internet access).  In any case, I will probably be able to find what I want in the Linux, open-source realm.  Come to think of it, maybe the only thing that will make Microsoft listen is a mass migration to Linux.  And then, Microsoft's fancy Seattle headquarters could be converted into something useful, like a research university.

  • You need to tighten up the kerning between the "i" and the "c." Too much space in there.

    http://blogs.technet.com/blogfiles/office2010/WindowsLiveWriter/Office2010VisualsandBranding_BEDE/OfficeBrand_compare_2.png

  • Wow... I love Microsoft and I love Office.  But this is bad.  Truly.  It just looks like it was changed so the design department could look like it was doing something.

    I think the main logo is nice, but it seems kind of strange to get rid of the familiar, instantly-recognizable rainbow.  That doesn't affect me everyday though, so I don't much care.  But the application icons... horrible.  The 16x16 versions look better, but are still bad.  Don’t ask me how color blind people will differentiate between the 16x16 "P" icons though (of which there are three) which seem to only differ by color.

    The biggest problem though are the changes to the ribbon.  In Office 2007, the ribbon is absolutely brilliant.  It think it's one of the most creative, innovative, well-thought out designs by Microsoft in a long time.  After getting used to it, it most definitely DOES increase productivity.  I can't say enough good about it.  This new version is a step backwards.  The biggest sub-problem within the ribbon is you've removed minor button grouping.  Look at the bold/italic/underline buttons in the old version for instance; they’re very clearly grouped.  In the new version, they have a barely-visible divider.  For less obvious buttons, that’s a HUGE drawback because that was a visual cue as to which buttons relate.  It's also less obvious which tab is currently selected (due to lack of contrast).  I also prefer the big, circular Office button to the "File" menu, but I don't think that change will negatively affect my productivity like my other gripes (in other words, I don't like it, but I'll get used to it).

    Is there any chance these changes can be reconsidered?  Or, are they set in stone?

Page 3 of 6 (76 items) 12345»