Image and Icon design about theia-blueprint HOT 77 CLOSED

I think @marcdumais-work mentioned an important requirement here, the logo which is used on the welcome page should be ideally compatible with a dark and a bright theme, because you can actually switch themes in Theia. It won't be possible to design a logo that fits all themes (you can even install new ones), but at least the default bright and dark theme should look OK I guess. See this screenshot for a demonstration how theme switching looks like in Theia:

from theia-blueprint.

What we could aim for is that the logo and icon share the same color. For this propose the color would have to be brighter imho. Maybe similar to the proposal of @MatthewKhouzam

from theia-blueprint.

Also about icon vs. logo: I think none of the presented alternatives works as an icon since the texture is lost and also the difference to the black original logo becomes difficult to spot especially for the third option:

However I never meant to have the same image for the logo and the icon. I am not sure everyone is on the same page here?

Agree...first step is to land on a logo and then we will have @meKokabi work on a complementary icon.

from theia-blueprint.

Here ya go....

from theia-blueprint.

I'll seek to get clarification on this today.

from theia-blueprint.

The icon should be based on the Theia icon and transport that this is a template/blueprint for creating something based on Theia.
One idea we had could be something similar to this image:
https://www.flaticon.com/free-icon/blueprint_1373067
But instead of the drawings on the paper it would show the Theia icon. See my draft here

Attribution: Icons made by Freepik from www.flaticon.com

from theia-blueprint.

For the images it could be something similar but showing more details. There is a nice larger image of the Theia logo that could work there:

from theia-blueprint.

Please involve us in the design process, so we can provide feedback, thanks!

from theia-blueprint.

I'm not a designer 😄
I have the following design if interested, or it may spark other proposals:

Proposal

from theia-blueprint.

I would argue that we should stick to "flat" so 3 or 1.

from theia-blueprint.

The proposals look good to me, I think we are back on track. I like the first and the third one with a preference for the first. It would be good to see the logos in their target environments to be able to better judge how well they fit:

• About Dialog (see #10)
• Welcome Page (see #9)
• Web page (see #7)
  Also as Jonas pointed out we should make sure the logo looks good also in a bright theme in the about dialog and welcome sheet.
  The respective issues always contain a screenshot, maybe you could ask Mehrnaz to fit the logo in instead of the current blue one?

from theia-blueprint.

@koegel @croundy
re: downscaling the logo. I would consider the logo to be two parts, the image and the mask, we don't need to downscale them at the same rate, as long as the essence is maintained.

from theia-blueprint.

Option A looks really good imho and also works great on a dark background. Option B does not work equally well on the dark background but is also good. I have a preference for option A since it somehow looks more modern and "fresher" to me but I do not object to option B.

from theia-blueprint.

These are very nice! I would like to know if we are allowed to use the "blueprint" mask underneath. I like the color of A but the layout of B.

I agree with that, I also like the layout of option B better.

from theia-blueprint.

LGTM

from theia-blueprint.

I like option 1, but I suggest that the colors in option 1 should match the colors from the logo.

from theia-blueprint.

Combining all this feedback, I think a good choice would be option 1 from here (darker color) without the circle: #11 (comment)
@vince-fugnitto @koegel agreed?

from theia-blueprint.

looks good to me, @vince-fugnitto ?

from theia-blueprint.

@koegel I believe your thumbs up was a yes, please confirm

from theia-blueprint.

My understanding is that anyone who has signed the ECA can check in these files and they would be under the same IP as the rest of the code.

https://www.eclipse.org/legal/ECA.php
"The contribution was created in whole or in part by me and I have the right to submit it under the open source license indicated in the file or
The contribution is based upon previous work that, to the best of my knowledge, is covered under an appropriate open source license and I have the right under that license to submit that work with modifications, whether created in whole or in part by me, under the same open source license (unless I am permitted to submit under a different license), as indicated in the file or
The contribution was provided directly to me by some other person who certified (a), (b) or (c) and I have not modified it.
I understand and agree that this project and the contribution are public and that a record of the contribution (including all personal information I submit with it, including my signoff) is maintained indefinitely and may be redistributed consistent with this project or the open source license(s) involved."
This means that the committer merging this PR needs to certify this which he/she cannot since the contribution is not from the committer.

=> I think it would be best if @meKokabi would sign an ECA with the Eclipse Foundation, fork the repo and contribute via PR. This can all be done in the Gitgub Webinterface via File Upload
The logos can go into this folder:
https://github.com/eclipse-theia/theia-blueprint/tree/master/theia-blueprint-product/src/browser/icons
The icons can go into this folder:
https://github.com/eclipse-theia/theia-blueprint/tree/master/electron-app/resources/icons

Otherwise someone needs to check with legal whether it is sufficient by @meKokabi to certify that "The contribution was created in whole or in part by me and I have the right to submit it under the open source license indicated in the file or
The contribution is based upon previous work that, to the best of my knowledge, is covered under an appropriate open source license and I have the right under that license to submit that work with modifications, whether created in whole or in part by me, under the same open source license (unless I am permitted to submit under a different license), as indicated in the file"
as a comment on this issue.

@brianking How can we move ahead with this?

from theia-blueprint.

Help for this issue wanted.

from theia-blueprint.

I have submitted a request to the EF designer to create these icons

from theia-blueprint.

We will have draft designs sometime this week.

from theia-blueprint.

Ok, thanks!

from theia-blueprint.

Please find attached Theia Blueprint logo and icon design (3 options for each) Note: icons have consistency with their relevant logo. Please share your thoughts.
BluePrint Logos and icons.pdf

from theia-blueprint.

from theia-blueprint.

Just an idea. I am not an artist btw

background was taken from
https://pixy.org/6814405/

CC0, we are allowed to use it for commercial use.

from theia-blueprint.

DISLAIMER: Personal opinion ahead :)
None of the icons of the proposals of @meKokabi transports for me the idea of "blueprint". Please see my previous comment on this.

I cannot really commit to any of the proposals of @meKokabi , but I guess there is other opinions?

@jfaltermeier @JonasHelming @lucas-koehler What do you think?

from theia-blueprint.

Just an idea. I am not an artist btw

background was taken from
https://pixy.org/6814405/

CC0, we are allowed to use it for commercial use.

I really like this proposal, to me it transports the "blueprint" idea. It might not look good as small icon since the details might get lost. But it might be a great idea for a larger graphic for the about dialog, welcome page and download page.

from theia-blueprint.

@meKokabi are these the only proposals for the eclipse theia blueprint logo, and is it something that the community can vote upon?

Personally I'm not in favor of any of the proposals, and unfortunately they do not successfully represent the idea of "blueprint" as Maximilian previously expressed. We should aim to find a logo that fits the theme, and works well as a product.

from theia-blueprint.

Just so everyone is on the same page here, these are initial design concepts meant to elicit feedback on directions that might work for the brand you want to create. From the comments I have seen so far, this group seems to have everything handled and isn't really looking for design help. If that is the case, we have plenty of other projects for Mehrnaz to work on and can leave it to you all to wrap up. If that is not the case, I would ask for constructive feedback about the elements that have been presented that can be expanded upon or altered to meet your objectives. I do happen to like the image Matt submitted and think it has potential as a primary element for both the ID and web pages.

As for web pages,, same situation...those aren't meant to be final. They are simply design concepts. with visuals to get feedback on what direction you would like Mehrnaz to go. This is where the creative process starts. Again, if you are already far down the path and aren't really looking to make design changes, please tell us so we don't spin cycles unnecessarily. Thanks!

from theia-blueprint.

Just so everyone is on the same page here, these are initial design concepts meant to elicit feedback on directions that might work for the brand you want to create. From the comments I have seen so far, this group seems to have everything handled and isn't really looking for design help. If that is the case, we have plenty of other projects for Mehrnaz to work on and can leave it to you all to wrap up. If that is not the case, I would ask for constructive feedback about the elements that have been presented that can be expanded upon or altered to meet your objectives. I do happen to like the image Matt submitted and think it has potential as a primary element for both the ID and web pages.

As for web pages,, same situation...those aren't meant to be final. They are simply design concepts. with visuals to get feedback on what direction you would like Mehrnaz to go. This is where the creative process starts. Again, if you are already far down the path and aren't really looking to make design changes, please tell us so we don't spin cycles unnecessarily. Thanks!

My apologies if you feel my comments were not constructive. Let me elaborate on what I meant. I think all 3 proposed options are going in the entirely wrong direction and we need to start over. I had made a comment before this effort started what we are looking for and even provided a sketch. I am not sure @meKokabi took that into consideration at all. The proposal of @MatthewKhouzam is another example of how a potential design respecting our requirements could look like.
I propose to stop making separate proposals for the webpage, the welcome page and the about dialog but only work on one proposal for a larger graphic that could replace the current blue version of the Theia icon as seen here in the red box:

Furthermore we should work on an icon design that may be similar to the larger graphic but smaller in size which will probably require changes. For both please take into consideration that the icon should be based on the Theia icon and transport that this is a template/blueprint for creating something based on Theia.
Existing proposals matching these criteria are these two:

Thank you.

from theia-blueprint.

Adding a scaled down blueprint image. So we can see how it looks low res.

Basically we can use the theia logo as a mask on a section of the bitmap, and chroma shift the blue to match the one of theia.

On an implementation POV, we can even have a theia mask overlayed and people can contribute whatever they want behind it.

from theia-blueprint.

Adding a scaled down blueprint image. So we can see how it looks low res.

Basically we can use the theia logo as a mask on a section of the bitmap, and chroma shift the blue to match the one of theia.

On an implementation POV, we can even have a theia mask overlayed and people can contribute whatever they want behind it.

Thanks! I would keep the blue color, it makes the icon distinct from the Theia logo and underlines the blueprint idea. As an icon for the launcher I believe that it is not suitable in this form since the lines are too thin to be recognizable then. But I guess @meKokabi could work on something similar for the smaller icons that is still recognizable?

from theia-blueprint.

@koegel Just to summarize and validate how to direct @meKokabi. At this point, you simply need her to create a logo with a blueprint pattern in the background and a solid blue icon (as the pattern will not show in the smaller formats). No other design elements will be required at this time. Is this correct?

from theia-blueprint.

@koegel Just to summarize and validate how to direct @meKokabi. At this point, you simply need her to create a logo with a blueprint pattern in the background and a solid blue icon (as the pattern will not show in the smaller formats). No other design elements will be required at this time. Is this correct?

Yes, no other design elements will be required. But it would be good to get more than one proposal for the logo and icon. Maybe she also has some ideas how to represent blueprint in a different way for the icon, e.g. something similar to this;

from theia-blueprint.

@koegel Just to summarize and validate how to direct @meKokabi. At this point, you simply need her to create a logo with a blueprint pattern in the background and a solid blue icon (as the pattern will not show in the smaller formats). No other design elements will be required at this time. Is this correct?

Yes, no other design elements will be required. But it would be good to get more than one proposal for the logo and icon. Maybe she also has some ideas how to represent blueprint in a different way for the icon, e.g. something similar to this;

Got it....thanks
@koegel for that feedback!

from theia-blueprint.

Looks good in 32x32

from theia-blueprint.

Looks good in 32x32

I think it looks good larger, but in 32x32 I find it hard to recognize.

from theia-blueprint.

There are a number of factors to take into account when creating an icon. Recently, for example, I find many don't work well in dark mode. I think simplicity is key, so details such as lines probably won't work.

https://www.toptal.com/designers/ui/icon-usability-and-design
https://www.smashingmagazine.com/2016/05/easy-steps-to-better-logo-design/

Personally I think we should leave it to the designers! Ideas are great though, keep them coming.

from theia-blueprint.

I think it looks good larger, but in 32x32 I find it hard to recognize.

Yes, maybe a version with a bit more contrast between background and Theia logo would work better.

from theia-blueprint.

Here are a few logo design options from Mehrnaz based on previous input from this group.

from theia-blueprint.

Looking better I think. These are meant to be used with a light theme, correct? A version for dark theme of these new 3 could be useful. Also a smaller version , so we can see if we (or I at least) still like.

from theia-blueprint.

@marcdumais-work Yes, I think the general assumption is that the theme/background will be lighter so that the logo will pop off the page better. If that is not going to be the case, we should probably look at a version that is mostly white, which may not have quite the same impact....or at least leave some generous white space towards the top of the page to accommodate a color logo. I'm not a big fan of dark backgrounds in web pages, but just my personal preference.

As for these 3 design options, here's what I like:

1. The pattern in number 1 looks a bit more like a traditional blueprint
2. The 3D look in number 2 provides a nice touch
3. The bolder/darker blue in number 3 is nice and may be a consideration, though the "blueprint blue" in number 1 may be more in line with the branding. I'm also not opposed to the brighter teal blue in number 2.

Thoughts from the group?

from theia-blueprint.

My order of preference for the proposals is:
I like the third one most
the first one will probably loose it in smaller versions
The second one I like the least (by far)

from theia-blueprint.

Also about icon vs. logo: I think none of the presented alternatives works as an icon since the texture is lost and also the difference to the black original logo becomes difficult to spot especially for the third option:

However I never meant to have the same image for the logo and the icon. I am not sure everyone is on the same page here?

from theia-blueprint.

Based on the feedback received from this group, here are a couple of logo option updates from @meKokabi, including how it would look with a black background.

Feedback please. We will make one more round of changes to whichever of these designs is most inline with the groups' liking. At that point we will also work on an icon based on the final logo direction.

from theia-blueprint.

Also thank you to @meKokabi @croundy for driving this forward, I think we are on a good track now.

from theia-blueprint.

These are very nice! I would like to know if we are allowed to use the "blueprint" mask underneath. I like the color of A but the layout of B.

Thanks everyone for making things pretty.

from theia-blueprint.

These are very nice! I would like to know if we are allowed to use the "blueprint" mask underneath. I like the color of A but the layout of B.

Thanks everyone for making things pretty.

@MatthewKhouzam I'm not sure I understand what you mean by "Blueprint Mask." Please clarify your question

from theia-blueprint.

These are very nice! I would like to know if we are allowed to use the "blueprint" mask underneath. I like the color of A but the layout of B.
Thanks everyone for making things pretty.

@MatthewKhouzam I'm not sure I understand what you mean by "Blueprint Mask." Please clarify your question

@croundy I believe Matthew is referring to if we are allowed to use the blueprint image within the Theia logo (free to use, permissive license, etc.).

from theia-blueprint.

These are very nice! I would like to know if we are allowed to use the "blueprint" mask underneath. I like the color of A but the layout of B.
Thanks everyone for making things pretty.

@MatthewKhouzam I'm not sure I understand what you mean by "Blueprint Mask." Please clarify your question

@croundy I believe Matthew is referring to if we are allowed to use the blueprint image within the Theia logo (free to use, permissive license, etc.).

@MatthewKhouzam @vince-fugnitto we will license whatever image is used so there is no issue.

from theia-blueprint.

OK, here's the logo option A with layout B. Unless any additional concerns/questions/issues, we will consider this final and start work on a complementary icon.

from theia-blueprint.

here are a few draft icon options. Please let us know which one(s) most closely reflect what you would like to seee and what you would change, if anything
Theia_BluePrint_Icon-_Draft_2.pdf

from theia-blueprint.

Here's the option 1 icon with a couple of color options along with comparison with the logo colors

from theia-blueprint.

@vince-fugnitto @JonasHelming What do you think?

from theia-blueprint.

I am a little undecided tbh, especially about:

1. The coloring visually still does not match. This is propably due to the fact that the logo has two colors, which visually mix and therefore neither option1 or 2 actually match. Probably this is not really important, as you usually would not see both at the same time.
2. Not sure, whether any additional shapes adds value, i.e. whether the circle in the background should really be there. Maybe it is also an option to just use the Theia logo in the Blueprint color without any additional shape?

Besides that, I also like option 1, so I would also be fine with option 1 as is.

from theia-blueprint.

I totally agree with the first statement of Jonas, I also have the feeling the colors do not match visually. I think the light blue should be darker to match the average blue of the logo.
Also it would be good to have an option without the circle in addition.
Thanks!

from theia-blueprint.

I'm not really sure what you guys are seeing. The colors are consistent with the logo. To help visualize this, Mehrnaz took a slice of the logo and zoomed in to show the color comparison between logo and icon. Let's get this wrapped up!

from theia-blueprint.

QQ about my previous post. Does everyone see a light blue Theia icon on a darker blue circle? At least one person has seen it manifested as a red circle, which would not be consistent with what has been designed.

from theia-blueprint.

Does everyone see a light blue Theia icon on a darker blue circle?

I see the two different blues, however it does not seem to pass web accessibility tests:

In addition, I believe that both @koegel and @JonasHelming have expressed that the colors should be updated, likely have the darker blue as the main color. I do not see the value in having the circle, I'm not sure what it is supposed to represent.

from theia-blueprint.

I'm not really sure what you guys are seeing. The colors are consistent with the logo. To help visualize this, Mehrnaz took a slice of the logo and zoomed in to show the color comparison between logo and icon. Let's get this wrapped up!

The point I am trying to make is that the logo consist of two colors and that when shrinking the logo the fine structures visually start to merge with the background and for me create the illusion of a color somewhere between the two colors involved. IMHO this should be reflected in the color of the icon by choosing a color between the two logo colors. I think the darker color from #11 (comment) does not reflect this idea.
Also I agree with @JonasHelming and @vince-fugnitto to remove the circle.

from theia-blueprint.

Please provide us with the exact shade of blue you would like for the icon and we will do a final iteration. No circle. Then we will consider this done. Thanks.

from theia-blueprint.

This is my proposal:

from theia-blueprint.

As a follow up to the latest icon, can I please get an affirmative that this is the final/accepted version? We can them move forward in creating the various sizes and formats. Thanks!

from theia-blueprint.

@vince-fugnitto ?

from theia-blueprint.

@vince-fugnitto ?

The icon is fine with me, I believe it is more up to @koegel to decide :)

from theia-blueprint.

@vince-fugnitto ?

The icon is fine with me, I believe it is more up to @koegel to decide :)

Thanks, yes, I like the final proposal

from theia-blueprint.

Please find the attached zip folder including 4 sub-folders: LinuxLauncherIcon | MacLauncher-icns | WindowsLauncher-ico- SidebarImage| which each includes all the required formats and sizes of the Theia Blueprint icon. Within these subfolders you can find the following formats:
Windows Launcher Icon
File type .ico
Dimension Combination of:
256 x 256 pixels – 32bit (24bit colour, 8bit transparency)
48 x 48 pixels – 32bit (24bit colour, 8bit transparency)
32 x 32 pixels – 32bit (24bit colour, 8bit transparency)
16 x 16 pixels – 32bit (24bit colour, 8bit transparency)
256 x 256 pixels – 8bit (256 colours, 1bit colour transparency)
48 x 48 pixels – 8bit (256 colours, 1bit colour transparency)
32 x 32 pixels – 8bit (256 colours, 1bit colour transparency)
16 x 16 pixels – 8bit (256 colours, 1bit colour transparency)
Mac Launcher Icon
File type .icns
Dimension Combination of
16×16 (8bit transparency)
32×32 (8bit transparency)
48×48 (8bit transparency)
128×128 (8bit transparency)
256×256 (8bit transparency)
512×512 (8bit transparency)
16×16 (1bit transparency)
32×32 (1bit transparency)
48×48 (1bit transparency)
128×128 (1bit transparency)
256×256 (1bit transparency)
512×512 (1bit transparency)
Linux Launcher Icon
File type .png
Dimension 512 x 512
Installer Sidebar image
File type .bmp
Dimension width: 164 height: 314
TheiaBluePrintIcons-ico -icns.zip
Please feel free to reach out in case anything has been missed!

