I designed my first graphical user interface at 7 years old.
I sat in front of my favorite science fiction television programs, fascinated by elaborate, flashing computer screens that winked and beeped and even spoke! Soon after I'd set to work, creating my own computer terminals out of upturned cardboard boxes. Coloring interface graphics on them with crayon and marker, I paid special attention designing these graphics specifically for the person or strange extraterrestrial that would operate them. My crowning achievement was my navigational interface for an eight-armed, 24-fingered alien creature I dubbed the "Octopedian."
I haven't really changed much since then.
The graphics in the R5 templates and those that are peppered throughout the Notes client have little to do with cardboard boxes and colored markers, but they have one thing in common, they are designed with the user in mind. The job of creating a graphic style that could be carried throughout the Notes client was a challenging one. The style needed to be distinct and simple enough to be easily duplicated throughout all templates, without creating a memory problem or dooming the client to a huge install file. Finally, Notes was getting a face lift, as this is the most ambitious release to date.
This article introduces you to the new graphics included across R5 in Notes, Domino, and Domino Designer. We'll first look at the goals behind the new graphic look, and then walk through the specific graphic elements. Finally, we'll cover some tips for creating your own graphics. You can download R5 to see the graphics for yourself.
For best results, these graphics should be viewed in R5 with at least 32k colors at 800 X 600 pixels. Although the graphics have been optimized for a monitor setting of 256 colors, the subtle shading in some of the photographic image graphics will cause them to dither.
The goals and inspiration for R5 graphics
Until recently, computer technology was not up to the task of displaying complex graphics with any degree of efficiency. Complex borders and carefully shaded background graphics were usually reserved for games or other memory-intensive applications. A great deal has changed in just a few short years, and we're now taking advantage of the new capabilities in R5.
During the early conceptual phase of our R5 development, we began hammering out exactly what we wanted to accomplish with the new visual style. In general, we hoped to create a simple, uncluttered look that could be easily rendered, yet appear distinctive enough to be recognized as a new interface. We developed the following goals for the new graphic look:
- Usability -- The graphics should enhance, not interfere with, the usability of the product. The main consideration! For example, the graphics should guide users along their tasks.
- Interoperability -- The main interface of the Notes client and the template graphics should use similar elements, and not compete with each other. For example, the colors in the main client interface are subtle and muted, so they do not compete with the work area of the templates.
- Use of color -- The graphics should use color wisely, and not unnecessarily. For example, we use color to attract the user's attention to important elements, such as highlighting the actions in the action bar. Each template "family" uses a different theme color.
- Simplicity -- The majority of the interface should have a flat, simple look. For example, we keep the window details to a minimum.
Our R5 visual style evolved from these goals, and became affectionately known within Iris as the "bold graphic style." The inspiration for this style came from two unlikely sources -- architecture and abstract impressionism. The architecture part came from the Arts & Crafts style of architecture made famous by Frank Lloyd Wright at the turn of the century. Wright's stained glass windows, with their flat panels of color separated by thick, bold frames answered many of the requirements we were looking for in a simple style:
We also found further inspiration in the abstract paintings of Piet Mondrian, who again used the theme of flat areas of color divided by bold frames:
The following screen shows how we applied these concepts to the framesets that structure the R5 templates. Notice that bold black lines replace the beveled frame border used in R4.x templates. Also, notice that flat areas of color now appear in the header region, action bar, and if applicable, switcher frames. Finally, we added photographic elements in the left frame to add a sense of depth to our R5 style:
An introduction to the template families
Because R5 includes dozens of templates, we needed a way to apply our graphic style without having dozens of variations. We decided to group the templates into three categories: client, productivity, and system templates. This way, each "family" could share a common look-and-feel.
Client templates
These templates are for the core applications that Notes users use daily, such as:
- Mail
- Journal
- Bookmarks
- Personal Web Navigator
The "theme color" of the client templates is green, as shown here:
Productivity templates
These templates are for the "groupware" features of Notes, such as:
- TeamRoom
- Discussion
- Document Library
- Archive Log
The "theme color" of the productivity templates is orange, as shown here:
System templates
These templates are for the core Domino administration features, such as:
- Domino Directory
- Directory Catalog
- Directory Assistance
- Statistics and Events
- Search Site
- Web Administrator
The "theme color" of the system templates is purple, as shown here:
Touring the graphics in the R5 templates
Now, let's look at how we applied our graphic style in the templates. You'll notice that the templates use the new Domino Designer R5 features, such as framesets, outlines, and more.
Framesets
Perhaps the most defining element of our new style is the frameset. In the R5 templates, they mark a departure from the usual three-dimensional, grey ridges associated with framesets. Bold, black lines clearly and cleanly define the parameters of each frame. We also use these bold lines in some templates outside the context of the frameset. For example, in the Memo form of the Mail template, we use bold lines to separate areas of the form:
You can emulate this style by using the new Frameset Designer in Designer R5. For more information on framesets, see the article "Domino Designer R5: Framesets."
Action bars
In R4.x, the action bar always appeared at the top of the template or database. Its color blended in with the client, so users couldn't tell that the action bar items were important. Now, we've moved the action bar directly above the view pane, making it a part of the frameset. In addition, we applied the template's theme color to the action bar. This makes the action bar items very clear in their function and in their association with the template or database. As shown here in the action bar for the Notes R5 mail template, we also kept the color for the action bar flat, bereft of fancy fades or gradients:
Although Domino Designer R5 gives you a lot of flexibility in adding background images and graphical effects to action bars, we chose to keep things simple. The action buttons themselves are clean and simple icons, contained in circles to contrast the linear edges of the frameset. We do not include color in the button graphics because we use them across all the templates. In addition, we gain other benefits from using monochromatic action icons: savings in file size, user customizability, and a consistent action button language throughout the templates.
Outline controls
The Outline control is the main way for users to navigate through any Notes R5 application. The template name is visible in a frame directly above the outline control in a clear, Sans Serif font. We added appropriately themed photographic images as backgrounds, which could be visual landmarks for users helping them to recognize templates "at a glance." The photographic images (GIFs) are intentionally lighter and somewhat blurry in places, so as not to compete or obscure the folder names that may appear over them, as shown here in the Outline control for the Notes R5 mail template:
We adjusted the size of the images to accommodate larger or higher resolution monitors. This way, we keep the bottom portion of the Outline control filled, even for larger monitors. For more information on designing outlines, see the article "Domino Designer R5: The Outline Designer."
Switcher control
The Mail, Calendar, and To Do features all reside in a single template -- the Mail template. To switch among these different features, you can use a switcher control located at the bottom of the Outline control. We added a similar switcher control to the Personal Address Book database, which allows you to move between simple and advanced functions. Above the switcher control is a black band displaying the user's name:
Wizards
You generally use wizards to walk users through complex tasks. The graphics in these wizards must be equally easy-to-understand, as well as dynamic. Answering this challenge, the R5 wizards use full-color graphics, rather than the monochromatic ones found in the templates. This is done to promote the clarity of the images and differentiate the wizard dialog box from the template or database. Using a template's theme color in a wizard graphic might create a false sense of still being in the template, rather than a wizard. The graphics in most wizard dialog boxes are self contained, residing to the left of the task-oriented instructions, as shown here in the Connection Configuration wizard:
Other miscellaneous enhancements
Many other areas exist in the Notes client that contain similar graphical treatments. Some forms and dialogs boxes contain backgrounds, which follow the same rules of thematic color and value used in the Outline control. The same can be said of the tabbed table header regions, such as the one shown below from the Personal Address Book, which feature photographic collages:
The adaptive palette solution
One of the challenges we faced in creating high-quality graphics for R5 was the 256-color palette. Although many users have 32k colors or more available on their computers, we needed to assure the best possible look for computers displaying only 256 colors. However, if the graphics were designed in only 256 colors, higher resolution systems would not benefit. Additionally, creating higher resolution graphics was not an option as they are much bigger in file size. The question became how to create graphics that looked great at 256 colors, gained resolution according to the individual computer's color settings, and had an acceptable file size.
The answer is the adaptive palette. An adaptive palette is a special way of saving the image in its native colors, rather than converting it to a predetermined palette. We saved the images we created in Photoshop as GIF files in the adaptive palette. That way, Notes can display the graphics according to the individual computer settings.
The results are impressive. At 32k colors, the adaptive palette graphics are of near photographic quality with little or no dithering. As an added bonus, the file sizes are easily manageable. Here's an example -- the image on the left has been saved in an adaptive palette, and the image on the right appears in the Notes 256-color palette:
For more information on color palettes, check out the Adobe Magazine article, The Discriminating Color Palette, and the ZDNet article, "Web Color Wizardry."
Tips for creating your own graphics
Creating graphics for your own database or template is an individual process that garners many different interpretations. Barring individual style, you can create beautiful templates within our "Bold Graphic Style" by doing the following:
- Keep it simple. Although you may need elaborate graphics in your database, you should not obscure the general functions of the database. A few simple icons and graphics can go long way.
- Select a limited palette of colors. Using many colors simultaneously can become confusing and in the end, ugly. Select three or four colors at the most, and choose light and dark colors for contrast. Assign each color a "job," for example, background color, text color, accent color, and so on. Try to select colors in a similar hue or temperature. For example, choose different shades of blue or colors that can all be considered "warm," such as shades of red, tan, and yellow.
- Consider the placement of your graphics. Make sure that text, folders or other user-defined variables will not interfere with your graphic, and that your graphic is friendly to these types of things.
- Consider the different resolutions at which your graphics will be viewed. Your graphics will be seen by many people; keep in mind that each person will probably have a different monitor setting. Create a background or other graphic at the size it would need to be to accommodate the largest monitor or resolution. Make sure that areas of the graphic hold some interest at lower resolutions when the larger whole gets "clipped" by smaller or lower resolution monitors.
In Conclusion...
The graphic style of R5 is one that we feel works well with the product. Although styles and trends may change, we hope that this new look of R5 will stand the test of time, without appearing dated or tired after a year or two.
Meanwhile, I need to get started creating graphics for the next big Notes release. Once again, I'll return to basics. If anyone needs me, I'll be in my office with some markers and cardboard boxes.
ABOUT THE AUTHOR
Ken Tango has been a Graphic Designer at Iris since March of 1998. He is responsible for the general layout, graphics, and icons in the templates. However, his work has creeped its way into other areas of Notes and Domino. When he's not pushing pixels, Ken is speeding home to tape the latest episode of Star Trek.