This chapter is from the book
This chapter is from the book
This chapter is from the book
Visual Themes
The visual theme determines the look and feel of the gadget. Visual theme is about images, text, fonts, colors, sizes, and styles—everything together. It is all about what users see and also what they don't see. They all work together to present a unified theme to a user. Here is the list of items to consider when developing a theme for your gadget:
- Title
- Icon
- Drag image
- Background image
- Controls
- Text and style
A gadget's visual theme starts at its icon and title, which appear in the Gadget Picker window after installation.
Title
Keep the gadget's title to two or three meaningful words, 15 letters maximum, so that it displays properly in the Gadget Picker. For example, for a Google Search Gadget, use the title "Google Search" rather than "Google.com Search bar." Figure 3.23 shows two gadgets in the Gadget Picker window. The first one has the name "Currency" and the second one is called "MyMoneyGadget," which displays as "MyMoneyGad...." You can avoid this undesirable result by keeping the title short.
)
Figure 3.23 To avoid turning off potential users from the start, gadgets should have an attractive icon and short title.
Icon
A transparent icon gives a rich look. The icon.png file is an image file whose dimensions are 64×64. Figure 3.23 shows two versions of a gadget that compares different currencies of the world. The left image uses a meaningful title and an attractive icon. The right image, MyMoneyGadget, is not a meaningful title and the icon is very crude. This is not a good design.
Drag Image
The drag image appears when you try to drag an image from the Gadget Picker window to the Vista Sidebar. The source of the drag image is drag.png. It's meant to show the screenshot of the actual working gadget in its docked size (see Figure 3.24).
)
Figure 3.24 When a clock gadget is dragged in the Gadget Picker window, it shows the drag.png image.
Background Image
The gadget's background image is the wallpaper for the gadget. It is normally a plain image with rounded curves. The image is selected based on the gadget's functionality. An image of a world map for a Currency Gadget, for example, is appropriate (see Figure 3.25). Multiple images are used for the gadget for different modes, like docked and undocked. The images used can also be different for different sizes of the gadget.
)
Figure 3.25 A Currency Gadget uses different images to display the gadget's background in different sizes.
When the gadget is docked, the image should have a shadow of 2 pixels on the left and 3 pixels on the right. When the image is undocked, the shadow should be more prominent—10 pixels to the left and 18 pixels to the right.
You can add the shadow to an image by using photo-editing software or the graphics protocol provided by the Vista Gadget Model. A black shadow with an opacity level 25% can be used for the docked image for a two-three-pixel shadow, and an opacity value of 75% can be used for a 10-pixel shadow in images for undocked gadgets.
Controls
For any controls or action buttons that need to appear on the gadget, only the glyph images consistent with Windows should be used. Figure 3.26 shows a number of these glyphs with possible actions they can each represent. If the action buttons need to be shown in the gadget's main window, always try to keep them hidden by default and have them activate only on mouse hover or when the gadget is active. All these glyph images can be found in the Extras section in the book download.
)
Figure 3.26 The glyph images that are consistent with the Windows Vista user interface should be used in the gadget.
Figure 3.27 shows an example of a gadget with controls that are hidden until the user hovers the mouse over the gadget.
)
Figure 3.27 The Notes Gadget by default (left image) does not show the action buttons. When the mouse is moved on the Notes Gadget (image on the right), the action buttons are visible.
Text and Style
The fonts and the styles used to format text in the gadget are also very important while designing a gadget. The style sheet is a language used to describe the presentation of an HTML page. A gadget can use multiple sStyle sheets for different pages of the gadget window, such as the settings page and the flyout page. The style sheet and font you should use depend on the gadget's functionality and theme, and can vary with different gadgets. Here is a link that can further help you understand HTML and CSS: http://www.w3.org/Style/Examples/011/firstcss.
Here is some of the standard style information as applied to the different pages. These styles help the gadget to display a consistent look with Windows Vista.
For the gadget window
Font: Calibri or Segoe UI
Style:
body
{
margin: 0px;
padding: 0px;
color: #000;
font-family: Calibri, Tahoma, sans-serif;
}
For the settings window
Font: Segoe UI
Style:
body
{
padding: 0;
margin: 0px;
font-family: Segoe UI, Tahoma, sans-serif;
font-size:12px;
}
For the flyout
Font: Calibri
Style:
body
{
margin: 0px;
padding: 0px;
color: #ffffff;
font-size: 10px;
font-family: Calibri, Tahoma, sans-serif;
}