from theia-blueprint.

Thank you! I believe to enable the project using them, they should be contributed following the regular process, i.e. via a PR with a signed ECA. @brianking should be able to assist you with this.
For now you can just drop all files into https://github.com/eclipse-theia/theia-blueprint/tree/master/theia-blueprint-product/src/browser/icons

from theia-blueprint.

On a second thought, maybe it is a good idea to place a license file along with the icons. Sharon should be able to answer that. @brianking

from theia-blueprint.

Theia Logo's Final PNGs:

Theia BluePrint Logo- PNGs.zip

from theia-blueprint.

Thank you! I believe to enable the project using them, they should be contributed following the regular process, i.e. via a PR with a signed ECA.

When this last came-up, I got an answer from the big guy, that amounted to: ideally it's better that the content be licensed the same as the project.

It's possibly enough that the creator submits the content under the project's license(*) as part of the archive, e.g. adding a license file to the zip.

(*): TL;DR: "EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0"

from theia-blueprint.

My understanding is that anyone who has signed the ECA can check in these files and they would be under the same IP as the rest of the code.

from theia-blueprint.

Anyone who can answer the questions in the certificate of origin with yes...

from theia-blueprint.

Note I submitted a PR last week checking in the images. I suggest we them in the repo and someone else makes the changes to integrate them into the software.

from theia-blueprint.

Thank you, gentlemen! I consider this ticket closed with the referenced PRs.

from theia-blueprint.