PR: Adding a banner at the top of the Readme #6352
Conversation
|
For everyone's convenience, you can view how it will look on Github on @jnsebgosselin 's repo here. |
There was a problem hiding this comment.
Overall, looks really clean and sharp, to my eye at least. Particularly for someone visiting our Github repo for the first time, I would think this would help confirm a more positive impression of our project.
I do have some general comments:
- Not sure how many people do so, but this does mean this information is now missing from the readme if viewed as a normal text file; perhaps add it back as a markdown comment or something else that won't render when the image does? Also, for accessibility to people with screenreaders and those who don't/can't load images in their browser (a small fraction, but certainly nontrivial), you should set the HTML alt text attribute (or similar) to the text in the image, i.e. "Spyder: The Scientific PYthon Development EnviRoment. Copyright Spyder Project Contributors"
- We should establish one version of our logo as the official alternate version, for use on white or light backgrounds, to avoid a proliferation of different versions created for the same purpose.
- I'm undecided on this, but maybe just a tad darker on the black/dark gray, to give it just a bit more punch? Maybe something like (48, 48, 48)? The refined look is nice, but I kept feeling it needed just a bit more oomph/presence to set the tone of a fully fleshed out editor and development environment ready for the next project one throws at it, and perhaps this might provide it.
- The slightly awkward look of the acronym CAPS in the full name takes away from the otherwise clean and polished design, IMO. Could you try going full 0,0,0 black with them instead, and/or a (not too heavy) bold?
- Can you crop all but a thin sliver of white space to the left of the image, so it renders with a bit less overall (at least on Github)? At least how its rendering in Github, it looks just a little right-heavy for my taste, and leads to apparent extra whitespace to the left of the logo vs. the other sides.
- Do we really need to include the copyright in the image? I'm not so sure it doesn't make more sense to just put it as regular text somewhere below, as I don't want to push it in people's faces as the very first thing they see; could put some people off and set a subtle tone we might not want. Furthermore, we might use the header elsewhere, where it may not always make sense to include the copyright statement right there, so excluding it would give us more flexibility. If it is included, could it be made a little smaller, and/or maybe italics?
- Also, especially if we do keep the copyright message in the logo, be aware that at least in the modern era for all states that signed the Berne convention (i.e. all of them), there is no extra legal significance to including both the © symbol and the word "Copyright"; one or the other is sufficient and both look a little cluttered. I would recommend just keeping the word, as it flows better, has a clearer meaning and is generally associated with text, while © typically precedes a year.
|
Great thanks @CAM-Gerlach 👍. This is good observations. I will try to produce a new version soon. |
You shouldn't chew acronyms over. Doing such thing is redundant, looks ugly and may be perceived as condescending. Compare with Wikipedia's style guide. |
Sorry, I'm not sure what you mean by this.
I might not (and in fact didn't) put it in such harsh terms, but I generally agree, as noted. That's essentially the basic point I'm making, and why I recommended a much subtler approach if we do want to make clear the origin of the acronym (as it is arguably not necessarily redundant in this case, as it may not be immediately obvious to everyone, especially to the large proportion of non-native English speakers who use Spyder). |
|
I meant do not overexplain it. Just writing the full form is enough, let the reader get the joy of understanding.
Overall, this is no so important, I believe. I'm quite sure not everybody knows that Python is not a snake and Forntran is an acronym. Spyder itself is quite witty name. |
|
Thanks @CAM-Gerlach and @homocomputeris for the comments and clarifications I agree with everything and I will do the changes very soon... I just need to find a little bit of time to do it and since I felt it was not a priority... but not that I've seen it is used for the website, I'm going to take this a little bit more seriously XD |
Fair enough, but I could counter with "Explicit is better than implicit" from the Zen of Python. Honestly think at that point its a matter of preference, so long as it isn't obtrusive either way (as we both agree the current form is).
They are the fortunate ones, haha (assuming you mean Fortran, which technically isn't considered an acronym anymore by revisions of the standard newer than 77 and is thus title-cased). I say this considering that my field, meteorology, is perhaps the single most high profiler user of legacy Fortran codebases in the form of all the major NWP models)
Eh, not sure about "witty", but it has its moments... |
|
|
I really like it! |
|
Looks good to me! Awesome job, @jnsebgosselin |
|
Isn't Python a proper name? |
|
@jnsebgosselin Great work! Just a couple of things. Correct me if I'm wrong, but I believe the font used here is Candara, which is a resisted Microsoft font and can't be used without installing Office. This isn't a problem for a png but it didn't work well as a svg splash (see #5667). In #5706 I redid the splash svg using Quattrocento Sans. I don't think it is quite as stylized but should be easier to use in websites and other branding without worrying about availability. I see that this is heading also on the website but it's a bit low res. Could it be an svg for both? Also I see that "spyder" instead of "SPYDER" is used on the software splash. It doesn't matter to me but consistency is nice. |
Indeed; good point. However, we can't just capitalize it and nothing else, as it would ruin the look and distract from the broader name. and could be justified having it in lower case as a stylistic decision since it is often presented that way, e.g. when typed into a terminal (
And in the revised version has "Spyder" in Title Case...so three different versions, ha. IMO all lower case wouldn't really work in the title here, so not sure what to suggest. |
Well, "the" is capitalized. I don't even know what distracts more: bad kerning or grammatical errors. It can just be simplified by making the name bigger. And I've always wondered why the Ssnake doesn't make an ss |
|
@bcolsen I can convert the text to path. Any objection about that? @bcolsen @CAM-Gerlach I think the name written as "Spyder" looks more professional. I think the Splash should be corrected. Seems like we write "Spyder" everywhere but in the Splash. I don't like "SPYDER" written all in caps. |
Yes, but it begins the phrase and looks much less objectionable besides, as it is the very first character, not smack dab in the middle; as such, it only minimally distracts and look awkward, unlike capitalizing the P.
I'm afraid I don't see where anyone in this conversation brought up an issue up with either, nor is either present in @jnsebgosselin 's version. If you're referring to the above mockup, then this would make more sense, as for example the kerning is quite overly large between the d and the e of the Spyder name, and "Scientific Python development environment" does not read well grammatically (capitalization awkwardness aside), nor is it the proper full name of the our program (that being "The Scientific Python Development Environment."
Oh, do you mean the tracking? Yes, the above version is better in that sense, but at the cost of making the name obnoxiously and overwhelmingly large and overstated, not to mention disrupting the balance between the logo and the text, making the line weights less cohesive, and eliminating the horizontal rule giving it a bit of understated polish. A much better, IMO solution if others agree the large amount of tracking in the name is a problem (I usually prefer less, but in this case contextually it could be justified since its technically an acronym and doesn't feel entirely out of place and thus have no strong opinion) is to make the logo a little smaller, reduce the tracking in place, extend the horizontal rule to the left (shortening it to the right as proper) and align the text underneath both rather than just the name. But I'm not sure that's necessary.
Because you rotated our logo... |
|
@jnsebgosselin Right. Lowercase is definitely out for this context as I opined above, and ALL CAPS can be overstated and hard to keep consistent, so then it seems the only thing that makes sense is to change the splash. Furthermore, it would fit with the refined feel of your design overall, which feels very coherent. |
Yup, my bad.
That's a mock-up. The font style may be lighter or font family may be different.
I believe, most 'logo - text' layouts don't use the rule, which is in accordance with Tufte's data/ink principle.
Actually, using some nice font with small caps can be a solution for both 'problems'. SC allow tracking, writing acronyms, they are compact and look 'professional'. |
|
Some alternate versions that address more or less all of your comments.
|
Understood, but even in a lighter weight, the physical dimensions are still rather domineering, IMO. Further, as I discuss above, I'm not sure what real problem is with the original that this one solves, other than the relatively minor issue with the tracking, in comparison with the noted advantages of @jnsebgosselin 's version (mockup issues aside).
Tufte's principles, while certainly well and good, are explicated designed for data visualization. Just like with statistical models, applying them blindly to every situation without considering the different context and constraints is not necessarily a wise idea. In any case, this is a banner for a readme, not a logotype.
Again, I'm not sure what two "problems" you are speaking of. I'm guessing you're referring to what you suggest is excessive tracking on the Spyder name, but its not obvious what the other is. To quote the Zen of Python, "Explicit is better than implicit", and on quite a few of the points in this thread I'll admit to being quite unclear what exactly is being implicitly referring to. The same caries over to the above mockup—there are a number of changes apparently without direct relation to the initial points being made, and no clear explanation/rationale for making them as would be expected. Although I'm (probably too partial) to small caps generally, I don't see it fitting with the refined aesthetic @jnsebgosselin has cultivated here without changing the whole design language, and in general they can look quite overcooked and pretentious if not used appropriately. As you yourself stated, emphasizing the acronym can come across as rather redundant, etc., and really isn't necessary. In any case, for the record, here's a quite mockup to illustrate what I was proposing assuming we decide to treat the amount of tracking as an actual problem, but I'm not sure I really prefer it to @jnsebgosselin 's, though certainly to the above.
|
|
@CAM-Gerlach Nice one. I think I like the logo flat better, but I like a lot the fact the the lines of the spider web are thicker though... But except for the colors, I am reluctant to change the logo in this PR... I think I had almost this design at some point, but I changed it because I wanted to increase the horizontal over vertical ratio for the banner. I wanted the banner to span the entire width of the readme without taking too much vertical space. But this is probably not necessary anymore ... so well I don't know... I'm going to sleep on that and look at it again tomorrow. |
|
@CAM-Gerlach Thanks for the feedback, it is much appreciated ! The second one is also the one I prefer and I agree with the rationale you've given about the "IDE" part. Also, for the line, I don't know... It probably depends where it is used like you said, but I think I still prefer with the line. Also, yeah 3 and 4 are identical... I probably had something in mind but forgot to do it lol I'll remove the number 4 so that others do not waste time trying to find the difference. PS: I think you should edit your last post because you've now referenced this PR in a lot of very old issues ahah |
|
@jnsebgosselin See my nearly simultaneous comment; in terms of general layout and look I like at least the upper half, if not two thirds of your versions better; I was just trying to illustrate what I was proposing though by that point I wasn't too convinced of it.
The particular logo I used is a total accident, just pulled from another mockup I made for the website. However, it is the real logo, pulled right from the repo and is the one visible in e.g. the About Spyder dialog; I didn't thicken the lines at all. The only changes I made were in fact to the color of the lines, making them just a little darker so they weren't invisible), and adding the light drop shadow you mentioned for the same reason. Now that I compare them, I agree with what you're saying: not 100% sure on the drop shadow but the thickness is definitely better, giving it a lot more punch and making it look more solid, and I actually prefer the dark grey center color and lighter lines overall as it just looks more pleasing. However, without the drop shadow, it doesn't really show up too well on a white BG. I'd suggest at least switching to the wider-line version only with your colors, or perhaps more ideally with a the normal colors with off-white vs. white for visibility, if either you think the drop shadow is worth it or you can find another way to retain enough color contrast. In fact, I might suggest at some point making at least the slightly off white web the official color (in another PR), since it is actually invisible on the About dialog and other parts of the UI, at least without a dark theme. |
I noticed it as soon as I submitted my post and had it edited and saved within a few seconds, so you must have caught me at just the wrong time haha. Do I need to completely delete my post to get rid of it, or does just editing fix it? |
I don't know sorry. It is still referenced in issue number 2 (with a few other non related issues as well hehe), but it may take a little bit of time before it is cleaned up?
Ok, here is a revised version of the version number 2 with the proper line thickness on the logo. The lines were not correct because I messed up when I scaled the logo dimension at some point. Thanks for pointing it out to me.
|
I don't know about the shadow. I would really prefer to keep it flat and I kind of like the idea of having a dark and light version of our logo. But if the majority is for keeping only one version with the standard colors and adding a shadow, I'll go for it for sure. But yeah I agree with you the actual logo doesn't look so good without a dark theme. See the screenshot of how it looks for me in windows... not very good at all...
|
|
Repost: Wow, thanks @jnsebgosselin . I take back what I said previously—I actually don't mind small caps in that font; its very different from how its often handles in the families I was used to. On the other hand, I am not so much a fan of sticking the IDE in there; Spyder stands much stronger on its own from a textual standpoint, the extra whitespace isn't that bad, and the IDE being CAPS makes it visually unbalanced towards the right, when you actually want to draw the eye to the left (the name Spyder should have visual primacy over it being an IDE). I Its also not too bad without the rule with the small caps, though for this purpose, a readme top banner, I still think I prefer it with; for e.g. a website top banner it would probably looke better without IMO. As previously mentioned, really don't like cap'ing Python and nothing else in the subhead. Therefore, my rankings are (all in order by vertical position, but -- signalling larger breaks between the groups). |
Hmm, I deleted and reposted. Hopefully that fixed it...
Yeah, as mentioned I'm not super partial to it either if its not necessary; I just happened to have it on there from before since I didn't have your revised version of the logo handy. Though I somewhat prefer the original version's colors all else equal, now that I can see your version rendered with the proper line widths I agree that the difference isn't worth the drop shadow since the latter really takes away from the clean design aesthetic, and we certainly should have the two versions of the logo. Maybe substitute them in the UI depending on the theme, as part of that implementation? As a stopgap for the present, making the web off white rather than pure white would at least make it visible. But I'm getting a bit off topic... |
|
@jnsebgosselin Great job. I like the 6th. |
|
Thanks @CAM-Gerlach and @homocomputeris for your feedback. So far, below are the final contestant in dark and light versions.
|
|
The dark version definitely looks cool, but the problem is that with a very different BG than the rest of the readme, it would look out of place, rather than the seamlessly integrated white/transparent BG versions. Also, some of the kick of the nice dark grey in the logo was in its contrast with the white BG. Therefore, my recommendation stands: # 2 preferred over # 6 . Also, I can't remember if I noted this before (may have forgotten), but I'd suggest shrink the logo a little since it is a little overpowering and unbalanced now that you've thickened the lines. |
@CAM-Gerlach Good observation. Below are some versions addressing your comment above with and without the construction lines I used to produce the original design. Personally, I prefer 2b.
|
|
@jnsebgosselin Nice, thanks. I'm torn between 2b and 2c; I think I might slightly lean toward 2b as well but I'd have to see them in the readme to really call it. |
|
I like the small caps. Great idea! In general for spyder, it would be convenient to have one icon that functions for light and dark themes. As previously mentioned in this thread, this is something that current logo struggles with. An icon with an outline, for example, would be quite readable against an color background:
|
|
@bcolsen good idea, I like that. I'm going to open a new issue where we can discuss various improvements that could be done on our logo more specifically. I think our logo could use a little revamping. @ccordoba12 what do you think? |
|
@bcolsen I tried throwing a stroke on there as well, with a few different combinations, but couldn't get it to look all that great. The above is certainly better than my attempts, but I'm not sure I prefer it to what we have. Maybe with a thinner stroke, or doing something else a little different with it? Not sure. |
|
Closing this since this is going to be solved when we get the new logo design from a professional designer as decided in #6509. |
|
@jnsebgosselin, thanks a lot for your work on this! We're going to use one of draws in your last sketch to replace the current banner in the website. |
This a proof-of-concept that consists in adding a banner at the top of the readme (like Atom did for instance).
I had to change the color of the logo, otherwise it was not looking good on a white background. I tried to use the default Spyder icon with a darker background but it was not looking as good as with a white background.
I'm open to suggestions, so please comment.