We need homescreen & navbar icons

[samreid]

Until now, we have been using the simulation mock-ups as the homescreen & navbar icons. However, because they do not have the same dimensions as required for the homescreen/navbar icons the simulation is erroring out during startup.

@arouinfar can you work on getting the homescreen & navbar icons?

Until we have them, I'll substitute colored rectangles so the simulation will be able to launch without crashing.

[samreid]

In the above commit, I switched to colored rectangles. Reassigning to @arouinfar to work on the icons.

[samreid]

A reminder of the dimensions for each:

HOME_SCREEN_ICON_SIZE = 548 x 373 NAVBAR_ICON_SIZE = 147 x 100

And in some cases, the home screen icon can also substitute as the navbar icon (if it looks OK at the smaller size).

[arouinfar]

I closed #88 which seemed to be a duplicate, but noticed that this issue does not reference the code review issue #44, so tagging it here.

I've been working on the icons some this week, and will consult with @ariel-phet to finish them up next week.

[arouinfar]

What about these, @samreid?

Currently, these icons are a combination of illustrator and screenshots. Are these something that can be instead drawn in code?

[samreid]

I'd recommend PNG and AI files for these. These seem like a good start but I have some recommendations to further improve them:

1. The blue medium on the 1st and 3rd icon should look exactly the same. They are currently at different heights and the one on the right has an outline while the leftmost one does not.
2. For that matter, why not make the laser angle and laser size exactly the same between the 1st and 3rd icons?
3. For the prism icon, I think this looks good for a homescreen icon, but the spread of rays may be much too thin for the navbar icon. Have you tried it in context?
4. These icons will all appear against a black background. Not sure if that will introduce any complications, but just wanted to mention it and make sure you look at them in context before we finalize them.

[arouinfar]

Thanks for the feedback, @samreid.

I can definitely take care of 1, 2, and 4.

As for the prism, I drew a quick dispersion in Illustrator. I'm not sure how to make a more realistic looking version (I was thinking this would be something done in code). I will shrink it down and see how it looks.

The icon for the More Tools screen is a screenshot taken directly from the sim, as there are no design assets available for the wave or intensity meter probe to generate the icon (these elements are drawn in code). The screenshot is already a bit aliased, so I will need to generate new artwork if we want a high quality .png or .ai file.

[arouinfar]

I've emailed the updated icon assets to @samreid

I’ve attached the updated artwork (.ai and .png) for the home screen/nav bar icons. Now that white light is rendered on a black background, I made a version of the Prisms Screen icon with a black background. I’m not so sure that a black icon will work on a black nav bar, so I added a white stroke. I’m also fine with keeping a white background, as it’s an iconic representation of the Prisms screen (also attached).

[arouinfar]

@samreid I've tested these icons at navbar resolution, and they still look reasonable.

[samreid]

@arouinfar these are looking good, but I recalled one issue. I thought @kathy-phet mentioned that she wanted to keep the rainbow off of the icons/buttons/controls so that it can be something the students discover on their own, and I thought there was general agreement around that idea. (I may be mistaken or we may have changed our minds though).

[arouinfar]

Thanks @samreid. You are correct in remembering @kathy-phet's concerns. However, @ariel-phet and I agreed that the prism image is ubiquitous. It is unlikely that students will first discover that prisms disperse white light in this sim (though it may certainly be their first experience exploring the phenomena). The fact that dispersion occurs is also a secondary learning goal -- the primary goal being to explain how dispersion occurs.

From the meeting notes:

Prisms: Go with Pink Floyd look

[kathy-phet]

Just to confirm, we discussed my concern and did conclude with using the rainbow.

Sent from my iPhone

On Oct 23, 2015, at 8:40 AM, Amy Rouinfar notifications@github.com<mailto:notifications@github.com> wrote:

Thanks @samreidhttps://github.com/samreid. You are correct in remembering @kathy-phethttps://github.com/kathy-phet's concerns. However, @ariel-phethttps://github.com/ariel-phet and I agreed that the prism image is ubiquitous. It is unlikely that students will first discover that prisms disperse white light in this sim (though it may certainly be their first experience exploring the phenomena). The fact that dispersion occurs is also a secondary learning goal -- the primary goal being to explain how dispersion occurs.

From the meeting notes:

Prisms: Go with Pink Floyd look

Reply to this email directly or view it on GitHubhttps://github.com/phetsims/bending-light/issues/104#issuecomment-150611296.

[samreid]

Sounds great, thanks. I'll incorporate the icons this morning.

[samreid]

I started integrating the first icon, and it looks good on the home screen, but in context on the sim screen, it seems like the laser and light are too small. @arouinfar what do you think about making the laser bigger and the stroke thicker so this will show up better in the navbar?

[arouinfar]

@samreid, I agree it's a bit small in the navbar, so I'd be fine with those changes. Do you want me to update the .ai files, or were you planning on handling it?

[samreid]

Can you take care of this? Also, I went with the white prisms icon because the black one looked too out-of-place on the homescreen even with the white border, and the prism icon light also looks a little thin (on MacBook Air with full-sized (not full-screen) window, with bookmarks, address bar, etc.):

[arouinfar]

I've made the following changes to the icons and have emailed the updated assets to @samreid.

• Increased stroke weight of rays (Intro & Prisms)
• Increased laser size (all screens)

[samreid]

I noted the submitted PNGs were not cropped properly and requested @arouinfar to re-send.

[arouinfar]

Oops! I re-exported the PNGs and emailed them to @samreid.

[samreid]

I updated the icons in the above commit, they are looking nicer.

I would recommend to take this even further--the prisms navbar icon still looks too thin and the color spread is too close together even when I am at full screen.

Here's a blown-up version so you can see more closely what it looks like on my Macbook Air at full screen:

I think for the icons (particularly the navbar icons) it is OK for things to be a bit more cartoonish and not physically accurate, so that they look clear at small size. We can even make separate icons for the navbar vs homescreen if you want to keep the home screen one as it is now.

[arouinfar]

I've emailed updated assets for the Prisms Screen to @samreid. I like the way the Prisms icon currently looks on the home screen, so let's just use these latest assets for the navbar.

[arouinfar]

@samreid requested that stroke weight on the Prisms icon be taken up a bit more, so I emailed him the updated assets.

Originally the white light ray was 3pt to match the Intro and More Tools screen. I bumped it up to 5pt in the last set of assets. The attached assets have a stroke weight of 8pt, with the dispersion sized to match.

[samreid]

Looks better, thanks! Closing.