Create HYWD logo 🎉

[kkemple]

Time for a logo!

Only thoughts:

• Could use this font: https://github.com/urjr/urlandingpage/blob/master/deploy/fonts/sweden-sans-reg/SwedenSans-webfont.ttf (there is a bold option as well)
• Should use the gradient for the background

[rdela]

Oh yes me plz!

Re: font, Wikipedia says only for Swedish gov. use? Other hot takes/articles linked from wiki article:

• Gizmodo
• Guardian

From Guardian article, I got to Söderhavet is launching a new type foundry and then… 🎯🎰🎉🎊✨

https://so-type.com

You can download one of the first new typefaces, So Ray, in it’s Medium weight right here, right now and completely free. So Ray is a quirky modern grotesque that works great in headlines and body text, or any other way you like. This text is set in So Ray medium. Additional weights will be released this fall. Feel free to contact us for more information.

The Regular and Light versions are in use on https://soderhavet.com and look gorg to me.

They say on https://so-type.com

[…] commercial typefaces, open to everyone. All fonts will be available free of charge for designers (non-commercial use), sorry clients!

So perhaps, this being open-source and such a good cause and all, they would be down for us/HWYD to be their show pony?

Either way seems So Ray Medium currently free for non-commercial so happy to try with that.

…Or try to select another typeface with the qualities you like about Sweden Sans! Or to use Sweden if you are all like, “Come and get me, Sweden!” ☠️🏴

[rdela]

Oh I forgot the ✨BONUS NPR story on Sweden Sans ❈

[SaraVieira]

Wait what? We used that font for all the materials of the react fest conference, logo, badges and everything 🙁

[kkemple]

well I don't think they would care really, but we could compare a few other fonts and if none are as good could always use Sweden Sans. @rdela could post a link to that font you mentioned. Worth checking out.

[kkemple]

also @rdela , I don't mind if you pick this up if you want. All I had in mind was HYWD in some nice font with gradient bg, but could be swayed with something else. Even the meh face with gradient background. (Just can't use actual emojis cause Apple copyrights)

[rdela]

I agree, odds of the gov. of Sweden coming after React Fest are next to nil, goes for HWYD unless it becomes huge. …but shoot for the ✨, right?

I like Source Sans quite a bit, not least of which because I was lucky enough to meet Paul D. Hunt at Emojicon 2016 and found Paul to be the epitome of humility, modesty, and friendliness. Also, it is unambiguously free and open.

Gonna try something and add text in with So Ray medium and Source Sans and post both, then maybe ping Paul on here and see if they like it or have tips!

[rdela]

Ok hmmm on So Ray Medium 🤨

Gonna do one with https://github.com/adobe-fonts/source-sans-pro and see how it goes. Notice using Lato in the app, worth taking a stab with it as well?

[rdela]

🎨👩‍🎨🌈 https://github.com/kkemple/hwyd/blob/f46d25747ed57e921d3c49e51b43af2a2c597484/utils/constants.js#L10-L15 ❤️🧡💛💚💙💜

[rdela]

hwyd-icon-001-20180317-114458

[rdela]

hwyd-icon-002-20180317-115501

[rdela]

Text under with question mark, in Source Sans

№ 3 – Semibold

№ 4 – Bold

№ 5 – Black

[kkemple]

i like black, could you try with no question mark?

[rdela]

№ 6 – Source Sans Black with gradient

[rdela]

№ 7 – Source Sans Black with gradient minus question mark

[rdela]

№ 8 – Source Sans Black with gradient, bigger text, tighter with icon

Also equal width of icon and better vertically centered :)

[kkemple]

can we adjust kerning on per letter basis? H W and Y D should come in a bit

[rdela]

№ 11 – Source Sans Black with gradient, optical kerning

I tried splitting up the HW and YD text layers so I could fuss with the tracking and kerning in Illustrator, but then undid split, went back to HWYD in one layer/object and settled on Optical, which is why we are skipping 9 & 10 :)

[rdela]

lol read my mind, had not seen https://github.com/kkemple/hwyd/issues/7#issuecomment-373947658

[rdela]

So I have been playing around with the icon shape a bit, the idea being to harmonize the line width of the icon with the weight of the letters.

№ 12 – Source Sans Black with gradient, optical kerning, filled thinner icon

