gnome-devel-docs r587 - in trunk/hig: . C C/images

From: calum svn gnome org
To: svn-commits-list gnome org
Subject: gnome-devel-docs r587 - in trunk/hig: . C C/images
Date: Wed, 24 Sep 2008 14:40:44 +0000 (UTC)
Author: calum
Date: Wed Sep 24 14:40:44 2008
New Revision: 587
URL: http://svn.gnome.org/viewvc/gnome-devel-docs?rev=587&view=rev

Log:
Update images in Designing Effective Icons section.



Added:
   trunk/hig/C/images/icons-evolution.png
      - copied unchanged from r585, /trunk/hig/C/images/evolution-icon.png
   trunk/hig/C/images/icons-font-selection-good.png
      - copied unchanged from r585, /trunk/hig/C/images/fontsel-suggestion.png
   trunk/hig/C/images/icons-font-selection-poor.png
      - copied unchanged from r585, /trunk/hig/C/images/fontsel-icon.png
   trunk/hig/C/images/icons-gnumeric.png
      - copied unchanged from r585, /trunk/hig/C/images/gnumeric-icon.png
   trunk/hig/C/images/icons-nautilus.png
      - copied unchanged from r585, /trunk/hig/C/images/nautilus-icon.png
   trunk/hig/C/images/icons-shut-down.png
      - copied unchanged from r585, /trunk/hig/C/images/shutdown-icon.png
   trunk/hig/C/images/icons-silhouette.png
      - copied unchanged from r586, /trunk/hig/C/images/toolbar-silhouette.png
   trunk/hig/C/images/icons-sodipodi.png
      - copied unchanged from r585, /trunk/hig/C/images/sodipodi-icon.png
   trunk/hig/C/images/icons-system-log.png
      - copied unchanged from r585, /trunk/hig/C/images/log-icon.png
Removed:
   trunk/hig/C/images/evolution-icon.png
   trunk/hig/C/images/fontsel-icon.png
   trunk/hig/C/images/fontsel-suggestion.png
   trunk/hig/C/images/gnumeric-icon.png
   trunk/hig/C/images/log-icon.png
   trunk/hig/C/images/nautilus-icon.png
   trunk/hig/C/images/shutdown-icon.png
   trunk/hig/C/images/sodipodi-icon.png
   trunk/hig/C/images/toolbar-silhouette.png
Modified:
   trunk/hig/C/hig-ch-icons.xml
   trunk/hig/ChangeLog
   trunk/hig/Makefile.am

Modified: trunk/hig/C/hig-ch-icons.xml
==============================================================================
--- trunk/hig/C/hig-ch-icons.xml	(original)
+++ trunk/hig/C/hig-ch-icons.xml	Wed Sep 24 14:40:44 2008
@@ -245,11 +245,11 @@
 	  <para>It is important to make it easy to visually distinguish icons that will be used together, for example toolbar icons and document icons. The human visual system is excellent at making rapid distinctions between items based on shape, thus a good way to help your users sort through a large number of icons is to use different shapes. You can see the shape of an icon most clearly by turning it into a silhouette: blacken all areas of the icon which are not transparent.</para>
 	</formalpara>
 	<example>
-	  <title>Distinct silhouettes from the Nautilus Crux theme</title>
+	  <title>Distinct silhouettes from the GNOME icon theme</title>
 	  <mediaobject>
-	    <imageobject><imagedata fileref="images/toolbar-silhouette.png" format="PNG"/></imageobject>
-	    <imageobject><imagedata fileref="images/toolbar-silhouette.eps" format="EPS"/></imageobject>
-	    <textobject><phrase>Silhouettes of the various toolbar icons</phrase></textobject>
+	    <imageobject><imagedata fileref="images/icons-silhouette.png" format="PNG"/></imageobject>
+	    <imageobject><imagedata fileref="images/icons-silhouette.eps" format="EPS"/></imageobject>
+	    <textobject><phrase>Silhouettes of various toolbar icons</phrase></textobject>
 	  </mediaobject>
 	</example>
       </listitem>
