Re-branding's proposal

[PaulMaly]

Warning, almost manifesto. Reading carefully! ))))))

Hi everyone - maintainers and developers!

I believe that Ractive is the most simple, but the most powerful front-end framework I ever used. In past, I'd used Backbone and Angular. Quite recently, I'd tried React and Vue. But no one of them could give me the same simplicity, convenience, and functionality that Ractive gives.

In spite of the fact that Ractive is an excellent tool for building web apps, he isn't so popular, even in comparison with younger colleagues (hi Vue). And our community isn't very numerous. 5К+ stars on GitHub are not the most outstanding result.

However, Ractive is still alive and develops. Thank you very much @evs-chris, @fskreuz, @martypdx and other guys who maintain it. And of course to you @Rich-Harris, founder of Ractive.

I use Ractive in my work since 2013. Now in the end of 2017, we are very close to version 1.0. I believe it could be a turning point in the history of Ractive. I believe we could make Ractive more widespread and popular to involve new developers and maintainers.

To do that, we need to not only develop Ractive itself but also to form an ecosystem around him. We need to have awesome docs, awesome plugins and libs, awesome learning materials and other resources. And also we need to make little bit more marketing activities.

My version of the new logo you can find here. As you can see, the main concept is as though the logo is an element of a Periodic Table. I think it's quite cool. Also, I offer to change Ractive's slogan to something short and simple to read. I found this article by Eugene Mirotin from TopTal and I think what its title is what we look for - "Ractive.js - Web Apps Made Easy".

Thanks that you have read it. Please, leave your comments and put a thumb up if you agree with my proposals. Thus I will be able to estimate a need for this work. Also, I hope that my logo and slogan become a part of new Ractive's brand.

Good luck!

UPDATE:

Ractive's new logo I offer:

[fskreuz]

Slogan could need a refresh. It's probably no longer "Next-gen" (it probably was 5 years ago). And I think I remember someone also mentioned before to ditch the green. A "bold" color would be great.

As for the logo... Hmm... 🤔 Here's your competition:

React, Redux, GraphQL: (I really like FB's logo continuity)

React, Angular, Vue: (Angular's shield for heroism, needed against monstrous code :trollface: )

Inferno

CodeIgniter and Laravel (just throwing this in. I used to work with CI.)

Meteor:

[fskreuz]

If you think about it, Angular's "A on a red shield" isn't that different from Ractive's "R inside a green box" or Vue's "flying V". We're all in the same party. 🎉 😄

[evs-chris]

A branding update is very much past due, especially for the tag line 😆. I'm beyond lousy at marketing, but I will say that I favor simplicity in logos. I do like the periodic table idea.

[fskreuz]

And don't forget our old friend/logo "anglebars"

[simonlayfield]

Hoooo man I'm a big fan of Ractive and branding is my jam. Would love to throw some ideas in here too. @PaulMaly Would that be ok? No worries if not.

[ceremcem]

@PaulMaly Thank you for this quite sincere "issue" :) I completely agree about the part before the new Ractive logo. 5K+ stars is not fair enough according to me too but sometimes this makes me think that Ractive is my secret weapon :))

I use many frameworks and libraries for my projects and I find Ractive people most kind and helpful. Ractive's past and current design is admiring. That can't be a coincidence. And this proposal, can't be a coincidence.

The logo part... I think it's something that easily strikes at the heart of any engineer :) I liked it.

[PaulMaly]

@fskreuz Hi Joseph, thanks for your response.

And I think I remember someone also mentioned before to ditch the green. A "bold" color would be great. If you think about it, Angular's "A on a red shield" isn't that different from Ractive's "R inside a green box" or Vue's "flying V". We're all in the same party.

I think I know what you mean but seems that it's a most popular modern logo style, especially for the Internet. Remember Facebook, Tumblr, Medium, and others.

In my logo, I've intentionally tried to leave all basic attributes of the old logo - same green color, "R" inside the box, etc, but make it a little bit more elegant and conceptual.

I didn't aspire to absolute novelty because it can have harmful affect an already available brand. It's more about re-design, not full re-branding of a logo. Maybe I'm wrong and we need to have full re-branding, but it's too unsafe I think.

I used to work with CI.

Oh, yea! CI, ExpressionEngine, good old days...

@evs-chris Thanks, Chris!

@simonlayfield Of course, Simon, join a party!

@ceremcem

sometimes this makes me think that Ractive is my secret weapon :))

Oh, yea! Me too, definitely! Sometimes I want to tell "them" - "wow, guys, why you so strain and suffer? Just use the Ractive and become happy". But they answer me: "omg, there is no +100500 modules for all occasions!" or "Ractive have only 5K stars on GitHub, how it can be an awesome thing?" Sh!t, I hate that.

The logo part... I think it's something that easily strikes at the heart of any engineer :) I liked it.

Thanks, I really appreciate that!

How about the tagline, anyone has any other ideas?

[paulocoghi]

@PaulMaly

Maybe I'm wrong and we need to have full re-branding

I am in favor of a full re-brand. :)

[PaulMaly]

@paulocoghi Thank you that you here.

I am in favor of a full re-brand. :)

Sure, no problem. I think we could accept to discussion all proposals. Go ahead!

[PaulMaly]

One more idea that Ractive needs to have more concrete positioning itself on the market. Something like a niche where Ractive is the best no doubt. I suppose it could be something like "Framework for environment-agnostic web apps"

Environment agnosticism is the capacity of a framework to work with various environments without requiring any special adaptations. It's quite similar to isomorphism (universal web apps), but has some differences. For example, the Meteor is bright representative of isomorphic approach, but it still using obvious separation of a code on server and client sides.

[fskreuz]

Ractive is positioned as "Optimised for your sanity" - and I think it's a good enough niche.

I'd skip the performance, isomorphic, functional pitches. Although Ractive is secretly capable of doing all of those, I wouldn't pit Ractive against more hype-driven, battle-hardened frameworks with the numbers and the products to prove it and large companies backing them up.

If we're to start pitching Ractive as a great framework, a good start would be logos of products and companies on the homepage... like jsDelivr's for starters.

[PaulMaly]

@fskreuz

"Optimised for your sanity"

Actually, I don't know what does it mean. ))) For me it's just a few buzz-words, they mean nothing. These words don't explain to me should I start the new project with Ractive? What types of projects I can cover, using it.

For example, my company working with Smart TV projects. Can I use Ractive on Smart TV? Let's look: "Optimised", "for", "your", "sanity". Ok, I'm sanity-man, but Smart TV industry not. It's a piece of...stupidness )))))) I still can't make a decision to take Ractive. And after that, it brings me a brilliant idea - I'll just look at the GitHub stars and compare. Epic fail, here.

I'd skip the performance, isomorphic, functional pitches. Although Ractive is secretly capable of doing all of those, I wouldn't pit Ractive against more hype-driven, battle-hardened frameworks with the numbers and the products to prove it and large companies backing them up.

It makes sense, that's why I suppose that we need to find a rather narrow positioning. On the one hand, it shouldn't be too narrow, on the other hand, shouldn't be occupied by other players. We don't need to fight with them, we need to find our own way.

For example, from the beginning and possibly until now, Riot.js was positioned as "the best solution for the development of a website widget". Why? Because, it's small, fast and makes work easier. And because guys who maintain it uses Riot.js to develop own awesome widget (https://muut.com/). So, when I thought, what tool I need to take to develop callback widget I have quikly remembered about Riot.js. Because of positioning.

And as you can see, there isn't a lot of articles about Riot.js vs React.js or Riot.js vs whatever. No, Riot.js stands little bit beside all this battle. But even Riot.js has 12K+ stars on GitHub. Not much, because it's niche too narrow. We able to fix this mistake with Ractive.

If we're to start pitching Ractive as a great framework, a good start would be logos of products and companies on the homepage... like jsDelivr's for starters.

No doubt.

[simonlayfield]

I had a little time this morning to whittle something out, but it's by no means polished and I have some other rough ideas that I can develop further.

So, I'm actually cool with green - although I did find that brightening up the shade of green used in the original branding helped it to feel a bit fresher (as well as a gradient which isn't essential and can be used without).

I wanted to keep it simple, but perhaps add some of the polish that other tech logos seem to share. This concept should be pretty obvious I guess. The R is made up of building blocks, or 'components'.

