Article graphic for new Node-RED community article.

[iskerrett]

Related Issue

613

Description

Considerations:

• Header graphic for a blog post about the Node-RED community. Here is the PR for the article. #611

[joepavitt]

How would you feel for the tile to be an infrographic with some of the key metrics from the article pulled out? Something loosely inspired by:

• https://twitter.com/NQAGlobal/status/648881181585502210
• https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.jerasoft.net%2Fjerasoft-13-years-in-numbers-infographics&psig=AOvVaw0tcdaHNawupRrWhmwox77n&ust=1680866157922000&source=images&cd=vfe&ved=0CA8QjRxqFwoTCNiN9sOQlf4CFQAAAAAdAAAAABAS
• https://www.google.com/url?sa=i&url=https%3A%2F%2Fvisual.ly%2Fcommunity%2FInfographics%2Fentertainment%2Ffree-infographic-broadway-numbers&psig=AOvVaw0tcdaHNawupRrWhmwox77n&ust=1680866157922000&source=images&cd=vfe&ved=0CBAQjhxqFwoTCNiN9sOQlf4CFQAAAAAdAAAAABAb

[iskerrett]

Sure

[joepavitt]

@Yndira-FlowForge with the colour palette & general design on this too, try and go more Node-RED than FlowForge, as whilst we're reporting these results in an article, this is very much a Node-RED thing, separate from FlowForge.

[Yndira-E]

Here's a rough draft to get some feedback before moving forward with the styling and final layout.

I've tried to keep the order of the data as it appears in the article, and I'm planning on differentiating each section since some have two sets of icons/data while others have one icon and two pieces of data. The final design will make it clearer.

[joepavitt]

I think we could switch positioning of "nodes available"/"downloads/week" with the right-side content. Those numbers on the right are the real standout numbers, alongside website visitors imo, and should draw the attention.

Not sure we need both the 1.9M visitors and and the 160K/month, as they're the same metric (1.9m/12 = 160k). I'd go with the 1.9m number.

Then, for the 10K/downloads/week, that's actually referencing additional nodes, rather than Node-RED in it's entirety, we could actually have a smaller section 2x2 grid which picks out the top 4 most downloaded additional nodes, which I make out to be:

• Node-RED Dashboard @ 25k/month
• Twilio @ 12k/month
• Google Services @ 12k/month
• process.env @ 11k/month

Data for these is here: https://flows.nodered.org/search?type=node&sort=downloads

I've also commented this here on the article itself, as the numbers should align with article content (fyi @iskerrett)

[iskerrett]

Good start to the graphic, some comments:

• I would simplify the title to be Node-RED Community Metrics.
• We should add a date, maybe under the title add (April 2023)
• I wouldn't bother adding the numbers of downloads for third party nodes (ie., the 10K number). I would just state 4200 Node in Node-RED Library.

[Yndira-E]

Ok, so, it would be something like this

or this

Let me know if you have a preference between those two layouts (or a better idea), I'm already working on the styling

[iskerrett]

I am fine with either layout.

[joepavitt]

I think I prefer first option 👍

[Yndira-E]

Hi, I took the background of node-red's workspace and grouped each piece of information into a "node". I'm aware that the actual nodes have other colors, but I wanted to keep it more "on brand" and less as a reproduction of the UI.

Here are two options: a light and a dark one.

[joepavitt]

few thoughts:

• would be good to have consistency in font colour for the metrics (500/100k are red atm)
• think the taglines are a little difficult to read, especially when the image is smaller on the screen as the faded red doesn't standout against the background red too well.
• Prefer the white b/g, and like the idea you've got with connecting the "nodes", but not sure it's obvious enough to make it worthwhile?

How does the first iteration look, if all the blocks are red?

Would also be interested to see a variant more like:

• https://www.jerasoft.net/jerasoft-13-years-in-numbers-infographics
• https://twitter.com/NQAGlobal/status/648881181585502210

where there is faded lining between the sections, rather then the "node" appearance for each block?

[Yndira-E]

Here's the light version with the reviews

And here the first iteration

^ But being all the same color, I think the variations of font size and placement look odd... What do you think?

I previously created a more uniform version, but thought it didn't look as interesting (it isn't fully finished, but just so you can have a quick look before investing more time on it)

For the new variant I'll need more time, will share asap

[Yndira-E]

Here's the new variant

[joepavitt]

Here's the new variant

My favourite so far, for the npm metric, it will be installs/month rather than PRs/month- which i appreciate will cause layout annoyances.

Docker can also change to pulls/month

[Yndira-E]

Updated

[joepavitt]

gets a 👍 from me

[Yndira-E]

@iskerrett what do you think?

[iskerrett]

looks good

[Yndira-E]

I already pushed the changes to the PR