@@ -358,13 +358,13 @@
 	<listitem>
 	  <formalpara>
 	    <title>Avoid name suggestive icons</title>
-	    <para>Some icons, such as the Nautilus icon, do not suggest the program&apos;s purpose, but instead suggest the program&apos;s name. This is less desirable than a functionally suggestive icon, because an extra layer of abstraction is added (rather than associating file management with an icon representing files, they have to associate file management with nautilus with an image of a nautilus shell). Additionally it makes it difficult for new users who may not know what &quot;Nautilus&quot; is, and hence will not recognize a shell icon as the file manager.</para>
+	    <para>Some icons, such as the original Nautilus file manager icon, do not suggest the program&apos;s purpose, but instead suggest the program&apos;s name. This is less desirable than a functionally suggestive icon, because an extra layer of abstraction is added (rather than associating file management with an icon representing files, they have to associate file management with nautilus with an image of a nautilus shell). Additionally it makes it difficult for new users who may not know what &quot;Nautilus&quot; is, and hence will not recognize a shell icon as the file manager.</para>
 	  </formalpara>
 	  <figure>
-	    <title>A name suggestive icon for Nautilus</title>
+	    <title>The original, name suggestive icon for Nautilus</title>
 	    <mediaobject>
-	      <imageobject><imagedata fileref="images/nautilus-icon.png" format="PNG"/></imageobject>
-	      <imageobject><imagedata fileref="images/nautilus-icon.eps" format="EPS"/></imageobject>
+	      <imageobject><imagedata fileref="images/icons-nautilus.png" format="PNG"/></imageobject>
+	      <imageobject><imagedata fileref="images/icons-nautilus.eps" format="EPS"/></imageobject>
 	      <textobject><phrase>A picture of a nautilus shell</phrase></textobject>
 	    </mediaobject>
 	  </figure>
@@ -372,27 +372,28 @@
 	<listitem>
 	  <formalpara>
 	    <title>Do <emphasis>not</emphasis> include meaningful text in icons</title>
-	    <para>Icons which contain the text of the program name in the icon. They effectively contain no metaphor or picture for the user to identify with, and are probably harder to read than the accompanying caption. Since icons draw the eyes, an icon that is harder to identify than text is potentially worse than no icon at all. Hence &quot;text icons&quot; should not be used. Moreover, text should be avoided in icons because it makes the icons difficult to translate. If there is text in icons it should not form words in your native language, a good metric for ensuring that the particular text is not lending to the meaning of the icon.</para>
+	    <para>Icons that contain the text of the program name in the icon. They effectively contain no metaphor or picture for the user to identify with, and are probably harder to read than the accompanying caption. Since icons draw the eyes, an icon that is harder to identify than text is potentially worse than no icon at all. Hence &quot;text icons&quot; should not be used. Moreover, text should be avoided in icons because it makes the icons difficult to translate. If there is text in icons it should not form words in your native language, a good metric for ensuring that the particular text is not lending to the meaning of the icon.</para>
 	  </formalpara>
 	  <figure>
-	    <title>Text in the old GEdit icon</title>
+	    <title>Text in the original GEdit icon</title>
 	    <mediaobject>
-	      <imageobject><imagedata fileref="images/gedit-icon.png" format="PNG"/></imageobject>
-	      <imageobject><imagedata fileref="images/gedit-icon.eps" format="EPS"/></imageobject>
-	      <textobject><phrase>The GEdit icon</phrase></textobject>
+	      <imageobject><imagedata fileref="images/icons-gedit.png" format="PNG"/></imageobject>
+	      <imageobject><imagedata fileref="images/icons-gedit.eps" format="EPS"/></imageobject>
+	      <textobject><phrase>The original GEdit icon, a rectangle containing the word &quot;GEdit&quot;.</phrase></textobject>
 	    </mediaobject>
 	  </figure>
 	</listitem>
 	<listitem>
 	  <formalpara>
 	    <title>Do <emphasis>not</emphasis> rely on information your users will not have</title>
-	    <para>Random icons appear to have no association with the program (except perhaps some odd connection in the mind of the developer). These icons should <emphasis>never</emphasis> be used and will likely serve to confuse the user more than help them. The icon&apos;s purpose should not be to &quot;look pretty&quot;; this is merely a very desirable side effect. The sodipodi logo is a squirrel, which they show as their icon. However, because the logo has no obvious connection <emphasis>to a user</emphasis>, it is a poor icon. Make sure that you are not relying on information that users won&apos;t necessarily posses.</para>
+	    <para>Random icons appear to have no association with the application (except perhaps some odd connection in the mind of the developer). These icons should <emphasis>never</emphasis> be used and will likely serve to confuse the user more than help them. The icon&apos;s purpose should not be to &quot;look pretty&quot;; this is merely a very desirable side effect.</para>
+	    <para>The SodiPodi project logo is a squirrel, which is used as the application icon. However, because the logo has no obvious connection <emphasis>to a user</emphasis>, it is a poor icon. Make sure that you are not relying on information that users won&apos;t necessarily possess.</para>
 	  </formalpara>
 	  <figure>
 	    <title>A seemingly random icon for SodiPodi</title>
 	    <mediaobject>
-	      <imageobject><imagedata fileref="images/sodipodi-icon.png" format="PNG"/></imageobject>
-	      <imageobject><imagedata fileref="images/sodipodi-icon.eps" format="EPS"/></imageobject>
+	      <imageobject><imagedata fileref="images/icons-sodipodi.png" format="PNG"/></imageobject>
+	      <imageobject><imagedata fileref="images/icons-sodipodi.eps" format="EPS"/></imageobject>
 	      <textobject><phrase>A squirrel</phrase></textobject>
 	    </mediaobject>
 	  </figure>
@@ -400,24 +401,24 @@
 	<listitem id="icon_problems_extraneous_information">
 	  <formalpara>
 	    <title>Do <emphasis>not</emphasis> include extraneous information</title>
-	    <para>Remember that icons will often be viewed in a smaller form. Too much information may render the icon unintelligible when it is shrunk in size (e.g. to be placed on a panel, or in the tasklist). Too much information also makes it easier for users confuse the purpose of the application. For example, in user testing many users thought the Evolution icon would launch a word processor. They were misled by the pencil and the paper, which could be seen as extraneous information: it is implicit that the mail program will allow you to write messages as well as receive them. A better icon might have been a simple envelope. Foremost in the icon designer&apos;s mind should be a consideration of the minimal visual elements necessary to express the purpose of the program.</para>
+	    <para>Remember that icons will often be viewed in a smaller form. Too much information may render the icon unintelligible when it is shrunk in size (e.g. to be placed on a panel, or in the tasklist). Too much information also makes it easier for users confuse the purpose of the application. For example, in user testing many users thought an older version of the Evolution icon (below) would launch a word processor. They were misled by the pencil and the paper, which could be seen as extraneous information: it is implicit that the mail program will allow you to write messages as well as receive them. A better icon might have been a simple envelope. Foremost in the icon designer&apos;s mind should be a consideration of the minimal visual elements necessary to express the purpose of the program.</para>
 	  </formalpara>
 	  <figure>
 	    <title>Extraneous information - the Evolution icon</title>
 	    <mediaobject>
-	      <imageobject><imagedata fileref="images/evolution-icon.png" format="PNG"/></imageobject>
-	      <imageobject><imagedata fileref="images/evolution-icon.eps" format="EPS"/></imageobject>
+	      <imageobject><imagedata fileref="images/icons-evolution.png" format="PNG"/></imageobject>
+	      <imageobject><imagedata fileref="images/icons-evolution.eps" format="EPS"/></imageobject>
 	      <textobject><phrase>The Evolution icon</phrase></textobject>
 	    </mediaobject>
 	  </figure>
 	  <para>
