[gnome-devel-docs/wip/aday/appicon-update2: 24/32] hig: refine artwork and icons pages



commit 25d6b16fc77586c2f3cf732aaf2700984b15b72d
Author: Allan Day <allanpday gmail com>
Date:   Wed Aug 29 17:28:40 2018 +0100

    hig: refine artwork and icons pages
    
    Polish the new pages on icons and artwork.

 hig/C/icon-design.page       | 26 ++++++++++++--------------
 hig/C/icons-and-artwork.page | 12 ++++++------
 2 files changed, 18 insertions(+), 20 deletions(-)
---
diff --git a/hig/C/icon-design.page b/hig/C/icon-design.page
index 43109819..ce948b33 100644
--- a/hig/C/icon-design.page
+++ b/hig/C/icon-design.page
@@ -16,31 +16,29 @@
 
 <title>Creating icons</title>
 
-<p><link xref="icons-and-artwork">Icons and artwork</link> provides an overview of the styles of icon in 
GNOME 3, as well as the stock icons that are available. This page provides guidelines for those creating 
their own icons, including both full-color icons (typically used for application icons) and symbolic icons 
(typically used for user interface controls).</p>
+<p><link xref="icons-and-artwork">Icons and artwork</link> provides an overview of the icon styles 
recommended for use in GNOME 3, as well as the stock icons that are available. This page provides guidelines 
for those creating their own icons, including both full-color icons (typically used for application icons) 
and symbolic icons (typically used for user interface controls).</p>
 
 <section id="full-color-icons">
 <title>Full-color icons</title>
 
 <media type="image" mime="image/png" src="figures/icons/shading.svg"/>
 
-<p>The full-color icon style is mostly commonly used for application icons. The nominal size of application 
icons is 128x128px. Application icons are, however, rarely rendered at this resolution. As display density 
started varying immensely, sticking to absolute pixel units has also become less practical.</p>
+<p>The full-color icon style is most commonly used for application icons. The nominal size of application 
icons is 128×128px. However, because application icons are sometimes presented at lower resolutions, they 
should only feature detail that is presentable at 64×64px resolution: anything more detailed would get lost 
by filtering/scaling down.</p>
 
-<p>Because the application icon still get presented at lower resolution, the icon should feature only detail 
presentable at 64x64px resolution. The density of detail should not be higher, because it would get lost by 
filtering/scaling down.</p>
-
-<p>The default template includes a 2px grid which should help you avoid adding detail that's finer than the 
desired threshold.</p>
+<p>The full-color icon template includes a 2px grid which should help you avoid adding detail that's finer 
than the desired threshold.</p>
 
 <media type="image" mime="image/png" src="figures/icons/sizes.svg"/>
 
 <section id="perspective">
-<title>Perspective &amp; Shape</title>
+<title>Perspective &amp; shape</title>
 
-<p>Just like the symbolic icons, fullcolor application icons should be rendered with a simple orthogonal 
view and no real or isometric perspective distortion. To provide depth a raised effect can be applied to 
mimic the Z-axis. Please keep the effect subtle though, rasing the object more than 2 detail units (4 nominal 
pixels) is not recommended.</p>
+<p>Full-color icons should be rendered with a simple orthogonal view and no real or isometric perspective. 
To provide depth a raised effect can be applied to mimic the Z-axis. Please keep the effect subtle though! 
Raising the object more than 2 detail units (4 nominal pixels) is not recommended.</p>
 
-<p>It is desirable to give the app icon a unique silhouette. At the same time, to allow for a pleasing grid 
presentation among the other applications, the aspect ratio should not be very extreme. Very narrow or very 
wide objects should be avoided.</p>
+<p>In order to aid recognition, each application icon should have a unique silhouette. However, to allow for 
a pleasing grid presentation among other applications, the aspect ratio should not be extreme. Very narrow or 
very wide shapes should be avoided.</p>
 
 <media type="image" mime="image/png" src="figures/icons/aspect-ratio.svg"/>
 
-<p>A <link href="https://gitlab.gnome.org/Community/Design/icon-revolution/raw/master/template.svg";>grid 
template</link> is available to assist you with placing your icon outline. Do not try to cover a maximum area 
of the canvas, the outside margin/whitespace is meant to be left empty. In special cuscumstanses a small 
detail can be extended into this margin space.</p>
+<p>A <link href="https://gitlab.gnome.org/Community/Design/icon-revolution/raw/master/template.svg";>grid 
template</link> is available to assist with placing your icon outline. Do not try to cover a maximum area of 
the canvas: the outside margin should be left empty. In special circumstances a small detail can be extended 
into this margin space.</p>
 
 <media type="image" mime="image/png" src="figures/icons/whitespace.svg"/>
 
@@ -49,11 +47,11 @@
 <section id="shadows">
 <title>Shadows</title>
 
-<p>You are free to cast shadows internally. The light source is coming straight from the top. You
-should avoid casting shadows outside the main silhouette of the icon tough, as icon shadows are generated 
procedurally based on the alpha channel of the icon depending on the context. When app icons are presented on 
a white background, for example, a strong drop shadow is rendered to help define the contours.</p>
+<p>Shadows can be drawn internally, within a full-color icon, with the light source pointing straight from 
above. However, shadows should not be drawn outside the main silhouette of the icon, as these are generated 
programatically based on the context. When app icons are presented on a white background, for example, a 
strong drop shadow is rendered to help define the contours.</p>
+
 <media type="image" mime="image/png" src="figures/icons/dropshadow.png"/>
 
-<p>Having shadows generated automatically depending o context also allows us to prodecurally generate 
versions of the app icon based on the alpha channel contour, such as for application nightly builds.</p>
+<p>Versions of application icons can also be programatically generated for development or nightly builds.</p>
 </section>
 
 <section id="palette">
@@ -115,7 +113,7 @@ should avoid casting shadows outside the main silhouette of the icon tough, as i
 <section id="custom-symbolic-icons">
 <title>Symbolic icons</title>
 
-<p>Symbolic icons have a simple form and are drawn within a 16x16 pixel grid. They are then programmatically 
scaled and colored within the user interface itself.</p>
+<p>Symbolic icons have a simple form and are drawn within a 16×16 pixel grid. They are then programmatically 
scaled and colored within the user interface itself.</p>
 
 <list>
 <item><p>Identify a single property when looking for an appropriate metaphor for an icon, and focus on what 
distinguishes the idea you want to communicate. For example, when describing an action to be performed on an 
image, it isn’t necessary to repeat the idea of an image in every icon. Instead, focus on what is distinct 
about each action (for example: rotate, tag, align).</p></item>
@@ -130,7 +128,7 @@ should avoid casting shadows outside the main silhouette of the icon tough, as i
 <section id="size-and-grid">
 <title>Size and grid</title>
 
-<p>While the icons are scalable and should work in any size, the basic canvas size is 16x16 grid units. You 
have the whole canvas to fill, but note that a filled rectangular object will appear stronger/larger when 
placed next to items that only use thinner strokes. Try to keep the contrast of your whole set.</p>
+<p>While symbolic icons are scalable and should work at any size, the basic canvas size is 16×16 grid units. 
You have the whole canvas to fill, but note that a filled rectangular object will appear stronger/larger when 
placed next to items that only use thinner strokes. Try to keep the contrast of your whole set.</p>
 
 </section>
 
diff --git a/hig/C/icons-and-artwork.page b/hig/C/icons-and-artwork.page
index 18ab9080..7d6efe72 100644
--- a/hig/C/icons-and-artwork.page
+++ b/hig/C/icons-and-artwork.page
@@ -16,14 +16,14 @@
 
 <title>Icons and artwork</title>
 
-<p>Icons are a basic element in user interfaces. They also make up a fundamental part of application 
identities. This page provides an overview of icon usage, and covers which icons are available through the 
GNOME platform, resources for creating new icons, and some general guidelines on using icons in user 
interfaces.</p>
+<p>Icons are a basic element in user interfaces. They also make up a fundamental part of application 
identities. This page provides an overview of icon usage. It also describes which icons are available through 
the GNOME platform, introduces resources for creating new icons, and includes some general guidelines on 
using icons in user interfaces.</p>
 
 <section id="icon-styles">
 <title>Icon styles</title>
 
 <p>Two styles of icon are used in GNOME 3: full-color and symbolic icons.</p>
 
-<p>Full-color icons are colorful and detailed, and are optimized for larger sizes. They are defined as 
64✕64px SVGs, and can be scaled to multiples or subdivisions of 64✕64 (such as 128✕128, 256x256 and 512x512). 
The level of detail and positioning on the pixel grid allows them to be rendered sharp at smaller sizes, but 
is not advised to do below 32x32px.</p>
+<p>Full-color icons are colorful and detailed, and are optimized for larger sizes. They are defined as 
64✕64px SVGs, and can be scaled to multiples or subdivisions of 64✕64 (such as 128✕128, 256✕256 and 512✕512). 
Their design allows them to be rendered sharp at smaller sizes, but is not advised to do below 32x32px.</p>
 
 <media type="image" mime="image/png" src="figures/icons/fullcolor-v-symbolic.svg"/>
 
@@ -35,13 +35,13 @@
 <title>Icon uses</title>
 
 
-<p>Application icons are the most prominent type of icons and every application should have its own unique 
and beautiful application icon. These are the face of the application, and the first visual element a user 
sees when browsing for new applications. The <link xref="application-basics">application basics page</link> 
includes details on what an application is, and when to provide an application icon.</p>
+<p>Application icons are the most prominent type of icons. Every application should have its own unique and 
beautiful application icon: it is the face of the application, and the first visual element a user sees when 
browsing for new applications.</p>
 
-<p>Application icons use the full-color style. Applications are also recommended to provide a symbolic 
version of their icon, which is used for the high-contrast accessibility feature and a few contexts where a 
legible low resolution icon is required.</p>
+<p>Application icons use the full-color style. Applications are also recommended to provide a symbolic 
version of their icon, which is used for the high-contrast accessibility feature, as well as in contexts 
where a legible low resolution icon is required.</p>
 
-<p>Other user interface icons typically use the symbolic style. The most common example is for buttons.</p>
+<p>User interface icons typically use the symbolic style and this is the primary icon style used for user 
interface controls. The most common and obvious example of symbolic icon usage is on buttons.</p>
 
-<p>In some cases, full-color icons are an appropriate choice to use in interfaces. For example, when icons 
are to be displayed at large sizes and when they are the focus of attention. File and folder icons in a file 
manager are a good example of this.</p>
+<p>Apart from application icons, the full-color icon style can also be used in cases where icons are 
displayed at large sizes and are intended to be the focus of attention. File and folder icons in a file 
manager are a good example of this.</p>
 
 </section>
 


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]