#725 New logo icons for Ask Fedora
Opened 5 months ago by mattdm. Modified 2 months ago

The Ask Fedora site is just using generic fedora logos everywhere. Even with the new theme these are a separate component. Since we have the new logo coming up, let's do two things at once:

  1. Get appropriate, design and brand-approved designs specifically for Ask Fedora
  2. Use the new logo!

This screenshot shows the exact files we will need.

discourseicons.png


Note that this is not a duplicate of #726, although they are similar. That other site (Fedora Discussion) has a contributor-focused bent, and this one (Ask Fedora) is for end-user support. They should have a somewhat different look so they are easily distinguished.

Also of note: I'd put this at medium priority on the list of things to get the new logo; it isn't urgent.

Since I am working on the Discourse theme as well, I would like to take this up alongside. May I work on it?

@yavnikaa Hey I love that mark you've come up with! What do you think about these three options - the first is the most conservative, it just uses the new default template, but I like the idea of incorporating your mark as well (the bottom two.)

Screenshot_from_2021-02-22_13-26-46.png

Metadata Update from @duffy:
- Issue assigned to yavnikaa
- Issue tagged with: triaged

4 months ago

I love this big but I think it loses essential detail in the small version. Maybe use the "open" version below certain sizes?

I love this big but I think it loses essential detail in the small version. Maybe use the "open" version below certain sizes?

Yeah, sure, I agree. The elegance goes away in the smaller version and maybe we can modify it for mobiles and favicon and use the current iteration (big version) in the desktop.

I do want to get away from using logo elements like the bubble outside of the logo, so maybe we should stick with either the circle or open version?

@yavnikaa can you play with the mark on the pixel grid so that it stands out at smaller sizes? The amount of space logos get in discourse looks to be about 50px tall so it needs to stand up at that scale. Do you have experience working with icons on the pixel grid? I can give some tips if needed.

I do want to get away from using logo elements like the bubble outside of the logo, so maybe we should stick with either the circle or open version?

Ah, alright. I personally prefer the open version more as it gives more breathing space to the entire logomark.

@yavnikaa can you play with the mark on the pixel grid so that it stands out at smaller sizes? The amount of space logos get in discourse looks to be about 50px tall so it needs to stand up at that scale. Do you have experience working with icons on the pixel grid? I can give some tips if needed.

Sure, sure. I have worked with grids before and do have an idea but would love to hear any additional tips you have. I will prepare a draft of about 50px height with this symbol and Ask Fedora. Also, for the typography of 'Ask Fedora', I have used Montserrat. Is that the right font choice as per brand guidelines?

@yavnikaa Awesome! Yep Montserrat is the correct font, I think you might not be using the same weight though. It should be in Semi-Bold. What you have looks slightly thicker? Are you using the SVG sheet I emailed you? There's extra weights of Montserrat that you can only get from the fontsquirrel.com version so I wonder if the semi-bold is from that and you don't have it on your system. Would you mind taking a look?

For the pixel grid tips - this is actually a pretty good tutorial. They focus on a specific tool which you dont need, inkscape does all the same things - but the graphics and explanations of the core concept are fantastic - https://www.mapdiva.com/artboard/artb-tutorial/complete-guide-to-pixel-perfect-icons/

I suspect part of the solution will be to enlargen the little triangle tip of the speech bubble in the mark, and align the straight edge of it to the pixel grid so it comes out crisp and sharp.

ask_iterations.png

I worked on the iterations. I have corrected the font weight here. I stuck to open space for the symbol and blue colour as it is reflective of trust and knowledge. I went through the tutorial for pixel grids and it was pretty insightful.

I have a few concerns here. The text alignment with respect to grids (as in the 1st) looks a little odd I feel and so I tweaked it a bit(like in the second). Is it fine? I modified the speech bubble mark as @duffy pointed out.

The height of the logo is 48px as I wanted to keep it in a multiple of 4 (helpful for the grid thing XD). Looking forward to feedback on this! :')

Edit: I don't know why the exports look so pixelated, but I think these blurry images reinforced that a modification as in the 3rd one is required haha. I'll share the svg on mail if it's good enough to develop further.

@yavnikaa That looks great! I would kern the A in ASK a little to the left, because of the shape you cant rely on the auto left alignment bc it doesnt acct for all the negative space in the shape. Otherwise looks good from here! After the A tweak, can you make a mockupof it in the logo slot of a screenshot of ask.fpo so wr can see it in context?

@yavnikaa the frame wasnt meant to carry over - you can drop it. :-)

The logo text looks quite small in proportion to the rest of the site. Can the mark on the left be scaled down so the text can be scaled up? Maybe can we think abt scaling the "fedora" wordmark down relative to the "ask fedora" text too?

askfedora_logocheck.png

Changed the format a bit to let the major focus be on ask fedora and aligned the text with the symbol. Is it fine or do we scale up the symbol a bit?

option2.png

Here the symbol is a little bigger and there is some padding within the logo margins and text as I felt that it was looking odd in the previous iterations.

Also, do we increase the letter spacing in ask fedora? It might give some breathing space to the logo and look good. Not sure if it will make alot of difference, but just a thought.

Looking forward to your views and feedback :))

@yavnikaa I have to get back to you on this on Monday if that's alright? We'll pick it up back then?

@yavnikaa I have to get back to you on this on Monday if that's alright? We'll pick it up back then?

Sure, no problem.

askfedoraaaa.png

How about this? Not sure as the icon does lose its vitality but overall it goes better with the mockup I feel. What do you think @duffy ?

@yavnikaa i think the mark is too small to read at that size.

@yavnikaa i think the mark is too small to read at that size.

Right, agreed. So how do we go about this further? Shall we stick with the format with the fedora logo and do away with the mark? Or develop something on the lines of the previous iteration?

@yavnikaa I would keep pushing! Here's some food for thought - I pushed the mark shape to be wider and shorter to better fit the space. This is without pixel grid alignment - but this is one idea of a direction you could pursue.

askfpo-suggestion.png

askfedora_iterationx.png

Worked on this concept and made the logo mark with 4:3 dimension. Aligned with the grid and the mockup, keeping the padding of the logo on top and bottom equal. How does it look now?

Edit: The size of the logo mark looks different on both of our mockups possibly because of the screen size and margins feel different too. Shall I directly try it with the 48px dimension from the discourse backend on the theme I was building just to check once for clarity? That ways it will be easier for us to judge and make a choice.

@yavnikaa yeh, if we can bump the size up on the full logo mark + text as big as discourse allows that would be great. I can send you the version from the mockup I made at 48px tall, it's not pixel grid snapped though but maybe it would help? I'm emailing it now.

Hello. I worked on it further and matched with the discourse requirements. So i modified your version and this is what I came up with.

ask_testlogo.png

I think this is good to go if you are satisfied with it. However, I tried to upload it in the discourse theme but the logo can be chnaged only from the admin account I guess. So, if possible before sealing it, can we just test it on Discourse once and discuss further?

I will share the svg version on mail once you give a green signal :')

@yavnikaa that looks good to me! @mattdm is trying out a new logo on a test site smtg you have perms to do? see comment above ^

I don't have a test site (I have a request for one in infra), so we'll have to test it live.

@yavnikaa that looks good to me! @mattdm is trying out a new logo on a test site smtg you have perms to do? see comment above ^

Alright! I'll mail the svg and png for the final draft to both you and @mattdm :))

@yavnikaa Awesome! Thanks so much for your work on this. Most ideally, if you could send me variants that match the ones in the list above, that'd be awesome. I think that's:

  • full/wide version 120 pixels high and at least 360 pixels wide
  • square version 120 pixels
  • possibly a version for a "dark mode" of both of the above
  • an "icon" larger than 512×512.
  • a 32×32 icon
  • a 180×180 icon
  • an "opengraph" image that is at least 1200 pixels wide — apparently the Facebook recommendation is 1200×630
  • twitter summary image — apparently should be a 2:1 aspect ratio, and looks like 1024×512 is a common recommendation.

If this is too much of a chore I can do it from the SVG.

I'll prepare the variants and share all the files by tomorrow :))

@yavnikaa dont forget to email me the svg too.

Mailed all the files to both of you :))

Oh, in place I think the "square" versions need to be just the symbol without the words. Otherwise they shrink too much. I've done this for the non-dark version on the site, but not the dark theme. You can see it in action if you view a post and then scroll down -- the header image changes to this icon.

Oh, in place I think the "square" versions need to be just the symbol without the words. Otherwise they shrink too much. I've done this for the non-dark version on the site, but not the dark theme. You can see it in action if you view a post and then scroll down -- the header image changes to this icon.

Yes, just saw that! I'll modify the dark ones too in this format and mail right away :))

Got 'em, thanks! Live now on https://ask.fedoraproject.org/

@duffy, I'm not a part of the design TEAM but this ticket can be closed because is now in production for a long time...

Thx for your works to make ask-fedora more attractive and elegant.....

Regards.,

Hey @yavnikaa, someone on the site wondered if it's right for the center of the logo icon to be black in dark mode, or if that should be white even in dark mode. I guess I kind of think it should be white (because it's a reference to the normal logo rather than transparent), but I'd like to know what you think!

Hey! I did black to highlight the speech mark. It does a look a bit weird in the favicon. I also agree with the point that since it's a reference to the normal logo, it will be a good idea to make it white. Maybe we can try that and see the users' reaction.
I'll do the change and share this version with you on the mal in a bit :))

Login to comment on this ticket.

Metadata
Attachments 14
Attached 5 months ago View Comment
Attached 4 months ago View Comment
Attached 4 months ago View Comment
Attached 4 months ago View Comment
Attached 4 months ago View Comment
Attached 4 months ago View Comment
Attached 4 months ago View Comment
Attached 4 months ago View Comment
Attached 4 months ago View Comment
Attached 3 months ago View Comment
Attached 3 months ago View Comment
Attached 3 months ago View Comment
Attached 3 months ago View Comment