proposal for hat redesign

[localhostdotdev]

current:

proposal:

source and live render: https://jsbin.com/vakuyibuwi/1/edit?html,output

so, I tried to make it look like an hat, also tried to make it gender-neutral (women's hats have a tendency to be rounders and men's more squared (excluding caps)).

I think black/white is very minimalist and integrates well with the current design, different colors can be trivially added.

there is a connotation with "black hats" so maybe this design could be used:

if the idea of having some different looking hats sounds good I could either just go ahead an make a PR for application.css.

if more iterations on the design are needed I could try other things (tweak the roundness, height, maybe brown like currently?, colors, maybe grey?)).

disclaimer: I'm not a proper designer, I'm just trying to make it obvious that it's an hat

[pushcx]

Thanks for taking a swing at the design. We've had a few people confused by the abstract representation of a hat.

I don't want to go to a solid black background or heavy outline because it makes the hats the most visually heavy thing on the page - they draw the eye instead of accenting the post. It's great to have people speaking officially on behalf of projects, but I don't want their comments to overwhelm the discussion. I'd like to see them de-emphasized from how prominent they are now, but I'm not a good enough designer to figure out how.

[halfmanhalfdonut]

I think the hats look odd mostly because of their color. If it was changed to

span.hat {
    border-bottom: 6px solid #eaeaea;
    border-radius: 4px;
    padding: 1px 8px;
    vertical-align: super;
    white-space: nowrap;
}

span.hat span.crown,
span.hat a {
    background-color: #f3f3f3;
    color: #aaa;
    text-decoration: none;
}

it would look both less emphasized and more inline with the whiteness of the site.

[pushcx]

Grabbed a screenshot of that. It makes them significantly less heavy on the page. Hmmm.

[sanderdlm]

The hats look kinda awkward because of their size imo. The shape works fine with single words or 2 small ones, but doesn't for something like 'Debian Core Maintainer'.

Is the "hat" concept a fixed thing or are you open to new ideas?

[halfmanhalfdonut]

I agree with @dreadnip here. The longer text looks really absurd. An alternative proposal would be to have a hat icon that only has a title on hover (i.e. a browser title="Debian Core Maintainer" attribute). That way hats stay small and less emphasized, but can convey as much info as you want in the title.

[rushsteve1]

I agree with @dreadnip as well, and I think @halfmanhalfdonut's suggestion has a lot of merit.

The current hats are simply too wide to look like an actual hat. As a new user I never even realized that it was supposed to be a picture of a hat, even after knowing that was the term for that element. I thought it was just a little user flair with an odd bottom border.

If the text is moved to a title element it frees up on on space, and the icon can be replaced by something that looks more hat-like.

There are however a few problems with idea that I can immediately see:

• It isn't obvious that the hat icon would have more text.
• It may be difficult to interact with on mobile.
• Hats may accidentally take on a "verified" or "trusted" meaning when that is not intended (similar to Twitter)

[pushcx]

An icon with text alongside seems worth experimenting with. I agree with the concern about it being usable on mobile. At the moment we use the hover text to show date granted on Lobsters (probably not actually useful to anyone) and link text (useful; it's proof, like an official email address or name on site).

Probably a visual refresh here also calls for some improvement to their display on user profiles.

@rushsteve1 Hats do mean verified/trusted. We email people at their official project emails or otherwise check that they seem to be the person involved with a project that they claim to be. See /hats for more.

[sanderdlm]

I've been tinkering and tried implementing this with a single link tag and before/after pseudo elements.

Rough idea: https://codepen.io/dreadnip/pen/rNBXQxa

You'd keep the hat theme by having the icon, but because the link text is it's own "label", it allows for longer titles without looking weird.

Disregard the actual CSS, this is just the first solution I came up with to try this.