New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modernising our logo #3785

Closed
tardyp opened this Issue Nov 30, 2017 · 27 comments

Comments

Projects
None yet
7 participants
@tardyp
Member

tardyp commented Nov 30, 2017

After I asked for a buildbot logo in SuperTinyIcons, @arturoacevedob was super kind to propose us two versions of it.
edent/SuperTinyIcons#89

I will post the two versions as separate comments, please vote on the one you prefer.

For reference, old logo is:

I think those are already very solid options, feel free to add your own color or shape variation!

@tardyp

This comment has been minimized.

Show comment
Hide comment
@tardyp
Member

tardyp commented Nov 30, 2017

@tardyp

This comment has been minimized.

Show comment
Hide comment
@tardyp
Member

tardyp commented Nov 30, 2017

@shoelzer

This comment has been minimized.

Show comment
Hide comment
@shoelzer

shoelzer Nov 30, 2017

Contributor

This is a nice update to the classic logo and I would be happy with either color. One thing I noticed is that at small sizes the light top face blends in with the light background, and it's hard to identify the hexagon shape. Maybe a slightly darker top face color would help with that?

Contributor

shoelzer commented Nov 30, 2017

This is a nice update to the classic logo and I would be happy with either color. One thing I noticed is that at small sizes the light top face blends in with the light background, and it's hard to identify the hexagon shape. Maybe a slightly darker top face color would help with that?

@arturoacevedob

This comment has been minimized.

Show comment
Hide comment
@arturoacevedob

arturoacevedob Nov 30, 2017

Contributor

@shoelzer Once one has been chosen, I'll tweak the shapes for visibility at small sizes. Like you said, one shape and color doesn't fit all :)

Contributor

arturoacevedob commented Nov 30, 2017

@shoelzer Once one has been chosen, I'll tweak the shapes for visibility at small sizes. Like you said, one shape and color doesn't fit all :)

@arturoacevedob

This comment has been minimized.

Show comment
Hide comment
@arturoacevedob

arturoacevedob Nov 30, 2017

Contributor

I got a feeling you will prefer this thicker version (not actually thicker, just a lower angle).

Contributor

arturoacevedob commented Nov 30, 2017

I got a feeling you will prefer this thicker version (not actually thicker, just a lower angle).

@tardyp

This comment has been minimized.

Show comment
Hide comment
@tardyp

tardyp Nov 30, 2017

Member

The thicker version is more similar to old logo, but I think I prefer your first version, as the nut look set on the button background

Member

tardyp commented Nov 30, 2017

The thicker version is more similar to old logo, but I think I prefer your first version, as the nut look set on the button background

@sndgeek

This comment has been minimized.

Show comment
Hide comment
@sndgeek

sndgeek Nov 30, 2017

I like the flatter look concept and general design but, for some reason I can't put a finger on, have a real problem with the yellow/orange crescent slices in the center. It doesn't declare shading to me, it just looks off.

sndgeek commented Nov 30, 2017

I like the flatter look concept and general design but, for some reason I can't put a finger on, have a real problem with the yellow/orange crescent slices in the center. It doesn't declare shading to me, it just looks off.

@mojca

This comment has been minimized.

Show comment
Hide comment
@mojca

mojca Dec 1, 2017

I'm just a random user. I like both versions (purple is slightly nicer). The only strange part is the inner side of the nut.

mojca commented Dec 1, 2017

I'm just a random user. I like both versions (purple is slightly nicer). The only strange part is the inner side of the nut.

@tardyp

This comment has been minimized.

Show comment
Hide comment
@tardyp

tardyp Dec 1, 2017

Member

@arturoacevedob Could you please try and provide a version without the accent color? I agree that it feel strange on 256x256, but it is good for 64x64 and 32x32

Member

tardyp commented Dec 1, 2017

@arturoacevedob Could you please try and provide a version without the accent color? I agree that it feel strange on 256x256, but it is good for 64x64 and 32x32

