UI Elements

UI Elements

In a graphical user interface ( GUI ), an icon is an image that represents an application, an action, or some message with meaning for the user.

In a graphical user interface ( GUI ), an icon is an image that represents an application, an action, or some message with meaning for the user.

4.2.1 Guideline

Guideline listed as below need to be taken care.

  • An icon is usually selectable but can also be a non- selectable image. Selectable icon will always be with placeholder while non-selectable icon can have placeholder and can not be.
  • In Icons with placeholder, placeholder can have background White(#ffffff)  or LighterGray(#f6f6f6)  . Icon can be placed in placeholder sizes 45PX, 40PX & 38PX as shown in the Fig 4.2.1a
  • Various sizes of icons are defined as 16px, 24px, 32px, 48px & 64px. Only these sizes need to be used.
  • Do not the scale icons, pick the correct size as all required size are defined, if need to create a icon generate a new set of icon in each defined size with pixel perfect sharpness.
  • Selectable Icon can have color NavyBlue(#120e5b)  , SkyBlue(#2991d6)   while non-selectable icon will have color DarkGray(#5c5c5c)  . Reverse (white) can also be used.
  • Validation & message icons can be used in their respective color as described in the design philosophy section 3.7 & as shown in Fig 4.2.1b.
  • For mobile application minimum size of the icon will be 16px.
  • Icon with size 24px mainly will be used in OPS toolbar. While 24PX/32PX icon can be used web as to show the sub navigation as a sticky in left sidebar.
  • 48PX/64PX icons can be used in the Dashboard design.
Icon Placeholder
Fig 4.2.1a Different Parameter for icon placeholder
Types of Validation
Fig 4.2.1b Icons for different types of validation.
Size for icons
Fig 4.2.1c Different Sizes for icons

4.2.2 Usage

Listed below are different usage for the set of icons and its color.

  • Icon can be used in panel heading to show application specific actions. Can also be used with heading title.
  • Icon can also be used in the table to show grid specific actions, Icons can also be used in the form control.
  • Non-selectable icons can be used in the dialog popup near by title in the heading of the popup.
  • Icon can be used in user dashbord. Also can be used in the sticky sidebar & in toolbar in OPS.
  • Icon can also be used in the textfield, select menu, icons used in such element will have 8PX size.

Copyright © 2015 DP World. All rights reserved.