iodide-project / iodide

Literate scientific computing and communication for the web
Mozilla Public License 2.0
1.49k stars 142 forks source link

iodide logo #267

Open hamilton opened 6 years ago

hamilton commented 6 years ago

This is a part of #167.

Let's use this PR as a spec, following the mozilla OpenDesign request template, w/ suggestions, debate, etc. in comments here:

Goal:

[What you'd like created]

Info:

[What it will be used for/where it will go]

Style Information:

[What you want it to look like, link to references, similar things etc.]

Deadline:

[When would you like this done by]

Tag:

[Design Needed, Developer Needed, Question, Staff Support Needed]

bcolloran commented 6 years ago

@hamilton. here's a stab at some of this--

Goal:

A logo for Iodide; initially, for use within the Iodide notebook, but maybe something flexible enough to be the basis of a family of icons if/when we start to stand up sub-projects that need branding.

Info:

used for: Iodide notebook header bar, Iodide favicon, iodide websites (iodide.io, github, etc),

Deadline:

Open ended. We don't really have any kind of time crunch, and we'd like to see at least a few different options/concepts before we decide on anything

Tag:

Design Needed

possible inspirations and/or directions to start with

the final logo need not incorporate any of these ideas or inspirations, but they might spark some thoughts

something playing off of iodine as a chemical element--

https://en.wikipedia.org/wiki/Iodine

here are the spectral lines of Iodine image https://en.wikipedia.org/wiki/File:Iodine_spectrum_visible.png As mentioned in issue #167 about general branding and styling of the app, I have some vague notion that we might be able to play off of this to come up with a visually appealing and distinctive header/menu bar. May or may not be relevant to logo.

violet color

Iodine is often associated with violet or dark purple image

"I minus"

The iodide ion is the -1 oxidization state of iodine. https://en.wikipedia.org/wiki/Iodide the chemical notation for this is an uppercase "I" with a super script minus sign image This could be an interesting starting point for a typographically-based logo

something generically science-y

Since this idea is about scientific computing, something that conveys the idea of science could work. (I will say though: there are way to many logos that play off of the notion of electrons orbiting a nucleus, so that's probably not a good path to follow)

something that somehow pays homage to Firefox or Mozilla

I'm digging the bold use of color and interesting multi-hue, notn-linear gradients rather that have been so nicely executed in the newest FF logo (and surrounding branding) https://www.mozilla.org/en-US/firefox/ I think these logos and this brand system look very modern and sleek, but look visually distinctive and fresh compared to the all too flat designs that are dominant right now.

gk400282 commented 6 years ago

Hi, I would like to contribute to this project by designing its logo. I have some ideas too. Here is my first try at this. This logo is inspired by Iodine's violet color. I have made this using the design guidelines of Mozilla

iodine_icon-8

The other idea I have is to use 53 circles (as Iodide's atomic number is 53) and an extra circle (depicting an extra electron) outside the main circle. Below is a very rough sketch of what I have in mind.

img_20180313_192518

What do you think? Should I pursue this idea and make its vector image?

bcolloran commented 6 years ago

Thanks for the concepts @gk400282! Regarding the second one, it could be interesting, but keep in mind that the logo will ideally be able to scale down as small as 16x16 pixels for favicons. That many small circles might not show up in such a small format.

hamilton commented 6 years ago

@bcolloran cut some early alpha stickers for the Mozilla SF All-Hands. This is not our final logo, but just something to keep us happy while we hit conferences, talks, etc.

iodide-sticker-2