Office 2010: Visuals and Branding

    Office 2010: Visuals and Branding


    Posted: 14 Dec 2009
    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.

     
    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.



    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.


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



    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.

     

    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.



    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.



    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.





    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.

     

    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.

    More...
    z3r010's Avatar Posted By: z3r010
    14 Dec 2009



  1. Posts : 5,807
    Windows 7 Home Premium x64 - Mac OS X 10.6.4 x64
       #1

    Even thought this is the best looking and working Office to date (in my opininon)...I still think that the Office logo should be of the four colors.

    Not only did that emphaize the core apps of Office (Word, Excel, Powerpoint, Outlook) but it also draws a connection to Windows
      My Computer


  2. Posts : 302
    Windows 7 RTM x64
       #2

    Microsoft started to make something really good with the seven and they continue that with office 2010.
    It is almost perfect. Seems like the competition steers them to the right direction. I really like both of them.
      My Computer


  3. Posts : 383
    Black Label 7 x64
       #3

    Zidane24 said:
    Even thought this is the best looking and working Office to date (in my opininon)...I still think that the Office logo should be of the four colors.

    Not only did that emphaize the core apps of Office (Word, Excel, Powerpoint, Outlook) but it also draws a connection to Windows
    I don't mind not going back to the same 4 colors, but I think they should have used something more vivid. The orange-yellowish logo is thin and anemic, like it was a logo for a prescription antidepressant.
      My Computer


  4. Posts : 434
    7 x64/ Back-Track 4
       #4

    Colonel Travis said:
    Zidane24 said:
    Even thought this is the best looking and working Office to date (in my opininon)...I still think that the Office logo should be of the four colors.

    Not only did that emphaize the core apps of Office (Word, Excel, Powerpoint, Outlook) but it also draws a connection to Windows
    I don't mind not going back to the same 4 colors, but I think they should have used something more vivid. The orange-yellowish logo is thin and anemic, like it was a logo for a prescription antidepressant.
    Lol. I think they should've done something completly out-there. Like with the vista Orb, it was soooo out there, and now its been accepted and adapted to Windows 7. They need to be much more creative with their logos
      My Computer


  5. Posts : 31
    Windows 7 Professional x64
       #5

    Zidane24 said:
    Even thought this is the best looking and working Office to date (in my opininon)...I still think that the Office logo should be of the four colors.

    Not only did that emphaize the core apps of Office (Word, Excel, Powerpoint, Outlook) but it also draws a connection to Windows

    Totally agree with all of your sentiments...

    The apps themselves are a credit to microsoft, but the logo seems to have taken a couple of steps backwards. I'm also not a big fan of the big 'file' tab - this was much neater looking when it was a logo. I mean really if people can't find the file tab / office button then they really don't deserve to get to the backstage anyway
      My Computer


  6. Posts : 24
    7 Home Premium 64-bit
       #6

    Meh, looks to me like they've spent their time, which we pay for in purchase, on pretty features we don't need. I didn't notice a single new feature there, outside of the UI. :/ Have Microsoft finally exhausted all they can do? I know this report is UI focused, but nothing looks new.

    I think the correct route for Microsoft is a Suite style Application.. I know many will disagree, but just my personal opinion using Microsoft Applications mainly for school work, ICT GCSE stuff, and my dad's website. Many times I've thought "if only I could put this into there" etc.

    I know Microsoft have some small functionality of placing them into each other, mainly Excel into Powerpoint and Word. I just feel that full functionality to swap between programmes while open would be fantastic. If people don't want to use it, nothing will make them, they can just use one programme and not utilise the Application switching provided by a Suite style system.

    The thing that's really confusing me is that many of these features could be well utilised in a suite system. For example, the colour coded File tab, just in case someone doesn't know what programme they're in. I'm fairly certain that people don't open Word, and then wonder what programme they're in, I mean the features (and the title in the taskbar) kind of give it away. If people do forget that, I am doubtful that they will recognise a colour and relate it to the App. However, in a suite style system this could be very helpful as you are going to be possibly moving through programmes.

    A lot of the philosophy detailed in the report also supports a suite style system. For example, "consistency throughout platforms" would undoubtedly be solved by a suite system. The alphabet system, with some modification could also be very useful in a suite, a pre-configured set of keys, plus the alphabet key could switch the file through to the programme it relates to. For example, Alt+Shift+W could switch to Microsoft Word. :)

    Well, this comment is probably biased towards the UI side of things - I seriously grudge paying for what I consider to be a graphical upgrade. I do honestly believe Microsoft would do fantastically well with a suite system, though - and I really hope to see some new features in this that actually make it worth paying for. I'd rather have an ugly and plain splash screen and a cheaper programme, or more features packed in. :)
      My Computer


  7. Posts : 1,030
    Linux Mint / XP / Win7 Home, Pro, Ultimate / Win8.1 / Win10
       #7

    As a technical writer using MS Office 90% of the time, I can state that the Office 2003 isn't as productive as Office 97 and the Office 2007 toolbar has seriously HURT my productivity. The older versions actually worked better re: screen position,realestate, keystrokes, mouse clicks. And Office 97 was actually better to use (for line of work) than later versions when it comes to opening and editing multiple documents at once. My professional peers are of the same opinion so it's not just me.

    For "power users" of Word, Office 2007 fails miserably. Looks like 2010 will follow the same way. Sigh...

    Regards,
    GEWB
      My Computer


 

  Related Discussions
Our Sites
Site Links
About Us
Windows 7 Forums is an independent web site and has not been authorized, sponsored, or otherwise approved by Microsoft Corporation. "Windows 7" and related materials are trademarks of Microsoft Corp.

© Designer Media Ltd
All times are GMT -5. The time now is 05:29.
Find Us