New Inferno site design suggestions/mockups

[davedbase]

Let's use this thread to aggregate a collection of ideas/notes and mockups for the new InfernoJS website. If you have a design you're working on submit it here for consideration.

[ghost]

Quick design. I can iterate this more. Would be helpful If i get more suggestions.

LandingPage.pdf

[davedbase]

Here are two mockups posted by @trueadm and @nightwolfz on Slack.

[ghost]

LandingPage2.pdf

[ghost]

LandingPage_Iteration_3.pdf

[davedbase]

Can everyone post JPGs instead of PDFs? That way they appear inline in the page for quicker viewing.

[ghost]

i think people want to see clear cut design, so pdf is good. I couldn't get the jpeg output properly with sketch app.

[trueadm]

Based on @nightwolfz + my last version

Here are the PSDs if anyone wants to play around with them: psds.zip

[davedbase]

The followings an iteration on the recent posted by @trueadm. Changes include:

1. Trying to make typography more consistent
2. A bit more iconography to make the page interesting.
3. Redesigned footer with Slack/Github and call out to supporters

Some suggestions:

1. Should pad the hero a lot more (above and below) because it looks conjested.
2. The Highly Optimised Performance section could use a bit more content, I'd personally shift the graph to the left and write some simply copy to the right that explains the benchmarks (not a lot).
3. Would be good to have the install command for the library or a snippet of the code, which would attract React users. If I were a react user and found something faster I'd want to SEE how similar/different it was. A small snippet might not capture that but it gets you going. :-p

website-v3.zip

[ritz078]

• I see the usage of thin font. That seems a bit odd keeping the whole website in picture.
• Github and slack icons in the footer are too big.

[davedbase]

Good point @ritz078. I'll factor those in on the V3 iteration. For now here's a more radical concept that messed around with. Note: I'm not a trained designer :-p and yes it shows. Haha.

website-v4.zip

[trueadm]

@ddibiase I don't mind that at all – except the top nav bar looks completely out of place now.

[davedbase]

@trueadm yeah I was going to move it but just ran out of time/ideas. Maybe we throw the nav on the left.

[ritz078]

@ddibiase I think this design will give you problems on adjusting for different screen sizes. Its always good to keep a centered design. easier to optimize for mobile.

[davedbase]

@ritz078 it shouldn't be much effort to make it responsive. Not all designs have to be center justified. Plus I'd argue it helps make Inferno look/feel different from the rest.

[ritz078]

agreed.

[trueadm]

also for the Inferno logo flame and the red we consistently use – I've changed it quite a bit between designs and on the current http://infernojs.org, what is the best "red" to use?

[davedbase]

I have a colour specialist on staff at my office. I'll have her identify a few options for us with the proper hex and rgb. Colour theory is not a domain developers should get involved in 😜haha

[grayrest]

If you're going to sell the framework in the current environment, I think you need to sell it direct-marketing style. You're cargo-culting the popular landing page style but everybody cargo-cults the popular landing page style and everybody claims to be fast. I suspect you could swap out the Inferno logos and colors, cherry pick benchmarkes, and have that be the landing page for pretty much any dom diffing library.

AFAIK, Inferno is the fastest dom diffing library available. This is a common claim and so people have taken to qualifying it with stupid marketing words like 'blazing' or 'exceptionally' or whatever. You should instead state it without qualification and write a bunch of stuff to make your case that you know what you're talking about.

