Skip to main content link. Accesskey S
  • Help
  • IBM Logo
  • IBM Notes and Domino Application Development wiki
  • All Wikis
  • All Forums
  • THIS WIKI IS READ-ONLY. Learn more...
  • Home
  • Product Documentation
  • Community Articles
  • Learning Center
  • IBM Redbooks
  • API Documentation
Search
Community Articles > Designing Applications > Designing the User Experience > UX guidelines: Icon style
  • Share Show Menu▼
  • Subscribe Show Menu▼

About the Original Author

Click to view profileDeanna Drschiwiski
Contribution Summary:
  • Articles authored: 76
  • Articles edited: 227
  • Comments Posted: 8

Recent articles by this author

Getting started with XPages

Need help getting started with XPages? This guide provides links to overview content, videos, tutorials, and other content that will get you up to speed quickly.

XPages Domino Object Map 8.5.2

This topic contains a map of the domino objects contained in XPages.

Best practice to develop a good Notes application from the globalization perspective

This presentation shows the best practice to develop a good Notes application from the globalization perspective

Introducing of Domino Global WorkBench 8.5

This presentation shows how to localize Domino templates with Domino Global WorkBench 8.5

XPages Extensibility API Developers Guide

Welcome to the XPages Extensibility API Developers Guide; the Official Resource for Development using the XPages Extensibility API.
Community articleUX guidelines: Icon style
Added by Deanna Drschiwiski | Edited by IBM contributorDeanna Drschiwiski on November 2, 2009 | Version 5
  • Actions Show Menu▼
Rate this article 1 starsRate this article 2 starsRate this article 3 starsRate this article 4 starsRate this article 5 stars
expanded Abstract
collapsed Abstract
No abstract provided.
Tags: icons, action bar, toolbar, letterhead, stationary, lighting, size, states, views, shadow, glow
If you are creating new icons for the toolbar, action bar, stationery, letterhead, or any other part of the client, you must adhere to the following Icon style guidelines (see figure 1):

NOTE: These are general guidelines for a 16x16px icon; larger icons may require larger shadows, inner glow, and edge.

Lighting
Light Source: 120 degrees
Shadow: 120 degrees -- Black 20% black opacity, 0% size, 0 pixel spread
Inner Glow: 1 pixel
Edge: Gradient from top left to bottom right

Size Requirements
Toolbar: 16x16 png
Action bar: 18x18 gif
Tabs: 16x16 png
View Type: 12x10 gif
Status Bar: 12x10 gif
Letterhead: 65x65 gif

States
Hover: The hover effect is done programmatically on the background
Disabled: You need to provide a disabled effect. If you have Adobe Photoshop, then you can run an action. Specifically, put the “create disabled.png_18x18.atn file in your Adobe/Photoshop/Presets/Photoshop Actions folder and select this action when you run a batch on the files that you want to make disabled. It will overwrite the file, so ensure that you save the icons in a separate disabled folder before running the batch.

Figure 1. Summary of Icon style

See also:

Visual style.
Making your Lotus Notes application conform to the Notes 8 visual style.
Visual style for composite applications.


  • Actions Show Menu▼


expanded Attachments (0)
collapsed Attachments (0)
Edit the article to add or modify attachments.
expanded Versions (5)
collapsed Versions (5)
Version Comparison     
VersionDateChanged by              Summary of changes
This version (5)Nov 2, 2009, 3:43:04 AMDeanna Drschiwiski  IBM contributor
4Sep 15, 2008, 11:21:10 AMDeanna Drschiwiski  IBM contributor
3Sep 10, 2008, 8:49:49 PMDeanna Drschiwiski  IBM contributor
2Jul 21, 2008, 7:12:45 PMDeanna Drschiwiski  IBM contributor
1Jul 21, 2008, 7:04:33 PMDeanna Drschiwiski  IBM contributor
expanded Comments (0)
collapsed Comments (0)
Copy and paste this wiki markup to link to this article from another article in this wiki.
Go ElsewhereStay ConnectedHelpAbout
  • IBM Collaboration Solutions wikis
  • IBM developerWorks
  • IBM Software support
  • Twitter LinkIBMSocialBizUX on Twitter
  • FacebookIBMSocialBizUX on Facebook
  • ForumsLotus product forums
  • BlogsIBM Social Business UX blog
  • Community LinkThe Social Lounge
  • Wiki Help
  • Forgot user name/password
  • About the wiki
  • About IBM
  • Privacy
  • Accessibility
  • IBM Terms of use
  • Wiki terms of use