Difference between revisions of "UI Graphics : Design : Consistency"

From Eclipsepedia

Jump to: navigation, search
m (Core elements)
m
 
(4 intermediate revisions by one user not shown)
Line 1: Line 1:
Return to the main '''[[UI_Best_Practices_v3.x#UI_Graphics|UI Graphics]]''' section on the UI Best Practices page.
+
Return to the main '''[[User Interface Guidelines#UI Graphics (3.x Updates)|UI Graphics (3.x Updates)]]''' section on the UI Best Practices page.
  
  
Line 7: Line 7:
  
 
In order to ensure a consistent visual experience, a common understanding of concepts across the tools, and to minimize confusion, we encourage you to re-use Eclipse-style graphical elements whenever possible.
 
In order to ensure a consistent visual experience, a common understanding of concepts across the tools, and to minimize confusion, we encourage you to re-use Eclipse-style graphical elements whenever possible.
Re-using graphical elements
+
 
 +
 
 +
== Re-using graphical elements ==
  
 
A great many icons and wizard graphics have already been created in the Eclipse visual style, so there is a good chance that the elements you might need already exist. Samples of existing core concepts for icons and wizard graphics are shown below. Each of these elements carries with it a specific meaning, so care should be taken when using them to ensure consistent meaning is maintained. A more extensive collection of common visual elements can be found on the Common Elements page.
 
A great many icons and wizard graphics have already been created in the Eclipse visual style, so there is a good chance that the elements you might need already exist. Samples of existing core concepts for icons and wizard graphics are shown below. Each of these elements carries with it a specific meaning, so care should be taken when using them to ensure consistent meaning is maintained. A more extensive collection of common visual elements can be found on the Common Elements page.
  
  
== Core icon concepts ==
+
=== Core icon concepts ===
 
[[Image:des_cons_core-icons.gif]]
 
[[Image:des_cons_core-icons.gif]]
  
Line 18: Line 20:
  
  
== Core wizard graphic concepts ==
+
=== Core wizard graphic concepts ===
 
[[Image:des_cons_core-wiz.gif]]
 
[[Image:des_cons_core-wiz.gif]]
  
 
Click [[Media:core_wizard_concepts.zip | '''here''']] or on the image above to download the "core_wizard_concepts.ai" and the "core_wizard_concepts.psd" files.
 
Click [[Media:core_wizard_concepts.zip | '''here''']] or on the image above to download the "core_wizard_concepts.ai" and the "core_wizard_concepts.psd" files.
 +
 +
 +
== Checklist ==
 +
 +
[[Image:guidelineIndicator.gif]] '''<font color="#09448d"> Guideline 2.1</font>'''
 +
 +
<blockquote><font color="#09448d">Re-use the core visual concepts to maintain consistent representation and meaning across Eclipse plug-ins.</font></blockquote>
 +
 +
[[Category:UI_Guidelines]]

Latest revision as of 19:37, 18 August 2008

Return to the main UI Graphics (3.x Updates) section on the UI Best Practices page.


This section encourages consistency and reuse of existing graphical elements by providing the core icon and wizard concepts currently in the tools.

In the development of the Eclipse style graphical elements, a visual language was formed to describe a variety of concepts in the user interface. These concepts are now represented by a large selection of tiny visual signs that many have come to know through using Eclipse-based tools.

In order to ensure a consistent visual experience, a common understanding of concepts across the tools, and to minimize confusion, we encourage you to re-use Eclipse-style graphical elements whenever possible.


Contents

[edit] Re-using graphical elements

A great many icons and wizard graphics have already been created in the Eclipse visual style, so there is a good chance that the elements you might need already exist. Samples of existing core concepts for icons and wizard graphics are shown below. Each of these elements carries with it a specific meaning, so care should be taken when using them to ensure consistent meaning is maintained. A more extensive collection of common visual elements can be found on the Common Elements page.


[edit] Core icon concepts

Des cons core-icons.gif

Click here or on the image above to download the "core_icon_concepts.psd".


[edit] Core wizard graphic concepts

Des cons core-wiz.gif

Click here or on the image above to download the "core_wizard_concepts.ai" and the "core_wizard_concepts.psd" files.


[edit] Checklist

GuidelineIndicator.gif Guideline 2.1

Re-use the core visual concepts to maintain consistent representation and meaning across Eclipse plug-ins.