Splat out all the benchmarks in one row/grid without comment and then explain why Inferno is fast. Point by point, in moderate detail, with pictures. Example: Node order detection from this article. This should be ridiculously long. I know you've put a tremendous amount of effort into optimization and explaining it on your landing page instead of in forums or buried in the docs establishes credibility. After that, I'd go into a 'Stateless First' section pointing out that Redux style development heavily favors stateless components and Inferno provides lifecycle hooks for those components (that's why I like it, at least). Cover React compatibility, preferably showing a code sample. Finally, an honest comparison against other frameworks, in particular situations where you would not use Inferno would help the reader out and further establish credibility.

Again, the idea is to give people a simple message (Inferno is fastest) and then convince people you know what you're talking about while giving people material to pitch to their teams.

I only have a basic image editor on this computer, but here's a rough sketch (the typography/grid/spacing/details are awful) of what I think the landing page should look like:

[trueadm]

@grayrest that's actually a great depiction of typical "I need more perf" user-story. Would you mind jumping onto our Slack so you can join in on the convo with everyone else? https://inferno-slack.herokuapp.com/

That would be awesome. Thanks again for all your hard work – I see it all over the show promoting Inferno. It means a huge amount to me.

[leeoniya]

I think you could simply state that Inferno offers 2-3% overhead vs painstakingly hand-optimized vanilla JS in 1/xx the size while keeping full React compatibility. And then show a size/perf comparison vs React. I don't think you need a lot of prose to establish credibility for a project that already has 4.5k stars.

I also don't think you need to try to convert people that are using other vdom libs, because some simply dislike JSX or the React API in general, or the loads of needed tooling (like myself). Your only real competition in this space is Preact & React-lite, i think.

As I pointed out in https://github.com/dfilatov/vidom/issues/257, I think the benchmark game is officially over. There are enough vdom libs with varied APIs that offer near-vanilla performance so it comes down to other aspects for picking libs. For React ecosystem consumers, swapping in Inferno should be a no-brainer. The rest of us vdom lib authors (Vue, Mithril, domvm, dio, Monkberry, snabbdom) will pick up the remainder who want other features or apis.

It's a good time to be a web dev :)

[ghost]

Iterated with inspiration from @grayrest. Do we need to add text to describe the performance?

[Havunen]

I like all of these! :+1:

Don't overthink it, they are all looking good and fresh.

[ghost]

Another iteration.

[trueadm]

@mysticmode that last design, I like, although:

• the 3 info boxes should be above benchmarks – people want to first know what they are looking at.
• I'd remove the quotes from the title, it adds clutter IMO
• the header looks a bit aggressive, it might be a bit too much in peoples faces

[ghost]

@trueadm Sure, I'll do that and show you another iteration.

[ghost]

Iteration 1

Iteration 2

@trueadm Please let me know which iteration you like, and what changes you need. Thanks.

[trueadm]

@mysticmode IMO that's much better. I really like it. I'm not completely sure about the icons in the boxes (icons are a good idea, they just don't fit the text perfectly and look a bit close to the text). I wonder if we should put some more content below the benchmarks too – like Preact, we could have an example of some code and some more points as to why Inferno is amazing.

[ghost]

@trueadm Ok, I'll stick with iteration 2. Please give me some examples and content to put it below.

[ghost]

I was trying to show some fun attitude to the landing page. When you see babel homepage, they have insane amount of attention seeking blobs, which I don't like it IMO. But I was trying to be consistent with icons and content. I'm totally fine if we remove the icons and keep the necessary contents, good design is showing the content in a clear and honest way possible.

[trueadm]

@mysticmode let's take Preact's new site as a good example, we can use that area to go into more detail on Inferno vs React, Inferno vs Preact, Inferno vs Angular etc and also talk about SSR, the extra features Inferno offers over others etc. Followed by a code example (like Preact has).

[ghost]

Shall we show the detail on performance in a separate page?. Let me know if it is really important to show in the landing. I think it will be too much to read if we show them in the landing page. Something like this

[ghost]

Changes - Remove Green Accent Color + Include Dropdown Asset in the Top Nav.

[LukeSheard]

We should find a way to make the benchmarks in a "bigger is better" format. Personally at first glance of the benchmarks I see Inferno as being the worst.

[ghost]

@LukeSheard I'm showing one benchmark at a time. We can set the timer and move to other benchmarks. Also changed the colors for source code, fonts and buttons.

[davedbase]

Here are some iterations left off from the previous designs.

Option A (Landing view)

Option A (Scroll view)

Notice on scroll the Inferno logo inserts itself into the locked nav bar at the top.

[davedbase]

Option B (Landing view)

Option B (Scroll view with drop down)

[davedbase]

Option C (Just an iteration on element)

Sketch file for all options is attached.

inferno3.sketch.zip

[struckm]

Without any scale the bar graphs don't add much value. And the red is too bright, it should be more subtle. In version C you should center the top part, you are mixing left aligning and centering the rest, it's inconsistent.

[davedbase]

@struckm the colours have already been selected and I think everyone's fine with them (unless @trueadm says otherwise). Well, not everything needs to be centred. The hero will be large enough and when you scroll it will be out of frame. If Option C is picked we'll likely constrain the element to be closer to the centre of the page.

Either way we're looking for upvotes or downvotes on the options, so if C doesn't sit well with you vote it down =)

[nightwolfz]

Can we have consistent colors (with more red) for the code samples as well ?

[nickbalestra]

Nice job all! I've started pulling together some of your ideas...haven't finish yet, but here a sneak preview:

shortly:

• Charts are central for us, so they should be really polished and as up the fold as possible.
• The inferno-red used on buttons & text is a bit strong on the eyes imho, so I've tried to soften it for such elements.

[trueadm]

@nickbalestra the charts look great – I'm really liking that. The slightly faded red also works really well on the page too – almost pink. Can we remove .js from the name and see how that looks? also can we get the info boxes under the benchmarks.

I'm also not sure people really know what this is – if they see the header then the benchmarks, do they connect performance? or is it file size? or is it something else? I think we do need some content above or a title explaining the benchmarks.

obviously we also need the code example at the bottom too :)

[nickbalestra]

@trueadm: yes totally agree about the benchmarks, I need to add some context in order to "don't make me think".

Yes, I obviously still need to add info boxes and code example :) So, thanks a lot for the quick and gr8 feedback.

[davedbase]

@trueadm @nickbalestra here's an iteration that accounts for a bunch of requests from various people including rounded buttons, drop down menu, chart adjustments, code example colours etc. I also added a section dedicated to React.

The hero copy literally mentions React and there's no content on the homepage related to it. I thought that was odd so copied some of the copy @LukeSheard wrote for the README.

When you scroll past the hero the nav would fill in a colour and the logo could fade in. There's also an example of the dropdown.

Also as an Option D we experimented with using a poly-art background but I suspect most people will think it adds too much to the page. Definitely give feedback.

Sketch file for anyone to iterate on: Option C.sketch.zip

[ghost]

I took inspiration from all the others and did with proper spacing and size.

[davedbase]

Here's Option E which includes more elements in the features section below the hero (I like how @mysticmode added it into his recent mockup). I plucked the copy from the current README.

I think the IA on this makes sense. Read in order: a) awesome features, b) woah, it's fast, c) cool it works like React, d) check out this example.

[trueadm]

Closing this for now, as we'll be going with Option E (except making some tweaks). The tweaks are:

• Instead of "Examples" on the CTA, we'll have "Github"
• The grey background for the examples needs to be lighter