Guidelines about spacing and alignment of components

Authors: Jindrich Dinga
Date: 02/07/2006
Status: Draft

Content:

  1. Introduction
  2. Spacing
    1. Text Field
    2. Text Area or List
    3. List With Buttons
    4. Check Boxes
    5. Radio Buttons
    6. Toolbar Buttons
    7. Tabbed pane
    8. Dialog Spacing and Command Buttons
  3. Alignment
    1. Example 1
    2. Example 2
    3. Example 3
  4. Before and After
    1. Toolbar Buttons in Design Mode
    2. JMS Resources (EJB Module - Sun Resources - JMS Resource)
      1. General Attributes Step
      2. Properties Step
    3. New EJB Module - Name and Location Step
  5. Links to Relevant L&Fs
  6. Feedback

1. Introduction

Nowadays NB UI is getting more and more inconsistent, dialogs are using different spacing and components are not well aligned. Base on these issues, it was decided to create guidelines that help everyone with basic spacing and alignments in NB UI.

2. Spacing

Rules Java Look & Feel
Windows XP/Classic Metal/Gnome Aqua
Default system font size Small&Mini system font size
1. Between related components (e.g. between check boxes, radio buttons, text fields, text field and button, combo boxes, buttons, etc.) 4 DU 6 px 6 px 5 px
2. Between unrelated components (e.g. text fields, combo boxes, groups of radio buttons, groups of check boxes, etc.) leave at least 7 DU 12 px 12 px 8 px
3. Between text labels and their associated components



1. Text field and its label, combo box and its label, group of radio buttons and its label (it is valid for vertical and horizontal directions - same is valid also for group of check boxes and its label), etc. 3 DU 12 px 8 px 6 px
2. Text area and its label, list and its label 2 DU 3 px 4 px 3 px
3. Text area and its note, list and its note (note is situated below text area or list) 2 DU 6 px 6 px 5 px
4. Between toggle buttons, between toggle buttons and separator and between toggle buttons and their toolbar (valid for both directions - vertical and horizontal) 2 DU 3 px 3 px 3 px
5. Between separator and components 7 DU 12 px 12 px 8 px
6. Between command buttons (OK, Cancel, Help buttons) and last component 11 DU 18 px 16 px 12 px
7. Tabbed pane - maintain a consistent margin from



1. the top edge of the tabbed pane 7 DU 12 px 10 px 8 px
2. the left, right and bottom edge of the tabbed pane 7 DU 12 px 20 px 10 px
8. Dialog - maintain a consistent margin from



1. the top edge of the dialog 7 DU 12 px 14 px 10 px
2. the left and right edge of the dialog 7 DU 12 px 20 px 10 px
3. bottom edge of the dialog 7 DU 12 px 20 px 12 px

Note 1: In case a component has 3D effect (white 1 pixel line), subtract 1 px from right and bottom side of the component.

Note 2: The dialog units (DU) are count according to used font size, 1 DU is approximatelly 1.57 px for deafult font size.

2.1. Text Field

2.2. Text Area or List

2.3. List With Buttons

2.4. Check Boxes

Note: If a check box has a sub node (a component with label), leave 7 DU of space from check box name to the label of the sub node. If a component does not have a label (e.g. text field), align the beginning of the text field with beginning of the check box name (see figures below).

2.5. Radio Buttons

Note: If a radio button has a sub node (a component with label), leave 7 DU of space from radio button name to the label of the sub node. If a component does not have a label (e.g. text field), align the beginning of the text field with beginning of the radio button name (see figures below).

2.6. Toolbar Buttons

Note: This spacing does not apply to buttons in the main toolbar.

2.7. Tabbed Pane

2.8. Dialog Spacing and Command Buttons

3. Alignment

  1. Align all labels to the left.
  2. In the dialog, there is one visual group of components.
    1. Align all components according to the component with the longest label (Example 1, Example 3).
  3. In the dialog, there is more than one visual group of components (these groups are somehow visually distinguished, e.g. separator - New EJB Module).
    1. Introduce as many axes as visual groups (be sure the dialog does not look cluttered).
    2. Align all components according to the component with the longest label in every visual group.
  4. Special case is group of check boxes/radio buttons below label; this group of components has own axe even there is only one visual group of components in the dialog (Example 2).
  5. Another special case are standalone check boxes/radio buttons; these components are always aligned to the left in a visual group of components.

3.1. Example 1

3.2. Example 2

3.3. Example 3

4. Before and After

Following pictures are drawn in Java Look& Feel Windows XP only.

4.1. Toolbar Buttons in Design Mode

Before

After

 

 

 

4.2. JMS Resources (EJB Module - Sun Resources - JMS Resource)

4.2.1. General Attributes Step

Before


Note:
In "After" image, the spacing and alignment are fixed; wording, used components, etc. have stayed same - NOT fixed!


After

4.2.2. Properties Step

Before


Note:
In "After" image, the spacing and alignment are fixed; wording, used components, etc. have stayed same - NOT fixed!


After

4.3. New EJB Module - Name and Location Step

Before


Note: In "After" image, the spacing and alignment are fixed; wording, used components, etc. have stayed same - NOT fixed!


After

5. Links to Relevant L&Fs

  1. Windows L&F
  2. Metal L&F
  3. Gnome L&F
  4. Aqua L&F

6. Feedback

If you want to give us a feedback on these visual guidelines or you are missing something, please fill the following form.

Project Features

About this Project

ui was started in November 2009, is owned by Jiří Kovalský, and has 44 members.
By use of this website, you agree to the NetBeans Policies and Terms of Use (revision 20160708.bf2ac18). © 2014, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo
 
 
Close
loading
Please Confirm
Close