The Elements of Office Style

Today's Guest Writer: Howard Cooperstein

Howard
Cooperstein
is a Lead Program Manager in the PowerPoint and OfficeArt
group.

Last week I gave
an overview
of the new Office Themes capability. Thank you for all the great comments.
This week I'd like to show you what's inside an Office Theme and how that is
expressed in the user interface.

Driven to Abstraction. Each Office
application has unique formatting capabilities tailored to the document type it
creates. Word Text Styles, PowerPoint Slide Masters and Excel Cell Styles
do similar things in very different ways. Office Themes are able to work
across different applications by including design information abstract enough it
can be applied to a variety of formatting situations. The Theme
colors, fonts and graphic effects are like a list of formatting ingredients and
each Quick Style like a recipe.

We didn't start off with an abstract approach. We tried,
for example, to put specific text styles into Themes but quickly ran into roadblocks.
PowerPoint uses large text, sometimes lightly colored on a dark
background. Word uses smaller, dark text almost always on a white
background. As we looked at each object to be styled we ran into similar
issues. Ultimately we ended up with a model that was simpler and
more compact than we expected. With Office Themes a small amount of
XML goes a long way.

To come up with the Office Theme components we asked graphic
designers to show us how great looking documents are constructed. We
learned the guidelines for type and color usage. They showed us how they
construct cool graphics in Adobe Photoshop. All of this was distilled into the
font, color and effect "scheme" models. We also looked at existing
theme-like features in Publisher and PowerPoint as starting points.

For the user interface of theme-based formatting we had two
challenges. First, we had to account for the user tendency to override
default formatting. Usually users do this because they don't see good
looking, easy formatting options. We had to strike a balance between
providing "themed" choices and allowing the full freedom users have always had
in Office. Second, we had to fill the galleries with a range of
choices that still followed the same theme. Quick Style choices need to
span individual user tastes as well as the divergent requirements of
presentations, documents and spreadsheets.

So let's look at the Theme Fonts, Colors and Effects.

Theme Fonts. Document designers told us
using a single font face for a whole document is always a tasteful design
choice. Two fonts is also a great choice when used carefully for contrast.
Our font scheme contains just two font slots. One for Headings. One
for Body Text. They can be the same font or two different ones. Each
application constructs their default text styles using these fonts.
The result is you are creating themed text simply by typing into an Office
document, even an Excel Cell. Word, PowerPoint and Excel all have
Quick Styles galleries on their main ribbon that leverage the font scheme.
In addition the Font Picker has been updated to communicate the current theme
fonts.

Theme Colors. Our new color scheme
model is designed to work with any document. That means it has to handle
both light and dark backgrounds. There are visibility rules built in such
that you can switch colors at any time and all content will remain legible with
all color relationships in tact.

There are twelve color slots. The first four are for
text and backgrounds. Text created with the light colors will always be
legible over the dark colors and vice versa. There are six accent colors
which are always visible over the four potential background colors. The
last two slots, not shown, are reserved for Hyperlinks and Followed Hyperlinks.

The Theme Colors are presented in every color picker along
with a set of tints and shades based on those colors. (Jensen discussed
the new color picker in a
recent
post
.) By selecting colors from this expanded, matched set
the user can make direct formatting choices for individual pieces of content
that will still follow the theme. When the Theme Colors change, the color
picker changes and so does all document content using them.

Theme Effects. This is where real theme
magic happens. In the 2007 Office System, Word, PowerPoint and Excel all
use the OfficeArt 2.0 graphics platform. The new graphics engine can
generate Photoshop-style effects on charts, diagrams, shapes, pictures and in
PowerPoint on tables and text. If you've used Photoshop you know it takes
skill and time to make good looking things. We asked our graphic
designers to explain their system for doing that. For a set of related
graphics they specify "stroke," "tone," and "depth." (Translation: line,
fill and shadow/3-D, respectively.) By combining these three
formatting dimensions together you can generate visuals that all match the same
"graphic scheme," which we call Theme Effects. In every
Office Theme there is an "effect matrix" with three style levels of line, fill
and special effects. Here's the Office Default effect matrix:

Each theme has a different effect scheme giving it a different
"feel." One may have a metallic look while another may look like
frosted glass. It's all in the Matrix, Neo.

All Together Now. When
the Theme Fonts, Colors, and Effects are combined together and presented in a
gallery the results are powerful. A single click of a gallery cell
communicates hundreds of settings carefully worked out by a graphic designer.

Everything you've seen above is from a single theme. In
the next post I'll explain the easy customization UI for themes that let's you
create a look that's uniquely yours.