Spyder: Improve Spyder logo for Spyder 5

[juanis2112]

Issue Report Checklist

• [ ] Searched the issues page for similar reports
• [ ] Read the relevant sections of the Spyder Troubleshooting Guide and followed its advice
• [ ] Reproduced the issue after updating with conda update spyder (or pip, if not using Anaconda)
• [ ] Could not reproduce inside jupyter qtconsole (if console-related)
• [ ] Tried basic troubleshooting (if a bug/error)
  
  
  
  • [ ] Restarted Spyder
  
  
  • [ ] Reset preferences with spyder --reset
  
  
  • [ ] Reinstalled the latest version of Anaconda
  
  
  • [ ] Tried the other applicable steps from the Troubleshooting Guide
  
  
• [ ] Completed the Problem Description, Steps to Reproduce and Version sections below

Problem Description

Now that we have a UX/UI designer helping us in Spyder, one of our goals is to change the logo for Spyder 5.

What steps reproduce the problem?

1. 
   
   
   2.
   
3.

What is the expected output? What do you see instead?

Paste Traceback/Error Below (if applicable)

PASTE TRACEBACK HERE

Versions

• Spyder version:
• Python version:
• Qt version:
• PyQt version:
• Operating System name/version:

Dependencies

PASTE DEPENDENCIES HERE

[isabela-pf]

I will be working on this! I can't seem to assign it to myself formally right now.

[ccordoba12]

Thanks a lot @isabela-pf for your help with this! We've wanting to do it for a looong time!

Pinging @spyder-ide/core-developers about this, specially @jnsebgosselin. Isabella will be posting updates here from time to time for everyone to see and discuss about them.

[CAM-Gerlach]

Looking forward to it @isabela-pf !

[isabela-pf]

Here are some early drafts showcasing a few different possible directions we could refine. Each draws from a different aspect of Spyder as inspiration. Each direction is presented as a full color, one color, and mockup as a favicon (to give an example of the logo at a small size).

Because all these directions have such different form from the current logo, I decided to stick with red as the main color for continuity. I did use a darker red, since the current one is a more alarming almost pure red when used for more than just a small portion of the logo. All versions currently use Titillium Web Bold as the typeface.

1-1
Direction 1 emphasizes the Python side of Spyder but still keeps the web from the current logo. It has a strong silhouette that scales well.

2-1
Direction 2 pulls the web shape and snake from the current logo while pulling in a spider. It has the most comprehensive set of elements, but that also means it has the most details which can make it the most overwhelming and hardest to spot on small scales.

3-1
Direction 3 is meant to reference the panes that make up Spyder and keep the web from the current logo. Even though it scales well rectangles aren’t a unique shape.

4-1
Direction 4 is really just a spider, but it has a strong silhouette and scales very well so I’ve included in case it might be a good option with more development.

[CAM-Gerlach]

Thanks so much for sharing, @isabela-pf ! I definitely prefer the darker red. I'm not sure I have a strong opinion of the design directions as of yet, but I do have some impressions:

Option 1-1

This option was bold, unique and kept more continuity with the previous logo than most of the others, but I personally found it rather confusing and hard to understand the symbology, and to me the overall look of the snake eating the Spyder web seemed a bit off-putting and not very appealing to users considering whether to use and trust the application. I'd lean against this direction without radical changes.

Option 2-1

