MithrilJS / mithril.js

A JavaScript Framework for Building Brilliant Applications
https://mithril.js.org
MIT License
13.98k stars 925 forks source link

Mithril redesign #1033

Closed aardno closed 8 years ago

aardno commented 8 years ago

A fork of issue Reasons we use Mithril #1026

Here we can propose our approaches to Mithril's logo, slogan/tagline, or site design (freeware only)

Reason: Mithril's community is lacking. A redesign in parallel to a rewrite can promote growth to the mithril community with a well-defined purpose.

lhorie commented 8 years ago

@porsager just shared w/ me a logo suggestion: http://porsager.com/mithril

What do you guys think?

porsager commented 8 years ago

@dontwork Did you check out the mono and color version as well? I would love a more elaborate critique ;)

nordfjord commented 8 years ago

@porsager IMHO that logo by virtue of being a box is quite bulky which I'm not sure manages to convey the lightness, and speed of mithril as a framework.

porsager commented 8 years ago

@nordfjord Yeah, I can see that the 3d one might feel a bit heavy.

My idea behind it was actually to outline the simple, modular and composeable nature of using mithril. I don't think it looks heavy or clumsy in the colored / mono variants. The 3d version was mostly thought of as an interesting way to show the idea behind it.

orbitbot commented 8 years ago

I like the mono version, the others not so much. "superhero" and "lego block" (/building block) spring to mind.

I prefer it over the current one which I see as "chainmail"-y, but @sebastiansandqvist 's version is lighter and has some connection to the current logo. Feel-wise it might look a bit out of place (heavy) depending on how other parts of the home page end up looking.

ArthurClemens commented 8 years ago

I've gone through the logo creation process for an open source project, twice, and at the designer end, so I know how frustrating the process can be (most likely is). Especially developers tend to search for "deeper meaning" (read: superficial image puzzles). Luckily we haven't had that here.

And nevertheless, you need to have feedback.

To me the logo variants (all 3) feel heavy like a building. Somewhat Drupal meets MTV. Perhaps it's my eighties generation.

My personal connotation with Mithril is lighter and more flexible.

But I like the use of the M as main element.

porsager commented 8 years ago

@orbitbot Thanks for the feedback. The superhero/shield angle was actually chosen not only to bring out the M from the shape, but also to fit in a little with the html5 logo I know leo likes the Borromean rings, and I've also tried to play around with them, but it's hard not to have them look like the Bio Hazard symbol.

@ArthurClemens Thanks for the feedback. I do see the resemblance to drupal and mtv, so the question is if this idea can be worked to something lighter, or if we should look in an entirely different direction.

Not frustrating yet, just wanted to put the suggestion out there, but yeah, with oss, there are a lot more opinions than when working with clients (except when their 10 cats are included in the decision process as well ;) ).

nordfjord commented 8 years ago

@porsager I forgot to mention I absolutely love the font you chose :)

pygy commented 8 years ago

@porsager the perspective used for the logo is reminiscent of wide angle photography which is often used to capture large objects, hence the "heavy" impression it gives.

dead-claudia commented 8 years ago

@pygy I'd have to agree with that one...

aardno commented 8 years ago

I thought I needed to add this input.

  1. Mithril is going under a complete overhaul so something like @sebastiansandqvist's is too similar to the current
  2. Expressing what a framework or library has to offer through a logo is very hard to reason about and won't get very far in this discussion. I support a more unique adventure towards a logo, something that none have touched before. 'm()' as a logo could be something to consider if mithril is looking to continue to use that style long-term.
aardno commented 8 years ago

Something like this perhaps

m

ludbek commented 8 years ago

\m/ Coz Mithril rocks

ludbek commented 8 years ago

Here is a bunch of logos my friend designed on my request. The first right-top one is mine :D but I love the big one at the left. It would look great with the lowercase thin font. I would love to hear your opinion and make it even better if its possible. @lhorie

mithril-01

aardno commented 8 years ago

@ludbek tried making a couple animations real quick, i like the idea output_vbxbdg

aardno commented 8 years ago

here's another idea i had, i didn't put time into it so it didn't render so well... i'll put time into it if anyone like its output_uqeopa

ludbek commented 8 years ago

@rdsteg yeah the logo is a lot easier to animate but once its been selected ;)

orbitbot commented 8 years ago

@ludbek 's design is kinda fun in the sense that it's close to the infinity symbol, so there's even a textual approximation: ∞ MITHRIL. m() is also a nice shorthand.

ludbek commented 8 years ago

@orbitbot yeah it does. The main concept behind the logo is the letter 'm' and two pieces of metals being tangled together(just like in mithril).

ghost commented 8 years ago

When i think of mitrhil, i think of a bar of metal and the first picture which then comes in my mind is something like the minecraft iron bar. Click for Picture

Something like this could be a easy to remember and simple logo.

dead-claudia commented 8 years ago

@ludbek I like the idea, but I'm not as sold on @rdsteg's animation ideas...they just feel a tiny bit cheesy (like 99% of all animated logos IMHO, but that's a debate we can discuss elsewhere).

@nbrunch No. Please, let's not associate a web framework with Minecraft... :cry: (Plus, Minecraft doesn't even have mithril as a resource unless you're using a mod that includes that.)

dead-claudia commented 8 years ago

@nbrunch

Okay...in all seriousness, I just don't think, for a sleek, clean, and powerful Web framework, the intentionally low quality, blocky style of Minecraft and similar would really help advertise Mithril to the general, potentially unfamiliar audience. To be honest, low quality and blocky graphics, even if it's intentionally done well, may undermine the credibility of Mithril as a web framework to some newcomers, especially those in corporate environments already writing at scale or those who are non-technical and looking for some "bright and shiny" thing to "show" their developers and "impress" them, so they end up stuck using it, even if it weren't their first pick.

Even sites like jQuery's and Rails', even though they may not have the best design, are at least clean and professional, and have the ability to draw people in. Python, a language named after the comedy series Monty Python, with a rather eclectic and humor-loving community, still has a respectable, clean, professional website. If you want to see the how clear credibility makes a difference, compare the popularity of Racket and Scheme, two extremely similar languages, to their websites. One of the biggest complaints about Lua is its website and lack of decent tutorials gives the false first impression it's obscure when it's in fact very popular for scripting games and embedded hardware/applications because the language is very simple with simple, first-class FFI bindings, and with the reference VM, tiny and light on memory. It fails to establish the credibility it should, or it would likely be competing with Python directly by now.

We should stick with something at least generally expected of a Web framework, if we want to expose more people to the library. It'll also help a bit more in SEO, which really matters this day and age, no matter what your site is.

ghost commented 8 years ago

@isiahmeadows seeing your point of a professional look of the website. (and i know that minecraft has no mithril, its just stupid me who always thinks of the metal bar ; ) )

But i don't like an animated logo, because i associate every moving (animated) piece on a website with adverts or 90's tag also its more complicated to produce stickers and t-shirts (which hip developers really like ), because you always have to ask in which state the logo is correct: for example the logo @rdsteg : is m () the logo or m(mithril) Same is the again recognition.

What do you think about a more colorful logo ?

dead-claudia commented 8 years ago

@nbrunch I agree about the animated logos. Some sites can get away with deliberately low quality, and it's possible to create a decent animated logo without making it super cheesy, but it's extremely hard to actually make something interesting with it.

zserge commented 8 years ago

This issue lasts for almost a month and I remember talks about mithril logo or redesign a year ago or so. Honestly, I started using Mithril because I saw it on Github first and read the code. If I saw the current project page - I'd probably though it's some project abandoned years ago - tweets from 2014, everything is square and pale etc.

In my humble opinion it would be better to apply any of the designs suggested above and keep it for a month or so to see how that affects the visitors. Like some A/B testing. I bet that any redesign would improve user experience, so instead of looking for a perfect one - why not to try a good-enough one?

dead-claudia commented 8 years ago

@zserge That's what we're trying to fix.

dead-claudia commented 8 years ago

Here's my idea for a logo (I have an SVG saved for each as well):

Mithril logo idea, dark

Mithril logo idea, light


The simple, soft monochrome style represents the simplicity of the framework. Most of us that love Mithril love its simplicity and elegance, and a simple, elegant logo best captures that sentiment.

I chose the text, m(), because that further emphasizes the simplicity and elegance of the framework. It's the most common method you ever call, and it has an aesthetic appeal even in the code itself. You can't get much simpler of an API than that even with macros.

The font, Calibri, was chosen for its rounded edges and minimalism otherwise, because I wanted to make the logo feel approachable and less edgy (no pun intended :smile:). I avoided monospace because I wanted to avoid giving a rigid, structured feel to it.