-	    The Gnumeric icon is a great icon except for the introduction of extra visual noise. The extra sheet of paper with the &apos;g&apos; on it behind the spreadsheet and chart adds no significant value to the icon and provides extra visual distraction. In this case the contribution of the extraneous element to the appearance of the icon is negative. Simple well balanced icons look more attractive than cluttered icons. An improved icon might contain only the spreadsheet and chart; larger because they can use all of the space in the icon, and hence more visually distinct.
+	    This Gnumeric icon (below) is a great icon except for the introduction of extra visual noise. The extra sheet of paper with the &apos;g&apos; on it behind the spreadsheet and chart adds no significant value to the icon and provides extra visual distraction. In this case the contribution of the extraneous element to the appearance of the icon is negative. Simple, well-balanced icons look more attractive than cluttered icons. An improved icon might contain only the spreadsheet and chart; larger because they can use all of the space in the icon, and hence more visually distinct.
 	  </para>
 	  <figure>
 	    <title>Extraneous information - the old Gnumeric icon</title>
 	    <mediaobject>
-	      <imageobject><imagedata fileref="images/gnumeric-icon.png" format="PNG"/></imageobject>
-	      <imageobject><imagedata fileref="images/gnumeric-icon.eps" format="EPS"/></imageobject>
+	      <imageobject><imagedata fileref="images/icons-gnumeric.png" format="PNG"/></imageobject>
+	      <imageobject><imagedata fileref="images/icons-gnumeric.eps" format="EPS"/></imageobject>
 	      <textobject><phrase>The Gnumeric icon</phrase></textobject>
 	    </mediaobject>
 	  </figure>
@@ -430,16 +431,16 @@
 	  <figure>
 	    <title>Using body parts - the font selector icon</title>
 	    <mediaobject>
-	      <imageobject><imagedata fileref="images/fontsel-icon.png" format="PNG"/></imageobject>
-	      <imageobject><imagedata fileref="images/fontsel-icon.eps" format="EPS"/></imageobject>
-	      <textobject><phrase>The Font Selector Icon</phrase></textobject>
+	      <imageobject><imagedata fileref="images/icons-font-selection-poor.png" format="PNG"/></imageobject>
+	      <imageobject><imagedata fileref="images/icons-font-selection-poor.eps" format="EPS"/></imageobject>
+	      <textobject><phrase>The original Font Selector Icon</phrase></textobject>
 	    </mediaobject>
 	  </figure>	    
 	  <figure>
 	    <title>A better icon for the Font Selector</title>
 	    <mediaobject>
-	      <imageobject><imagedata fileref="images/fontsel-suggestion.png" format="PNG"/></imageobject>
-	      <imageobject><imagedata fileref="images/fontsel-suggestion.eps" format="EPS"/></imageobject>
+	      <imageobject><imagedata fileref="images/icons-font-selection-good.png" format="PNG"/></imageobject>
+	      <imageobject><imagedata fileref="images/icons-font-selection-good.eps" format="EPS"/></imageobject>
 	      <textobject><phrase>A simple replacement icon showing an ornate &quot;Aa&quot;</phrase></textobject>
 	    </mediaobject>
 	  </figure>
@@ -452,8 +453,8 @@
 	  <figure>
 	    <title>Word play - System Log Monitor icon</title>
 	    <mediaobject>
-	      <imageobject><imagedata fileref="images/log-icon.png" format="PNG"/></imageobject>
-	      <imageobject><imagedata fileref="images/log-icon.eps" format="EPS"/></imageobject>
+	      <imageobject><imagedata fileref="images/icons-system-log.png" format="PNG"/></imageobject>
+	      <imageobject><imagedata fileref="images/icons-system-log.eps" format="EPS"/></imageobject>
 	      <textobject><phrase>A tree log</phrase></textobject>
 	    </mediaobject>
 	  </figure>
@@ -466,8 +467,8 @@
 	  <figure>
 	    <title>Destructive-looking Shutdown icon</title>
 	    <mediaobject>
-	      <imageobject><imagedata fileref="images/shutdown-icon.png" format="PNG"/></imageobject>
-	      <imageobject><imagedata fileref="images/shutdown-icon.eps" format="EPS"/></imageobject>
+	      <imageobject><imagedata fileref="images/icons-shut-down.png" format="PNG"/></imageobject>
+	      <imageobject><imagedata fileref="images/icons-shut-down.eps" format="EPS"/></imageobject>
 	      <textobject><phrase>An explosive detonation button</phrase></textobject>
 	    </mediaobject>
 	  </figure>

