Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Inferno site design suggestions/mockups #479

Closed
davedbase opened this issue Nov 19, 2016 · 47 comments
Closed

New Inferno site design suggestions/mockups #479

davedbase opened this issue Nov 19, 2016 · 47 comments

Comments

@davedbase
Copy link
Contributor

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.

@davedbase davedbase reopened this Nov 19, 2016
@ghost
Copy link

ghost commented Nov 19, 2016

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

LandingPage.pdf

@davedbase
Copy link
Contributor Author

davedbase commented Nov 19, 2016

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

website_nightwolfz
website_trueadm

@ghost
Copy link

ghost commented Nov 19, 2016

LandingPage2.pdf

@ghost
Copy link

ghost commented Nov 19, 2016

@davedbase
Copy link
Contributor Author

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

@ghost
Copy link

ghost commented Nov 19, 2016

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
Copy link
Member

trueadm commented Nov 19, 2016

Based on @nightwolfz + my last version

website-v2

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

@davedbase
Copy link
Contributor Author

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
website-v3.zip

@ritz078
Copy link

ritz078 commented Nov 19, 2016

  • 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
Copy link
Contributor Author

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

website-v4.zip

@trueadm
Copy link
Member

trueadm commented Nov 19, 2016

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

@davedbase
Copy link
Contributor Author

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

@ritz078
Copy link

ritz078 commented Nov 19, 2016

@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
Copy link
Contributor Author

@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
Copy link

ritz078 commented Nov 19, 2016

agreed.

@trueadm
Copy link
Member

trueadm commented Nov 19, 2016

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
Copy link
Contributor Author

davedbase commented Nov 19, 2016

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
Copy link

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:
inferno-long

@trueadm
Copy link
Member

trueadm commented Nov 19, 2016

@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
Copy link

leeoniya commented Nov 19, 2016

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 dfilatov/vidom#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
Copy link

ghost commented Nov 20, 2016

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

landingpage4

@Havunen
Copy link
Member

Havunen commented Nov 20, 2016

I like all of these! 👍

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

@ghost
Copy link

ghost commented Nov 20, 2016

Another iteration.

landingpage5

@trueadm
Copy link
Member

trueadm commented Nov 23, 2016

@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
Copy link

ghost commented Nov 23, 2016

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

@ghost
Copy link

ghost commented Nov 23, 2016

Iteration 1
landingpage6

Iteration 2
landingpage7

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

@trueadm
Copy link
Member

trueadm commented Nov 23, 2016

@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
Copy link

ghost commented Nov 23, 2016

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

@ghost
Copy link

ghost commented Nov 23, 2016

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
Copy link
Member

trueadm commented Nov 23, 2016

@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
Copy link

ghost commented Nov 23, 2016

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

landingpage8

@ghost
Copy link

ghost commented Nov 23, 2016

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

landingpage9

@LukeSheard
Copy link
Contributor

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
Copy link

ghost commented Nov 24, 2016

@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.
landingpage10

@davedbase
Copy link
Contributor Author

Here are some iterations left off from the previous designs.

Option A (Landing view)

options 1

Option A (Scroll view)

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

option 1 - scroll

@davedbase
Copy link
Contributor Author

Option B (Landing view)

option a

Option B (Scroll view with drop down)

option a scroll

@davedbase
Copy link
Contributor Author

Option C (Just an iteration on element)

Sketch file for all options is attached.

option c

inferno3.sketch.zip

@struckm
Copy link

struckm commented Nov 24, 2016

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
Copy link
Contributor Author

@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
Copy link
Member

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

@nickbalestra
Copy link

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

anotheroption

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
Copy link
Member

trueadm commented Nov 25, 2016

@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
Copy link

@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
Copy link
Contributor Author

davedbase commented Nov 25, 2016

@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.

option c

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.

option c - scroll header

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.

option d - alternate hero

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

@ghost
Copy link

ghost commented Nov 26, 2016

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

@davedbase
Copy link
Contributor Author

davedbase commented Nov 26, 2016

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.

option e

@trueadm
Copy link
Member

trueadm commented Nov 27, 2016

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

@trueadm trueadm closed this as completed Nov 27, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

10 participants