Show HN: A simple, open-source Notion-like avatar generator | Hacker News Reader

Show HN: A simple, open-source Notion-like avatar generator

avatartion.com

162 pointswilmerterrero68 comments

Instead of the feature selector popping up and blocking the avatar, it would be nice to have it side to side, or top to bottom and not close on selection but allow for tapping through the different options and see the differences.

Hey, the developer here!

Thanks for your feedback :)

I'm planning to make an update of the look and feel of the app

I like this a lot, although the UI could be optimised it is relatively easy to understand, however it kinda bugs me that there isn't a way to represent different hair/skin colors (not your fault or anything, but it would be nice if I could create an avatar that looks like me :D). Perhaps hatching or just an outline instead of a fill could be used for that purpose.

The option to download the .svg would also be useful

"Accessories" (Eyewear, face mask, earphones) and "Others" (facial hair) are hidden behind the "+2" above the Outfits button.

Option replication: Mouth - pane 1, bottom row, the left two mouths are identical.

Accessories - pane 1, bottom row, right two glasses are identical as well.

This isn't immediately obvious, and it seems a lot of other people have this issue -- some with removing an auto-generated face mask, me with removing the auto-generate facial hair -- as none of the other options produced anything close to the desired "no beard" option, and the +2 wasn't as apparent or obvious as it could be.

Additionally, why not just have those two options as regular buttons with the rest? When you've got 9 buttons and a not-very-obvious "hidden options" mini button, why not just have the hidden options be alongside the regular buttons?

Finally, for the face mask options - they remove any other "accessories" option, including eyewear -- if someone wore glasses and wished to have a face mask in their avatar, that option isn't available. Likewise, you can't have eyewear + earphones/"blushing"/bow tie (the latter of which doesn't seem to be connected to the other facial options at all).

(Oh, and the lack of representation for more feminine faces and facial features is atrocious. Ignoring that women make up ~50% of the population, they represent over 1/4 of the people in tech - and it's 2023. Come on.)

Some bizarre UI decisions. Why are the extra options hidden behind the +2? Why does the selector obscure the face? Why are the previews for features so tiny as to be useless?

Otherwise, nice.

Hey, the developer here!

Thanks for your honest feedback!

Could you don't mind giving some thoughts on improving the overall UI?

Not GP, but I would drop the pagination in the pop-ups. Regular Scrolling, maybe even css snap-scroll, would be more convenient. On mobile, some of the icons are too small to be legible (e.g. „mouth“). Overall, nice work though! The resulting avatars look great!

I would suggest a blank canvas option. I found it hard to make adjustments with some of the defaults if I was going for a specific look.

Move the chooser off of the top of the avatar is step 1.

Also defaulting to a mask and then hiding the UI for removing it? Makes the first chooser look like it does absolutely nothing. As it stands, it looks like only the first three are actually different.

If the first thing you click on appears to do nothing, user hostility begins already. The first rule of UI is don’t piss the user off, because it’s much harder to interpret feedback from an angry user (it’s possible, but it takes a lot more skill and emotional maturity).

The main thing is to make it modeless. When there's space, like on a large desktop window, put the selector alongside the preview. Then any change in selection should update the preview without additional clicks. Basically 1 click should change a feature and another click change it to something else.

If you used it for any length of time, these things should be self evident as annoyances to be streamlined. As an exercise, try every selection for every option while looking at the preview for each result.

I agree! Also I would make the non-customizing buttons different somehow - download, randomize, sound

Clearly does not play video games with a character creator

It’s cool, I like it, congrats on getting something out the door :-)

Would be cool if you could share - if the url updated as you edited?

Love this idea!

I would reduce the probability of the toothbrush mustache or its combinations with certain face types in the random generator. You start noticing the Hipster Hitlers if you keep clicking "random".

https://i.imgur.com/hYGqH2H.png

Why is there a toothbrush mustache even in there as an option? Like, even the most hipster or alternative people out there I've never seen people with one. I'm getting Hitler mustaches after every third click.

All of them look male, even if you select the most feminine features.

Edit: It's probably because of the width of the shoulders, the jawline, the thickness of the eyebrows (and more things).

all of them look hideous to me, tbh. if they were more cartoony it would actually work a lot better.

imo they all look kinda like this guy in different get-ups https://i.pinimg.com/236x/da/2b/a3/da2ba3c80630ff50c12b6d7ac...

I managed to get this which is pretty female looking imo but yeah there is a bit issue of an issue when there isn't many femalish options: https://i.imgur.com/CWca05u.png

Hey, the developer here!

Thanks for using it :)

Maybe could look like this... I have my hand tied because I'm not the owner of the artwork

In 2023 you would expect the be able to represent women easily. This is quite a blasé response, and feels exclusionary.

I agree. Even though OP is not an artist, I’m deeply offended that they did not bend over backwards to create a product that considers every permutation of every phenotype. I’m also morally obligated to reframe every misstep as intentionally malicious and bigoted.

I don’t care if 12 of the 32 hairstyles are clearly feminine, that number should be at least 16. And even then, as a closeted misandrist, I would find the remaining 16 masculine hairstyles to be extremely triggering.

In your hasty response, you failed to be an ally for the facially-divergent. Whether it be one eye or no eyes, these people need to be seen. And don’t even get me started on the default skin tone… Whyte? Really? It’s 2023.

I agree with you, it's woke nonsense that an avatar generator should be expected to cover an edge case as niche as... feminine faces. What's next in this upside down world, notion styled furry avatars?

