UI Style Guide Workbench - Revision history

Steven Solie: /* AppWindows */

2013-08-01T18:16:00Z

AppWindows

← Older revision		Revision as of 18:16, 1 August 2013
Line 236:		Line 236:
	The window should activate when an icon is dragged into it.		The window should activate when an icon is dragged into it.

	AppWindows ~~only~~ work ~~when~~ ~~your~~ application is running on the Workbench screen. ~~This~~ ~~makes~~ ~~sense~~ ~~because~~ ~~you need to be able to~~ drag icons from ~~Workbench~~ to the ~~AppWindow and draggable objects can't be dragged across screens. If the user opts to run your application on a~~ screen ~~other than Workbench, set your AppWindows so they will revert to AppMenus (see below)~~.		AppWindows work whether the application is running on the Workbench screen or not. Users may also drag icons from another screen to the Workbench screen.

	As a general rule, AppWindows are appropriate when your application needs to have a window anyway.

	==== AppIcons ====		==== AppIcons ====

Steven Solie: /* Icon Design */

2013-07-24T16:13:49Z

Icon Design

← Older revision		Revision as of 16:13, 24 July 2013
Line 26:		Line 26:
	The AmigaOS is the only operating system that use two different images to display the state of the icon (normal and selected state) The selected image features a glow effect, which makes them easier to recognize. Both pictures are combined to an icon for a simple but most realistic looking animation.		The AmigaOS is the only operating system that use two different images to display the state of the icon (normal and selected state) The selected image features a glow effect, which makes them easier to recognize. Both pictures are combined to an icon for a simple but most realistic looking animation.

	[[File:icon-two-states.gif~~\|frame~~\|center]]		[[File:icon-two-states.gif\|center]]

	==== Size ====		==== Size ====
Line 32:		Line 32:
	The maximum size for an icon is 256 pixels wide by 256 pixels high. The icons will be scaled down to the desired size as adjusted in the Workbench Preferences.		The maximum size for an icon is 256 pixels wide by 256 pixels high. The icons will be scaled down to the desired size as adjusted in the Workbench Preferences.

	[[File:icon-sizes.png~~\|frame~~\|center]]		[[File:icon-sizes.png\|center]]

	The painting area of an icon is defied in three virtual sections:		The painting area of an icon is defied in three virtual sections:

Steven Solie: /* Icon Design */

2013-07-24T16:11:53Z

Icon Design

← Older revision		Revision as of 16:11, 24 July 2013
Line 26:		Line 26:
	The AmigaOS is the only operating system that use two different images to display the state of the icon (normal and selected state) The selected image features a glow effect, which makes them easier to recognize. Both pictures are combined to an icon for a simple but most realistic looking animation.		The AmigaOS is the only operating system that use two different images to display the state of the icon (normal and selected state) The selected image features a glow effect, which makes them easier to recognize. Both pictures are combined to an icon for a simple but most realistic looking animation.

	[[File:~~two~~-~~state~~-~~icons~~.~~png~~\|frame\|center]]		[[File:icon-two-states.gif\|frame\|center]]

	==== Size ====		==== Size ====

Steven Solie: /* Icon Types */

2013-07-22T21:09:40Z

Icon Types

← Older revision		Revision as of 21:09, 22 July 2013
Line 95:		Line 95:

	The look of a project icon is usually determined by the application that created it and by the type of data it represents. However there is also a default project icon included in the system.		The look of a project icon is usually determined by the application that created it and by the type of data it represents. However there is also a default project icon included in the system.

			==== Icon Families ====

			An icon family is a set of icons that use the same symbolism that makes is easier for the user to identify files that are associated with a program. An icon family usually consists of an icon for the drawer and the program itself, but additional icons for project, preferences, tools or even drives might be a good idea.

			[[File:icon-families.png\|frame\|center\|Example of an icon family: tool, drawer and project icon of AmiFIG]]

	==== Create Icons? ====		==== Create Icons? ====

Steven Solie: /* Icon Types */

2013-07-22T21:06:53Z

Icon Types

@@ Line 70: / Line 70: @@
 === Icon Types ===
-There are five types of icons on the Workbench: disk icons, drawer icons, trashcan icons, tool icons and project icons. Of these, only tool icons and project icons bear discussion here.
+There are five types of icons on the Workbench: disk icons, drawer icons, trashcan icons, tool icons and project icons.
 ==== Tool Icons ====
@@ Line 81: / Line 95: @@
 The look of a project icon is usually determined by the application that created it and by the type of data it represents. However there is also a default project icon included in the system.
 ==== Create Icons? ====

Steven Solie: /* Text in Icons */

2013-07-22T21:02:24Z

Text in Icons

← Older revision		Revision as of 21:02, 22 July 2013
Line 64:		Line 64:
	[[File:icon-auxiliary-buttons.png\|frame\|center\|Buttons for Preferences, Commodities and Dockies]]		[[File:icon-auxiliary-buttons.png\|frame\|center\|Buttons for Preferences, Commodities and Dockies]]

	==== ~~Text~~ in ~~Icons~~ ====		==== Tips for Icon Design ====

	Before you use words in an icon, think about how extensive a distribution you would like to see your product achieve. It's better to have an icon communicate through symbolism than language.		Before you use words in an icon, think about how extensive a distribution you would like to see your product achieve. It's better to have an icon communicate through symbolism than language. Use global imagery that the user will easily recognize. Also avoid abstract or local symbolism and play on words. Keep your icons as simple as possible, fewer details might make your icons easier to distinguish in scaled down versions. Use the right perspective and colors for your icon. Avoid using the Boing Ball logo – the user usually knows on which system he is working.

	{{Note\|text=Before using words in an icon, think about how wide a distribution you envision for your product.}}

	=== Icon Types ===		=== Icon Types ===

Steven Solie: /* Icon Design */

2013-07-22T21:00:48Z

Icon Design

← Older revision		Revision as of 21:00, 22 July 2013
Line 57:		Line 57:

	[[File:icon-color-palette.png\|frame\|center\|Palette of AmigaOS icons]]		[[File:icon-color-palette.png\|frame\|center\|Palette of AmigaOS icons]]

			==== Auxiliary Buttons ====

			Icons for Preferences, Commodities and Dockies use buttons to separate them from other programs and make them easily distinguishable for the user.

			[[File:icon-auxiliary-buttons.png\|frame\|center\|Buttons for Preferences, Commodities and Dockies]]

	==== Text in Icons ====		==== Text in Icons ====

Steven Solie: /* Icon Design */

2013-07-22T20:58:20Z

Icon Design

← Older revision		Revision as of 20:58, 22 July 2013
Line 49:		Line 49:

	When the icon state is changed to select the light source will change extremely provide a glow effect. The colors of the icons will get darker (33 %) and a rich yellow shine will be added to the image to generate a great looking glow effect.		When the icon state is changed to select the light source will change extremely provide a glow effect. The colors of the icons will get darker (33 %) and a rich yellow shine will be added to the image to generate a great looking glow effect.

			==== Color Palette ====

			Color is a very important visual element of the AmigaOS icons as it has associated meanings and usually elicits emotional responses - to obtain it is very important to use color consistently.

			AmigaOS icons use a basic harmonized RGB color palette and gradients based on these colors to generate a more realistic appearance. To achieve this goal, the colors need to work well together in many contexts.

			[[File:icon-color-palette.png\|frame\|center\|Palette of AmigaOS icons]]

	==== Text in Icons ====		==== Text in Icons ====
Line 54:		Line 62:
	Before you use words in an icon, think about how extensive a distribution you would like to see your product achieve. It's better to have an icon communicate through symbolism than language.		Before you use words in an icon, think about how extensive a distribution you would like to see your product achieve. It's better to have an icon communicate through symbolism than language.

	{{Note\|text=Before using words in an icon, think about how wide a distribution you envision for ~~you~~ product.}}		{{Note\|text=Before using words in an icon, think about how wide a distribution you envision for your product.}}

	=== Icon Types ===		=== Icon Types ===

Steven Solie: /* Look and Feel */

2013-07-22T20:55:44Z

Look and Feel

← Older revision		Revision as of 20:55, 22 July 2013
Line 46:		Line 46:
	The AmigaOS style guide allows two general perspectives to display icons: icons look like they are placed on a workbench in front of you and icons that look like pined flat on the wall.		The AmigaOS style guide allows two general perspectives to display icons: icons look like they are placed on a workbench in front of you and icons that look like pined flat on the wall.

	[[File:icon-look-and-feel.png\|frame\|center]]		[[File:icon-look-and-feel.png\|frame\|center\|Preferred perspectives for AmigaOS icons (Docky icons)]]

			When the icon state is changed to select the light source will change extremely provide a glow effect. The colors of the icons will get darker (33 %) and a rich yellow shine will be added to the image to generate a great looking glow effect.

	==== Text in Icons ====		==== Text in Icons ====

Steven Solie: /* Icon Design */

2013-07-22T20:54:27Z

Icon Design

← Older revision		Revision as of 20:54, 22 July 2013
Line 45:		Line 45:

	The AmigaOS style guide allows two general perspectives to display icons: icons look like they are placed on a workbench in front of you and icons that look like pined flat on the wall.		The AmigaOS style guide allows two general perspectives to display icons: icons look like they are placed on a workbench in front of you and icons that look like pined flat on the wall.

			[[File:icon-look-and-feel.png\|frame\|center]]

	==== Text in Icons ====		==== Text in Icons ====