@arturoacevedob

This comment has been minimized.

Show comment
Hide comment
@arturoacevedob

arturoacevedob Dec 1, 2017

Contributor

Let me know!

Contributor

arturoacevedob commented Dec 1, 2017

Let me know!

@arturoacevedob

This comment has been minimized.

Show comment
Hide comment
@arturoacevedob
Contributor

arturoacevedob commented Dec 1, 2017

@tardyp

This comment has been minimized.

Show comment
Hide comment
@tardyp

tardyp Dec 1, 2017

Member

@ALL please switch your vote if you prefer the version without accent color!

Member

tardyp commented Dec 1, 2017

@ALL please switch your vote if you prefer the version without accent color!

@ewongbb

This comment has been minimized.

Show comment
Hide comment
@ewongbb

ewongbb Dec 2, 2017

Contributor

I'm more preferential to the lighter blue accent rather than the purple one.. but I'm not too keen on the inner part of the nut. it's just strange.. it looks 'ok' in the two smaller sizes (I guess it makes zero difference)
but with the larger sizes. it's just not natural. either drop the bottom darker hint or make the whole inside darker.

Contributor

ewongbb commented Dec 2, 2017

I'm more preferential to the lighter blue accent rather than the purple one.. but I'm not too keen on the inner part of the nut. it's just strange.. it looks 'ok' in the two smaller sizes (I guess it makes zero difference)
but with the larger sizes. it's just not natural. either drop the bottom darker hint or make the whole inside darker.

@mojca

This comment has been minimized.

Show comment
Hide comment
@mojca

mojca Dec 2, 2017

This definitely looks much better than the yellow shade.

At smaller sizes the "shading" indeed makes absolutely no difference (it could just as well be dark without the upper brighter part). It's hard to say whether the additional ring/shading makes the logo better or not at the large sizes (compared to having just a single color).

At the biggest size there is theoretically even sufficient space to draw the threads, but those would only ever be seen on those huge magnification (as good as never), so it's probably not worth it - too complex detail.

Just brainstorming. If you want to avoid having a single color for the inner part, vertical smooth shading could also be used in the SVG :) Like the nut from this picture on wikipedia:

Enough from me. The examples are nice as they are, the last batch is certainly better.

mojca commented Dec 2, 2017

This definitely looks much better than the yellow shade.

At smaller sizes the "shading" indeed makes absolutely no difference (it could just as well be dark without the upper brighter part). It's hard to say whether the additional ring/shading makes the logo better or not at the large sizes (compared to having just a single color).

At the biggest size there is theoretically even sufficient space to draw the threads, but those would only ever be seen on those huge magnification (as good as never), so it's probably not worth it - too complex detail.

Just brainstorming. If you want to avoid having a single color for the inner part, vertical smooth shading could also be used in the SVG :) Like the nut from this picture on wikipedia:

Enough from me. The examples are nice as they are, the last batch is certainly better.

@pmisik pmisik referenced this issue Dec 2, 2017

Closed

Add fluid icon into page metadata. #3782

1 of 3 tasks complete
@arturoacevedob

This comment has been minimized.

Show comment
Hide comment
@arturoacevedob

arturoacevedob Dec 4, 2017

Contributor

Thanks for the feedback! @mojca @ewongbb @sndgeek

I'll make more adjustments shortly.

Contributor

arturoacevedob commented Dec 4, 2017

Thanks for the feedback! @mojca @ewongbb @sndgeek

I'll make more adjustments shortly.

@arturoacevedob

This comment has been minimized.

Show comment
Hide comment
@arturoacevedob

arturoacevedob Dec 4, 2017

Contributor

I've adjusted for visibility at smaller sizes. The 3rd changes shape, saturation and uses @mojca vertical shading. The 4th also changes changes shape, saturation but uses an isometric perspective and drops all shading too.

artboard2 artboard3 artboard4 artboard5

This is what is looks without any inner shading, as requested:

