Iced branding

[AlisCode]

Hey everyone !

In order for the new website to happen, we need to define some sort of branding for Iced. Since this should be a community effort, here are my first thoughts / mind map of how I reasoned about the logo and color scheme.

Logo

What is Iced ?

• GUI Framework
• Platform-agnostic
• Written in Rust
• Elm Architecture

What does iced mean ?

• Ice

  • Ice Cubes
  • Snowflakes
  • Mountains / Glacier
  • Icebergs
  • Sharp edges
  • Mostly light-blue colors

• Iced Coffee

  • Ice cubes
  • Brown / Orange colors

• Modern GUI / Elm

  • Font has to be sans-serif. Having serif makes everything look automatically older.
  • Flat
  • Square-ish shape
  • Draft / Prototyping

• Rust

  • Light-Orange color (Github) and black color
  • "Jagged R" Rust Logo : maybe we can have a slight reminder of Rust in the shape of the logo ?

Possible inspiration

This whole article on the amethyst.rs website

Colors

We need to define :

• One main color - 3 shades
• One "accent" color - 3 shades
• One shade of light color
• One shade of dark color

In my opinion, it is obvious that Iced's main color should be light-blue. White could also largely be used as a reminder of snow. I'm thinking a slightly brown dark color could be used for texts.

I'm undecided for the accent : I like light-green together with light-blue, though I think an orange accent would make for a better result because they are often used as opposite colors in video games. Take Rocket League for example. I also tried brown/orange as an alternative.

My suggestions

So here are my 2 cents. I'm terrible at graphic design (I'm just an engineer) and this is of course a draft that I hope someone will take further.

For the color scheme, I took images of a glacier and extracted some colors. This would be my "main color" suggestion. I took another image of an emerald glacier and extracted shades of green - I think it's called teal. Finally, I got an image of an iced coffee and exrtacted shades of orange / brown.

As per the logo, I think I'm on to something. These are the result of my first iteration. I'm willing to add some sort of gradient to the ice cubes when I can figure out how to do that in Inkscape.

I think it's simple enough. A cool logo should never be complex as evidenced by the "possible inspirations" part, and should work in a monochrome context (both black and white), which I think is kind of the case here.

What are your thoughts ? Any help welcome! :pray:

[hecrj]

This is amazing, @AlisCode! I believe there is a lot of work in the library that will need exploration like this and you are setting a really good precedent. Thank you very much! :heart:

As you probably realized, I named the library Iced because it started as a part of coffee. So, I've always had ice cubes in mind and I think they could work well as a logo. Adding some coffee to the equation would be great, but I am not sure how we could do that without the brown color taking all the protagonism (I'm also just an engineer :sweat_smile:).

The drafts look like a nice starting point! As you said, some gradients (and maybe some shiny spots and rounded corners?) would probably make the ice more recognizable. Adding some context is also an interesting approach, like the drink one. It definitely helps to identify the ice.

For the text, I think we should just capitalize the first letter: Iced. The name is short and using all upper-case may make it seem like it's some kind of acronym (e.g. Internal Compiler Error).

I also think we should strive for simplicity (just like the library!) and I believe this is a really great start!

[othelarian]

Hi, I want to share my modest contribution, definitely not a final version, but if I can help for the final design ;-)

[hecrj]

@othelarian Thanks! I feel there are too many elements here. We should try to keep it simple.

I think the logo should be a single "element" with a simple shape and one or two flat colors at most. As I mentioned, blue and brown seem to be hard to mix.

I do not think of ice when I look at these squares, maybe we could play with isometric cubes? I believe the idea of the logo being part of the "i" dot may be interesting.

[AlisCode]

I'm under the same impression. The big problem with "amateur" logos is that they tend to show too many ideas at the same time, resulting in a confusing / meaningless logo.

Just take Flutter for example : 3 bars vaguely resembling the shape of an "F", as in "Flutter". One drop shadow. One modern font, no serif. It's as simple as that. You just "know" it's about something like UI, and it's modern. Great logo IMHO.

I also don't particularly like the option of making the logo "take part" in the font itself: I just feel like it usually doesn't work.

I'm working on a second iteration so that we can start looking at other ideas.

[JakubKoralewski]

My idea would be that the logo could be something like this with text below it?

The ice cubes are stacked on top of each other forming a kind of layout. However, the possibility of the ice melting could suggest it's not a very durable formation 😅 Just a suggestion.

Something like this above with whiskey on the rocks: Font: Permanent Marker (Apache License)

The brown-ish whiskey could resemble the Rust part of Iced?

If whiskey is not your thing:

Illustrator file if anyone wants to play around: iced.zip

[AlisCode]

So I just had this idea which I think could look like something cool given a bit more work.

Granted we have to change the font, colors and proportions (this was drafted in 2 minutes with Inkscape) :)

[artursapek]

@JakubKoralewski whiskey?! this isn't on-the-rocks!

[AlisCode]

@JakubKoralewski Awesome! I like the font, like the colors, but I don't get the "it's a UI framework" vibe from it.

There's definitely something that can be done with that layout though :)

Edit: Do you think it would be possible to design these 3 ice cubes as I showed and combine them like you did ?

We could also maybe apply a gradient on the outline to make it look 3d-ish ?

[JakubKoralewski]

@artursapek but if my English does not lead me astray on the rocks means iced

@AlisCode you mean like a little pyramid out of these kind of cubes?

It would also be interesting to try to recreate the Elm logo using ice cubes somehow maybe

[AlisCode]

@JakubKoralewski that's exactly what I meant ! I'm not sure how good that would look, though. You seem to be quite Illustrator-savvy, maybe you can try that as an experiment ? I'll try to make a correct SVG of that cube and experiment with colors during my lunch break.

I like the idea of representing an ice cube, and the nodes at the coners are great in my opinion : They represent modularity and "communication" logic which are core Iced principles. I lke your font, and the idea of having the logo on top of the text. I will try to use it :)

[JakubKoralewski]

@AlisCode The gaps you're leaving out on some lines next to the dots have some sort of rule where they appear or is it your creative decision? If it looks like I'm savvy in logo making then sorry for misleading you 😅

iced2.zip

I took the liberty to add some colors and stuff don't know if you like that.

Another idea is to change the crates in the crates logo to ice cubes? I edited the colors a bit to make the cardboard boxes(?) look more like ice

I guess the tape doesn't make sense and it's a very low effort rip-off. But just another idea.

[AlisCode]

@JakubKoralewski the gaps were purely my creative decision - if you could call that creative, lol. I don't like the colors of the outline - it doesn't play well in my opinion :( we need to do more research.

Btw, I re-did my cube thing with better proportions, applied some gradient to it (random colors, still needs work :) ), Montserrat Alternates font. I think it looks better with gaps but just to give an overview of what I think a cool logo would look like :

(sorry for the mouse in the screenshot)

Thoughts ?

[JakubKoralewski]

@AlisCode That looks great imo. I like the left one more, but I feel like the name should pop more, maybe a bolder weight?

EDIT: Or could you make one version where the text doesn't have a gradient? The brighter side on the left kind of blends with the white background

[AlisCode]

@JakubKoralewski I'm not Inkscape-capable this weekend but will make sure to try that sunday evening and afterwards.

I think defining 3-4 colors as "main palette" and 3-4 colors as "accent palette" would be a good "next step" :)

[AlisCode]

Added the gaps and removed gradient on text - tested with 3 different font weight (normal - medium - semi-bold)

I think the middle one with decent colors could be pretty good ! Thougts ?

[JakubKoralewski]

@AlisCode Amazing work. @hecrj Take a look.

[hecrj]

Nice! Very excited with the progress! I think we are onto something here.

Some thoughts:

• I feel using an outline stroke increases the overall complexity of the logo. I believe it will be hard to make it look good at smaller scales.
• It looks a bit "flat" to me. It should look like a cube. I think the gradient may be the culprit.
• While the blue colors help, I personally still don't see the ice. I understand making a simple logo look like ice is very challenging...
• The vertices feel a bit too big for me, I'd try using smaller sizes. This is probably just a nitpick.

The isometric cube seems like an interesting idea, though! Maybe we could try different angles?

[AlisCode]

This is with fill-mode instead of stroke-mode :

After reducing the "handles" and adding shinyness, I get something like this which doesn't feel quite right ...

I think a schematic isometric ice cube is impossible to do correctly, we're trying to illustrate rather than suggest. If we want this to "feel like ice", we probably want something that suggests a shape directly related to ice ; a cube is too generic. Here is what @hecrj and I discussed:

• Schematic Iceberg ? with "handles" (nodes like I did with the cube) ?
• Stalactites ?
• Snowflakes ?

Anyone willing to give this a shot ?

[ronvoluted]

I got it guys.

[JakubKoralewski]

Let's pack it up boys. I think we found it.

Unless...

[piaoger]

