Human Interface Guidelines/The Sugar Interface/Icons - Revision history

FGrose: /* Strokes & Fills */ emphasize link

2014-01-25T21:59:25Z

Strokes & Fills: emphasize link

← Older revision		Revision as of 17:59, 25 January 2014
Line 83:		Line 83:
	All strokes within an "S" activity icon must have a line weight of 3.5px. 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.		All strokes within an "S" activity icon must have a line weight of 3.5px. 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.

	~~More detailed instructions for making icons can be found~~ [[Development_Team/Almanac/Making_Icons\|~~here~~]].		See these '''[[Development_Team/Almanac/Making_Icons\|detailed instructions for making icons]]'''.

	{{hig-subnav-intra\|p_page=Layout Guidelines\|c_section=The Sugar Interface\|c_page=Icons\|n_page=Colors}}		{{hig-subnav-intra\|p_page=Layout Guidelines\|c_section=The Sugar Interface\|c_page=Icons\|n_page=Colors}}
	</div>		</div>

FGrose: /* Strokes & Fills */ link update

2011-01-29T18:12:52Z

Strokes & Fills: link update

← Older revision		Revision as of 14:12, 29 January 2011
Line 83:		Line 83:
	All strokes within an "S" activity icon must have a line weight of 3.5px. 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.		All strokes within an "S" activity icon must have a line weight of 3.5px. 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.

	More detailed instructions for making icons can be found [[~~olpc:Making SVG Icons for Sugar~~\|here]].		More detailed instructions for making icons can be found [[Development_Team/Almanac/Making_Icons\|here]].

	{{hig-subnav-intra\|p_page=Layout Guidelines\|c_section=The Sugar Interface\|c_page=Icons\|n_page=Colors}}		{{hig-subnav-intra\|p_page=Layout Guidelines\|c_section=The Sugar Interface\|c_page=Icons\|n_page=Colors}}
	</div>		</div>

FGrose: hide link hint behind image with no background

2010-09-22T05:29:52Z

hide link hint behind image with no background

← Older revision		Revision as of 01:29, 22 September 2010
Line 9:		Line 9:

	{\| cellpadding="5px"		{\| cellpadding="5px"
	\|<span class="plainlinks">[{{fullurle:olpc:Image:xo_s.png}} http://wiki.laptop.org/images/b/ba/Xo_s.png]</span>		\|<span class="plainlinks linkgroup">[{{fullurle:olpc:Image:xo_s.png}} http://wiki.laptop.org/images/b/ba/Xo_s.png]</span>
	\|		\|
	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. Each child will select a stroke and fill color for their XO, and their chosen colors will then apply to the icons of any Activities or Objects they create.		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. Each child will select a stroke and fill color for their XO, and their chosen colors will then apply to the icons of any Activities or Objects they create.

FGrose at 02:42, 27 August 2009

2009-08-27T02:42:09Z

← Older revision		Revision as of 22:42, 26 August 2009
Line 42:		Line 42:
	\|<span class="plainlinks">[{{fullurle:olpc:Image:Standard_icon_size.png}} http://wiki.laptop.org/images/thumb/d/d9/Standard_icon_size.png/105px-Standard_icon_size.png]</span>		\|<span class="plainlinks">[{{fullurle:olpc:Image:Standard_icon_size.png}} http://wiki.laptop.org/images/thumb/d/d9/Standard_icon_size.png/105px-Standard_icon_size.png]</span>
	\|		\|
	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 [[~~Design Team/~~Human Interface Guidelines/The Sugar Interface/Layout Guidelines\|layout section]].		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 [[Human Interface Guidelines/The Sugar Interface/Layout Guidelines\|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.		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.

FGrose: moved Design Team/Human Interface Guidelines/The Sugar Interface/Icons to Human Interface Guidelines/The Sugar Interface/Icons: restructure

2009-07-07T13:16:11Z

moved Design Team/Human Interface Guidelines/The Sugar Interface/Icons to Human Interface Guidelines/The Sugar Interface/Icons: restructure

← Older revision		Revision as of 09:16, 7 July 2009
(No difference)

FGrose at 16:57, 5 July 2009

2009-07-05T16:57:12Z

← Older revision		Revision as of 12:57, 5 July 2009
Line 1:		Line 1:
	<div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;">		<div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;">
	<noinclude>{{Translations}}</noinclude>		<noinclude>{{Translations}}{{GoogleTrans-en}}</noinclude>
	{{hig-subnav-intra\|p_page=Layout Guidelines\|c_section=The Sugar Interface\|c_page=Icons\|n_page=Colors}}		{{hig-subnav-intra\|p_page=Layout Guidelines\|c_section=The Sugar Interface\|c_page=Icons\|n_page=Colors}}
			{{TOCright}}
	===Icons===		===Icons===

Line 8:		Line 8:
	=====The XO=====		=====The XO=====

	[[Image:xo_s.png~~\|left]~~]		{\| cellpadding="5px"
			\|<span class="plainlinks">[{{fullurle:olpc:Image:xo_s.png}} http://wiki.laptop.org/images/b/ba/Xo_s.png]</span>
			\|
	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. Each child will select a stroke and fill color for their XO, and their chosen colors will then apply to the icons of any Activities or Objects they create.		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. Each child will select a stroke and fill color for their XO, and their chosen colors will then apply to the icons of any Activities or Objects they create.
			\|}

	=====Activity Icons=====		=====Activity Icons=====

	=====Object Icons=====		=====Object Icons=====
			{\| cellpadding="5px"
	[[Image: clipping.png~~\|left]~~]		\|<span class="plainlinks">[{{fullurle:olpc:Image:clipping.png}} http://wiki.laptop.org/images/7/72/Clipping.png]</span>
			\|
	=====Action Icons=====		=====Action Icons=====

	====Active vs. Inactive Icons====		====Active vs. Inactive Icons====
			\|}
	Many instances may arise in which some elements of the interface are inactive. Sugar specifies a consistent visual style to represent the concepts of absence and inactivity. Inactive elements are buttons that are not currently actionable, or controls that are temporarily disabled. Absent elements are object icons that represent people or things which aren't actually present at the moment; for instance, an incomplete download, or an invited friend who hasn't yet joined the activity.		Many instances may arise in which some elements of the interface are inactive. Sugar specifies a consistent visual style to represent the concepts of absence and inactivity. Inactive elements are buttons that are not currently actionable, or controls that are temporarily disabled. Absent elements are object icons that represent people or things which aren't actually present at the moment; for instance, an incomplete download, or an invited friend who hasn't yet joined the activity.

Line 36:		Line 39:

	=====Icon Sizes=====		=====Icon Sizes=====
			{\| cellpadding="5px"
	[[Image: ~~standard_icon_size~~.png\|thumb\|105px\|~~left]]~~		\|<span class="plainlinks">[{{fullurle:olpc:Image:Standard_icon_size.png}} http://wiki.laptop.org/images/thumb/d/d9/Standard_icon_size.png/105px-Standard_icon_size.png]</span>
	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 [[~~OLPC~~ Human Interface Guidelines/The Sugar Interface/Layout Guidelines\|layout section]].		\|
			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 [[Design Team/Human Interface Guidelines/The Sugar Interface/Layout Guidelines\|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.		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;"		{\|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
Line 78:		Line 83:
	All strokes within an "S" activity icon must have a line weight of 3.5px. 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.		All strokes within an "S" activity icon must have a line weight of 3.5px. 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.

	More detailed instructions for making icons can be found [[Making SVG Icons for Sugar\|here]].		More detailed instructions for making icons can be found [[olpc:Making SVG Icons for Sugar\|here]].

	{{hig-subnav-intra\|p_page=Layout Guidelines\|c_section=The Sugar Interface\|c_page=Icons\|n_page=Colors}}		{{hig-subnav-intra\|p_page=Layout Guidelines\|c_section=The Sugar Interface\|c_page=Icons\|n_page=Colors}}
	</div>		</div>

Befana at 20:43, 1 June 2009

2009-06-01T20:43:49Z

← Older revision		Revision as of 16:43, 1 June 2009
Line 4:		Line 4:

	===Icons===		===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. Each child will select a stroke and fill color for their XO, and their chosen colors will then apply to the icons of any Activities or Objects they create.

			=====Activity Icons=====

			=====Object Icons=====

			[[Image: clipping.png\|left]]

			=====Action Icons=====

			====Active vs. Inactive Icons====
			Many instances may arise in which some elements of the interface are inactive. Sugar specifies a consistent visual style to represent the concepts of absence and inactivity. Inactive elements are buttons that are not currently actionable, or controls that are temporarily disabled. Absent elements are object icons that represent people or things which aren't actually present at the moment; for instance, an incomplete download, or an invited friend who hasn't yet joined the activity.

			Generally, interfaces represent such inactivity through grayed out imagery. Of course, since the laptop also operates in grayscale mode, such a color distinction ''must not'' be used under any circumstances. Instead, Sugar will take advantage of the vector graphics used for rendering objects and buttons by rendering inactive ones as a white outlined stroke, with no fill color.

			=====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 [[OLPC Human Interface Guidelines/The Sugar Interface/Layout Guidelines\|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.25px
			\|-style="background: #e9e9e9;"
			\|S
			\|1.0
			\|3.5px
			\|-
			\|M
			\|1.5
			\|4.0px
			\|-
			\|L
			\|2.0
			\|4.5px
			\|-
			\|XL
			\|2.75
			\|6.0px
			\|}

			=====Strokes & Fills=====
			{\|border=1 cellpadding=1 cellspacing=0 style="float: right; width: 175px; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
			!style="background:#D6784C"\|API Reference
			\|-
			\|[[Sugar Architecture/API/sugar.shell.view.stylesheet\|Module: sugar.shell.view.stylesheet]]
			\|}

			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.5px. 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.

			More detailed instructions for making icons can be found [[Making SVG Icons for Sugar\|here]].

			{{hig-subnav-intra\|p_page=Layout Guidelines\|c_section=The Sugar Interface\|c_page=Icons\|n_page=Colors}}
			</div>

Dfarning: DesignTeam/Human Interface Guidelines/The Sugar Interface/Icons moved to Design Team/Human Interface Guidelines/The Sugar Interface/Icons

2009-04-08T02:57:00Z

DesignTeam/Human Interface Guidelines/The Sugar Interface/Icons moved to Design Team/Human Interface Guidelines/The Sugar Interface/Icons

← Older revision	Revision as of 22:57, 7 April 2009
(No difference)

Dfarning-bot: OLPC Human Interface Guidelines/The Sugar Interface/Icons moved to DesignTeam/Human Interface Guidelines/The Sugar Interface/Icons: Robot: moved page

2009-02-05T02:30:49Z

OLPC Human Interface Guidelines/The Sugar Interface/Icons moved to DesignTeam/Human Interface Guidelines/The Sugar Interface/Icons: Robot: moved page

← Older revision	Revision as of 22:30, 4 February 2009
(No difference)

Dfarning: 22 revisions

2009-02-04T19:21:22Z

22 revisions

← Older revision	Revision as of 15:21, 4 February 2009
(No difference)