Redux's brand id

[dariocravero]

Hi all,

As some of you know we've been following, and lately using, Redux more extensively at UXtemple.

We wanted to contribute with a nice touch and @tomatuxtemple, my friend and business partner, started designing a brand identity for Redux. Here's his first iteration at it:

I hope you like it and would love to hear your thoughts about it :) Best, Darío

[emmenko]

Uuuh, very nice design and colors! Thanks!

One thing from a first impression: to me it looks more of an iOS icon app then a library icon. If you guys have other samples to share it would be easier to get the idea and pick a favourite I guess...

But very good idea :+1:

[gaearon]

Woah, cool! Let's keep it an open thing? Kind of like io.js did it, with anyone feeling free to submit ideas / mockups, so we can choose something later?

I really liked how React Router have their core idea (matching nested routes) in the logo:

I wonder what the code idea of Redux is. For me, it's probably (state, action) => state but I don't know how to express it visually :-)

[ooflorent]

I suffer from color blindness and I can tell you the colors aren't that good but I really like the design.

[emmenko]

> ≠ »

Reducer with middleware :)

[malte-wessel]

What do you think?

[gaearon]

@ntkoso Goes in and out?

[tombrewsviews]

@malte-wessel very cool, totally not obsessed about my design, go with whatever suits... :) @gaearon is that what you had in mind by pointing at io.js?

[jepezi]

Hi. I've learned a lot from redux and look forward to where it takes me. I cannot contribute to the code yet but thanks to @dariocravero for this thread that gives the opportunity!

Since redux goes along with hot loader so I thought it's nice to do both as an identity of small eco, well 3 for dnd :D

The logo idea is 'the initial letter composed from simple shapes'. We can add more shapes 'inside' if we want, this is just a quick draw to get the overall taste.

[danscan]

@jepezi Nice ^^.

[acdlite]

Based purely on aesthetics, @malte-wessel's is my favorite so far, I think. I agree with @gaearon that it'd be nice if the brand could visually incorporate the concept of reducing... but I'm not sure how to do that :)

[clearjs]

IMO gradients should be avoided, and the brand should be recognisable with colors "switched off" (grayscale). @malte-wessel's probably matches these criteria most closely (it should look good with gradient removed), but personally I'd use a different font (with more character) and pay attention to letter spacing.

Also, logo should have some part that would look legit as a favicon.

[malte-wessel]

I'll do some rework later. There's sure room for improvement ;)

[jonastebbe]

Hey guys, I played around with some hexagonal logo ideas and published one of them on dribbble. I would be happy to put some more work into it, if you like my draft. Open to any feedback :)

[tombrewsviews]

@acdlite //the brand could visually incorporate the concept of reducing

[dariocravero]

:heart: that!

[emmenko]

@tomatuxtemple nice and simple! :+1:

[johanneslumpe]

@tomatuxtemple that looks like a reversed @ sign, is that intentional?

[Dakuan]

looks like its 'reducing' the number of sides each loop to me

[jacobp100]

Went pretty literal with the reducer theme. (Plus a lambda, for lambda calculus!)

[acdlite]

Ooooooh yeah, I like that concept

[gaearon]

How I think of Redux:

[gaearon]

(Transistor is my metaphor at state, action => state)

[mindjuice]

@tomatuxtemple Very nice! The final turn and circle in the middle feels a bit cramped to me though, especially since it's hollow in the final circle.

[jepezi]

Look like 'r' to me.

[tombrewsviews]

@gaearon //state, action => state

[alexeygolev]

@gaearon Rationale:

I think a logo for an open source framework is not the same as a logo for an app. It is rather a conversation starter than a label.

State and actions are entities outside of Redux. The essence of Redux as I see it is delta (∆). Switching D to ∆ has a nice side effect of being reminiscent of cyrillic Д (which is quite obvious taken that Д is a typographical descendant ∆). I like having an homage to Dan's (and mine) homeland. The three circles are inspired by ∴ which stands for therefore in mathematical proof. I wanted to have an arrow without an arrow which ∴ is perfect for.

[CooCooCaCha]

@gaearon

I'm not a designer but I like the idea of a triangle inside of a circle. It symbolizes reduction in 3 ways. 1) The upside down triangle reduces to a single point at the bottom. 2) The triangle has a "reduced" area compared to the circle. 3) The frequency of blue light is higher than red light so the frequency "reduces" as we go from the circle to the triangle.

Hope this helps.

[tomspeak]

Really like @alexeygolev's approach and design.

The others are really nice but makes me think of an app.

[najmam]

That would be the "core idea" for me :)

[WoodyWoodsta]

@gaearon This is my take :) Left to right is complex to simple (reduced) - adapted from the symbol of a MOSFET transistor (which, for those who are not in the electronics space, is faster switching and generally better performing, if you catch my drift ;) ) There's also an element of input and feedback as well.

Hope you like it!

[benlesh]

By request

DUCKS. In the plural.

[gaearon]

I know @erikras's going to like this one

[erikras]

:smile: :bird:

[bmueller-sykes]

That's "Redux", not "Three Ducks"... (-;

[benlesh]

@bmueller-sykes

// proper Reduxing
[1, 2, 3].reduce((s, n) => s.push('duck'), []);

[gaearon]

No no no you're mutating it

[erikras]

The only functional operation you can do on a duck is pluck().

What if the D in the name was a duck? Like this, but by someone with actual ability...

[bmueller-sykes]

Redux: software.

Three ducks: apparently a hostel in France. http://www.3ducks.fr

[rafayepes]

Don't much attention to the details (colours, shape of lambda, font, sizes, etc.). I'm very bad at paint lol. Is just another idea. Looks similar to the transistor and has the idea of 2 inputs 1 output :)

[erikras]

@rafayepes That has a bit of a hammer and sickle vibe to it.

I do like the use of lambda, though.

[benlesh]

No no no you're mutating it

@gaearon mutant ducks?

[tombrewsviews]

@gaearon regarding your state, action => state I did that a while ago, maybe will suit?

[markdalgleish]

I want @malte-wessel's logo on my laptop the most. I feel this has got to be the best indicator 😉

[nickdima]

Why not take inspiration from a real physical reducer?

[malte-wessel]

Some tweaks :)

[gaearon]

Actions => state

[nickdima]

@gaearon ha ha my grandma used to make sausages with that thing :)

[erikras]

<imagination-photoshop>
  Different colored ducks go in one end, and a rainbow comes out the other.
</imagination-photoshop>

:grinning:

[ghost]

Reminds me of the old windows screensaver https://youtu.be/p-howMhFecQ?t=18

[markdalgleish]

@malte-wessel the pink and blue logo is awesome, really love your work :+1: