Difference between revisions of "Design Team/Proposals/Toolbars/Activity-wide Toolbar mock-ups"

Revision as of 12:08, 11 July 2009

<Your proposal's pithy name here>

Rationale:

Features:

<1st feature here>
<2nd feature here>

Implementation Details:

Reviewer Comments:

comments here

Icons

Tags under titles

Example mock-up based on current Journal (0.84) using two lines for title and tags per each entry. Notes: Entries with no tags have their title vertically centred to keep visual balance; entries with more tags than can be displayed end with an ellipsis, this could just be indicative that there are more tags, or have hover hint function showing the remaining un-displayed tags. Clicking a tag should add it to the search field to allow drilling down into results.

Activity wide Toolbar mock-ups

TODO:

Lots and lots of icon work
- find meaningful visual replacements for all text tab labels
- improve icon design for the stand in versions used below
Icons should (somehow) reveal their original tab text names
- a still open design question
- really text + icons would be clearer, but space is limited

Top level Activity toolbar for TurtleArt

Example showing basic top level Activity toolbar. Note that I am not trying to redesign TA's toolbar user interface, I am trying to swap in the new proposed design without changing any existing tab/tool design from Walter. The top level Activity toolbar is present at all times. It provides access to naming, collaboration, icons for existing TA tabs, the keep icon, the stop icon.

Icon replacement of "Share with:" menu

Share with is replaced with an button icon and palette to provide enough space for the tabs to move into the main Activity toolbar as icons. Note that this leaves just enough space for six replacement tab icons (enough to cover the existing Write toolbar tab content).

Example TrutleArt "Project" tab

I've used TA's Activity icon for the primary "project" tab, this could be a technique used for all default tab contents if needed. We could also design a generic "project" icon and perhaps use it in other activities.

Example TrutleArt "Edit" tab

using Eben's generic icon for edit here, it's a good strong, memorable silhouette icon, though it may not be clear in other cultures

Example TrutleArt "Save as" tab

I've just tried to show Walter's existing "Save at" tab here, though I do think import/export is a better text description ;-)

@@ Line 22: / Line 22: @@
 ==[[Design Team/Proposals/Toolbars/Icons|Icons]]==
+===Tags under titles===
+[[Image:journal_tag_mockup_frm_gary_v1.png|thumb|centre|640px|Example mock-up based on current Journal (0.84) using two lines for title and tags per each entry. Notes: Entries with no tags have their title vertically centred to keep visual balance; entries with more tags than can be displayed end with an ellipsis, this could just be indicative that there are more tags, or have hover hint function showing the remaining un-displayed tags. Clicking a tag should add it to the search field to allow drilling down into results.]]
+=== Activity wide Toolbar mock-ups ===
+TODO:
+* Lots and lots of icon work
+** find meaningful visual replacements for all text tab labels
+** improve icon design for the stand in versions used below
+* Icons should (somehow) reveal their original tab text names
+** a still open design question
+** really text + icons would be clearer, but space is limited
+==== Top level Activity toolbar for TurtleArt ====
+[[Image:toolbar_mockup_gary_turtle_art-52_activity.png|thumb|centre|640px|Example showing basic top level Activity toolbar. Note that I am not trying to redesign TA's toolbar user interface, I am trying to swap in the new proposed design without changing any existing tab/tool design from Walter. The top level Activity toolbar is present at all times. It provides access to naming, collaboration, icons for existing TA tabs, the keep icon, the stop icon.]]
+==== Icon replacement of "Share with:" menu ====
+[[Image:toolbar_mockup_gary_turtle_art-52_share_with.png|thumb|centre|640px|Share with is replaced with an button icon and palette to provide enough space for the tabs to move into the main Activity toolbar as icons. Note that this leaves just enough space for six replacement tab icons (enough to cover the existing Write toolbar tab content).]]
+==== Example TrutleArt "Project" tab ====
+[[Image:toolbar_mockup_gary_turtle_art-52_project.png|thumb|centre|640px|I've used TA's Activity icon for the primary "project" tab, this could be a technique used for all default tab contents if needed. We could also design a generic "project" icon and perhaps use it in other activities.]]
+==== Example TrutleArt "Edit" tab ====
+[[Image:toolbar_mockup_gary_turtle_art-52_edit.png|thumb|centre|640px|using Eben's generic icon for edit here, it's a good strong, memorable silhouette icon, though it may not be clear in other cultures]]
+==== Example TrutleArt "Save as" tab ====
+[[Image:toolbar_mockup_gary_turtle_art-52_save_as.png|thumb|centre|640px|I've just tried to show Walter's existing "Save at" tab here, though I do think import/export is a better text description ;-)]]
 <noinclude>