Page MenuHomePhabricator

Update Phabricator logo
ClosedPublic

Authored by chad on Aug 5 2016, 8:51 PM.
Tags
None
Referenced Files
F14057595: D16373.diff
Sun, Nov 17, 5:02 AM
F14015406: D16373.id39383.diff
Sun, Nov 3, 6:24 PM
F14006890: D16373.diff
Mon, Oct 28, 8:28 PM
F14000111: D16373.id39383.diff
Thu, Oct 24, 7:19 PM
F14000110: D16373.id39386.diff
Thu, Oct 24, 7:19 PM
F14000109: D16373.id39374.diff
Thu, Oct 24, 7:19 PM
F13999828: D16373.diff
Thu, Oct 24, 5:26 PM
F13996188: D16373.id39387.diff
Wed, Oct 23, 6:49 PM

Details

Summary

This updates the eye logo and removes the formal wordmark "Phabricator" as an image. Instead we'll use the new updated eye logo and plain text for "Phabricator", both of which are more friendly and less industrial.

Installs that already use the header-logo customization setting will need to rebuild their logo to 80px x 80px. They will then also get to use plain text to whitebox their install as they see fit.

Test Plan

Tested new logo at desktop, tablet, and mobile sizes. Set a random instance name, saw new wordmark. Created a really long wordmark of MMMMMMMMMMMM, saw text cut off so UI doesn't break. May need some additional tweaking, but I think we covered the most edge cases here.

pasted_file (292×366 px, 35 KB)

Diff Detail

Repository
rP Phabricator
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

chad retitled this revision from to Update Phabricator logo.
chad edited the test plan for this revision. (Show Details)
chad added a reviewer: epriestley.
chad edited the test plan for this revision. (Show Details)
chad edited the test plan for this revision. (Show Details)
chad edited the test plan for this revision. (Show Details)

Would you have made your own if the text field were available originally?

I dunno, @bjshively set it up, I was happy with the original :)

I was just chiming in with how we're using it.

I dunno, @bjshively set it up, I was happy with the original :)

I was just chiming in with how we're using it.

Down side here, from our side, is that our logomark (or at least, the one we are currently using) is some insane non-standard font. It was easier to get a premade image asset of the logo than to deal with some webfont nonsense or something (which may not have even been a realistic option without messing with the phab master stylesheet?).

You can use an 80x80 image and replace the eye logo. That is a new feature.

Specifically both items are now replaceable, but one is text and the other an 80x80 logo.

I don't love this variant of the logo because it's hard for me to visually identify that the gear is a gear, and because the gear is not a functional gear: the teeth can not interlock with a similarly shaped gear or with any reasonable gear shape (maybe some weird sun/planet gear system).

I don't think this matters particularly, but I think putting a nonfunctional gear in the logo speaks to a different level of attention to detail than, e.g., having photo faxing actually send faxes.

However, it's easy to adjust this later and I wasn't able to come up with any better alternatives internally, so I don't think it needs to block anything.

I do want to fix the control for ui.custom-header before landing this though (i.e., make it a real control which humans can actually use), since we're likely to break anyone who has customized things and then we're forcing them through the "go find the file in the database and adjust the policy" nonsense from T4214 again. I'll formalize that. I may be able to just put both things on the same config element to reduce the total amount of config, too.

I was briefly looking at the heat we use in Differntial as a more defined gear for the center, is that what your thinking?

On my technical objection, I just mean that if you print two of them out on paper, they should intermesh cleanly, and rotating one should rotate the other. I suspect any silhouette which does this will be recognizable as a gear.

In this silhouette, the grooves between the teeth are too shallow and narrow and the teeth are too wide. Two of these silhouettes can not interlock or transfer any mechanical energy through rotation.

The FontAwesome gear probably barely qualifies and I suspect if you actually tried to use it as a gear it wouldn't really work, but it's at least pretty close to being a usable shape.

I think we could alternatively claim that this blubbery gear is canonically part of an unusual gear system like this, where the interlocking gear is the inner edge of a weird ring gear:

blubber.png (300×400 px, 159 KB)

Is there a good example of a gear sillohette you have in mind?

Not specifically. I think these are good, or at least OK (the teeth could interlock, or are at least reasonably close). These "look like" functional gears to me under casual inspection, based on my understanding of the mechanical properties of functional gears based mostly on building Lego Technics:

Screen Shot 2016-08-06 at 7.40.20 AM.png (843×794 px, 58 KB)

Screen Shot 2016-08-06 at 7.43.40 AM.png (623×825 px, 90 KB)

Screen Shot 2016-08-06 at 7.47.05 AM.png (572×616 px, 29 KB)

Screen Shot 2016-08-06 at 7.48.57 AM.png (318×315 px, 76 KB)

These are bad (the teeth obviously could not interlock, or the lock would not be snug). In particular:

  • The grooves must not be narrower than the teeth: teeth can not fit into a narrower groove.
  • The teeth must be roughly square in ratio: extremely shallow or extremely deep teeth can not mechanically interlock as the gear rotates.
  • The teeth generally can't be perfect rectangles that are supposedly going to fit into perfectly rectangular grooves of the same size: they won't fit mechanically as the gears rotate.

Screen Shot 2016-08-06 at 7.41.15 AM.png (347×361 px, 33 KB)

Screen Shot 2016-08-06 at 7.41.18 AM.png (565×608 px, 31 KB)

Screen Shot 2016-08-06 at 7.41.23 AM.png (553×574 px, 23 KB)

Screen Shot 2016-08-06 at 7.41.28 AM.png (886×866 px, 78 KB)

Screen Shot 2016-08-06 at 7.48.04 AM.png (546×560 px, 23 KB)

Screen Shot 2016-08-06 at 7.49.36 AM.png (305×364 px, 36 KB)

Some of these (mostly the ones near the top) are still close enough to convey "gear" to me, but the further the silhouette gets away from being mechanically usable the more it looks like "flower" or "abstract art". The last one (the red one, with a similar silhouette to the logo) conveys "flower" to me, not "gear", if removed from context.

From Google Images, it seems that almost no one cares that gear iconography is mechanically usable (about 90% of the results for "gear" are gear-like, but probably could not serve as gears, at least if the interlocking gear shape was similar), and I don't want to block this obviously-design work on being pedantic about whether our logo could interlock with a reasonable physical gear if we 3D-print it in the future since we have no plans to.

Haha, I'll give it some effort and see if I can tweak it.

Assuming I'd land this after cut? Or no cut this week.

I ideally want to get T11437 in before you land this, but I think I can do that in like 30 minutes now that we have PHUIFormFileControl and don't need to do weird magic stuff for file uploads in forms. Hopefully today.

Maybe cut shortly and then release tomorrow? Still just digging through things this morning but I think I've missed the "US is mostly asleep" window for a deploy.

When I zoom in, it actually is drawn like you suggest, it just doesn't seem to scale well.

pasted_file (809×908 px, 79 KB)

That's definitely a lot closer (and good enough for me -- it "looks like" a gear to me) but the teeth are still too big to fit into the holes!

overlap.png (196×220 px, 28 KB)

Everyone I scale tends to look "scoopy" in the gears due to pixelation.

here's your example lego gear:

pasted_file (158×665 px, 25 KB)

maybe more teeth is the answer.

Side by side with the (current) and (updated) new logo.

pasted_file (49×211 px, 8 KB)

chad edited edge metadata.
  • cleaner logo gear

All done on my side here I think. Ended up in a reasonably good place.

epriestley edited edge metadata.

I'm pretty close on T11437 -- just get rid of the new ui.custom-wordmark option in this diff and I'll rebuild on top of the unified option I have sort-of-built locally and shoot you a diff in a little bit if nothing catches on fire locally?

Minor:

  • Sprites are 41x41, but CSS is 40x40?
  • For the "Uber" case above, I can let users specify a, uh, "wordimage" in the config in addition to a wordmark if that's not too much work on the CSS front? Config would work something like:
    • if you set an image, we use that;
    • otherwise, if you set text; we use that,
    • otherwise, we use "Phabricator".

(We could do that later, too, just not sure if it's a big mess CSS-wise or pretty reasonable to accommodate. I can take a crack at it in a followup if you don't see any obvious issues offhand.)

This revision is now accepted and ready to land.Aug 7 2016, 4:55 PM

Probably easer to support just one image, which must be 80px tall and whatever wide, and the ability to null "Phabricator".

Also don't think this needs to be a Sprite anymore

Yeah, now that we auto-inline small images as data URLs there's probably no value in spriting this.

The config UI stuff is actually kind of a mess because PHUIFormFileControl must be in a workflow form, but config editing isn't a workflow form, and it isn't trivial to convert into a workflow form, nor is it trivial to make file uploads work in non-workflow forms. I'll figure out something, though.

I have things working in a way that isn't going to win us any awards but is a basically reasonable UI for humans to set this stuff with:

Screen Shot 2016-08-07 at 10.41.39 AM.png (268×993 px, 45 KB)

Fine to have as many images/fields/forms as we need as part of that if 2 images vs 1 image is easier CSS-wise. Basically, land whatever you want and I'll rig the config on top of it.

chad edited edge metadata.
  • Remove eye-logo as sprite
This revision was automatically updated to reflect the committed changes.