reduxjs / redux

A JS library for predictable global state management
https://redux.js.org
MIT License
60.94k stars 15.26k forks source link

Redux's brand id #151

Closed dariocravero closed 8 years ago

dariocravero commented 9 years ago

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:

redux-brand-id

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

erikras commented 9 years ago

duckhuntdog

Might be trademarked..... :grinning:

rossipedia commented 9 years ago

silly

tacone commented 9 years ago

I almost regret spamming this thread out of the blue, but.. why not taking the circular flow and making it emotional?

Low quality concept below, maybe somebody can develop it further: redux

gaearon commented 9 years ago

FYI—I'm working with a designer and I hope to get something out next week. Can't promise though. :wink:

DenisIzmaylov commented 9 years ago

1 month ago I have talked about Redux on the biggest highload developers conference in Russia. When I explained application architecture with Redux on flip chart it became the diagram which could be used as a logo of Redux.

Today morning I drew and purposed this concept in my twitter: Concept

And then for our developers team website I drew it as an image: Logo

I've published the logo in Twitter too. People like it. It seems we could use it.

Restuta commented 9 years ago

@DenisIzmaylov 8 shape looks unnecessary, you can express it easier as a circle:

fullsizerender

and unidirectional flow of data is more obvious with this

vslinko commented 9 years ago

@DenisIzmaylov @Restuta this is a great example of what isomorphic means.

Restuta commented 9 years ago

@vslinko what do you mean? (It's been replaced by Universal I think)

vslinko commented 9 years ago

Your graphs are isomorphic. This is the true meaning of word "isomorphic". Code that runs on both browser and server isn't isomorphic. I just noticed that your graphs are good example.

WoodyWoodsta commented 9 years ago

@DenisIzmaylov - 8tracks have your idea already... 8tracks

http://8tracks.com/

vslinko commented 9 years ago

And Fedora looks very similar:

DenisIzmaylov commented 9 years ago

@vslinko Nice joke :) I have talked about it on first Moscow React Meetup, slides here.

@WoodyWoodsta 8tracks is not about software development and is not about Node.js. If we will look at React logo - it's science logo. Also Redux is not unique framework. The world became a giant. We can't keep absolutely uniqueness. But the real important things is to have uniqueness in a context to correct identification and avoid cognitive loading (should be easy to understand). We discuss about Redux in JavaScript Development context. In this context 8tracks and Fedora doesn't exists. Both. But in parent context (the world) we have a infinity symbol which has been exploited in each example above.

@Restuta But what if we will don't connect middleware? It will became a triangle. What if we will skip reducers? That both are optional. And I have drew this optionality by spacing and make focus on the main connection - between component (provider) and store.

Restuta commented 9 years ago

@DenisIzmaylov got your point. Doesn' seem like reducers are on the same level of "optionality" (definitely not a valid word in this context) with middleware. Reducers are present in all cases I've seen. Redux has 3 principles one of which is "Mutations are written as pure functions" (reducers), so I guess we can reduce :) your idea by emphasizing on those and drop middleware completely.

johnnyshields commented 9 years ago

If we want to represent the architecture of Redux, how about this logo? It shows many "components" (represented here as children) all connecting happily to a shared global state (the "store"). I've also added a Delorean w/ Marty McFly because time travel.

image

Restuta commented 9 years ago

@johnnyshields afraid to imagine how they are reducing global state

tombrewsviews commented 8 years ago

Thank you Redux! Our app wouldn't be the same without you! :) reduxbrandid_6-01

silvenon commented 8 years ago

Ducks aside, I want to extract two ideas I liked the most:

By @malte-wessel:

I would like to see more iterations of this. Perhaps with 3-4 elements instead of 5 so it's more simple and the "R" is clearer.

By @jacobp100:

The idea of reducing is very clear here. Maybe play with colors more and iterate the shape a bit.

Side note: I think atom-inspired logos are all too similar, there's already the Atom editor, React etc.

oobgam commented 8 years ago

screen shot 2016-01-11 at 7 47 04 pm

Playing with the idea of (state, action) => state

gihrig commented 8 years ago

@oobgam Ooh, I like that! :100:

gaearon commented 8 years ago

I'm leaning towards using a version of the trefoil knot.

