Design Team/Proposals/Toolbars/Activity-wide Toolbar mock-ups

From Sugar Labs
Jump to navigation Jump to search

<Your proposal's pithy name here>

<Your rationale here>
  1. <1st feature here>
  2. <2nd feature here>
Implementation Details:
<Details here>
Reviewer Comments:
comments here


Activity wide Toolbar mock-ups


  • 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 (version) 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). Note that the toolbar icon would change to indicate the collaboration state.
Private icon v1
Nice and simple modification to the "private" icon, as shown in existing mock-ups
Private icon v2
Small "private" rework trying to indicate isolation/boundary. Based on the media-playback-start icon.

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. Note that the secondary toolbar is pinned open (it's icon was clicked once), an that this triggers a resize of the below canvas to fit the space (well see lot's of Activity bugs with resizing, but we already have this issue to fix due to now needing to support screen pixel dimensions other than 1200x900).

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 all cultures). Worth noting that icons that have clear names are going to be important, imaging a teacher trying to explain which icon to click or in text documentation, i.e "Click the scissors icon if you need to use copy and paste."

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 ;-)