Learn more about these different git repos.
Other Git URLs
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:
This screenshot shows the exact files we will need.
<img alt="discourseicons.png" src="/design/issue/raw/files/4cb2c7043db0341816f88f24e87b52f12d23f079047e79841f603f0df97dad48-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?
<img alt="ask_3.png" src="/design/issue/raw/files/ac283893a6da62b3ffc2c64ee65ab437d2926239c3ec44d1bea57c0be8f04c9b-ask_3.png" /><img alt="ask_2.png" src="/design/issue/raw/files/f863ead7350169900c473a0855c8ddc01065a4396707de87d7ee78711beaac19-ask_2.png" /><img alt="ask_1.png" src="/design/issue/raw/files/c354fcace378f445bbcdb254d9793b133477931a5272cce2c4f17e63edd20003-ask_1.png" />
I was thinking if we could do something like this. Minimal, within the colour palette and easy to identify. I feel that typography needs alot of work here but apart from that what do you think about these iterations?
@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.)
<img alt="Screenshot_from_2021-02-22_13-26-46.png" src="/design/issue/raw/files/bbeab9ee6ed351894efac361c7028c7c7278dcd3c52d550dcee5c729a48ee82f-Screenshot_from_2021-02-22_13-26-46.png" />
Metadata Update from @duffy: - Issue assigned to yavnikaa - Issue tagged with: triaged
<img alt="askfedora_iteration.png" src="/design/issue/raw/files/836e0ff92676f3f2e3a214f84905b4714a9f084911be7e9ffec65e92335ab4e3-askfedora_iteration.png" />
I modified your version of iterations to this. How does it look?
<img alt="askfedoraaa_iteration.png" src="/design/issue/raw/files/3e0aac2aea109a8ff379c0a64dcc27fda0067cc749e4f64dc3ac5da42f9b4064-askfedoraaa_iteration.png" />
there was some problem in the export. a bigger version here.
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.
Ah, alright. I personally prefer the open version more as it gives more breathing space to the entire logomark.
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.
<img alt="ask_iterations.png" src="/design/issue/raw/files/1813ca9980416b831337f7574bf368afacc2705075c6e10f1e44430f04de80a5-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.
<img alt="candidates_Ask.png" src="/design/issue/raw/files/e8ba9e77c514220b445f95d62e0d2867ce00b66ee8263ee00208c399d9917ec2-candidates_Ask.png" />
A better export (I guess) ah
@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?
<img alt="ask_logo-ss2.png" src="/design/issue/raw/files/f701c9eeb1606d8c31512324d8ee5b85393d1cb9dddb3904b4cfd8bb77d30ba2-ask_logo-ss2.png" /><img alt="ask_logo-ss.png" src="/design/issue/raw/files/48469df8eaa742fec2cf60e60248499889e3f78e02f792814a1edb5a138c4e22-ask_logo-ss.png" />
I wasn't sure if we should keep that outer rectangle with the logo or just put the logo mark as it is. So, here are both versions :))
@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?
<img alt="askfedora_logocheck.png" src="/design/issue/raw/files/a77c879bd85e6cf45c52b5a56ee9ee0cbd39feeb1d3b434e7cc6b30bf31aacbc-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?
<img alt="option2.png" src="/design/issue/raw/files/42bedc19ab8ccbff409c218f09be1a5745934778c08d9a6fd7b1884f5c5684c5-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?
Sure, no problem.
<img alt="askfedoraaaa.png" src="/design/issue/raw/files/7fa013206595e5bb93d1573bd73faac9d7874e73cd76c41d341b1d8889eba168-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.
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.
<img alt="askfpo-suggestion.png" src="/design/issue/raw/files/e56f75b2ece7178624cd579296b3c5f0e5ad25fa8b650309d43c0001f180a989-askfpo-suggestion.png" />
<img alt="askfedora_iterationx.png" src="/design/issue/raw/files/367c6ac8d6da36583961dd5c01715e38e940f658b5103f3d70665ee973d346ff-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.
<img alt="ask_testlogo.png" src="/design/issue/raw/files/2a30753d827d85f76772945a1caba20f7fefa474ebd665e81bc7ef15551c3630-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.
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:
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 :))
Awesome thanks!
@yavnikaa dont forget to email me the svg too.
Mailed all the files to both of you :))
Got 'em, thanks! Live now on https://ask.fedoraproject.org/
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 :))
@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 :))
Hello @mattdm, @duffy and @yavnikaa
I'm not a part of teh design TEAM hovewer.
This logo has some time in askfedora in production I think this ticket should be close
and again thx for your great work
Yeah, it's beautiful. Thanks again @yavnikaa !
Metadata Update from @mattdm: - Issue close_status updated to: Fixed - Issue status updated to: Closed (was: Open)
Login to comment on this ticket.