spyder-ide / spyder

Official repository for Spyder - The Scientific Python Development Environment
https://www.spyder-ide.org
MIT License
8.33k stars 1.61k forks source link

Improve Spyder logo for Spyder 5 #13181

Closed juanis2112 closed 3 years ago

juanis2112 commented 4 years ago

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.

isabela-pf commented 4 years ago

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

ccordoba12 commented 4 years ago

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 commented 4 years ago

Looking forward to it @isabela-pf !

isabela-pf commented 4 years ago

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. q_spyder_6509logorefresh_v1_exportgrouped5 q_spyder_6509logorefresh_v1_exportgrouped6 colorArtboard 90

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. q_spyder_6509logorefresh_v1_exportgrouped9 q_spyder_6509logorefresh_v1_exportgrouped10 colorArtboard 89

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. q_spyder_6509logorefresh_v1_exportgrouped13 q_spyder_6509logorefresh_v1_exportgrouped14 colorArtboard 88

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. q_spyder_6509logorefresh_v1_exportgrouped q_spyder_6509logorefresh_v1_exportgrouped2 colorArtboard 87

CAM-Gerlach commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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:

spyder cube

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:

spyder cube s

CAM-Gerlach commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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.

q_spyder_6509logorefresh_v1_exportgrouped q_spyder_6509logorefresh_v1_exportgrouped2

colorArtboard 162@2x

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.

q_spyder_6509logorefresh_v1_exportgrouped3 q_spyder_6509logorefresh_v1_exportgrouped4

colorArtboard 162_1@2x

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.

q_spyder_6509logorefresh_v1_exportgrouped5 q_spyder_6509logorefresh_v1_exportgrouped6

colorArtboard 162_2@2x

Option 3-5

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

colorArtboard 162_3@2x
CAM-Gerlach commented 4 years ago

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 commented 4 years ago

I really like the 3-3 option

jitseniesen commented 4 years ago

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

dalthviz commented 4 years ago

3-3 :+1:

isabela-pf commented 4 years ago

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. q_spyder_6509logorefresh_v3_exportgrouped q_spyder_6509logorefresh_v3_exportgrouped2

3-6-favi

Option 3-7

q_spyder_6509logorefresh_v3_exportgrouped3 q_spyder_6509logorefresh_v3_exportgrouped4

3-7-favi

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

q_spyder_6509logorefresh_v3_exportgrouped5 q_spyder_6509logorefresh_v3_exportgrouped6

3-8-favi

Option 3-9

q_spyder_6509logorefresh_v3_exportgrouped7 q_spyder_6509logorefresh_v3_exportgrouped8

3-9-favi

Option 3-10

q_spyder_6509logorefresh_v3_exportgrouped9 q_spyder_6509logorefresh_v3_exportgrouped10

3-10-favi

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 commented 4 years ago

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.)

fullweb fullweb-favi

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.

threecolor
CAM-Gerlach commented 4 years ago

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 commented 4 years ago

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.

3-11-type1 3-11-color-type1

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.

3-12-grey-type1 3-12-color-type1

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.

3-13-type1 3-13-color-type1

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.

3-14-type1 3-14-color-type1

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:

Option 3-11 (Alternate Type)

3-11-color-type2

Option 3-12 (Alternate Type)

3-12-color-type2

Option 3-13 (Alternate Type)

3-13-color-type2

Option 3-14 (Alternate Type)

3-14-color-type2

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

ccordoba12 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

Me too

isabela-pf commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

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

ccordoba12 commented 3 years ago

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

isabela-pf commented 3 years ago

Thanks for everyone’s patience as I worked on some other parts of Spyder! This next round has all new directions separate from the web idea. Because I’m not sure which red we are interested in right now, I’m showing both dark and light options.

Since we are taking a step back from the web concept, some of the most helpful feedback for this set will be if any of these ideas seem like they should be pursued further. Deciding on a red would be a bonus!

Option 4-1

This option combines idea of Spyder being open and framing the many spaces/panes that make up Spyder. It also looks a little bit like the letter S. It has a good silhouette that should scale well even with the amount of open space. Personally, this is my favorite option of the three.

4-1dark 4-1light 4-1white

Option 5-1

Option 5-1 is inspired by objects organized on a desk, similar to how I think of all of Spyder’s panes aligning. It also includes an actual S since it has come up in a few meetings. The S helps make the relatively simple rectangles more distinctive. You may have noticed the text looks different; it’s a lighter version of the same font just to try something a little different.

5-1dark 5-1light 5-1white

Option 6-1

Even though option 6-1 is inspired by the same ideas as option 5-1, I noted it as its separate option because I think it looks very different without a letter and cropping the shapes differently. I experimented with several shapes, and I think working with diagonals benefits the neatness of the shapes within it.

6-1dark 6-1light 6-1white
isabela-pf commented 3 years ago

Aaaaand we're back. I'm not entirely clear on the feedback from the last round, but I think I heard something about being interested in going back to the web? This time I bring two different options for you to review.

Option 3-15

As the numbering implies, this tries to return back to working with the web. It is much lighter (and uses a lighter font to match) and ties the wordmark into the design rather than keeping it beside it. Since there has been much discussion about the right concepts to focus on in representing Spyder, I thought it might be helpful to rely a little more on the S and less on symbols people are unsure about.

To be honest, I'm running low on ideas of how to keep working with the web concept in this style.

3-15_color 3-15_color_square 3-15_white 3-15_white_square

Option 7-1

Carrying over from idea of relying on S and the concepts of Spyder being made of many open parts, I have one more abstract proposal. This version is light like 3-15 and changes to the same light font.

7-1_color 7-1_color_square 7-1_white 7-1_white_square

I know we are trying to make a decision on this in the near future, so more specific feedback will probably be helpful in me giving quicker turnaround times. I'm not sure how you plan on making this decision either, but if there's a way I can make it easier, just let me know.

impact27 commented 3 years ago

I like the web. My favourite was option 3-12 because the web looks "attached". If the web is in a frame as in 3-15 I think I would like having the radial lines extend to the edges. This would look more physically plausible. Looking back at 3-12 I was not a fan of having several filling colours. I like the colours on 3-15. Then for the shape 3-10 was quite nice, I like the "app" look. So I guess I would like something like:

logo

(With or without the "S") So basically 3-15 + extending radial line + rounded square "app" look.

Edit: Looking back at my quick drawing, what do you think about having the web lines thinner than the frame?

impact27 commented 3 years ago

With the nice S:

Screenshot 2021-04-27 at 10 54 21
isabela-pf commented 3 years ago

I’ve gotten feedback (here and elsewhere) that there’s interest in Option 3-15, so I’ll be narrowing down details within that idea. Here are the four areas I had feedback to work on.

To reply to @impact27's lovely feedback (thank you for that!) I think the extended web works really well with the outlined; thanks for the suggestion. While I agree that the thinner web with a thicker frame does make the web feel more, well, web-like, I prefer to keep it thicker to help it be seen at small sizes. This version already is a little weaker at small sizes, so I'm trying to be conscious of making sure the logo can do what it needs to.

Option 3-16

Font is Univia Pro. 3-16 3-16_white

Option 3-17

Font is Univia Pro. 3-17 3-17_white

Option 3-18

Font is a modified version of Titillium Web. 3-18 3-18_white

Option 3-19

Font is a modified version of Electrolize. 3-19 3-19_white

impact27 commented 3 years ago

I like 3-16 :)

isabela-pf commented 3 years ago

Long comment incoming!

There’s interest in this last round of logos, but also some questions about how they will work in different circumstances. The request was to show options with 3-16 (slightly modified to be a square), a filled version of 3-16, 3-17, and 3-18. Some of these examples will be repeated from above for ease of review.

3-16 square

3-16 with the web area slightly modified to be a perfect square.

3-16_square 3-16_square_white

In Spyder's About screen (dark mode) this could look like

3-16_square_about_white

We won't get good contrast with the current dark red (this is the case no matter the logo)…

3-16_square_about_color

But we could if we go with a lighter color (shown as light red here). Please note that I think we should choose one red and not switch back and forth. These mockups are just to clarify the strengths and weaknesses of the colors.

3-16_square_about_colorlight

In a Windows header

3-16_square_windows

In a Mac dock

3-16_sqaure_mac

I know one of the main concerns for the outline versions of the logo are that they have a lot of empty space that might make them hard to see on different backgrounds. This is true! I think it has a simple fix, though: put it on its own background color whenever the logo is not already on a flat color background. I’ve used a photo background as an example for all the options.

3-16_square_photo

(Here you can see it without the background to see why it is not working)

3-16_square_photo2

3-16 with thicker lines

A non-square 3-16 with heavier web lines and typeface. I want to clean up the web a little more if we like this direction.

3-16_heavy 3-16_heavy_white

About

3-16_heavy_about

Windows

3-16_heavy_windows

Mac

3-16_heavy_mac

Here's the photo background again. I still think it works better on its own background.

3-16_heavy_white_photo

3-16 filled

A non-square 3-16 with a grey fill background like 3-17 and 3-18. This option has no cut out areas in the logomark. But since it uses more colors to make that possible, there's a few places where I think it becomes difficult to handle. I don't think this version is working.

3-16_fill

You can already see how this becomes complicated with the white logo. Since this is a test designed to show a one color logo and this version can't be one color, you end up with some kind of low contrast combinations.

3-16_fill_white

About

3-16_fill_about

Windows

3-16_fill_windows

Mac

3-16_fill_mac

Photo background (same problems as discussed above)

3-16_fill_photo

3-17

The same 3-17 from my previous comment shown on other mockups for better comparison.

3-17 3-17_white

I've shown the about in one color for ease, but as mentioned under 3-16 square above this can be full color if we want to use a lighter brand color than the dark red.

3-17_about_white

Windows

3-17_windows

Mac

3-17_mac

Photo background

3-17_photo

3-18

The same 3-18 from my previous comment shown on other mockups for better comparison.

3-18 3-18_white

About

3-18_about_white

Windows

3-18_windows

Mac

3-18_mac

Photo background

3-18_photo

Congrats on making it to the end of this comment ! Thanks for your patience, and I hope this helps the team feel more confident on narrowing down directions.

maxhaz commented 3 years ago

Great job! Some proposals are very nice 👍 @ccordoba12 was open to new ideas, so I'd like to show you the designs I've made. I also propose a new tagline to go with the logo. Not to mix with existing concepts. I pasted them in the PDF below, concepts 1 to 5.

spyder-logo.pdf

Feedback is important at this stage, so don't hesitate to give your opinion😃

ccordoba12 commented 3 years ago

Thanks @maxhaz for your input! We discussed your proposals with the team and have some comments for you:

  1. We value the effort you've put into this. Thanks a lot for taking the time to be part of this process.
  2. Although it's not clear from the comments posted by @isabela-pf, we're very close to propose two new logos for the people that has committed to this repo to decide which one we should use next.
  3. So (unfortunately) your ideas came very late. As you can see from the first comment here, we've been discussing this topic for almost for a year now. Perhaps if you've posted your work some months ago, we could have taken it into consideration.
  4. We've been working very closely with @isabela-pf to preserve the spirit of our previous logo (the colors, the web and the snake/S) in our new one. And her last comment here shows that she's done a superb job at that. Since our goal is to have a new logo for next month, sadly we don't have time to iterate over your proposals.

Thanks for understanding and I hope this won't demotivate you from keep contributing to Spyder or other open source projects. For next time, you could try to reach out earlier (a simple comment here saying that you were working on other logos would have been enough).

maxhaz commented 3 years ago

Thank you @ccordoba12 for your detailed explanations. No worries, I am glad to help, even a bit late 😊

I saw only limited discussion here, I didn't know the discussions occured elsewhere.

Actually, that's the latest rounds of proposals that pushed me to propose some of mines. They are great, kudos to @isabela-pf, however I had a feel that they miss the modern and sleek look that Spyder has. I understand the idea of keeping the spider net is appealing, but it is difficult to make it looks modern. Again, @isabela-pf did an amazing job to try it to look nice.

If I may say so, maybe using a brighter color palette, and avoiding logo-text integration might help.

Continue the good work and sorry for the interruption 😁

maxhaz commented 3 years ago

And if you would need a logo for Spyder 6, do not hesitate!

ccordoba12 commented 3 years ago

Thanks a lot for your offer @maxhaz! We'll keep it in mind.

impact27 commented 3 years ago

I really like 3-16 square. 3-16 with thicker lines is almost missing the small holes in the top left.

ghisvail commented 3 years ago

I like 1-1 personally. It looks cool and gives visual identity and personality.

Most other propositions either look too corporate to my taste, or just emulate the overused "some shape with a letter" trend.

flying-sheep commented 3 years ago

To keep spyder-ide/ux-improvements#50 clean: Both options have a little problem in the top left corner:

grafik

Removing that little web line or moving the convergence point to the corner would help.

mrclary commented 3 years ago

@isabela-pf, I've already voted (for 3-16 square), but wanted to thank you for your hard work on the logo; it looks great. While I like the current logo, I think this is an improvement. It is cleaner, spills less ink, and maintains recognizability. Great job!

aglotero commented 3 years ago

Great work!! @isabela-pf 3-16 for sure!

ElieGouzien commented 3 years ago

@isabela-pf: I have a small modification proposition (on last round logos, for instance 3-16) that would make it closer to the spirit of the current logo: adding a small snake head to the S (not something detailed, more like it is in current logo).

This proposition is independent from the choice between 3-16 and 3-17 as it can be applied to both.

ccordoba12 commented 3 years ago

@ElieGouzien, we tried that but it doesn't look well.

jnsebgosselin commented 3 years ago

I would like to thank all the work that was put into designing a new logo for Spyder. Redesigning a new logo is a painful process, especially when it is done in the open like that for a beloved open source project. I really like the two options that were proposed for the votes and I can't wait to see the new logo on my taskbar! So thank you @isabela-pf and all the others that contributed in one way or the other to the effort.

flying-sheep commented 3 years ago

Hi @ccordoba12, I suggested a small prettification in the chosen logo in https://github.com/spyder-ide/spyder/issues/13181#issuecomment-851931429, which @isabela-pf :+1:’d, but they didn’t seem to have made it into #15829.

You probably want to fix the logo up before merging spyder-ide/website-spyder#199 and #15980 …

ccordoba12 commented 3 years ago

Hey @flying-sheep, thanks for pointing that out. We talked with @isabela-pf and she missed to do that change in PR #15829, so she'll do it in a follow-up PR.

techtonik commented 3 years ago

@ccordoba12 I hope Spyder didn't turn from open source to open core project over time. I don't understand how the consensus on changing logo was reached. Can you disclose who and when decided, and what is the result of the voting? Especially interesting to see data with the weighted diagram of votes from https://github.com/spyder-ide/spyder/graphs/contributors

techtonik commented 3 years ago

For me the spirit of Spyder was in its custom design that communicated that you can actually patch and modify it yourself. Now that it looks more like Visual Studio, I may as well ask myself, why not just compile a similar, if not a better Spyder, from VS plugins?