I wonder if we can bring some "impossible shapes" into logo. It means " impossible is possible" ：）  below are some examples:

[artursapek]

@piaoger I dig that

[Taha-Firoz]

I absolutely love this one, I've got some graphic designing background under my belt. I'd like to help out if possible.

On Tue, 14 Jan 2020, 02:58 Olivier Pinon, notifications@github.com wrote:

This is with fill-mode instead of stroke-mode :

[image: image] https://user-images.githubusercontent.com/12024408/72295278-8a62b200-3657-11ea-8879-dfde7146294f.png

After reducing the "handles" and adding shinyness, I get something like this which doesn't feel quite right ...

[image: image] https://user-images.githubusercontent.com/12024408/72295152-3f489f00-3657-11ea-8217-eff20338a6d3.png

I think a schematic isometric ice cube is impossible to do correctly, we're trying to illustrate rather than suggest. If we want this to "feel like ice", we probably want something that suggests a shape directly related to ice ; a cube is too generic. Here is what @hecrj https://github.com/hecrj and I discussed:

So, ideas :

• Schematic Iceberg ? with "handles" (nodes like I did with the cube) ?
• Stalactites ?

Anyone willing to give this a shot ?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/hecrj/iced/issues/143?email_source=notifications&email_token=AKCH6QPAR55OJ53X52OFTOLQ5TPXTA5CNFSM4KC5MW7KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEI2OH5I#issuecomment-573891573, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKCH6QMH4AYDGCVCSCYH2RLQ5TPXTANCNFSM4KC5MW7A .

[AlisCode]

Since I didn't have much time this past week and likely won't have much time during the next one either, I'm leaving here my Inkscape SVG draft for anyone to use.

iced_draft.zip

@Taha-Firoz please feel free to submit your ideas or realisations ! This issue is here to provide a community best-effort :)

[mr-road]

@AlisCode I pulled down your SVG and had a play around.

I just picked a couple of random icey colours for the gradient in GIMP.

[AlisCode]

Glad to see some activity on this issue ! :D

As I mentionned I don't particularly like the idea of using shapes for letters, it's not always easy to see what the logo is meant to be in those cases. I like the colors you picked, though :)

I think we were not far from something good with the gradient in fill mode. Any suggestion ?

I'll try to make some room in my weekend for this issue :)

[gsurrel]

I doodled the following two. I reused the color scheme provided but I would tune it for the 2nd one, I don't think it's a nice fit (even though it's much more close to the idea of a layout).

SVG files: Iced.zip

[Songtronix]

These look all awesome! However in the long term I think we need an accompanying logo beside the text so examples can use them e.g. for the taskbar, title bar, notification icon, executable icon etc.

[yaskhan]

deleted

[AlisCode]

@Songtronix you're absolutely right, we need some sort of accompanying logo : that's what my schematic ice cube was about. I'm not sure as to what to do better, appart from adding explicit iced forms, like icebergs, mountains or stalactites which I think would be great, if done properly.

My very first thought before drafting those SVGs was something like this :

@gsurrel while your two doodles are great, I feel like :

• In your first one the C is not explicit enough compared to the other letters.
• The second one is a bit too complex for my taste : there are too many "corner spots" perhaps we could just keep one in each corner of the word (as opposed to letters, here) and reduce the number of arrows, especially in the E. I like gradients, too (it's modern and usually good-looking), perhaps we could try that on your example ?

[hecrj]

Thank you everyone so far for the contributions! It's great to see so many different ideas. I really appreciate the efforts :bowing_man:

I apologize if I haven't been very active in this issue. I would love to help here but my knowledge when it comes to graphics design is very limited and, so far, I agree with most of the critiques.

I believe our efforts should be focused on making a simple, standalone logo (ideally just a couple of shapes/elements) that somewhat reminds us of ice. I think the Amethyst logo does this very well.

@AlisCode I like the polygonal ice concept! It's a very simple approach and reminds me of the Elm logo which, as you know, is the main inspiration of the library. It may be worth exploring.

[gsurrel]

I had this idea, quite different from the previous ones I sent. We lose the associated meanings, as it is 100% based on letters design and composition. Nothing like a final design, just food for thoughts:

Source iced.svg.zip

[Taha-Firoz]

@AlisCode Sure I'll try getting a draft in by the end of the week

[dunef-com]

I also got an idea. But its more like a snowflake:)

[Taha-Firoz]

I had the same idea, a snowflake will make it alot easier to work with and it'll be alot more distinguishable on smaller sizes. Can we please have the colour palette revised? I can't think very creatively with them.

On Mon, 6 Apr 2020, 03:07 dunef-com, notifications@github.com wrote:

I also got an idea. But its more like a snowflake:)

