Talk:Design Team/Toolbar Catalog

From Sugar Labs
Jump to navigation Jump to search

Notes from 2011-08-15 meeting

From the Design Team meeting discussion:

TA-load-save-clockwise.png

Walter will make the load/save icons all clockwise
Walter will use simplified folder icon
Walter will fill in the shell

Notes from 2011-08-10 meeting

From the Design Team meeting discussion:

Load-TurtleArt-code.svg Load-TurtleArt-code-2.svg Save-TurtleArt-alt.svg Load-TurtleArt-alt.svg Save-TurtleArt-code.svg Save-image-alt.svg Save-html-alt.svg File-open-TA.png File-open-pippy.png File-open-TA-alt.png File-open-pippy-alt.png
before:

TurtleBlocks Toolbar 3.png

1st pass at after

TA-save-load-alt.png


Dimensions-alt-new-play.png

Play new game...

Dimensions-alt-custom.png

radio buttons...

Dimensions-alt-2-custom.png

Create new game...

Variations on previous

Journal load/save: straight line arrows that go from/to the right side of the opened journal:
Save-TurtleArt-code-manuq.svg Save-image-alt-manuq.svg
I like the square arrows. However, I think we can make the changeable part of the icon larger, e.g., a larger turtle. Maybe the position of the arrow has to change depending upon whether the changeable part is vertically or horizontally oriented? --Walter 09:54, 12 August 2011 (EDT)
Collections:
Set-box-2-manuq.svg SynthLab-box-manuq.svg
+1 to the smaller box and square arrows, but as per above, I think the changeable graphic needs to be larger.

Proposal for consistency in toolbar elements order and grouping

1. Group the following buttons at the left of the toolbar: Activity, Edit and View buttons, in that order, adding a separator after them. Edit and View buttons may not be present for a given activity.

2. Follow the previous group with tool widgets that are custom for the given activity (buttons, combo boxes, labels, etc). They may be separated in groups adding separators. Put the more important tools at the beggining, on the left (for example the radio buttons in Record that change the recording mode). (TODO: put buttons with subtoolbars on the left?)

3. Put the Close button on the right. There might be a space between the Close button and the previous tool widgets, or an element may expand to fill the space (for example the URL input in Browse).

A schema of the above looks like this:

A [E] [V] | [C C | C C ... C] ________ X

I'm avoiding BNF writing in behalf of simplicity :)