[rdela]

…And unfilled…

№ 13 – Source Sans Black with gradient, optical kerning, unfilled thinner icon

[kkemple]

that is beautiful! what do you think @SaraVieira!?

[SaraVieira]

https://i.imgflip.com/p0vi6.jpg

[SaraVieira]

It looks amazing!

[rdela]

Great news, the colors I was using were slightly duller than our constants so № 14 is even more bubbly and vivacious!

№ 14 Correct colors and ready 4 export!

[rdela]

So what do I need to deliver here before we move on to splash screen #8 ?

I have the .ai file from Illustrator, and an SVG exported at this size, 2560 square, with and without background.

Is there a canonical approach here or a workflow y’all like? I found this “How to add icons to React Native app” Stack Overflow thread, and then decided to ask before I went any further.

[SaraVieira]

That one involves us ejecting out of react native and with expo we can just follow this for the icons https://docs.expo.io/versions/latest/guides/app-icons.html 😄

And here is the guide for splash screens: https://docs.expo.io/versions/latest/guides/splash-screens.html#content

Is this okay with you ? :)

[rdela]

Oh lovely! Let me read those in a bit and try to follow. Was just typing:

Hoping thanks to Expo no need to open Xcode or Android Studio 🤞

Wish granted! — 🧞‍♀️✨

Rest was:

Happy to make and optimize PNGs at various sizes, whatever. Easy to do many at once w/ Illustrator and ImageOptim so no trouble at all.

An .icns file? I have Icon Slate, a neat little app.

Anything else?

But maybe that is all moot now! Let me peruse those links and I will update with any questions or first draft versions!

🎊🎉🌈

[rdela]

Unlike iOS, the operating system will not mask your icon to any particular shape. Therefore, you may want to use transparency to provide some other shape besides a square.

So what do we want to do on Android?

Go circular? https://www.android.com/one/

Try and match Oreo Go rounding? https://www.android.com/versions/oreo-8-0/go-edition/ Seems inconsistent tho lulz: https://www.android.com/static/2016/img/versions/go/phone/maps-go.png https://www.android.com/static/2016/img/versions/go/phone/chrome-go.png

or just go square like Skype? https://www.android.com/static/2016/img/versions/go/play-store/play-store-apps_2x.png

[kkemple]

I think square or rounded at 3 or 4px would look really good, open to circle but may be hard with icon and text, actually, now that I'm thinking about it, for the icon and splash screen we could just do the face without text, it could then be round

[kkemple]

so looking at most app icons they don't have the name which makes sense, i think icon + text with gradient bg for splash screen and just face in circle with gradient bg for icon, open to other ideas though!!

[SaraVieira]

I agree , just the logo a little like instagram would look great I think

what do you guys think ?

[rdela]

Agree 100% I will add a first pass at these and splash screen once I am back at the keyboard, hopefully in next few hours!

[kkemple]

Awesome, and no rush! We got time! :wink:

[rdela]

square

circle

[rdela]

@kkemple you like square or circle above better for droid rev1?

[kkemple]

i think i like the circle better, if we do go square we should try rounding corners like instagram as @SaraVieira mentioned

[rdela]

this may be just me or because i am missing something but i cannot even figure out if there is a standard with the rounding on android. it seems weird to copy instagram when their corners look way smoother, more rounded, than all the google apps.

yet in certain official google distros all the google icons are circular?

but skype for android uses square icon, so i am guessing therefore most microsoft apps do the same?

seems like circular is the safest at in that if all the above are true we will never look slightly off the corners/lack thereof of google apps, at least.

I used to have a nexus 5x but never really used it much and now need to get a new android device for testing but am having trouble figuring out what to get, so forgive my ignorance and please correct me if any of this is wildly off.

most of all, the shape of our icon is round. if it were a shield or something i would say just use that shape. given that the OLD_GERANIUM outline is darker and therefore more likely to disappear into ppls backgrounds (on 2nd thought not sure this matters, looks fine on black background) I think we are safer with the one above where the gradient extends beyond the perimeter of the meh face, but just for fun:

mehoutline

Ah OLD_GERANIUM 🥀😐

[kkemple]

i like the padding around the face better, let's go with the first circle one you posted, i think that has been the best