It suggests a vague association with the React logo but looks distinctly and scales down nicely.

For the color, I was thinking something orangey like rackt logo. Important to avoid colors similar to React (blue) or Flux (green).

Please feel free to play with this idea!

timdorr commented 8 years ago

I would avoid the Rackt logo color so it looks distinct when viewing the "rackt suite". Perhaps just a red for red(ux) :smile:

gaearon commented 8 years ago

I think any color that looks nice on dark and white backgrounds and isn't colored as React or Flux logos should work.

montogeek commented 8 years ago

It looks like an Atom, similar to Atom.io

gaearon commented 8 years ago

FWIW React and Atom logos are much more similar (both atoms!) and it has not been a problem. And knot is not even an atom so I don't see the problem.

johnstew commented 8 years ago

Agree. I like the idea of the knot. Wouldn't mind seeing some iterations of it though and some shades of Orange to think about.

gaearon commented 8 years ago

Yeah I'm just throwing the concept out there. It needs a designer to iterate on.

bameyrick commented 8 years ago

Only threw this together quickly, but is this the kind of thing you have in mind? redux

gaearon commented 8 years ago

Yes, something like that. We might want to avoid Proxima Nova because we don't want people to think it's a Facebook project.

gaearon commented 8 years ago

Also, red color is way too bright IMO. Please all feel free to throw different versions here and experiment with the shape and/or font. :-)

bameyrick commented 8 years ago

A darker red and Avenir as the font potentially? Although looking at them side by side now Avenir and Proxima Nova look very similar

redux-01

gaearon commented 8 years ago

At this point it's hard for me to say without seeing many options. I'll check this thread in a few days and see if something catches my eye!

nhalloran commented 8 years ago

I like the idea of one having some visual relationship to flux logo, like DenisIzmaylov's, even if others out there are similar.

gaearon commented 8 years ago

By the way I think it's better to not include the dot in the middle. It makes it too easy to confuse with React logo IMO.

pedrottimark commented 8 years ago

With this solid concept, time for us to reach out to friends who have design experience for the win?

Simple shape and font in one color avoids problems with color vision mentioned earlier.

And even though I enjoyed the fun puns, it is better for internationalization that we have left English-language-specific allusions behind.

gaearon commented 8 years ago

Yeah I'm hoping for some designer folks to help here. I have a friend who might be able to help too in a few days but I'd like to see different takes on this.

jayphelps commented 8 years ago

Inspiration

image

Vijar commented 8 years ago
screen shot 2016-01-21 at 11 35 51 am
hssrrw commented 8 years ago

What if we slightly distort the trefoil knot to make it look like R? redux_knot

johnstew commented 8 years ago

I see what your trying to do there but I feel like the knot is simple and makes sense. I don't think its structure needs to be manipulated IMO. Maybe some other iterations could sway my opinion but I like the simplicity of the knot as it is.

johnstew commented 8 years ago

@jayphelps I like yours. Kind of want to see some different colors though. Got any other colors you like?

glung commented 8 years ago

obvsly

12479295_1557413494582971_943066951_n

Credit : https://www.instagram.com/p/BAzIeAdnuuG/?taken-by=mrzyk_moriceau

timdorr commented 8 years ago

@Vijar Oh snap :cry: http://fluxible.io/

johnstew commented 8 years ago

@glung +1

erikras commented 8 years ago

@hssrrw, that's a pretzel.

tracker1 commented 8 years ago

+1 for triquetra-like knot.

CrocoDillon commented 8 years ago

Since reducers resemble more or less a deterministic finite state machine, maybe that can be used as inspiration (not that you, designers, need it). Behold my bad graphical skills!

redux-fsm

ali commented 8 years ago

@malte-wessel +1, I like yours the most

echoing @markdalgleish's sentiment:

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

link for anyone who missed it: https://github.com/rackt/redux/issues/151#issuecomment-134713330

WoodyWoodsta commented 8 years ago

@ali And perhaps a solid version of @malte-wessel's for low res applications/uses

jayphelps commented 8 years ago

Here redux.eps.zip is a vector trefoil I made in case anyone wants to play with it. (the preview below is just a png preview, not vector)

redux

Here's one without the stroke cut outs redux no stroke cuts.eps.zip

jayphelps commented 8 years ago

image image