For the typeface I actually also tried not to stray too far from the original. It's not the same obviously but it's a slightly condensed capital R. The 'Ractive' typeface and strap are, I think, a good balance for Ractive. It's simple and verging on playful, but also clean and professional. The strap obviously has yet to be agreed on/decided of course, but used this for presentation purposes.

In summary, I believe in what Chris Coyier would call "evolutionary design, not revolutionary design". I think that the original logo has enough there to build on and evolve, so I tried to take that and move it forward.

Happy to take feedback, or scrap it and move on if it's off the mark. Totally fine either way, just happy to be involved.

Thanks.

[simonlayfield]

Dang! I've actually noticed there's some irregularities in the kerning of the 'Ractive' typeface. Annoying, but easily fixed.

[evs-chris]

Disclaimer: I couldn't design my way out of a wet paper bag in a hailstorm.

@simonlayfield I like that concept, but it feels a little bit busy. I've also never been wild about condensed fonts, as I've spent waaay too much time with arial narrowin the land of legally binding documents. I poked at it a bit, and I kinda liked the R split into four bits and in a normal width font like deja vu sans mono.

A complete rebrand has been proposed on more than one occasion, and I'll say it is tempting. I can't count how many times people have asked me what "reactive.js" or "r-active.js" are. I'm not clever enough to come up with something that would justify walking away from the branding that has been built up, though. Maybe we should just change the tag line to "as in interactive" 😆.

[fskreuz]

I'm cool with a rebrand. But we'll need a checklist somewhere if we ever proceed to do a complete rebrand. Things that will require changing would be:

1. The npm org name - For publishing everything under one namespace.
2. The github org name - For the docs site.
3. The js.org domain name - For the docs domain.
4. The docs site theme/content
5. The library name, of course.
6. The name everywhere in the code.
7. [insert something that needs to be renamed somewhere]

Plus we'd need a feature update on all published code to put a deprecation notice saying we've renamed and what the replacement will be. Add migration notes as well. Plus since people will still reference Ractive, it's probably going to stay in life-support until everyone moves away...

😱

Feels like it's better to just start a totally different library from scratch with no associations with Ractive. In that case, let's all move to Svelte en masse :trollface: .

[ceremcem]

@simonlayfield I liked your design too as it's much simpler. But I think there are 2 problems:

1. The green stripes (same green as the background) on the R is random and has no meanings?
2. The random stripes are too thick that it's very hard to read an R, which feels less certain. The very same problem is with @PaulMaly 's {{web.apps.made.easy}} part. It's well designed, but very small (as he tried to make it appear as a periodic table element format (tried to align it to the bottom left).

[simonlayfield]

@ceremcem The intended tie-in with Ractive as a concept was that the 'R' is made up of separate blocks, like components. It's a little tenuous perhaps, but as I say I didn't spend too much time on it.

I actually hadn't considered the R was difficult to read, although I guess it's not necessarily something that needs to be immediately readable. It's a companion logo to the RactiveJS typeface and they're designed to work together in most cases so it can afford to be a little abstract. Using the Vue logo as an example (see above), seeing this on it's own isn't necessarily 'readable' as the letter 'V'. I mean, it's obvious that it is when you know that the name of the product is Vue.js - but if it was called 'Bermuda.js' then you'd most likely identify it as a series of triangles (as in, the Bermuda triangle) and not a V at all. The React logo is even more abstract (a la Nike tick), which I'd be happy to attempt if there are ideas for what kind of logo form Ractive would suit?

Anyway - all feedback is constructive and I'm happy to crank out more ideas!

Thanks all.

[simonlayfield]

Alrighty! I probably should have started with this to be honest.

So, points to note are that (based on above feedback) the R is less busy, and thus more readable (@ceremcem @evs-chris ). I also changed the R back to the original (current) Ractive typeface 'Voltaire', except I've modified it to make it less condensed. It also has ever-so-slightly rounded corners (consistent with green square corners). I've also removed the gradient and fixed the typeface kerning.

This is as simple and true to the original as possible - essentially just an update to the existing branding. I do get the impression that some people want a full rebrand but I guess there's little point in exploring that visually if there are still technical considerations being discussed.

