Commit ffe5261e authored by Jakub Steiner's avatar Jakub Steiner

HIG: icons -- restructure document

parent cc5d85d6
This diff is collapsed.
......@@ -76,39 +76,13 @@
</section>
<section id="custom-symbolic-icons">
<title>Custom 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>
<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>
<item><p>Avoid using any perspective in symbolic icons, stick to a simple orthogonal view.</p></item>
<item><p>When using unfilled strokes for an outline, try avoiding hairline (1px) and do at least a 2px stroke for the meain feature of the icon. </p></item>
<item><p>Symbolic icons are recolored at runtime to match the context, very much like a piece of text. While there are ways to “shade” parts of an icon by using opacity or creating duotone/pattern dithering, try avoiding these as much as possible.</p></item>
<item><p>When a metaphor relies on the negative space, make sure it will work with the colors inverted. For example a camera lens spec/highlight will only work if lighter than the lens itself.</p></item>
</list>
<media type="image" mime="image/svg" src="figures/icons/inverting.svg"/>
<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>
</section>
</section>
<section id="custom-full-color-icons">
<title>Custom full-color icons</title>
<section id="perspective">
<title>Perspective</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.</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>
</section>
<section id="palette">
......@@ -155,6 +129,33 @@
</section>
<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>
<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>
<item><p>Avoid using any perspective in symbolic icons, stick to a simple orthogonal view.</p></item>
<item><p>When using unfilled strokes for an outline, try avoiding hairline (1px) and do at least a 2px stroke for the meain feature of the icon. </p></item>
<item><p>Symbolic icons are recolored at runtime to match the context, very much like a piece of text. While there are ways to “shade” parts of an icon by using opacity or creating duotone/pattern dithering, try avoiding these as much as possible.</p></item>
<item><p>When a metaphor relies on the negative space, make sure it will work with the colors inverted. For example a camera lens spec/highlight will only work if lighter than the lens itself.</p></item>
</list>
<media type="image" mime="image/svg" src="figures/icons/inverting.svg"/>
<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>
</section>
</section>
<section id="stock-icons">
<title>GNOME Icon Pack</title>
......@@ -164,7 +165,7 @@
</section>
</section>
<section id="see-also">
<title>See also</title>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment