Hacker Cat 🐱‍💻

[alexkadis]

Hacker Cat is a non-standard emoji sequence that was created by Microsoft. I thought it would be fun to include in OpenMoji.

Codepoints:
🐱 U+1F431
‍ U+200D
💻 U+1F4BB

This was designed using a combination of the OpenMoji 😾Pouting Cat Face and 💻 Personal Computer emojis.

PNG (128 x 128 px)

SVG (I can't seem to upload svgs as-is to Github)
hacker-cat-openmoji.svg.txt

[carlinmack]

I like it! I think it might be improved by bringing the laptop face on and the back having a trapezium shape. If it doesn't look like a laptop any more, maybe put a small circle in the middle to denote the logo on mac, surface, etc laptops

[b-g]

This is a fun one! :) But before we are able to include the Hacker Cat ... it needs a bit more ❤️! Please have a look at the https://openmoji.org/styleguide/ and consider Carlin's feedback. Also please submit the iterations here showing the grid (guide lines) layer and put it next to a few related ones eg. woman technologist

[alexkadis]

Thank you @carlinmack and @b-g for the feedback. How about this version?

Color:

On the grid:

On the grid, outline only:

[carlinmack]

Nice looks good! We might discuss editing woman technologist to have the same laptop

[b-g]

Yes it is much better! However it is very unusual to use the entire y-space ... it will look very tall next to the technologist ones. Hence I would vote:

• to make the cat (head) smaller to fit better in terms of size to technologist
• would leave the notebook as it is, even if different to other notebooks
• maybe: make the notebook logo in a lighter grey or full black
• maybe: add the notebook logo in the line layer (or line-supplement layer)
• maybe: add the fun headband like in the original emoji (but not in red, please no code kamikaze connotations)

[alexkadis]

@b-g how's this?

• I made the cat head roughly the same size as the woman technologist.
• I made the laptop logo black and moved it to the line-layer.
• I adapted the 🎀 ribbon emoji and 👔 necktie emojis to make the bandana.

With standard dimensions:

Zoomed in:

Grid:

Outline:

Edit: updated line-widths.

[dnlutz]

I'm getting into the discussion a little late, but I have one remark:
the lines should have a constant line width of 2 px. At the moment they look uneven and it looks almost as if the cat is wearing eye shadow ; ) The line endings over the laptop also look a bit quirky, the should be rounded / circular.

I would not change the laptop of "woman technologist", IMO it's ok when the cat uses a different laptop.

[alexkadis]

@dnlutz I've made a new version that has 2px line widths only. I don't really like it much as it requires losing a lot of the detail. Anyone have suggestions?

Zoomed in:

Standard 72px:

[carlinmack]

hmm have a look at the line widths of the original cat https://github.com/hfg-gmuend/openmoji/blob/master/src/smileys-emotion/cat-face/1F63E.svg in your editor and see what the they are. I think @dnlutz was wanting you to use the eyes from that emoji as they were somehow altered in the process to now

[alexkadis]

So that it works with the required 2px outlines, my options are to either make the face much larger than woman technologist, making it take up much more room on vertical space than is proper, or drastically simplify the cat.

Latest version:

Compared to...

Zoomed in:

Grid lines:

Grid color and lines:

[dnlutz]

A lot of important design principles are addressed in this thread. Therefore I will try to look at some of the issues in detail. Unfortunately, I won't get to it until the weekend at the earliest. But I'll take care of it asap ; )

[alexkadis]

Another version that's a bit clearer at smaller sizes.

Version above (Let's call it Version A):

New version (Let's call it Version B):

[dnlutz]

As promised – some thoughts on some basic topics in this thread:

Simplicity is not a bug – it's our key feature

Compared to letters, Emoji are far too detailed and intricate. This makes them difficult to read and use. That's the reason why we developed OpenMoji as a simpler and more straightforward system. We don't want to be neither retro nor arrogant, but we consider current mainstream emoji design to be a historical aberration.

Graphical signs have to be easily identifiable and differentiable. They should also harmonize as well as possible with the surrounding text. That's why we stick to Albert Einstein's quote: "Everything should be made as simple as possible, but no simpler".

[dnlutz]

Details

Of course people enjoy beautiful details. Not only Charles Eames has recognized their importance: "The details are not the details. They make the design." However, simplicity is our central feature. We can never reproduce all the details of the world - so we shouldn't even try it. That's why we want all emoji to be as plain and simple as possible: from "Woman Mountain Biking: Medium-Dark Skin Tone" to all the flags.

Our long-term goal: as few anchor points as possible ;) That's why we want to further simplify all unnecessary details in future releases.

BTW "man and woman mountain biking" are interchanged – we have to fix that

[dnlutz]

Line width

A uniform line width of all our emoji is a central parameter of our design system. The default line width is 2 px. To ensure a uniform visual perception, the line width can be reduced to 1.6 px for small elements. If the line width is left at 2 px, small elements appear too thick compared to larger shapes. This optical effect is related to the interior shape:

[dnlutz]

Interior shapes

"The white inner space of the letter is involved in the shape of the letter. While drawing, the type designer must constantly weigh the form against the counter form." Emil Ruder

Just as with type design, it is essential to keep an eye not only on the black outlines, but also on the negative forms they create. Too small and delicate interiors should be avoided, therefore the shape of the outlines must be changed if necessary.

Small interior shapes often occur when double lines are used. Therefore double lines should be avoided if possible and replaced by single lines. If double lines are used, the minimum distance between them should be respected.

[dnlutz]

Back to Hackercat: the only thing i would recommend to take a closer look is the headband – the rest is fine for me. Maybe it could go in this direction?

[dnlutz]

Sizes

Unified sizes are a tough topic for emoji. Our first aid is the base square. From this base square we have derived basic sizes for other basic geometric shapes. Nevertheless, a visual check after the design is indispensable. We should present the basic sizes for different emoji categories in more detail in a guidelines update.

That was a lot of text in the Hackercat thread now. But since we have to extend the guidelines anyway, I just used the opportunity ; )

[b-g]

@dnlutz Wow! Great to have this list! Like especially the pattern approach of "problem and solution". Would be important to have this soonish in the styleguide.

[b-g]

Had finally time to create a hacker cat ... changed the size of the head, the clothing to the one of the mechanic (less complex than the one of the technologist) and added a "logo" to the notebook. Will go with the last one and create a PR soon. Hope that is fine for everyone.

[b-g]

Hacker cat will be shipped with next release ...

[alexkadis]

Thank you! I'm sorry that I wasn't able to complete it.

[b-g]

@alexkadis No worries! :) Thanks for the push/suggestion!

[alexkadis]

@b-g I would like to be listed as the author of this emoji. I didn't complete it but I did do a lot of the work. Is that ok? Don't want to step on toes but I've just always wanted to have 'my own' emoji.

[b-g]

Hi @alexkadis,

Sorry for the slow response very busy here!

I'm afraid but I see this very different. You are absolutely right that you put work in it and that you've proposed it. However you did not push it through and you did not communicate with us for 3 months. Hence I felt safe that you would not be any longer interested and took over the todo.

I can assure you that I did not incorporate anything new from your side, not any svg source code nor new ideas. I very literary took the already existing cat (scaled it down), added a trouser (based on the already existing mechanic) and added a notebook (3d not 2d, based on the already existing technologist).

But we gave you credits for the suggestion, see https://github.com/hfg-gmuend/openmoji/blob/master/changelog.txt#L190

I hope this is okay for your.

I've just always wanted to have 'my own' emoji.

That is great! What about designing a new one e.g. still a few open for Emoji 13? Or there a some very cool non standard ones in a similar realm like the hack cat?

We really would love to see your contribution here!

All the best,
Benedikt

[alexkadis]

Ok! That completely makes sense. I’ll look at the other emoji!

[b-g]

Many thanks for your understanding! I really appreciate! You are really welcome: What about "claiming" Ninja Cat instead of Hacker Cat? :)