[image: iced_logos] https://user-images.githubusercontent.com/59920068/78511113-8055d880-779a-11ea-8c88-634ea4b0522c.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/hecrj/iced/issues/143#issuecomment-609492337, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKCH6QKQTQ2WGIPUO7U6UIDRLD6IPANCNFSM4KC5MW7A .

[JeremySorensen]

Based on some of the existing stuff (Alis codes glacier and the amethyst logo) along with the idea of being simple, and also trying to come up with a smooth font, I came up with this. Everything is "hand drawn" in inkscape (not a font) so the proportions aren't exact, nor are the colors, but I think it shows the concept well. I don't think it has so much detail that it would have trouble scaling.

[dunef-com]

@JeremySorensen I love your concept! Especially the icicle logo. It gave me some inspiration :) !

[AlisCode]

Cool ideas! Perhaps we could try some gradients on that Icicle concept ? (Yes, I love gradients) Also, feel free to tweak the colour palette, this is mostly random colours picked in random iceberg pictures, and was just to give an example of what we're aiming for.

Though to be fair, nobody was going to aim for red anyway

[dunef-com]

@AlisCode Yeah alright. I think darker blue colours are better, because for the colours of an iceberg its difficult to give it enough contrast and on dark backgrounds they lose their "coldness" effect (in my opinion). But i like the gradients on darker blue colours, it kinda gives the logo a more luxurious vibe.

[dunef-com]

I'm publishing my Inkscape SVG in case someone wants to tinker around with it :)

iced_logos.zip

[dunef-com]

Sorry for spamming too much, but i think these ones are nice.

[JeremySorensen]

These are looking really good. I guess since we want lowercase letters we can't have the ice coming off the "D" :-/ I still like the crystals to be at an angle though, so I grabbed the SVG and modified my favorite light and dark versions. I did not intentionally change the font, I like the original font @dunef-com used, I think I just don't have it on my machine.

I also wonder if having each of the three crystals outlined (only affects the center one where it overlaps the other two) would look better, having the subtle difference between the gradients looks a bit like an accident to me.

Finally I feel like I should point out that ice crystals like these would never naturally occur, but I think that is fine since it does evoke a feeling of ice.

[AlisCode]

Really liking the fact that it looks somewhat like the amethyst logo (good reminder of Rust / gamedev ecosystem) and Elm logo since it is formed of polygons, while still being original.

I believe that if we're going to gradient way, it should be applied to the whole logo as opposed to being applied on each separate polygon composing it.

Regarding the font, I suggest at least trying with Montserrat Alternates which looked pretty good in my initial examples, IMHO.

[JeremySorensen]

I think the gradient across all the crystals will make then look flat, which may be fine. Looking back I think the crystals with the William Shakespeare logo are a nice compromise between simple, 3D, and having a gradient.

[Taha-Firoz]

Okay so I'm having a really hard time coming up with something thats to my liking. I'm sorry to say but I'm not going with any of the typefaces that are being used. I really wish we could have something more minimal or we could include Ferris in this somehow.

[Taha-Firoz]

@dunef-com It's a good idea but I really can't top associating it with the Addidas Logo.

[richarddewit]

Any inspiration can be taken from these?

Source

Source

Perhaps something like the top-right ICE CUBE but then like "windows" with titlebar, minimize/maximize/close button, some other GUI elements like a button?

[krooq]

Just adding some inspo for some more geometric simple stuff and colours

I like the colours in this one.

Simple-ish, flat, geometric

Thought the design was creative, not super keen though

Geometry is pretty neat in this one

Simpler, flat version of previously mentioned, the geometry is neat in this one too

[aevyrie]

I saw this thread today while looking through the issues, and thought I'd toss this concept in the ring. The goal was to symbolize "cross platform gui" in a stylized ice cube. Smaller icon versions can lose the window control details while retaining the silhouette/form.

I wanted to avoid leaning on Rust iconography; it feels a bit overdone and I think a good brand should stand on its own. That said, the typeface is a bit of a nod to Mozilla.

I felt that lower case made it clear the name is not an acronym, and balanced well with the symbol when centered. Not certain if the font is exactly right, but this is at least the style I was going for.

[aevyrie]

Slightly updated to add contrast and make it a bit more ice cubey:

Light on dark badge:

Icon: