Decide on layout of sound control icon on the nav bar

[jbphet]

This was discussed in the 7/5/2018 sonification design meeting, and there were a lot of ideas, and eventually we decided to log an issue and assign it to @arouinfar for a mockup or two. Here is a screenshot from the master version of tambo:

In general, folks are thinking that the icons should be vertically aligned with the letters in the PhET logo.

[amanda-phet]

Some work has been done on these icons and their alignment, which can be found in this ai file. That might be a good place to start.

I had a quick chat with @jbphet and I was wondering if you might want to consider a 3-way toggle for this button as you differentiate between basic and enhanced sounds. We are currently using this icon to indicate sims that have "sonification",

and if we are moving to basic and enhanced, perhaps it could indicate enhanced. So, my though is, make the sound icon clickable so that it cycles through basic, enhanced, and no sound:

Another thought: the current "sonification" icon can also be redesigned. Perhaps it could look like more of a blend with the basic sound icon:

[arouinfar]

I increased the weight of the wire stub coming out of the keyboard, so that's it's more similar to waves leaving the speaker.

I think the most reasonable alignment would be to either center-align the icons with the P in the logo (top) or the PhET logo as a whole (bottom)

Here they are in context. I have a slight preference for center-aligning the icons with the PhET logo overall (bottom).

I've also mocked up both alignments with an alternative "enhanced" sound icon, as suggested by @amanda-phet.

Reassigning to @jbphet for discussion at the the sonification meeting. I'm also available to join the sonification meeting tomorrow, so I can tweak the mockups in real-time with the group.

[arouinfar]

• Flipped sounds and keyboard icons
• Icons center-aligned with the 'P' (keyboard icon centered without the cord)
• Evenly distributed icons
  

In context with a long-titled, 5-screen sim.

[jbphet]

Note: Shorten the keyboard cord so that it doesn't go above the P in PhET.

[chrisklus]

@jbphet and I worked on drawing out the sounds icon with code instead of using the font awesome icon since it was 4 MB.

In the process, we addressed what hadn't yet been done on the code end to match @arouinfar's screen shot from above, including vertically center aligning the icon with the 'P' and evenly spacing out the icons horizontally. I also slightly decreased the stroke of the X lines and curves to better match the outline of the keyboard. Here's what has currently been pushed:

@jbphet and I also discussed the possibility of removing the fill from the sound speaker so that it better matches the keyboard and doesn't draw the eye as much. I can discuss this idea and the fine tuning details of the above changes with @arouinfar. Preview of what this could look like:

[samreid]

I recall that I proposed the empty speaker icon on Thursday, but it was not well received. I think @arouinfar was in that conversation? @arouinfar do you recall?

[arouinfar]

@chrisklus the icons are looking really nice!

@samreid and I discussed the stroked speaker over Slack on July 5th, which neither of us particularly liked. However, what we discussed was not as clean looking as the screenshot in @chrisklus's #19 (comment), so I think it would be good to get some team feedback this week. I don't really have a strong preference either way.

[samreid]

Sounds great @arouinfar, thanks!

[jbphet]

During the 7/19/2018 meeting, we reviewed and tweaked the look, and arrived at the layout shown in the screenshot below with one exception: we want to try to round the back corners of the speaker (on the left of the icon). Here's the layout that is almost there:

The issue that is blocking the corner rounding is phetsims/kite#73.

Assigning to @chrisklus to finish the corner rounding once kite supports it. Once that is implemented, we should publish a couple of sim dev versions, once with a black nav bar and one with a white one, and get final approval on these.

[chrisklus]

Corners are rounded, back to you @jbphet.

[jbphet]

The recent RC for John Travoltage was published just before this change was made, so the two versions of the speaker icon can be compared easily by using the link https://phet-dev.colorado.edu/html/john-travoltage/1.5.0-rc.1/phet/john-travoltage_en_phet.html. I compared them, and the rounded version looks reasonable to me (the difference is pretty subtle). The code changes look good. Closing.