Modified: trunk/hig/Makefile.am
==============================================================================
--- trunk/hig/Makefile.am	(original)
+++ trunk/hig/Makefile.am	Wed Sep 24 14:40:44 2008
@@ -22,6 +22,11 @@
 	hig-ch-windows.xml      \
 	hig-ch-whatsnew.xml
 DOC_FIGURES =						\
+	images/EvoToolbar.png \
+	images/GtkToolbar.png \
+	images/GtkToolbar_browserdefault.png \
+	images/GtkToolbar_gedit.png \
+	images/GtkToolbar_productivitydefault.png \
 	images/action-icon.png \
 	images/caution.png \
 	images/checkbox_label.png \
@@ -72,13 +77,9 @@
 	images/dragcursor-move.png \
 	images/dragcursor-nodrop.png \
 	images/dragcursor-rmb.png \
-	images/evolution-icon.png \
-	images/EvoToolbar.png \
 	images/feedback-checklist-running.png \
 	images/feedback-pointers-busy.png \
 	images/floppy-dissected.png \
-	images/fontsel-icon.png \
-	images/fontsel-suggestion.png \
 	images/gdiskfree-menu.png \
 	images/gdiskfree.png \
 	images/gedit-icon.png \
@@ -87,11 +88,6 @@
 	images/gnome-http-url.png \
 	images/gnome-package.png \
 	images/gnome-text-x-readme.png \
-	images/gnumeric-icon.png \
-	images/GtkToolbar.png \
-	images/GtkToolbar_browserdefault.png \
-	images/GtkToolbar_gedit.png \
-	images/GtkToolbar_productivitydefault.png \
 	images/highcontrast-book-blur.png \
 	images/highcontrast-book.png \
 	images/highcontrast-cdrom-blur.png \
@@ -112,13 +108,22 @@
 	images/icon-design-process-8.png \
 	images/icon-design-process-9.png \
 	images/icons-applications.png \
+	images/icons-evolution.png \
+	images/icons-font-selection-good.png \
+	images/icons-font-selection-poor.png \
+	images/icons-gnumeric.png \
 	images/icons-menu.png \
+	images/icons-nautilus.png \
 	images/icons-objects.png \
 	images/icons-perspective-shelf.png \
 	images/icons-perspective-table.png \
+	images/icons-shut-down.png \
+	images/icons-silhouette.png \
+	images/icons-sodipodi.png \
 	images/icons-style-aqua.png \
 	images/icons-style-gnome.png \
 	images/icons-style-java.png \
+	images/icons-system-log.png \
 	images/icons-toolbar.png \
 	images/icons-underline-text.png \
 	images/icons-word-processor.png \
@@ -130,7 +135,6 @@
 	images/label_left.png \
 	images/label_right.png \
 	images/levels-lowcontrast.png \
-	images/log-icon.png \
 	images/manual-alert-spacing.png \
 	images/manual-button-ordering.png \
 	images/menus-application.png \
@@ -151,7 +155,6 @@
 	images/menus-view.png \
 	images/menus-windows.png \
 	images/mnemonics_and_shortcuts.png \
-	images/nautilus-icon.png \
 	images/note.png \
 	images/object-icon.png \
 	images/object-menu.png \
@@ -166,13 +169,10 @@
 	images/rubberband_dia.png \
 	images/save1.png \
 	images/save2.png \
-	images/shutdown-icon.png \
 	images/size-48x48.png \
-	images/sodipodi-icon.png \
 	images/softwareupdateicon.png \
 	images/stock_save.png \
 	images/tip.png \
-	images/toolbar-silhouette.png \
 	images/toolbars-mail.png \
 	images/view-toolbar.png \
 	images/visdes-button-label.png \
@@ -246,4 +246,6 @@
 	images/windows-sdi.png \
 	images/windows-titlebar.png \
 	images/windows-toolbox-large.png \
-	images/windows-toolbox-small.png
\ No newline at end of file
+	images/windows-toolbox-small.png
+
+
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]