On the plus side, this option incorporates both key elements (spyder and snake) as well as an S in a visually appealing way. The main downside as mentioned is the complexity; it wouldn't scale as well to smaller resolutions and might be harder for users to quickly understand, and also doesn't connect as strongly with the previous logo so users can quickly identify it as the Spyder they are familiar with. The lack of one bold element also makes it a little less strong. Perhaps with some simplification and tweaks (e.g. making the Spyder's legs closer together so its clear what it represents) it might work better?

Option 3-1

This options is definitely the most conservative and least distinctive, but also the most modern, polished and representing a clear evolution from the previous design, both in terms of maintaining continuity with a much more refined style. A coming of age for Spyder, if you will. Its simplicity means it would work the best at a range of sizes, and also avoids being bothersome to those that don't like spiders or snakes. It lacks anything indicative of Python, but in the long term this may be a plus, if and when Spyder supports other languages. As such, I think I'd lean toward this option, personally, since it most closely fits the story we want to tell with the new logo, with my main reservation being that it does look just a little generic.

Option 4-1

I like that this option combines the simplicity of 3-1 with the boldness of 1-1, and I'd say its my second choice. The stylized S is distinctive, but I'm a little unsure if the particular style should connect more closely conceptually with that of Spyder itself. Like 2-1, the Spyder silhouette might be made a little more clear by decreasing the spread between the legs. Its somewhat conceptually tied with the previous in style and overall look rather than the actual elements included, though I'd say 3-1 has the edge on it. My main reservation is it not looking nearly as professional, refined and "grown up" as 3-1, maintaining more of the wacky underdog character of the IDE...how much this is a good thing is a matter of opinion, but I think Spyder would do well to cultivate more of a polished image.

[jitseniesen]

Very nice, well done! These are my thoughts:

1-1: I really like the idea of combining the spider web and the python. However, if I am honest, I like the idea more than the actual logo. I agree with CAM that the actual logo is difficult to understand. That's not necessarily a problem; perhaps you can stylize it more and get a visually appealing logo with a hidden meaning. Or perhaps colours will help to make the logo easier to grasp. But I feel this option needs the most work and it may well be that it proves impossible to execute the idea well. I did not at all get the impression of the python eating the spider web; actually, the logo reminds me of a wine glass (I'm sure people can think of all kinds of psychological explanations for this!).

2-1: Looks nice but perhaps a bit too complicated for a logo. To me, this looks far more like the snake eating the spider than the previous option: the snake is coiling around the spider and seems about to strike down and bite. While the details are lost when the logo is scaled down, I think the hexagonal shape that is left is still pretty distinctive.

3-1: I can't decide whether I like this or not. It looks attractive and sleek but also corporate and loses the playfulness that attracts me to Python. Even after you say that the rectangles reference the panes, I still associate them with files, and there is no such thing as a Spyder file. The lack of snake is not a problem for me. I feel this is a design that we can use immediately without any further work.

4-1: Like you say, it's a simple idea but I do like it. The shape of an S does remind me of a snake, though this would perhaps point to having a more curvy and less angular S. We can spin a story of Spyder eating bugs, though this may backfire if people think that spiders are bugs themselves... I think this option would have my preference for further development if I were forced to choose.

[bcolsen]

@isabela-pf Thank you for working on this. It something we have been in need of for sometime. I like the color and the font.

This is only my option of course, but I think that currently Spyder strongest current branding element comes from the spider web pattern. I agree with @CAM-Gerlach that spiders and snakes don't have the best connotations for most people. I also think that there are plans in the future to support other languages like R or Julia in the future so the snake from Python might not be as applicable(of course Spyder is written in python). I would like the spider web for Spyder to represent that Spyder at it's heart is a collection of plugins or toolboxes that are held together and connected by Spyder like a web to make unique and customizable work flows for scientific computing.

I don't want to over step but you inspired me to make a mash of the hexagon from 2-1 and the web from 3-1 and I made this:

The outcome is a bit simple but the spider web on a hexagon make for really cool geometric shapes and as a happy accident it can look like a cube as well to symbolize working with array like data.

I also put an "S" on there to see what it looks like:

[CAM-Gerlach]

I like @bcolsen 's design ideas; I think they combine some of the strongest elements of the designs we've liked so far—a bold and recognizable appearance, a relatively simple and easily scaled design, visual continuity with our previous branding, a better balance between "polished"/"corperate" and "fun"/"unprofessional", avoiding elements that might bother, distract or restrict us going forward, and most of all with symbology that reflects the core of who and what we are. I particularly love the duality between the web, bringing together a diverse collection of plugins, tools and packages under one roof (just like the Spyder team and its users span the globe) and the cube, symbolizing Spyder's connection to the SciPy/Pydata ecosystem.

I'm a little on the fence about which one I prefer—the first is simple, clean, bold and uncluttered, but maybe a bit too simple and generic, while the second is somewhat busy but is more visually interesting and distinctive, and the shape of the S enhances the "cube" effect that is harder to see in the first one. Perhaps using the former at small sizes (favicon, title bar icon, website top bar) and the latter at larger ones (splash, app logo, backgrounds, etc)?

[bcolsen]

The cube effect could be enhanced by using 3 slightly different shades of red for the faces. It would then look like a set of unset boxes that would be a cool metaphor for bring different software packages together. Boxes in a web if will.

[isabela-pf]

Thanks everyone for the great feedback! I'm always glad to see people analyzing the strengths and weaknesses of a design and offering more ideas. I look forward to hearing what you have to say next.

Following the focus of option 3-1, this next round of logos are centered around spider webs and (I really like what @CAM-Gerlach said about them) and Spyder’s emphasis on panes. Because panes are rectangular and rectangles alone don’t make for the most unique shape, I mostly used them for inspiration in framing the web in different ways. The range here is from a pretty literal web to an abstract use of web shapes.

Option 3-2

This is a fairly typical direction, but the web is framed in the corner of a pane rather than the symmetry it had in most of the last iterations. Depending how immediately recognizable we are interested in the web being, this could be a direction to explore more.

Option 3-3

Keeping the web in a corner but making it heavier (which can help at small sizes especially) and geometric. This direction also breaks out of the square.

Option 3-4

A closer look at the curved web pattern with a good amount of weight behind it. It is getting close to a square silhouette, which is not as unique. I'm also unsure if it looks a little close to Kite's logo or if it is different enough.

Option 3-5

This direction has all the pros and cons of Option 3-4, it is just a more geometric and abstract version.

[CAM-Gerlach]

Hey @isabela-pf , thanks for the additional batch of great logo ideas as well as the kind words! My thoughts on this one are much clearer than that last.

Option 3-2

I like the web motif and its strong, recognizable and scales well. However, I'm not sure the idea of the square shape being the corner of a pane really comes across clearly even after reading the description, and I didn't even really think of that until I read it. To me, it reads more as an old book with a cobweb on it, or perhaps a kite (which we want to avoid as you say) made out of the same. Even if taken for what it is intended to be, from a conceptual and branding perspective I'm not sure a cobweb on the corner of a pane is really the best look, considering the connotations of being old, unused and untouched in a long time, as opposed to a vibrant, constantly evolving modern tool with an active community and developer team. Visually it has promise, but conceptually I'd definitely lean against this direction personally.

Option 3-3

This option is definitely my favorite. It scales almost as well as the others, looks attractive in both single and bicolor versions, incorporates the two primary colors and easily recognizable shape from Spyder's current logo, but in a much bolder design. I think it does much better than 3-1 at striking a good balance of clean, modern and professional, while avoiding looking too generic, and corporate and losing the quirky soul of the old one. It also avoids the negative connotations of cobwebs and spiders, unlike some of the others.

Option 3-4

It has a bold, striking and attractive appearance while still retaining the colors and at least a modest part of the web motif, a lot of the things I like from 3-3. However, I share your concerns about it looking too much like a kite; that's definitely the first impression I get of it, and it speaks "spiderweb" less clearly to me. Its also less distinctive, unique and perhaps a little too abstract for my taste. Its definitely my second choice of these four, but just as definitely not my first.

Option 3-5

This one basically follows 3-4, but has less of what I like and more of what I don't care as much for. Personally, I feel its much to abstract to read "spiderweb" and has a more generic appearance, and has some of the same downsides as 3-1 without the same advantages. It also approaches the realm of confusion with the well-known Adobe logo, with a very similar color, generally similar lines and what could be read to be an "A". Overall, it really doesn't speak "Spyder" to me, and if we are going in this general direction, I'd definitely lean toward 3-4 over it.

[bcolsen]

I really like the 3-3 option

[jitseniesen]

I also like the 3-3 design best, with 3-2 being a close second.

[dalthviz]

3-3 :+1:

[isabela-pf]

It looks like we’re getting closer! I’m glad to hear 3-3 is working well for so many people.

Since there is agreement that 3-3 is the preferred option, I explored a few ways of refining 3-3’s direction to see if there is something even stronger. Many of these options have overall small changes, but they experiment with giving the logo a different silhouette while keeping the concept.

These first two options are 3-3 rotated.

Option 3-6

3-6 matches the rotation of 3-1 for those who preferred it.

Option 3-7

I also tried enclosing the web pattern in different shapes. Originally, I was keeping with squares, rectangles, and sharp corners to continue the reference to panes I brought up in 3-1, but I do think some of the options with circles or rounded edges are working well too.

Option 3-8

Option 3-9

Option 3-10

3-9 and 3-10 are personally my least favorites, though I think they could work with some more clean up if people do want a logo with a more typical shape.

[isabela-pf]

I also wanted to address some more specific feedback I’ve gotten away from this issue in case other people have the same questions.

First, why do most options not show the full, symmetrical web? It takes a lot of small pieces to make something look like a spider web, and having a lot of small pieces isn’t ideal for a logo because it takes people longer to recognize it and loses details quickly as it gets smaller.

So you can get a taste of what I mean, this is the spider web I’ve been starting a few of my logo directions with as a full octagon. If I scale down this illustration as a favicon, like below, it is difficult to see. There’s multiple ways I could lessen the amount of small pieces in the web to make it scalable, but the one that tends to keep it looking most like a spider web is to crop it instead of show the whole web. (This isn't intended as a logo option.)

Second, the red and grey are a dark combination. Even though I agree the grey is dark, I’ve kept it in hopes it will help keep Spyder identifiable while the logo form changes. What I did try is experimenting with a third color. Lots of colors I tried with clashed with the red since it is pretty strong, so I’ve only proposed one option. This saturated red-orange brings back some of the current logo’s brightness, but it does take away focus from the other red.

It’s mocked up here just because it fit well with the multiple layers in 3-9, but if there is interest in working more with three colors I can apply it elsewhere.

[CAM-Gerlach]

I don't really have super-strong opinions on most of these, but here are my thoughts.

3-6

I think I like this rotation better relative to the text, although it looks a touch more generic and for whatever reason it speaks "web" to me a little bit less (perhaps because cobwebs are typically seen in the upper corners of things...but not sure we want to look too much like one). So I _think_ it might look a little stronger than 3-3 overall but I'm not 100% sure. I would defer to others' feedback on this.

3-7

This one speaks a little less "Spyderweb" to me due to the orientation making the cutout shape more emphasized. However, it trades that off for being somewhat more evocative of data analysis and scientific computing, by looking like a funnel filtering a large volume of data by several layers, progressively from information to conclusions. Not sure how strongly it communicates this to others and whether it is worth it, but its an interesting direction and something I'd like to hear the other devs' feedback on.

3-8

Not sure I like the circle motif, IMO it makes the straight lines of the web less strong, doesn't look clearly speak Spyderweb, and it doesn't have the potential conceptual advantage of 3-7 exchange for the orientation switch. I also prefer the colors reversed, as they are in the others.

3-9

The circle has more of a reason to be here, but at least to my personal eye it looks a little too off-center...not sure.Other than that, I don't have really strong feelings on it either way.

3-10

The "app" shaped rounded rectangle looks more modern and motivated, so I think I prefer it to its counterpart 3-9. But I think perhaps 3-6 still looks somewhat stronger and more unique overall since the enclosing shape somewhat dilutes the strong impact of the octagonal web.

So, if I were to rank them in tentative descending order of my preference, I'd say maybe 3-7, 3-6, 3-3, 3-10, 3-9, 3-8, though the borders between items get somewhat fuzzy since none of my feelings are overly strong (as I guess makes sense at this refinement stage).

[isabela-pf]

Because it seems like I got more unsure feedback last round, I tried branching focusing in on the elements that have gotten some of the strongest positive feedback across these iterations, namely the web combined with simple shapes.

Option 3-11

Since 3-1 was a strong favorite, this is a cleaned up version of that direction minus the overlapping panes. It's simple, but that can be a strength at small sizes.

Option 3-12

Just like 3-11, this has the same inspiration. I also combined what some people liked about 3-7 looking filter-like and comments about extending the web to the edge of its encapsulation. I prefer this option over 3-11.

Option 3-13

This is an iteration on the more complete web encapsulated in its own hexagon. The offset also creates a kind of arrow that implies the kind of growth and expansion that was a concept liked in 3-7.

Option 3-14

This one is the web combined with some spider imagery. I know we said no to any kind of animal imagery early on, but one thing I've been struggling with in this process it pushing to have a logo with an interesting silhouette since that helps it be more identifiable. I think this is a more understated use of the spider and is still geometric enough to look serious. I've ended up liking this one more than I thought, but of course that's not up to me alone.

Other than the shape of the logomark, here’s some of the changes (in response to feedback I've gotten in meetings) that should be noted/reviewed:

• Color. The red has changed from #8c0000 to #d50000 as a middle ground between the current red and the darkness of the last iterations.
• Gradients. I tend to be hesitant of gradients since they are easy to do poorly and can provide some obstacles. Since it’s come up in meetings that there’s interest in having a little more texture, I’ve added options with gentle gradients this round. One-color versions still use flat #ffffff white.
• Type. I’ve gotten some mixed feedback about the ‘y’ in the typeface I’ve been using. Since I’ve posted, I’ve modified and run through a lot of typefaces being particularly picky about their ‘y’s, so below are options with a modified ‘y’ (not pure Titillium, so a softer curve).

Option 3-11 (Alternate Type)

Option 3-12 (Alternate Type)

Option 3-13 (Alternate Type)

Option 3-14 (Alternate Type)

Thanks for your patience! Hope this helps people feel a little more sure about directions they like.

[ccordoba12]

@spyder-ide/core-developers, although Isabella's proposals have some interesting ideas, I was thinking that she could help us to go in a new direction too: a redesign of the current logo, perhaps also reshaping the snake to display an S instead.

What do you think about that?

[bcolsen]

I like the new red. I would like to see also like to see 3-6 with the new red.

I also really like 3-13. I think the hexagon captures enough of the original logo idea to still be recognizable.

I think the original "y" gave it a nice edge. For some reason the new one make the "spy" part stand out. I could be the curve.

a redesign of the current logo, perhaps also reshaping the snake to display an S instead

I'm not sure that we need a snake on the logo, aren't we looking to include more languages in the future?

[ccordoba12]

I'm not sure that we need a snake on the logo, aren't we looking to include more languages in the future?

Right, that's a good point. But my suggestion is to show an S on top of the spider's web.

[dalthviz]

I would like to see also like to see 3-6 with the new red.

Me too

[isabela-pf]

Based on some of my recent discussions with Spyder team members, it sounds like we might have narrowed in on the concept of connection and its representation as a spider web too quickly. Since we're looking to think about other concepts, I'm interested in hearing other people's idea of what Spyder is, what its goals are, or what parts of Spyder make it unique to you. Please feel free to share your thoughts on these questions!

[jitseniesen]

Here is my idea of what Spyder is: Spyder is an open program for doing computational and data science using Python, which is suitable for all phases of a project (from exploration to consolidation) and for people with different levels of programming expertise.

[maxhaz]

Are you open to proposals here? I am, among other things, a logo designer, and I would be happy to help 😃.

[ccordoba12]

Sure! We'd like to see other people's ideas for our new logo.