no shading no shading 2 no shading 3 no shading 4

Contributor

arturoacevedob commented Dec 4, 2017

I've adjusted for visibility at smaller sizes. The 3rd changes shape, saturation and uses @mojca vertical shading. The 4th also changes changes shape, saturation but uses an isometric perspective and drops all shading too.

artboard2 artboard3 artboard4 artboard5

This is what is looks without any inner shading, as requested:

no shading no shading 2 no shading 3 no shading 4

@mojca

This comment has been minimized.

Show comment
Hide comment
@mojca

mojca Dec 4, 2017

I like the second version better, but it's fair that others cast their votes.

Just a note about small sizes. I have absolutely no idea how other websites deal with it (some apparently have super high resolution images and always scaled them down, some use SVGs, most don't care), but the scaled-down SVG looks better on a high definition screen than the specially-tuned PNG (where each pixel from the image would expand to four physical pixels).

Below are the screenshots:

SVG: highdef-svg-small PNG: highdef-png-small

mojca commented Dec 4, 2017

I like the second version better, but it's fair that others cast their votes.

Just a note about small sizes. I have absolutely no idea how other websites deal with it (some apparently have super high resolution images and always scaled them down, some use SVGs, most don't care), but the scaled-down SVG looks better on a high definition screen than the specially-tuned PNG (where each pixel from the image would expand to four physical pixels).

Below are the screenshots:

SVG: highdef-svg-small PNG: highdef-png-small

@tardyp

This comment has been minimized.

Show comment
Hide comment
@tardyp

tardyp Dec 4, 2017

Member

Thanks everyone for the good discussion!
I think we are really enhancing the first proposals. I fear that the initial votes are misleading as probably not everyone did follow the quick activity.
We will discuss how we move this forward tomorrow at the IRC meeting.
https://docs.google.com/document/d/1SAiv3Tk3lACPFVaCNExTjeU7z7NKCKCfP9_2AZ5lpjE/edit#

Member

tardyp commented Dec 4, 2017

Thanks everyone for the good discussion!
I think we are really enhancing the first proposals. I fear that the initial votes are misleading as probably not everyone did follow the quick activity.
We will discuss how we move this forward tomorrow at the IRC meeting.
https://docs.google.com/document/d/1SAiv3Tk3lACPFVaCNExTjeU7z7NKCKCfP9_2AZ5lpjE/edit#

@ewongbb

This comment has been minimized.

Show comment
Hide comment
@ewongbb

ewongbb Dec 4, 2017

Contributor

@arturoacevedob Having seen the results of the adjustments, I'm going to vote for the one without inner shading. Thanks for the great work!

Contributor

ewongbb commented Dec 4, 2017

@arturoacevedob Having seen the results of the adjustments, I'm going to vote for the one without inner shading. Thanks for the great work!

@arturoacevedob

This comment has been minimized.

Show comment
Hide comment
@arturoacevedob

arturoacevedob Dec 4, 2017

Contributor

That's right @mojca.
Most websites have their graphics exported at different sizes and for different resolution screens, then they strip the metadata and compress them. But that's not enough, that's why I'm doing SVGs.

The ones in this thread are not exported for higher resolution screens (2x, 3x). That's why the SVGs turned PNGs look better. I wish I had a screen like that to see them work though. When this is settled, I'll provide SVGs and bitmaps in all sizes and resolutions.

I strongly advise to use SVGs whenever possible. As you may have noticed, they can be optimized to be under 1000 bytes, most cases under 600. That beats most bitmaps over a 48px 1x, and they will render perfectly anywhere.

Contributor

arturoacevedob commented Dec 4, 2017

That's right @mojca.
Most websites have their graphics exported at different sizes and for different resolution screens, then they strip the metadata and compress them. But that's not enough, that's why I'm doing SVGs.

The ones in this thread are not exported for higher resolution screens (2x, 3x). That's why the SVGs turned PNGs look better. I wish I had a screen like that to see them work though. When this is settled, I'll provide SVGs and bitmaps in all sizes and resolutions.

I strongly advise to use SVGs whenever possible. As you may have noticed, they can be optimized to be under 1000 bytes, most cases under 600. That beats most bitmaps over a 48px 1x, and they will render perfectly anywhere.

@rjarry

This comment has been minimized.

Show comment
Hide comment
@rjarry

rjarry Dec 20, 2017

Contributor

Hi all,

I personally prefer the blue version. The purple one is a little too similar to the old logo and I think this would be a good thing to change colors for the future 1.0 release.

@arturoacevedob would it be possible to see the blue version without inner shading? Thanks!

Contributor

rjarry commented Dec 20, 2017

Hi all,

I personally prefer the blue version. The purple one is a little too similar to the old logo and I think this would be a good thing to change colors for the future 1.0 release.

@arturoacevedob would it be possible to see the blue version without inner shading? Thanks!

@arturoacevedob

This comment has been minimized.

Show comment
Hide comment
@arturoacevedob

arturoacevedob Dec 20, 2017

Contributor

@rjarry

256px_ 64px 32px 16px

Thanks for the comments!

Contributor

arturoacevedob commented Dec 20, 2017

@rjarry

256px_ 64px 32px 16px

Thanks for the comments!

@rjarry

This comment has been minimized.

Show comment
Hide comment
@rjarry

rjarry Dec 22, 2017

Contributor

Thanks @arturoacevedob!

I think I prefer the one with inner shading 😁

Contributor

rjarry commented Dec 22, 2017

Thanks @arturoacevedob!

I think I prefer the one with inner shading 😁

@tardyp

This comment has been minimized.

Show comment
Hide comment
@tardyp

tardyp Dec 23, 2017

Member

I also prefer the blue version with inner shading. I just tried to implement the shading with an svg gradiant. I also added a light border to add a bit of contrast (I like the cell shading effect).

I installed that in https://nine.buildbot.net, but I am not very happy with the 16pix scaled down version
image

@arturoacevedob any suggestion on how we can make a specific version for 32 and 16 widths?

Member

tardyp commented Dec 23, 2017

I also prefer the blue version with inner shading. I just tried to implement the shading with an svg gradiant. I also added a light border to add a bit of contrast (I like the cell shading effect).

I installed that in https://nine.buildbot.net, but I am not very happy with the 16pix scaled down version
image

@arturoacevedob any suggestion on how we can make a specific version for 32 and 16 widths?

@rjarry

This comment has been minimized.

Show comment
Hide comment
@rjarry

rjarry Dec 23, 2017

Contributor

Awesome @tardyp !

Contributor

rjarry commented Dec 23, 2017

Awesome @tardyp !

@tardyp

This comment has been minimized.

Show comment
Hide comment
@tardyp

tardyp Dec 24, 2017

Member

I played a bit with inkscape to try and make 16pix version:
image

I simplified a lot the colors, so that there is only one color, and black.
With this, I can implement automatic selection of the favicon color accoding to the build results :)

image

I deployed that in https://nine.buildbot.net/#/builders/9/builds/1782/steps/6/logs/stdio

Member

tardyp commented Dec 24, 2017

I played a bit with inkscape to try and make 16pix version:
image

I simplified a lot the colors, so that there is only one color, and black.
With this, I can implement automatic selection of the favicon color accoding to the build results :)

image

I deployed that in https://nine.buildbot.net/#/builders/9/builds/1782/steps/6/logs/stdio

@rjarry

This comment has been minimized.

Show comment
Hide comment
@rjarry

rjarry Dec 24, 2017

Contributor

Nice idea @tardyp :)

Shouldn't you be preparing Xmas Eve ? LOL

Contributor

rjarry commented Dec 24, 2017

Nice idea @tardyp :)

Shouldn't you be preparing Xmas Eve ? LOL

@tardyp tardyp closed this in #3850 Dec 27, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment