search

phetsims / brand

Assets and metadata for web apps built with phetsims/joist and related libraries.
http://scenerystack.org/
MIT License
1 stars 9 forks source link

Update all registered logos with trademarked logo #33

Closed amanda-phet closed 5 years ago

amanda-phet commented 5 years ago

@kathy-phet requested that all instances of the registered logo be replaced with a trademarked logo.

I will update the asset files in this repo (phet and adapted from phet, since phet-io already uses TM) and png files and commit.

amanda-phet commented 5 years ago

I updated the PhET logo assets and images, as well as the adapted-from-phet assets and images.

@samreid can you please verify that I did everything correctly?

Also, I skipped the logo-on-white.png under the PhET brand because it is identical to logo.png, since we made the change years ago to use one shade of yellow for all versions of the logo. Should we replace logo-on-white.png as well?

samreid commented 5 years ago

I relabeled as "blocks-publication" since this affects every simulation. For reference, "blocks-sim-publication" only blocks a single particular simulation.

samreid commented 5 years ago

From slack:

Jonathan Olson [1:03 PM] Is it ever expected to have a half-size progress bar? Pasted image at 2019-02-04, 1:03 PM image

Steele Dalton [1:03 PM] yea man

Sam Reid [1:04 PM] That looks buggy

Steele Dalton [1:04 PM] only when you want to load interactive, but not load simulations

Jonathan Olson [1:17 PM] But yes, for some reason all of my progress bars are half-size, across browsers

Sam Reid [1:18 PM] What OS? Published sims too, or just requirejs?

Jonathan Olson [1:18 PM] Also happened in a built sim

Chris Malley [1:18 PM] Is that true for all sims on the PhET site, or just recently published sims?

Jonathan Olson [1:18 PM] Windows 10 ahh checking

Kathryn Woessner [1:18 PM] Just checked master and saw it Not on published

Jonathan Olson [1:19 PM] Published sims seem fine

Sam Reid [1:19 PM] Rebooting in Windows, catch you later!

Chris Malley [1:20 PM] I tried EFAC published and master on macOS+Chrome and both look OK to me.

Jonathan Olson [1:20 PM] For everyone testing master, when did you last pull?

Kathryn Woessner [1:20 PM] I was on a Win 10 device when I saw it I pulled right before I tested

Chris Malley [1:21 PM] I pulled ~9:30 am. I’ll pull again.

Kathryn Woessner [1:21 PM] I was on phettest btw Mac OS 10.14 chrome saw it.

Jonathan Olson [1:23 PM] Where is the code that handles the progress bar?

Chris Malley [1:23 PM] After pull-all.sh, I now see the problem with EFAC master on macOS+Chrome. (edited)

Sam Reid [1:23 PM] Same problem here, running Chrome in Win 10 on phettest

Chris Malley [1:24 PM] So something changed in the past few hours. All browsers on macOS.

Sam Reid [1:26 PM] I see the problem in Win/Chrome but not Mac/Chrome (both on phettest) (edited) The code is in joist/js/splash.js

Kathryn Woessner [1:27 PM] I did see on Mac chrome

Chris Malley [1:27 PM] With brand=adapted-from-phet, I see a huge progress bar that goes off the edge of the screen. I see many commits by @amanda in brand within the past hour.

Sam Reid [1:28 PM] Oh wait, I know what it is. There’s a blocks-publication issue recently assigned to me With commits on the brand repo: https://github.com/phetsims/brand/issues/33

Chris, thanks for testing adapted-from-phet, that helped identify the problem Investigating….

samreid commented 5 years ago

It looks like the SVG viewBox approximately doubled in size. The original dimensions were:

width="276px" height="132px" viewBox="114.001 114 276 132"

And the new dimensions are:

width="569.562px" height="269.505px" viewBox="0 0 569.562 269.505"

I'm not too familiar with SVG sizing, but if we can make sure the new SVG has the same dimensions as the prior SVG then it will make updating simpler.

pixelzoom commented 5 years ago

I said:

With brand=adapted-from-phet, I see a huge progress bar that goes off the edge of the screen.

Here's a screenshot.

screenshot_1018
samreid commented 5 years ago

@amanda-phet want to take it from here, or should I explore further?

samreid commented 5 years ago

I tried loading the prior SVG file into illustrator, then I cut the "TM" out of the new file and pasted it into the old file, then used Illustrator "Save", and it seemed to work OK, but it would be best for @amanda-phet to take a look to make sure to get the "TM" in just the right size/position.

image

```svg ```

UPDATE: I remembered I also needed to update the artboard bounds.

samreid commented 5 years ago

I confirmed the PNGs and PhET-brand SVG have the same dimensions. The PhET-brand SVG has a different viewbox, but hopefully that is not a problem.

However, the Adapted from PhET SVG has different dimensions. The original dimensions were:

width="273px" height="130px"

and the new dimensions are:

width="276px" height="132px"

Can this be corrected?

samreid commented 5 years ago

Should we replace logo-on-white.png as well?

Yes please.

Also, I noticed that the "TM" exceeds the rightmost bounds of the top of the "T" for the PNG, but not for the SVG. The "TM" is proportionately much smaller in the SVG. Is that by design?

amanda-phet commented 5 years ago

In the previous comment the dimensions said 276x132 so I assumed it was the same for both logos.

Also, I noticed that the "TM" exceeds the rightmost bounds of the top of the "T" for the PNG, but not for the SVG.

Can you show me what you mean?

The "TM" is proportionately much smaller in the SVG. Is that by design?

Yes. The TM (and previously the (R)) is smaller in large logos, and larger in small logos. The TM should be the same width as the (R) for all logos.

samreid commented 5 years ago

Can you show me what you mean?

image

samreid commented 5 years ago

Looks like this is not a problem for the PhET-brand one. I used a paint fill to see where the "feathered edges" of the T and TM extend to.

image

pixelzoom commented 5 years ago

Is this being done because PhET trademarks are not registered?

If that's the case... Does this paragraph need to change at https://phet.colorado.edu/en/licensing/html#agreement-III ?

III. PHET NAME AND LOGO TRADEMARK

The PhET name and PhET logo are registered trademarks of The Regents of the University of Colorado, a body corporate.

pixelzoom commented 5 years ago

Hmmm... This website indicates that PhET's logo is a registered trademark (word mark), with registration #4572418. https://trademarks.justia.com/861/62/phet-86162666.html

kathy-phet commented 5 years ago

We are registered. It’s because we are international. Registration is by country.

Google uses TM for that reason, even though they are also registered in a number of countries but not every country.

Kathy Sent from my iPhone

On Feb 6, 2019, at 8:45 PM, Chris Malley notifications@github.com<mailto:notifications@github.com> wrote:

Hmmm... This website indicates that PhET's logo is a registered trademark (work mark), with registration #4572418. https://trademarks.justia.com/861/62/phet-86162666.html

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/phetsims/brand/issues/33#issuecomment-461278558, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AE3FZAhz11xq1e9PkM8yVffBf-QSOYAhks5vK6FHgaJpZM4ae3Jh.

pixelzoom commented 5 years ago

Thanks for the clarification.

jessegreenberg commented 5 years ago

Discussed during dev meeting and reviewed, this doesn't need to block publication and changes only involved images and SVG assets.

jessegreenberg commented 5 years ago

Before going through maintenance releases, @kathy-phet and @amanda-phet should review the changes.

34 will cover the maintenance releases.

amanda-phet commented 5 years ago

@samreid said

Also, I noticed that the "TM" exceeds the rightmost bounds of the top of the "T" for the PNG, but not for the SVG. The "TM" is proportionately much smaller in the SVG. Is that by design?

This was the case in the original logo, and the "R" also exceeded the bounds. I replaced the R with TM without noticing it in the original, so I'm updating all of the adapted-from-PhET assets again to look better. @samreid it would be great if you could confirm that the newest logos look better.

samreid commented 5 years ago

The alignment in the adapted from PhET logo seems better to me:

image

However, when I loaded the adapted-from-phet SVG file in illustrator and fit the artboard to the art bounds, I noticed there was an extra copy:

image

A similar issue is that the SVG file went from 28 lines of code to 125 lines of code, this further supports the hypothesis that there is more "hidden geometry" in this file that should be cleaned up before we begin maintenance releases in #34.

amanda-phet commented 5 years ago

However, when I loaded the adapted-from-phet SVG file in illustrator and fit the artboard to the art bounds, I noticed there was an extra copy:

You're right @samreid , I made a copy because I converted the text to outlines and didn't delete the text version. Should be fixed now.

samreid commented 5 years ago

Thanks @amanda-phet, that looks fixed.

ariel-phet commented 5 years ago

@samreid this all looks pretty good, but there is one very minor polish (which also exists on published sims)

The "kabob" is not quite aligned with the logo (I added white lines for reference). It looks like a small tweak to spacing or such might fix this issue.

menu

samreid commented 5 years ago

I adjusted the location of the KebabMenuIcon and adjusted the spacing to align with the logo:

image

In context:

image

I'll commit this, but I'm happy to make further adjustments as desired.

ariel-phet commented 5 years ago

@samreid I checked on master and the spacing and such looks good. However, when I compared to a published sim it looks like the height of the navbar changed slightly. On a published sim (EFAC for instance) the Navbar on master looks like the black band is about a pixel or so shorter. I don't think that is necessarily a problem, but I am curious if that change was intentional?

samreid commented 5 years ago

I didn't intentionally change the navbar height. To investigate further, I launched: https://phet.colorado.edu/sims/html/energy-forms-and-changes/latest/energy-forms-and-changes_en.html and http://localhost/energy-forms-and-changes/energy-forms-and-changes_en.html?brand=phet&ea

in adjacent tabs in Mac Chrome and Mac Firefox and CMD+OPT+ARROW to flip back and forth and I couldn't distinguish between the navbar height. The only apparent change in these tests was the change in the logo and kebab, and it looks like the logo moved about 1px to the left.

Would you like me to investigate further? I could run the same test on Windows. What platform did you observe the difference on? Were you using phettest, or a local pull?

ariel-phet commented 5 years ago

@samreid I did a local pull, and was testing on Chrome Win 7, flipping back and forth. I put a pixel ruler on the screen to see the difference, it was about 1 pixel.

samreid commented 5 years ago

I used Windows 10 Pro Chrome to compare phettest (with pulled joist) to published EFAC and again the navigation bar sizes were indistinguishable. I recommend assigning another developer to investigate and see if they can reproduce the problem and isolate the cause.

ariel-phet commented 5 years ago

@samreid checked on Win 7 FF, issue does not appear

Checked on Win 10 FF and Chrome, issue does not appear

Since it is only a pixel on Win 7 Chrome, and pretty subtle I think we can proceed.

samreid commented 5 years ago

For this issue, I double checked that the changed PNG and SVG files have the correct width and height, and the new ones have "TM" instead of "R". @ariel-phet signed off as a designer we revised the size of the kebab menu to match the logo. The only thing I'm aware of that we may want to discuss or improve for this issue is for the PhET brand logo SVG, which is shown for the splash screen, the "TM" isn't centered or apparently aligned with anything and I'm not sure how its size was determined. I don't know if this is by design or not:

image

@ariel-phet and @amanda-phet can you comment on that before we begin maintenance releases in https://github.com/phetsims/brand/issues/34 ?

samreid commented 5 years ago

One more thing I noticed is that when loading this SVG in illustrator the artboard doesn't align with the artwork.

image

I do not know enough about SVG to know what's causing this problem, but I should also note this is not a new problem, our old SVG has been off-centered like this for ages. We may wish to investigate if we think browsers may update and cause problems for this in the future, but as far as I know we've been safe up until now.

ariel-phet commented 5 years ago

@samreid the Splash screen logo should just match the navbar logo (in terms of size and placement of the TM). If you need a new asset for this, I am sure @amanda-phet will be able to oblige.

amanda-phet commented 5 years ago

The splash screen does not match the navbar because of its size. Kathy hasn't defined a hard and fast cutoff for when to use the various sizes, but the size and placement of the registered symbol was determined years ago. For "medium-large" versions of the PhET logo, the TM (previously the R) should be the size you see in the splash screen. For "small" versions of the PhET logo (when you would definitely not include the Interactive Simulations text), the TM is proportionally larger. Ideally the actual size of the TM is similar in both versions.

I will investigate the artboard issue. My guess is the issue persisted because the same asset was used to make the new splash.svg, as all we did was replace the R with TM (same for the other strange issue in https://github.com/phetsims/brand/issues/33#issuecomment-460436862 above).

amanda-phet commented 5 years ago

I moved the artwork to the center of the artboard, committed it (https://github.com/phetsims/brand/commit/df790422b9249fc19d7b77a0afecdeb4b28cc7cc) and downloaded it again. Seems to be fixed.

samreid commented 5 years ago

Kathy hasn't defined a hard and fast cutoff for when to use the various sizes, but the size and placement of the registered symbol was determined years ago.

Sounds OK to me. Also, can you comment on why the TM isn't centered or right aligned? I'm not sure whether that would look better at all though. Perhaps it was just to match the style from years ago.

Ideally the actual size of the TM is similar in both versions.

Perhaps it doesn't matter too much because you can't see both at the same time, but I snapshotted both from master and saw that they are off by a factor of around 2:

image

However, we don't have much room to expand the small TM and shrinking the large TM would make it really tiny. So I'm not sure what should be done, if anything.

I moved the artwork to the center of the artboard,

I confirmed the artboard bounds looks fixed, thanks!

amanda-phet commented 5 years ago

can you comment on why the TM isn't centered or right aligned?

When we settled on the location for the R, I recall doing different things to align it and play with the size, and this location looked the most natural. We compared with other popular logos out there, and they seemed to have a similar location- they appear to either be nestled in a cozy spot or were adjacent to the logo. When it was aligned with the right edge of PhET, it started to look like a period- but perhaps since the TM is not in a circle it could be reconsidered. If you think the location should be tweaked, please bring it up with @kathy-phet .

ariel-phet commented 5 years ago

Agreed with @amanda-phet, I have no strong preference on how the splash screen looks, if you think it should be tweaked, discuss with @kathy-phet. If not, please move forward.

samreid commented 5 years ago

Thanks for the additional discussion. I'm not aware of anything else that remains to do for this issue before maintenance releases begin in https://github.com/phetsims/brand/issues/34. Please correct me and reopen if I'm wrong. @amanda-phet and @ariel-phet thanks for your help here.

kathy-phet commented 5 years ago

@samreid , @ariel-phet , @amanda-phet - I looked on phettest, and the new TM trademarks look good there. I found one other issue that needs to be addressed as part of maintenance, so will start a new issue about that.