Mithril redesign #1033
Comments
|
My approach is to show Mithril as a rock-solid foundation to any project, with either a minimalist feel (D3 Stonism) or a louder, explicit feel (Rock it). |
|
The origin of the name has nothing in common with the project itself. Forcing the project into this mold will lead to off the mark USPs and tacky taglines. It will also add to the confusion when sifting through the thousands legitimate Hobbit/LOTR sites. A branding exercise does not start with the name, but with the unique benefits this library brings. |
|
You can argue the same for React with 'React youtube'. You propose a common risk-factor evaluation, but the end-goal is not to make mithriljs famous. The end-goal is to strengthen the mithriljs community, and a little jazz can do wonders. I'll agree though I don't like the hobbit/lotr theme, and I don't think we should be focusing on the theme as much as the code, but the community is needed IMO |
|
I think the goal should be a clean & modern design to reflect Mithril. To set the tone of what we can be aiming for here is a prototype (by no means pixel perfect):
Uppercase gives the brand a powerful personality. Even though the codebase itself is small Mithril is powerful. |
|
@v4n The logo + name there feels a little too "fat", if you know what I mean...The font and "fat" style to it reminds me too much of Immutable.js's logo, which IMHO is awful. It just feels really tacky to me. |
|
@v4n 's change from italics makes a stronger image, but @isiahmeadows is right that the bolding is too extreme. Somewhere between them would be great imo. The italics don't add to the logo. |
|
@v4n and @drew11b I like your ideas, I took some time trying to steal ideas from Haskell's site.
|
|
Some ideas on the visual direction this could go in:
I also think that, similar to the react js site, there should be a lot of interactive code samples on the home page, increasing in complexity as you go on. Since I came here from react, I was attached to the JSX syntax and have been using the MSX transformer as part of my build process. Having the option to switch to that syntax in the interactive code samples may lead to a better proportion of react developers trying out Mithril. That, combined with the new lifecycle hooks, should make it pretty familiar territory for them. Just an idea. And while we're changing things, I think a more descriptive slogan than "A JavaScript Framework for Building Brilliant Applications" would be a good thing to have. I didn't do anything different with the layout--I like how the existing landing page is arranged. But here's my take on a possible look for the new site:
|
|
Seeing these ideas pop up make me really think the logo and branding really just need a complete redo. 😄 As it stands, for a Web framework, we really should have a modern-looking Web page. Looking worse than even jQuery's not-very-good website sounds like a signal to pitch everything to me. 😉 |
|
I, for one, like @sebastiansandqvist's proposal. |
|
@sebastiansandqvist 's proposal looks best so far, should see if there are other proposals anyway. |
|
@sebastiansandqvist is aesthetically pleasing, but is also essentially a splash of paint on the original design - instead of a thorough redesign. The core problem isn't that the existing site isn't aesthetically pleasing to the eye - the problem is it does not communicate why mithril is any better than any other library. Preferences for JSX, and colors are important information, but they need to be grounded in communication. We need to dig deeper, which is the reason for #1026. I would have advised against tackling these issues yet. I think it is too early. But please, if you do want to talk design - take into account why people have stated they use mithril. Design is communication. When coming up with a design, try to communicate your interpretation of either that thread or your personal reason for using mithril. @v4n's font choice may be a little too bold, but its grounded in a personal theory of Mithril, and communicating that:
Whether or not you agree with the design, it would be good if other suggestions were grounded / substantive - instead of just being pretty / flashy / eye-catching. @v4n deliberately is not invoking LOTR's typography because it does not communicate the values @v4n wanted to invoke. I'm not saying I prefer either design - I am saying I prefer the approach of @v4n's design Please read over what other's have said in #1026 and make your design reflect and communicate those sentiments. That said, I really do think this isn't the sort of work that should be handled by a group, it should be an iterative process handled by a single designer who takes responsibility for a particular vision. Also, I am fairly sure (could be wrong) @ACXgit is already tasked w/ the redesign by @lhorie. |
|
@JAForbes You're right about my proposal not changing anything about the current site. The purpose was partly to explore a new visual direction (since much of this thread is about establishing some kind of branding for Mithril) and partly to say that I think the current layout does a lot of things well. A github issue isn't the best place for a redesign to take place, though, and if there is already something underway handled by a single person then that is fantastic--in that case either this thread is unnecessary or can help give that designer some ideas. I don't think anyone here approached this with the expectation that the final logo/slogan/design would be their proposal, but rather that this would be a place to share ideas, whether visual and conceptual. If ideas for the design of the site aren't open to the community, then that is fine, but I was quite excited by the thought that an open source project could be designed by its community. This thread was the first I've seen of its kind. Your critique that I didn't explain any of the decisions I made visually is totally valid, though. So: The thin but uppercase text was what came to mind when considering "light-weight but robust". The color change was fairly arbitrary, but was from the idea that in Lord of the Rings, Mithril is a light purple-blue metal. That said, I steered away from LOTR in choosing a typeface because the reference really has nothing to do with Mithril itself. For the change in the icon in the logo, I wanted to strip away as many lines as possible while keeping the structure of it mostly the same. In general, though, unless we really end up bike shedding or stepping on another designer's toes here, I don't see any cause to preemptively halt the discussion or discourage future posts. At least not this early. |
|
@sebastiansandqvist Sorry for singling you out, I really wanted to make a more general statement. I like your reasoning! :) I also like your design. Your design was so visually pleasing that it exemplified the point I was trying to make. It may seem I was pre-emptively halting a discussion, but a) I don't have control over anything and b) there is a lot more context, both in the previous thread and in the original gitter discussion that led me to state my case. This thread seemed to be continuing a trend toward's attracting users, instead of communicating what mithril is and why it is valuable in order to attract users. And I wanted to state that I think that is problematic for a number of reasons that have already been discussed at length in #1026. Reading over the comments I already see a couple bike-shedding comments taking place. Discussion that is purely about personal taste instead of a justification based on communicating is always going to be bike shedding. So if this thread is going to be productive, any criticism should revolve around what you want to communicate and why that design is or isn't successful in communicating that. I think there are many reasons why it is probably impossible to design by committee. But I have absolutely no control over this or any discussion, just stating my position. So if people think the case I'm making is invalid, that is completely fine. There are some fine design minds in this community so perhaps the discussion could be productive. I am just noting my scepticism and suggesting a productive methodology for discussing design. |
|
@sebastiansandqvist nice design, definitely visually appealing. Glad you added some reasoning on your second comment. Echoing what @JAForbes mentioned, it's important the brand communicates what people should expect with Mithril. Mithril has a lot of good attributes, unfortunately not all of them can go in the same design (e.g. powerful (thick font) vs lightweight (thin font)). Personally I like where @sebastiansandqvist is going. Just one comment: In the top navbar the symbol & 'mithril' text feels a bit unbalanced due to the symbol being thicker. |
|
@isiahmeadows JQuery is a prime example of what I'm saying. Yes the design is ugly, but the site communicates well, and therefore it is a success. Whether its the corporate support, the advertisement for sibling libraries, the bold icons referring to cross browser and CSS 3 compliance, The JQuery Foundation and mentioning that it is used by "millions of people", even the link to Support It's all completely on message: JQuery is a safe, proven bet that is easy to use. Yes it mentions being fast, and it has code samples etc. But most of the website is about the above assertion. And from every angle, it is a better website than mithril's despite it's subpar aesthetics. And the messaging isn't just the text content, knowing your message informs your; layout, palette, font everything. You have to start with your message, it can't be tacked on at the end. An example. Considering their message is "reliability" and "ease of use": FontItalics suggest fast, and flexible. It fits into the message of ease of use and extensibility. Blue TonesBlue is the colour of the enterprise. There have been studies that a salesman wearing a navy blue suit will sell more than a salesman wearing another colour. Blue is the colour of IBM, Intel, HP, Dell, HE, AT&T, Microsoft and on and on. Blue suggests safety and strength. This is completely on message. When you look at the site: https://jquery.com/ think about what it is trying to communicate, and how successful it was. I personally think JQuery is a solid pitch at the demographic it is targeting. JQuery is targeting the mainstream audience that doesn't know or care about Javascript, or Virtual DOM. They want to ship a product and they want it to work. They are choosing this library for business reasons. In my experience, enterprise doesn't even care that much about performance, so there is no reason to elaborate on how fast JQuery is. There is no reason to have benchmarks given the audience and the message. Now Mithril doesn't necessarily want to target JQuery's audience, or Haskell's audience, or even React's audience. We need to determine who that audience is, and what we want to say to them. That is why every decision in the design has to be focused, targeted and communicating. And that is what #1026 is all about. |
|
@JAForbes Yes, it is a strange approach, but as your belief is that design attracts users, my belief is that design attracts community. Criticizing just to criticize is not some kind of solution to anything. I'm not suggesting this is the best way to discuss redesign, but from the looks, this approach is sparking a fair amount of discussion and promoting ideas, nothing deconstructing. Although, I have spoken with a few of my buddies who've been using mithril for around 6 months in production, and they have said they use it because "It's simple, function-based, and the least opinionated [Virtual DOM JS framework around]". If you wanted a why-to-use-mithril quote, I believe this is what you are looking for. I'd also say that the aspect of redesign matters more than what is redesigned. The core truth that the community is involved is adventurous, yet pleasing. I personally believe that this is a discussion and in no course a final answer. The majority here are Mithril developers while at the same time this is not a web design community, so we are in a valid argument, but probably not here. Let it take it's course, there are a million ways to approach a problem, this may be a great way. @sebastiansandqvist very nice, I think the code bit should be closer to the top of the page to show what Mithril is, but it's cool. |
|
I also need to express that to compare Mithril to jQuery, we have to account that jQuery has/had no reason to promote growth as they have been the dominant JavaScript library and are still holding the grail as the direction to take to learn JavaScript. They are just references to what may or may not be a right way to express Mithril. I don't think there is an overuse in a particular color, nor is there a one true answer as to why people want to use Mithril. I will take a whim to say that these taglines like VueJs and Mithril's current are not working very well because they seem biased (the frameworks are trying to express why they're better), opposed to Preact's objective look on their library, but of course the name helps. Taking how GitHub dominated over SVN, developers want and need tools that don't get in their way, fast is just a bonus. |
|
Other proposal logotype with color (w/reversed) and a new slogan: 
|
|
@Javacodia I love a lot about this for so many reasons!
A few critiques:
Great! |
|
I’m a bit confused by this issue and the discussion so far. Not that I wish to step on anyones toes and my intent is certainly not to offend anyone, but I feel that the whole discussion so far is bikeshedding. We’re almost literally discussing the color to paint the shed 😀 Looking at the current home page, I feel that a redesign would be good, mainly since it doesn't pass an important test at first glance: credibility . I've mentioned these on the gitter chat a few months back:
Almost any redesign will fix issues like these, and is essentially already achieved by good "lick of paint" approaches like @sebastiansandqvist 's. I don't feel like there's too much point in discussing the particulars of specific suggestions. Some other comments are closer to what I would see as a useful discussion to have: spitballing content for the website, and how to present the usefulness of mithril in an effective manner. In my experience it's actually easier to design around constraints, so exploring the contents of the site would be the most useful thing to do (at least until the rewrite is actually finished 😉 ). In the spirit of _Stealing good ideas from other places_™:
Other useful things that people from different backgrounds would appreciate is probably "Example of Mithril + X" with other popular js libs like Redux, Cycle.js, Flyd, whathaveyou, as well as "Mithril for Angular developers" or "How is Mithril different from X". I think it would be good to acknowledge that there will be site visitors that have no idea of what vdom is, how to use React and so forth, and make a decision to try to provide answers to their questions. Of course, above the fold slogans and colors are important to catch attention, but that's hardly where the meat is. |
|
I'm a bit into machine learning, there is tool that generates a multitude of different logos, one you give it a word. Maybe a few of us can use it to try to get to a nice one? |
Quite literally, that's the whole point of this issue. 😉
I agree. It could use a lot of improvement in that area.
Due to the bikeshedding nature of this bug, it may take that long before we really get an idea of the design in the first place. Conceptually, the rewrite isn't going to be a massive difference from what already exists. It's just going to be a bit smaller in scope, with several things like
Yeah...we really need to have live tutorials and other resources for beginners. We really need to have a lower bar for entry so people can learn better.
That would be useful, as well. I think @lhorie could really help with the "Mithril for Angular developers", since he himself was working with Angular when he wrote this framework (that his company later switched to). Oh, and for your vdom addicts, a "How is Mithril different from React" is pretty much obligatory. // React + React Router
import {Component} from "react"
import {hashHistory} from "react-router"
class TagSearch extends Component {
getInitialState() {
const tag = decodeURIComponent(
hashHistory.getCurrentLocation().slice(5)) // /tag/
return {
tag,
// A null tag is valid.
fail: tag != null && !validateTag(tag),
// Set the initial value based on the URL.
value: tag != null ? tag : "",
}
}
onsubmit(e) {
// Just in case the browser has already dropped the legacy
// versions or doesn't support the newer version.
if ((e.which || e.keyCode) === 13 || e.key === "Enter") {
e.preventDefault()
e.stopPropagation()
if (validateTag(this.state.value)) {
hashHistory.push(
`/tags/${encodeURIComponent(this.state.value)}`)
} else {
this.setState({fail: true})
}
}
}
render() {
return (
<div class="tag-search">
<label>Search for tag:</label>
<input type="text"
value={this.state.value}
onInput={e => this.setState({value: e.target.value})}
onKeyDown={e => this.onsubmit(e)} />
{state.fail ? (
<div class="warning">
Tags may only be a comma-separated list of phrases.
</div>
) : null}
</div>
)
}
}// Mithril (rewrite)
import m from "mithril/render/hyperscript"
import createRouter from "mithril/router/router.js"
const Router = createRouter(window, "#")
const TagSearch = {
oninit({state}) {
const tag = Router.getPath().slice(5) // /tag/
// A null tag is valid.
state.fail = tag != null && !validateTag(tag)
// Set the initial value based on the URL.
state.value = tag != null ? tag : ""
state.onsubmit = e => {
// Just in case the browser has already dropped the legacy
// versions or doesn't support the newer version.
if ((e.which || e.keyCode) === 13 || e.key === "Enter") {
e.preventDefault()
e.stopPropagation()
if (validateTag(state.value)) {
Router.setPath(`/tags/${encodeURIComponent(state.value)}`)
} else {
state.fail = true
}
}
}
},
view({state}) {
return m(".tag-search", [
m("label", "Search for tag:"),
m("input[type=text]", {
value: state.value,
oninput(e) { state.value = this.value }
onkeydown: state.onsubmit,
}),
state.fail
? m(".warning", [
"Tags may only be a comma-separated list of phrases.",
])
: null,
])
},
}
If we don't have the audience's attention, they're never going to see the meat. When you're trying to persuade someone, you have to have their attention before you can persuade them of anything. Otherwise, you might as well be trying to convince a brick wall to move. |
|
@Bondifrench I wonder if it's me, since it's generating mostly irrelevant and/or not very good logos. 😄 |
|
Things I like about @sebastiansandqvist's design:
|
|
@isiahmeadows
I guess my main point is that content design != graphical design, and I see the former as currently 1) more important and 2) actually possible to iterate right now on multiple levels even without a completed rewrite and a graphic design (which will in turn benefit from the restrictions of the content design). I guess content design should be forked to a separate issue to leave the graphical discussion here... (Do all the forks! 😉 ) What this issue along with #1026 seems to be (partially) grasping at is the arguments to use to explain why Mithril is great, albeit IMHO in kind of a roundabout way. I definitely agree that we need to grab the attention of potential users, and therefore would suggest that the landing page content should
Other parts of the site could then be dedicated to
Essentially the full structure (on a feature/bullet point level) of the site can be described in one or more wiki pages and improved on, as well as start to flesh out actual text content. One (laborious) community-driven approach to the design process might be to implement the site with basic structural CSS which then can be iterated on by anyone inspired to try out different graphical design ideas, not that I'm sure that's actually in anyone's interest. Ps. I also like @sebastiansandqvist 's logo the best so far. 😄 |
|
I concur with @orbitbot's points. Content design is more important at this time. Points I would like to add to the landing page:
|
|
@orbitbot I don't think content and UI design need to be separate and in many cases need to be combined. For example, content needs to be placed in certain spots, but without a UI, what content ideas are available?, and vice versa. To clean up a bit, it looks like
|
|
Design is much harder than is being depicted by a lot of these comments. Separating different disciplines of design arbitrarily will not avoid bike shedding. Bike shedding is just arguing about personal taste as opposed to trying to refine a message. You can't decide on "content" until you know what you are trying to say. This new content thread will just be people arguing over word choice instead of colours / fonts. It all has to be based on a unified message. Once you have that, everything flows from there. If you don't know your message and your audience, your content will be less effective. I agree that designing with constraints is important. I'd take it further, I'd say it is necessary. Once you have that you can decide on:
Everything. It's a much longer list. But hopefully you get the idea. Every decision in every iteration is essentially the same question with a new context: "Does X communicate the message better than Y" A lot of this discussion makes design seem like a layer cake, where we can just make up each layer as we go along, refining as we go. That isn't going to be the best cake on any axis. A designer can wrangle all these different concerns, it is their job. It is harder than what is being inferred here. I'm surprised some of the designers in our community haven't already said as much. Designing anything is a lot like choosing your stack for an application. You can't decide on each layer in isolation, you need to think of the best combination for your context as a whole. A lot of you seem to want to rush to the finish line. But it's the wrong finish line. Getting their faster doesn't mean you win. After #1026 settles down, there should be another thread that aggregates those ideas down into a single idea / message. This is the seed that informs every branch on the tree that will take form. Then there could be separate threads that reference each-other, but are all branching from that core message. If there is disagreement, it can be resolved by deciding which side better communicates the core message. The entire process is streamlined, instead of being a bunch of programmers arguing about fonts. Perhaps some of you think the message is obvious. But you would be surprised how much different people interpret and value things differently. That is exactly why #1026 isn't asking people what the message should be, it is asking them why they personally use mithril. Because even discussing the message is not productive without having some data to back it up So, please don't start a content thread. Or any other design related thread. You can't design in silos or by committee. It seems exciting that it is all being done in the open, because it is unheard of. |
|
@JAForbes I think you are misunderstanding the issue, the point of the discussion is a conglomeration of efforts to propose what may or may not work. Whether or not anything here will be used is not the issue.
I would like to see your point of reference.
Critique is powerful, conflict is not |
|
Here's my idea for a logo (I have an SVG saved for each as well): 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, 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 😄). 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:
I created it in Inkscape, in case your version differs from what's here. |
|
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 ...) |
|
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:
I also queried three random friends (two programmers and a designer) and they all love it. |
|
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. |
|
@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. |
|
@porsager the blue blocky M version looks like the next letter in the Nodal Font. |
|
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). |
|
@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. |
|
@rdsteg (Sorry for deleting your post...I wasn't paying attention and clicked the wrong post + button when I tried editing my post...)
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. |
|
@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..
|
|
@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. |
|
Closing for now. A new issue can be opened later when we're a little more ready. |
|
Uploaded album of submissions here: http://imgur.com/a/PC8I1 |
|
+1 for @Javacodia s suggestion (bottom version). |
|
@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.) |
|
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). |
|
Here's a design concept I floated on Gitter a while back: |
|
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. |
|
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 . |
|
(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 ) |
|
@kvanberendonck I do kind of get a similar less-professional appearance from it, too, like it hasn't had much design put into it. |
|
This is my final update.
|
and others
A fork of issue
Reasons we use Mithril #1026Here 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.
The text was updated successfully, but these errors were encountered: