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

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

2009-07-07T13:16:15Z

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

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

FGrose at 16:59, 5 July 2009

2009-07-05T16:59:04Z

← Older revision		Revision as of 12:59, 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=Input Systems\|c_section=The Sugar Interface\|c_page=Layout Guidelines\|n_page=Icons}}		{{hig-subnav-intra\|p_page=Input Systems\|c_section=The Sugar Interface\|c_page=Layout Guidelines\|n_page=Icons}}

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

2009-04-08T02:57:02Z

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

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

FGrose at 18:09, 21 March 2009

2009-03-21T18:09:25Z

← Older revision		Revision as of 14:09, 21 March 2009
Line 22:		Line 22:
	</div>		</div>

	[[Category:Design ~~Gang~~]]		[[Category:Design]]
	[[Category:Graphic Design]]		[[Category:Graphic Design]]

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

2009-02-05T02:33:09Z

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

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

Dfarning: 12 revisions

2009-02-04T19:23:52Z

12 revisions

New page

<div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;">
<noinclude>{{Translations}}</noinclude>
{{hig-subnav-intra|p_page=Input Systems|c_section=The Sugar Interface|c_page=Layout Guidelines|n_page=Icons}}

===Layout Guidelines===

====The Grid System====
In keeping with the simple, flat visual style of the Sugar interface, we have designed all of the interface elements on a straightforward grid system. The system functions like a basic floorplan which allows interface elements to tile neatly within its boundaries. The grid consists of a 16x12 array of square tiles.

The diagram below shows the screen dissected into cells. Furthermore, the cells highlighted in blue indicate the areas suitable for activity toolbars. Note the exclusion of the corners, which are reserved for the hot corners which invoke the frame. In order to prevent accidental invocation, no buttons should be placed in these locations. Though all edges of the screen are suitable for placing toolbars, we recommend that the top and left edges of the screen serve as the primary location for them unless circumstances specifically suggest an alternative. Conforming to these guidelines will both make the variety of activities supported on the laptop feel more consistent, and also reserves the right and bottom edges for scroll bars, making navigation (when required) within the primary pane much simpler. Though the grab key provides the primary means for panning, preserving these edges for scroll bars even as visual indicators will increase usability.

[[Image:Grid.png]]

Considering the screen at its maximum resolution of 1200x900 pixels in luminance mode, each square tile is 75x75 pixels in size. Each cell is comprised of a 5x5 array of 15 pixel subcells. These subcells provide layout guidelines at a finer level of detail. In general, the 3x3 subcell interior region is icon-safe.

[[Image:Grid_cell.png]]

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

[[Category:Design Gang]]
[[Category:Graphic Design]]

Cjl: Reverted edits by 209.237.227.133 (Talk) to last version by 18.85.47.55

2008-12-17T06:18:35Z

Reverted edits by 209.237.227.133 (Talk) to last version by 18.85.47.55

← Older revision		Revision as of 02:18, 17 December 2008
Line 3:		Line 3:
	{{hig-subnav-intra\|p_page=Input Systems\|c_section=The Sugar Interface\|c_page=Layout Guidelines\|n_page=Icons}}		{{hig-subnav-intra\|p_page=Input Systems\|c_section=The Sugar Interface\|c_page=Layout Guidelines\|n_page=Icons}}

	~~FIELD_MESSAGE_nogetsitn~~		===Layout Guidelines===

			====The Grid System====
			In keeping with the simple, flat visual style of the Sugar interface, we have designed all of the interface elements on a straightforward grid system. The system functions like a basic floorplan which allows interface elements to tile neatly within its boundaries. The grid consists of a 16x12 array of square tiles.

			The diagram below shows the screen dissected into cells. Furthermore, the cells highlighted in blue indicate the areas suitable for activity toolbars. Note the exclusion of the corners, which are reserved for the hot corners which invoke the frame. In order to prevent accidental invocation, no buttons should be placed in these locations. Though all edges of the screen are suitable for placing toolbars, we recommend that the top and left edges of the screen serve as the primary location for them unless circumstances specifically suggest an alternative. Conforming to these guidelines will both make the variety of activities supported on the laptop feel more consistent, and also reserves the right and bottom edges for scroll bars, making navigation (when required) within the primary pane much simpler. Though the grab key provides the primary means for panning, preserving these edges for scroll bars even as visual indicators will increase usability.


			[[Image:Grid.png]]


			Considering the screen at its maximum resolution of 1200x900 pixels in luminance mode, each square tile is 75x75 pixels in size. Each cell is comprised of a 5x5 array of 15 pixel subcells. These subcells provide layout guidelines at a finer level of detail. In general, the 3x3 subcell interior region is icon-safe.


			[[Image:Grid_cell.png]]

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

			[[Category:Design Gang]]
			[[Category:Graphic Design]]

209.237.227.133: FIELD_OTHER

2008-12-16T19:44:48Z

FIELD_OTHER

← Older revision		Revision as of 15:44, 16 December 2008
Line 3:		Line 3:
	{{hig-subnav-intra\|p_page=Input Systems\|c_section=The Sugar Interface\|c_page=Layout Guidelines\|n_page=Icons}}		{{hig-subnav-intra\|p_page=Input Systems\|c_section=The Sugar Interface\|c_page=Layout Guidelines\|n_page=Icons}}

	~~===Layout Guidelines===~~		FIELD_MESSAGE_nogetsitn

	~~====The Grid System====~~
	In keeping with the simple, flat visual style of the Sugar interface, we have designed all of the interface elements on a straightforward grid system. The system functions like a basic floorplan which allows interface elements to tile neatly within its boundaries. The grid consists of a 16x12 array of square tiles.

	The diagram below shows the screen dissected into cells. Furthermore, the cells highlighted in blue indicate the areas suitable for activity toolbars. Note the exclusion of the corners, which are reserved for the hot corners which invoke the frame. In order to prevent accidental invocation, no buttons should be placed in these locations. Though all edges of the screen are suitable for placing toolbars, we recommend that the top and left edges of the screen serve as the primary location for them unless circumstances specifically suggest an alternative. Conforming to these guidelines will both make the variety of activities supported on the laptop feel more consistent, and also reserves the right and bottom edges for scroll bars, making navigation (when required) within the primary pane much simpler. Though the grab key provides the primary means for panning, preserving these edges for scroll bars even as visual indicators will increase usability.


	~~[[Image:Grid.png]]~~


	Considering the screen at its maximum resolution of 1200x900 pixels in luminance mode, each square tile is 75x75 pixels in size. Each cell is comprised of a 5x5 array of 15 pixel subcells. These subcells provide layout guidelines at a finer level of detail. In general, the 3x3 subcell interior region is icon-safe.


	~~[[Image:Grid_cell.png]]~~

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

	~~[[Category:Design Gang]]~~
	~~[[Category:Graphic Design]]~~

18.85.47.55 at 18:46, 15 December 2008

2008-12-15T18:46:29Z

← Older revision		Revision as of 14:46, 15 December 2008
Line 20:		Line 20:

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

	[[Category:Design Gang]]		[[Category:Design Gang]]
	[[Category:Graphic Design]]		[[Category:Graphic Design]]

AuntiMame at 23:41, 2 September 2008

2008-09-02T23:41:00Z

← Older revision		Revision as of 19:41, 2 September 2008
Line 22:		Line 22:

	[[Category:Design Gang]]		[[Category:Design Gang]]
	~~[[Category:Graphics]]~~
	[[Category:Graphic Design]]		[[Category:Graphic Design]]