[evs-chris]

@simonlayfield now I'm sold on "bermuda.js - get lost in the simplicity triangle" 😁

I quite like that simplified logo. Nice!

prior disclaimer is still in full effect

I don't think it would hurt to split it into components, as in the original, just maybe not as many. When playing with it, I took it down to favicon size to get a feel for how it could be broken up while not dissolving completely at small scale.

I think it might also be slick to throw the "js" in the upper right corner like the periodic element idea as in the opening post, which would also put a bit more distance away from "R" the language.

[fskreuz]

That font and grey text, love it! 🎉 Also, the slight round edges on the text and logo give it a less serious, more playful feel. I think I've seen this effect somewhere, I think Slack or Discord. Speaking of Slack and Discord, I wonder how the logo would look like with a color their color schemes (light green, orange, yellow, red, or purple). 🤔

[simonlayfield]

@evs-chris I also like the periodic element idea, although I have to say that visually I prefer it clean and simple as just an R in the square. It may have less of a theme (there's no derivative meaning from it), but it looks sharp and has a nice balance within the square on its own. I've mocked it up, though, so people can make their own call there.

The main challenge here is that the JS needs to be distinct enough to be read at small sizes. Any smaller than this and it's a little too illegible.

I've split up the R as before, but fewer pieces. I'm actually ok with this - it still looks clean and sharp. I haven't really spent time polishing the shapes, just put stripes through the letter as is. I've added the combined periodic/component treatment as well, but arguably things are getting noisy again...

I also removed the JS from the typeface in the last mockup in case anyone thinks there's a repetition in it being used in both the square and the type.

How are people feeling about the green? It'd be nice to really own a colour among the other frameworks above. Off the top of my head, this green is similar to Node.js but I'm not sure if that's an issue (is it?). Happy to stick with it, or change.

[ceremcem]

Since an element can be useful both on its own and by combining the other elements, the periodic element idea automatically gives the "component based design / modular design" message.

@simonlayfield Simple R is nicer, combining it with the periodic element idea is much nicer. By the way, if it would be an element, it should not be Ra but might be R instead, as Ra is used for Radium already.

The green is much pastel than it should be, IMHO. Pastel colors seems nice to me, but taking it too far makes me think it's - kind of - hard breathing.

The slogan which has the same width as RactiveJS is much nicer and much clearer to me:

@PaulMaly 's original logo is like a periodic table element much more than the simplified one, I don't know why. Maybe because of the sharp edges, maybe because of inner frame, maybe because of the "Ractive" string under the "Ra" (element symbol). Combining them might be something like that:

[simonlayfield]

@ceremcem Thanks for the feedback.

I think the only points I can offer regarding your iteration is that the JS and Ractive text within the square would be too small to read if the logo were to be displayed any smaller (which it's sure to be). The line within the square would also begin to blur with the edge at smaller sizes, so if it needs to be there it would have to be offset from the edge a bit more, I'd say.

The green I think just comes down to preference. I prefer to draw it back a bit because I think it locks in a bit better with the tone of the grey typeface, maybe. I'm not wed to it, though, so if others prefer a more luminous green then I'm cool with it!

[fskreuz]

Just throwing it out there. "RJS" on first glance, RequireJS comes into mind. Then the R language ("R in JS"). Maybe ditch the "R" (or letters in general) and maybe go for something graphical? React and family do have the atom/molecule logos for their projects.

[simonlayfield]

@fskreuz I think while conversations like this are still happening and it's still unclear as to what is required from a rebrand I'll hold off from adding more mockups.

It's a little difficult to know if everyone is in agreement on this too, so would the most effective (fair) way to approach this be a poll? Or are there stakeholders that should be making this call being that they are the primary drivers of the direction of Ractive?

I'm totally cool either way of course, I'd just rather not gallop ahead with concepts if there's still high level discussion to be had.

[fskreuz]

it's still unclear as to what is required from a rebrand

@simonlayfield that would be a question for @PaulMaly since he posted the original question.

I'm just throwing in ideas, some of which may or may not be on target at all. I just don't want this to be a case like PHP where it ended up using \ as the namespace separator only because the choices provided were terrible (seriously, not even ., / or even a single : were in the choices). Lots of choices, lots of ideas, lots of discussion, the better. 😁

[simonlayfield]

@fskreuz Yeah absolutely. Don't get me wrong, ideas are great and I'm still keen to continue developing them but I think there's a number of options depending on what is necessary.

To list the high level options:

• Full visual rebrand (+ change the name Ractive)
• Full visual rebrand (+ keep the name Ractive)
• Evolve current name/branding (+ change green)
• Evolve current name/branding (+ keep green)

There are more options once this has been decided, like logo form which you mention above, but first things first I think it's important to get an indication of what level of work is required.

@PaulMaly What do you think the best way to decide this would be? Should we be reaching out to the wider Ractive community somehow? Maybe a poll or survey or something?

I hope I'm not speaking out of turn here. A lot of people are involved with Ractive and have put a lot of time in to making it great. Anyone else has just as much right to take the wheel, so let me know if this is getting a bit hectic. Sometimes sitting on the idea for a while helps to make clearer decisions, too.

[PaulMaly]

Holy Ractive! I never saw here such hot discussions! I'm glad that topic has hooked so many people. Thank you guys to get involved.

@simonlayfield Thanks for your activities. I think you're right in the case that we need to make a decision which type of re-branding we prefer. I believe I described my point of view very clearly above. But if not, so let's tried again.

Full visual rebrand (+ change the name Ractive)

No, I don't think we need to re-name Ractive to something else. I think, right now it's the worst move we can do. I haven't missed @evs-chris point about "reactive.js" or "r-active.js". Yes, it's a little bit confusing, but we already have this name and many people know this name. I think new name has to be only for brand new thing.

Full visual rebrand (+ keep the name Ractive)

It's a possible option. Actually, not so a lot of things we could re-design in Ractive, because Ractive hasn't any brand-book and all that stuff, you know.

Evolve current name/branding (+ change green) Evolve current name/branding (+ keep green)

About the color, I'm not sure, but I think current color the part of the current Ractive's brand. And I don't think we need to cut-out current brand and create the new one from scratch. I think we need to refresh original brand and create some additional brand attributes to complete it.

Small comment @ceremcem

Simple R is nicer, combining it with the periodic element idea is much nicer. By the way, if it would be an element, it should not be Ra but might be R instead, as Ra is used for Radium already.

It doesn't matter, that it's Radium. Above, Joseph told that many other use first letter as a logo. Periodic element idea gives us a reason to be more unique because in Periodic element admit to use two first letters. No one doing that in logo, but we could with this idea.

Simplified version of my idea:

[PaulMaly]

@simonlayfield Please provide your logo version for survey (360x360, without tagline).

So, if we have no any other ideas for logo, let's choose from these two.

[simonlayfield]

Hey @PaulMaly I'm happy to provide a revision of the logo. I'd like to add, though, that in my mind there could still be a fair amount of further work required to fine tune a concept - even my own. For instance, the simplified version you've posted above still presents issues I mentioned before. These are problems that don't necessarily become apparent when you're mocking up logos in an isolated context but logos, like any other element used in digital work, have distinct use cases. These should be clearly defined and factored in to the logo form.

My suggestion to conduct a survey was more to decide on the extent to which the wider Ractive community felt that a rebrand was necessary. If I'm honest I think it's too soon to be deciding on a final logo to use for Ractive. Is that the purpose of the survey?

Apologies for asking more questions, I'm just wary of rushing ahead.

[TotallyInformation]

I've only just started with Ractive but I it is clear that it does have a communications problem. I'm liking the logo ideas, the green seems fine to me (I'm an information tech person not a marketer though so take this with a pinch of salt!), something reasonably bright is needed though - check out the comment button here on GitHub, that seems pretty good ;)

I really like the R with the JS in the corner as it conveys more meaning. I also think the double border works well. I'm quite sold on having the full name underneath, not so much by the shaded a. The strapline with the name above all the same width is very stylish and neat.

Not entirely sold on the split R, solid looks better I think. A distinctive font for the R is important but probably something that can be reused in the full name in the strapline to ensure a consistent feel and message. Not really convinced by the current R font as this looks a little "weak" to me, something about the angles.

Just a couple of pennies.

[PaulMaly]

@simonlayfield Yep, I understand your worries, but I believe that we need to move forward faster as we can because everything sometimes bothers. If we can't decide this subject now, it can be thrown for years again.

@TotallyInformation Thanks for your feedback!

@ALL Please, everyone, pass simple poll with the single question: https://divar1.typeform.com/to/o0gha8

[ceremcem]

The latest logo includes Ra and Ra stands for Radium in the periodic table. Here is a watch painted with Radium:

1. The same color of Ractive's
2. Reminds me "The tool glows in the dark"

I do like the idea more and more over time :)

[fskreuz]

"The tool glows in the dark"

@ceremcem Or the standard @Rich-Harris tool slogan: "Batteries included" 😁

Pale green and grey over black/#333 doesn't look bad either. Reminds me of asm.js and Node.js and the 5 gum spearmint.

[ceremcem]

@fskreuz Like this?:

[Rich-Harris]

@ceremcem Or the standard @Rich-Harris tool slogan: "Batteries included" 😁

love it! I'm into the whole modern-retro luminescent green-on-black thing 👍

[LeJared]

I really like @PaulMaly approach of the periodic table style logo.

And please, don't change the name of the project. I like "Ractive" very much! It's much more (R)active than "React". :smile:

[fskreuz]

@ceremcem like this. Logo is very Adobe-ish, but also very periodic table-ish and radioactive-looking. The green almost looks like its glowing against the background, but I didn't put any glow on it. 😁

[fskreuz]

@LeJared R(adio)active? 😁 Reminds me of Fallout now.

[fskreuz]

Just in case someone has not played Fallout, here's the "Pipboy" wrist computer.

[evs-chris]

It's almost like waking up - you can feel it in your bones. Welcome to the new age.

[ceremcem]

Hmm. Got it:

Edit:

Colors from @evs-chris

[evs-chris]

I quite like the element + glowing radium + old school crt feel, so I inkscaped it (poorly):

Not sure about just "Batteries Included™" as the tagline, but I do quite like that being in there. Maybe "Webapps made easy. Batteries Included." or something along those lines.

[simonlayfield]

Guys, I don't want to sound like a broken record but the words Ractive and JS in this format won't be readable at smaller sizes. The darker 'a' would probably also be too indistinct, I would have thought. Should a logo pass a sufficient colour contrast these days? I'd argue it's at least worth considering.

https://webaim.org/resources/contrastchecker/ (I realise this is for text, but you still have to actually read the word Ractive in the above logos)

Think of it in the header of a website, on a mobile device even, or perhaps it's being displayed in the footer of the website for an event and can only be a maximum of 50px wide. Designing a logo only at the ideal size will often present problems with legibility at smaller sizes. A solid logo has to cover all of these potential uses.

[simonlayfield]

I only present the colour contrast point as an idea that the word Ractive should be legible at smaller sizes, and that choice of colour plays a part in that. Not, of course, to suggest that all logo forms should be literal and legible.

[ceremcem]

I think R is enough to be recognized:

[fskreuz]

but the words Ractive and JS in this format won't be readable at smaller sizes

@simonlayfield exactly what I had in mind when I made the green-over-#333 logos (and why I threw in other libraries' logos at the very start of the thread). You have:

• The small "boxed R" for small logos.
• The "boxed R beside the name" for full-sized logos.
• The palette is only two colors (one if you treat #333 as the bg, that area being transparent on the logo)
• Not a lot of traffic on the logo. Just... "R". 😁

Also... dropped the "js" because fancy hipster kids these days are doing it. 😄

[evs-chris]

That's also why I did svg - the "js" and "ractive" would be hidden for smaller versions. But, again, I couldn't design my way out of a wet paper bag 😁

[simonlayfield]

Right, sure - but the R isn't really a concern for me. The words Ractive and JS get lost, and also the green border. While it may be argued that these aren't important at smaller sizes and can afford to be lost I would argue the opposite, especially if it's in a header or somewhere that is likely to be the first time a visitor sees it. Then, we're back to only being to identify an R, and not the named Ractive.

The original brief was to enhance the current format of the branding to be better identified and understood by a wider audience. In my mind, the more we compromise in these areas the further away from that ideal we get.