87
edits
Changes
Jump to navigation
Jump to search
Human Interface Guidelines/The Sugar Interface/Icons (view source)
Revision as of 13:38, 29 November 2006
, 13:38, 29 November 2006no edit summary
<div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;">
{{hig-subnav|prev_link=The Sugar Interface/Layout Guidelines|prev=Layout Guidelines|next_link=The Sugar Interface/Colors|next=Colors}}
===Icons===
====Categories of Icons====
=====The XO=====
[[Image:xo_s.png|left]]
The icons which represent People have special status on the laptops. Referred to generally as the XOs, they represent the children and their laptops on the mesh Neighborhood, and furthermore represent the OLPC project and its goals to place a laptop in the hands of every child.
=====Activity Icons=====
=====Object Icons=====
[[Image: clipping.png|left]]
=====Action Icons=====
====Active vs. Inactive Icons====
=====Active=====
=====Inactive=====
====Icon Design Guidelines====
=====Icon Format=====
All icons designed for use in Sugar must be provided in [http://en.wikipedia.org/wiki/Svg .SVG format]. Since all icons exist as vectors, dynamic scaling and coloring of the icons occurs without any degradation. This allows variably sized representations of particular icons to exist depending on context in the interface. Additionally, this provides support for dynamic coloring of activity and object icons based upon a child's chosen XO colors.
=====Icon Sizes=====
[[Image: standard_icon_size.png|thumb|105px|left]]
Icons should be developed and saved at Standard (S) size, though their actual size and appearance in the interface may change dynamically. When developed at standard size, icons should fit loosely within the 3 x 3 icon-safe subcell of a standard 75px grid cell, as specified in the [[#Layout|layout section]].
Notice that when the interface scales your icons, strokes do not necessarily scale proportionally to the overall icon size. This ensures that the stroke weight remains visible enough at all sizes to convey its weight and color, but it may also limit the granularity with which you use strokes, which could begin to blend together at smaller sizes. The following chart relates the various icon sizes to their corresponding scale factors and stroke weights. We strongly suggest that you try rendering your icons at XS, S, and M sizes in order to tweak their appearance for optimal legibility.
{|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
|+Icon Size Comparison Chart
!style="background:#cccccc;"|Icon Size!!style="background:#cccccc;"|Scaling Factor!!style="background:#cccccc;"|Stroke Weight
|-
|XS
|0.5
|2.25pt
|-style="background: #e9e9e9;"
|S
|1.0
|3.5pt
|-
|M
|1.5
|4.0pt
|-
|L
|2.0
|4.5pt
|-
|XL
|3.0
|6.0pt
|}
=====Strokes & Fills=====
All icons render in two colors: stroke and fill. The actual stroke and fill colors that an icon renders in are determined by the children, since they correspond to the colors they have chosen for their XOs. As such, the colors in which you choose to save your icon are arbitrary. However, note that any fills that have the same color as your strokes will dynamically take on their color when rendered.
All strokes within an "S" activity icon must have a line weight of 3.5pt. All icons should have a primary fill which represents its overall shape. In addition, any number of supplemental strokes and fills may be used; not all strokes within an icon must have fills, and not all fills must have strokes.
{{hig-subnav|prev_link=The Sugar Interface/Layout Guidelines|prev=Layout Guidelines|next_link=The Sugar Interface/Colors|next=Colors}}
{{hig-subnav|prev_link=The Sugar Interface/Layout Guidelines|prev=Layout Guidelines|next_link=The Sugar Interface/Colors|next=Colors}}
===Icons===
====Categories of Icons====
=====The XO=====
[[Image:xo_s.png|left]]
The icons which represent People have special status on the laptops. Referred to generally as the XOs, they represent the children and their laptops on the mesh Neighborhood, and furthermore represent the OLPC project and its goals to place a laptop in the hands of every child.
=====Activity Icons=====
=====Object Icons=====
[[Image: clipping.png|left]]
=====Action Icons=====
====Active vs. Inactive Icons====
=====Active=====
=====Inactive=====
====Icon Design Guidelines====
=====Icon Format=====
All icons designed for use in Sugar must be provided in [http://en.wikipedia.org/wiki/Svg .SVG format]. Since all icons exist as vectors, dynamic scaling and coloring of the icons occurs without any degradation. This allows variably sized representations of particular icons to exist depending on context in the interface. Additionally, this provides support for dynamic coloring of activity and object icons based upon a child's chosen XO colors.
=====Icon Sizes=====
[[Image: standard_icon_size.png|thumb|105px|left]]
Icons should be developed and saved at Standard (S) size, though their actual size and appearance in the interface may change dynamically. When developed at standard size, icons should fit loosely within the 3 x 3 icon-safe subcell of a standard 75px grid cell, as specified in the [[#Layout|layout section]].
Notice that when the interface scales your icons, strokes do not necessarily scale proportionally to the overall icon size. This ensures that the stroke weight remains visible enough at all sizes to convey its weight and color, but it may also limit the granularity with which you use strokes, which could begin to blend together at smaller sizes. The following chart relates the various icon sizes to their corresponding scale factors and stroke weights. We strongly suggest that you try rendering your icons at XS, S, and M sizes in order to tweak their appearance for optimal legibility.
{|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
|+Icon Size Comparison Chart
!style="background:#cccccc;"|Icon Size!!style="background:#cccccc;"|Scaling Factor!!style="background:#cccccc;"|Stroke Weight
|-
|XS
|0.5
|2.25pt
|-style="background: #e9e9e9;"
|S
|1.0
|3.5pt
|-
|M
|1.5
|4.0pt
|-
|L
|2.0
|4.5pt
|-
|XL
|3.0
|6.0pt
|}
=====Strokes & Fills=====
All icons render in two colors: stroke and fill. The actual stroke and fill colors that an icon renders in are determined by the children, since they correspond to the colors they have chosen for their XOs. As such, the colors in which you choose to save your icon are arbitrary. However, note that any fills that have the same color as your strokes will dynamically take on their color when rendered.
All strokes within an "S" activity icon must have a line weight of 3.5pt. All icons should have a primary fill which represents its overall shape. In addition, any number of supplemental strokes and fills may be used; not all strokes within an icon must have fills, and not all fills must have strokes.
{{hig-subnav|prev_link=The Sugar Interface/Layout Guidelines|prev=Layout Guidelines|next_link=The Sugar Interface/Colors|next=Colors}}