You're clearly trolling, but talking about the empirical lack of inclusion when it comes to female aspects, is in no way connected to misandry, and you're just being deliberately obstinate and facetious in a transparent attempt to cause drama.

Not sure you should be the judge on what is "clearly famine" when you falsely equate being inclusive of women, as being related to misandry. Poor trolling attempt.

As for your fake "facially-divergent" comment, there is a way to go in terms of visibility of disabled people, which would include people with a variety of facial differences from the "norm" -- it's a shame you weren't serious, because you could've almost made a valid point there.

I can phrase that in a less "woke" way, if that helps you ;-)

Agreed. If your "hands are tied" because you didn't create the artwork, clearly you didn't consider it worthwhile in your brief to begin with.

Presuming the artist is still around, one would imagine you're capable of commissioning them for a wider array of options. Women represent around half the people on the planet, yet seem to be more of an afterthought, or not a thought at all.

Even for men, the options are pretty "big and blocky" or go home.

As developer93 said, your respond was quite blasé, and absolutely feels exclusionary - the kind of "nothing I can do" attitude just puts across that you don't want to do anything about it, presumably because - given the apparent lack of forethought on including women in the design spec - you don't think it's a problem?

Part of the issue is that the randomization has not been crafted carefully, and instead seems totally uniform.

If 50% of the haircuts / outfits / whatever are feminine vs masculine, maybe you get a 50/50 split.

But if then 3/4 of the time, the "Other" category adds facial hair, you're getting masculine people 7/8th of the time.

I actually thought the hair was more feminine.

I think maybe the default just throws me off.

Did anyone figure out how to get rid of the damned face mask?

[edit: oh for fuck’s sake. Hidden controls]

Yeah, they could definitely do with some slimmer and more contoured options, so much of it is very "big and blocky" by default :(

Its cute, but would be vastly better if the controls were a slight bit more exposed. Kudos to the developer/designer for creating something!

I like it and thank you for creating this. Do not listen to the haters too too much. Just the valid feedback.

Maybe even an endpoint to respond with the image instead so they can be generated programmatically.

I made it, but I have to document that API: avartation-api.vercel.app/api

The code source: https://github.com/Devrax/avartation-api

Yes, please, this would be useful for my app :)

If you are that fast, just check the main.js in the src folder, there you will see the query params it just a GET :)

When running, just go to the '/api' endpoint.

Hair options could use some buzz cut, etc.

Where can I edit facial hair + glasses?

Found this by accident. Click the little `+2` on Outfits, and it opens Accessories/Facial Hair

Pretty bad UI, I just thought there were more outfits.

Tap the +2 button

Super cool. Did I miss it or is there a place to change hair color and skin tone?

i feel like scrolling would be better than pagination as its easier to select from the choices that are available

There is also notion-avatar.vercel.app

Kill off the sounds altogether. Adds nothing to it and is totally unexpected.

Yeah, the sounds were infuriating

Why does the avatar have to have a beard? And what does the “+2” mean?

Wow, harsh criticism here. I think this is very promising MVP and with a little refinement could be quite useful. Nice work!

There are some nicer equally open source options also built around Open Peeps

This one even maps to a React Component you can embed elsewhere: https://www.opeeps.fun/

Definitely a fun MVP but the UI is tough

A more saner one: https://peepslab.com

Sane, but I'm greeted with a three-eyed avatar, lol.

All male too :(

I don't think so.

The first one I got was holding a knife...

The only option seems to be to cycle one at a time through every option. That’s totally insane.

Since when can a website play sound without my consent?

The sound is annoying and does not add much to selecting an item. All the features look small when selecting them, so hard to to see the differences until clicking. So trying out a bunch of different ones combined with the sound was irksome. I'm not sure how you test with it on, I turned off my speaker.

Since forever. The lack of "muted by default" behaviour is very frustrating. It's also implemented per-tab rather than per-domain. What the hell? I want all sound directed to /dev/null by default with the option for me to enable it. In 100% of instances I will know whether I want sound to play before the sound actually plays.

I've a feeling they can't do it because websites would complain, though. You can use all free software and other people will still find a way to control your computer.

I think the way that it works is that by default sound is muted, but browsers allow onClick event handlers to unmute the tab.

So if you have a page that tries to make sound after it has loaded but there has been no user interaction, it will be muted.

But as soon as you interact with the page, all bets are off.

Hey, the developer here!

You can disable the sound by just clicking the sound icon.

Ok, but why is there sound in the first place? What does it add to the experience other than confusion and frustration?

i liked the sound.

(I work at Notion)

Notion’s illustration style is the work of [Roman Muradov], and many of the avatars are the work of [Iris Chiang]. Roman doesn’t appreciate software like this that tries to reduce their artistry to a commodity. If you’re going to rip off the style, please do it with care: use feathered painterly strokes, not sharp vector edges. The avatars are drawn in Procreate, not Adobe Illustrator.

[Roman Muradov]: https://bluebed.net/

[Iris Chiang]: https://irischiangart.com/

Everything is a remix. Roman and Iris might not like this - tough luck for them.

Just imagining an alternative way this conversation could've gone:

A: "Glad you were inspired by our illustrations! Please give credit to the artists that originally created them though. I also think you might be missing some of the painterly details that make the Notion style unique :)"

B: "This probably falls under fair use, but I agree it'd be nice to respect their artistry."

Are you an official representative of Notion, the company? Because if so...yikes, this is a really, really bad look.

OK, so? Just because someone uses another software, doesn't make it "low quality."

Reply on news.ycombinator.com