Not sure that the | between the A [E] [V] and [C C ...] really serves any purpose and whereas space can be at a premium (especially at smaller screen sizes, separators can make the difference between whether or not the icons all fit. I'd argue we should restrict separators to logical groupings and to move the Close button to the far right. --Walter 09:58, 12 August 2011 (EDT)

Notes from 2011-08-03 meeting

From the discussions in Design Team meeting:

Agreed:

  • The gear icon is for when use creates content; the spanner icon is for simple parameter adjustments. For example, the toolbar icon for creating a custom Abacus would use the gear; the toolbar icon for adjusting temperature and humidity in Distance would use the spanner.
  • The "sparkle" star should be used as a badge on the activity icon to indicate new.
  • The five-pointed star is for favorites
  • We will use a box icon with a badge to indicate collections of things on submenues.
  • We will make more use of the combo box with embedded icon (see Record) for lists when appropriate.

Action items

  • walter to replace star icon in Abacus with badged activity icon
Abacus-star.svg Set-star.svg Implode-star.svg
  • walter will use a box icon with a badge for that toolbar
Abacus-box.svg Abacus-box-2.svg Abacus-collection.svg Set-box.svg Set-box-2.svg SynthLab-box.svg Jam-box.svg
  • walter will move all the Abacus sample buttons to radio buttons on the secondary toolbar

Abacus-box-2.png Abacus-box-alt.png Abacus-list.png Abacus-custom-star.png

  • manuq will do the abacus activity icon smaller
Abacus-activity-icon01.svg Abacus-activity-icon02.svg
  • manuq will move the title and sharing button to the standard activity secondary toolbar in distance.

DistanceToolbar01New.png DistanceToolbar02.png

  • gonzalo will replace the smiley face with the standard insert image icon in fototunes
  • manuq will try an isometric box for "samples"

The isometric is already done, so I'm trying another design that allows elements inside:

Collection.svg
  • manuq replace the cards icon in Get Books with something better
PileOfBooks.svg
  • manuq will do a smaller icon for maze

MazeActivityIcon.svg

  • walter will move the title, sharing and stop buttons in minitamtam to the main toolbar
  • walter will use a box button with a badge for the presets in synthlab
  • walter will rethink the tamtam edit secondary toolbar: perhaps breaking it up into multiple toolbars

TamTamEdit-alt3.png TamTamEdit-alt3-generate.png TamTamEdit-alt3-record.png TamTamEdit-alt3-adjust.png

  • walter reworks Distance toolbars

Distance-toolbar.png Distance-edit.png Distance-units.png Distance-adjust.png

Notes from 2011-04-10 meeting

From the discussions in IRC and email:


If we could quickly reach consensus on some outstanding issues regarding standard icons for things like the camera and user-created content, perhaps we could incorporate these icons in all the activities?

About icons, I think we need a agreement with:

  • New items (for example Implode use the star, and the star is our icon for bookmarks)
  • Save to journal / export (turtle art use the transfer style icons)
  • Load from journal
  • View icon (the eye is used for sensors in turtle art, maybe use the sensors icon in Measure?)
  • Photo / Camera / mic icons
  • Sensor input (is the Measure icon OK?)
  • The lips (i am trying to use them for text to speech, but is used in Measure)
  • User created content -- when use the gear? or spanner (wrench)? We have a spectrum from creating new content to modifying parameters to modifying the activity itself.
  • A search icon (we use the loupe, but can be confusing with the zoom icons?)
  • The loupe icon was not designed for the toolbar and have a different size
  • A standard icon (and way of handling) examples (code, projects, etc.)
  • Help icon (Finance and other activities have one)


TamTam refactoring

Proposed toolbar for TamTamMini

MiniMain.png

Proposed toolbars for TamTamSynthLab

SynthLabMain.png SynthLabPreset.png

Note: using a box for the list of presets and the standard erase button for erase SynthLabPreset-alt.png

Proposed toolbars for TamTamJam

JamMain.png JamJam.png JamPlayback.png JamDesktop.png

Note: It has been proposed to move the play/mute buttons to the main toolbar so as to make the Beat buttons fit on smaller displays. --Walter 16:13, 31 July 2011 (EDT)

JamMain-alt.png JamBeat.png JamOld-Playback.png JamOld-Beat.png

The new Beat Toolbar icon:

JamHeart-alt.png

New preset icons:

Jam-presets.png

Proposed toolbars for TamTamEdit

EditMain.png EditCompose.png EditGenerate.png

Note: Might make sense to move the playback / record buttons to the main toolbar. --Walter 16:13, 31 July 2011 (EDT)

EditMain-alt.png EditCompose-alt.png EditGenerate-alt.png

Note: More consolidation

EditMain-alt-2.png EditTools-alt.png

Note: Breaking it up into multiple toolbars: one for record, one for generate; one for settings; editing and playback on the main toolbar

TamTamEdit-alt3.png TamTamEdit-alt3-generate.png TamTamEdit-alt3-record.png TamTamEdit-alt3-adjust.png

Finance refactoring

FinanceToolbar01.png FinanceToolbar02.png FinanceToolbar03.png

An alternative to the Transaction subtoolbar buttons, reusing the icons "row-insert" and "row-remove":

FinanceToolbar02B.png

Considerations:

  • I have converted the view buttons to radio buttons
  • The sensitivity of the buttons in the Transaction toolbar depend on list view selected, maybe we can trigger a change to list view when Transaction toolbar is selected
  • The context help strings may need to be changed because of the toolbars change, I will check
  • The help icon may be a good addition to Sugar
  • Change the Period label for icons inside the combo box, like in Record?
  • I tested other placements for the elements in the Transaction icon, with one and two arrows, I'm open to critics