In case you're wondering about the details, here's enough of a description you could fully recreate it your self:

  • Size: 300x300 pixels
  • Light color (background in light, text in dark): 100% white (#FFFFFF)
  • Dark color (background in dark, text in light): 75% black (#404040)
  • Font: Calibri, 160 point
  • The text is centered both horizontally and vertically inside the logo
  • The text is exactly m().

I created it in Inkscape, in case your version differs from what's here.

hville commented 8 years ago

With a dot in the middle, makes an eye and adds space the parentheses

This suggest the view purpose and add some opportunities for custom styling of the dot/logo (e.g. iris, blink animation, iris animation ...) mfonts

lord commented 8 years ago

I absolutely love @porsager's logo — to me, it doesn't feel heavy, it feels sturdy. It feels like blocks, yes, building blocks. This seems apt, considering Mithril's separable parts coming together to form a cohesive whole, not to mention how it gives developers building blocks to make their app with. It's built from a very simple shape, just a couple of cubes together, reflecting Mithril's simplicity. I love the colors, too.

Also, I think this logo may feel less "heavy" to y'all when used in practice. Some possibilities:

artboard 2

desktop

I also queried three random friends (two programmers and a designer) and they all love it.

darsain commented 8 years ago

Apart of coding I also do design, and I've seen this exact logo idea used so many times (honestly at least 3 times I can recall, last time just a weeks ago or so). Not an issue if you don't mind your logo colliding with other projects.

porsager commented 8 years ago

@lord Thanks a lot, and thanks for the great mockups which i probably should have done to begin with as well ;)

@darsain Would love it if you could link to any of them. The first thing i did after doing the very first sketch was to Scavenge the internet for anything like it, and the only similar one i found was one from 2006 which has never been used. If i had found anything that it would collide with I wouldn't have spent the time to go further than the hand sketch.

hville commented 8 years ago

@porsager the blue blocky M version looks like the next letter in the Nodal Font. nodal logo ...or the natural offspring of Nodal+Webpack.

aardno commented 8 years ago

I think it might be useful to suggest a deadline by now; anyone who wants to suggest a logo can be taken into account, but the thread seems to becoming a circular doubt as of now. I suggest issue be closed by friday, so any more ideas or submissions can fork off ideas submitted by then (not a literal github fork).

dead-claudia commented 8 years ago

@lhorie What do you think of @rdsteg's idea? IMHO I'd give it one more week than he would (Friday next week, not this), but I'm starting to see similar, and the beginnings of an emerging consensus.

dead-claudia commented 8 years ago

@rdsteg

(Sorry for deleting your post...I wasn't paying attention and clicked the wrong post + button when I tried editing my post...)

I'd say close on Monday, there doesn't seem to be many posts throughout the week

There's been a few decent posts during the week, so I'd like to give it a full week. I'll give it until Monday the week after next, unless the conversation fully dies out before then.

porsager commented 8 years ago

@hville Yeah I see the style is the same, but honestly I don't see that as a problem at all?

I extended the kerning on the letters a bit, but this would be my final suggestion..

mithril 2x
hville commented 8 years ago

@porsager design is really hard because everybody has an opinion ;). The black and white version works better. Relying on shades of similar luminosity and tint makes it hard to find when scaled down.

I actually liked the old Mithril page. Not pretty, but of the many Javascripts projects around, it was a good example of communicating what, why, how right up front without scrolling or navigating.

dead-claudia commented 8 years ago

Closing for now. A new issue can be opened later when we're a little more ready.

aardno commented 8 years ago

Uploaded album of submissions here: http://imgur.com/a/PC8I1

kvanbere commented 7 years ago

+1 for @Javacodia s suggestion (bottom version).

dead-claudia commented 7 years ago

@kvanberendonck Note that the site is already live with a logo similar to the old one. (I wouldn't be averse to changing it, though.)

kvanbere commented 7 years ago

Oh I know there's a new site, I was just under the impression that it was not final.

If it is final, then the look and feel of the current site and logo in comparison to some of the wonderful suggestions here gave me that impression (no offence intended, just saying it how it is).

spacejack commented 7 years ago

Here's a design concept I floated on Gitter a while back:

http://www.spacejack.ca/mithril-design/

tobyzerner commented 7 years ago

FWIW I like the current website/branding. I like its plainness and information density.

For newcomers, the first thing they see is "What is Mithril?", and then they can immediately get a taste with "Getting started".

For veterans, most of the time they'll be visiting the website for docs, which are immediately available in the sidebar.

The website is nothing more than it needs to be, which I think is very reflective of Mithril itself.

kvanbere commented 7 years ago

I think the current website has a home brew feel to it , and as a company that's not the type of feel you want to get from a library before you adopt it.

There needs to be a way to communicate both lightweight/meticulous and enterprise-ready at the same time .

kvanbere commented 7 years ago

(Because it /is/ enterprise ready, we've been using it since inception to power a cutting edge ERP that translates desktop apps to the web, streaming huge amounts of data through a web socket for client sided data analysis views )

dead-claudia commented 7 years ago

@kvanberendonck I do kind of get a similar less-professional appearance from it, too, like it hasn't had much design put into it.

ludbek commented 7 years ago

This is my final update.

mithril_array_02