New download and releases page

[fdoflorenzano]

This PR adds the re-design of the download page, and adds a separate releases page for older releases as proposed by Raphaël.

Changes:

• Updates gatsby node script to create new releases page that points to new page template.
• Completely refactors download page template and CSS to fit new design and interaction.
• Adds new release page template and CSS to host list of current and older releases.
• Adds SVG images for Windows, MacOS, and Linux.
• Adds SVG images for link icons in the bottom of the download page where added. Three of them weren't included in the reference, so I went ahead and included three that made sense (to me at least) for the corresponding links. I took them come svgrepo. These can of course be changed and replaced.
• The new download page includes the size of download assets, so the fetch releases script was updated to include this data point, and was ran to update all release JSON files. (68 out of 87 file changes come from the updates JSON files).
• Text copy was updated in i18n/react-int (both English and Spanish) using Raphaël reference (and translated to Spanish myself).
• I found a little inconsistency in the fonts definition file, where two weights for different style of fonts where defined as the same.
• I also tweaked a little detail in the Footer, where certain links where blue instead of white.

[SableRaf]

Looks great! Just a quick note: It looks like the tooltips are missing and the button design doesn't match the mockup (by the way, the tooltip should be on the Apple Silicon button instead of where it's placed in the mockup). I'll put the rest of the feedback in the code review.

Mockup:

Current version:

[SableRaf]

Oh and one thing I forgot to mention: the latest release of Processing is now 4.1.2 (and no, it hasn't been updated on the website either 😅)

[fdoflorenzano]

Hey @SableRaf !

I just pushes changes based on your comments:

• added the latest processing release 4.1.2
• tweaked the text downloadIntro and downloadTitle
• added the sorting you asked for and applied to all assets, so no Intel is first in all of OS

I have some notes and questions for the couple pending comments:

the button design doesn't match the mockup

It doesn't! This was a design update we did while I was implementing the mockup. We updated it cause the previous design for different download assets didn't visually suggest they are clickable or actionable. The OS images had a similar look and weren't clickable, so we went with a different and more obviously clickable look for them.

It looks like the tooltips are missing

Yes! I left it for later while developing and then forgot to ask about it. I'm not sure whats expected of the tooltip:

• Do all assets need a tooltip? Or just Apple Silicon?
• What's the text copy for each needed tooltip? Should it also have a translated version?
• What's the data in the bottom of the tooltip? Does that come from the GitHub release data?

[SableRaf]

It doesn't! This was a design update we did while I was implementing the mockup. We updated it cause the previous design for different download assets didn't visually suggest they are clickable or actionable. The OS images had a similar look and weren't clickable, so we went with a different and more obviously clickable look for them.

Thanks for the clarification! That brings up a tricky conceptual issue with the design. Ok, let's work through it :)

The OS images where meant to be clickable, similar to the 1Password download page. The thing is they can get away with it because they only have one possible download per OS, but in our case it complicates the UX flow.

The version text below is similar to what you can find on the Blender download page where it is not clickable or actionable as you correctly pointed out. It's also meant to act as additional information for the download button itself so it is better suited as a sort of caption for it.

Alright, here's a proposed design that solves those issues by reorganizing the information and using radio buttons for selecting the versions:

And with the tooltip:

The idea is to show the versions only for the currently selected OS. Note that I separated the Raspberry Pi releases for clarity and to emphasize the "runs on any platform" angle:

Do all assets need a tooltip? Or just Apple Silicon?

Yes, all assets should have a tooltip.

What's the text copy for each needed tooltip? Should it also have a translated version?

Supported OS versions + release date.

• Windows: "Tested on Windows 10. Untested on Windows 11 but should work."
• macOS Intel 64-bit: "Compatible with macOS 10.15.7 (Catalina), 11 (Big Sur), and 12 (Monterey)"
• macOS Apple Silicon: "Compatible with M1 and M2 processors. Tested on macOS 12 (Monterey)"
• Linux 64-bit Intel: "Tested on Ubuntu 22.04."
• Raspberry Pi (32-bit ARM): "This is the only 32-bit platform that is supported with Processing 4."
• Raspberry Pi (64-bit ARM): "Not a ton of people are 64-bit with their RPi devices yet, but releases are happening."

What's the data in the bottom of the tooltip? Does that come from the GitHub release data?

The timestamp for the release can be found in the JSON file for the release (e.g.: processing-1289-4.1.1.json) under publishedAt. The md5 and sha256 are not necessary right now.

[fdoflorenzano]

Thanks for the text and comments! Will work on them during the week, and probably will have a talk with Rune and Dana about the designs.

Just to clarify about your proposal, what's the interaction flow you expect? What's clickable? What happens when clicked? Which clicks actually trigger a download?

[SableRaf]

Just to clarify about your proposal, what's the interaction flow you expect? What's clickable? What happens when clicked? Which clicks actually trigger a download?

Thanks for your question! There are two scenarios:

A) The OS detection picked the right version for the user: they click on the big blue button to trigger the download. Done.

B) The OS detection wasn't successful or the user needs the Apple Silicon, or RPi versions:

1. Click on the OS icon (the whole square area around the box should be clickable) for the desired system. Note: there should be a hover state for the OS button.
2. If needed and available, click on the radio button for the desired version (at the moment, this only applies to macOS and RPi). Also needs a hover state and the whole rectangle should be clickable
3. Optional: click on the info button to see the tooltip
4. Click on the big blue button to trigger the download. Done

Note: The OS detection doesn't have to be perfect since the OS selector allows users to quickly switch to their desired system.

[runemadsen]

Just reading up on this discussion! I don't feel too strongly about the current layout, although I do think it's a pretty simple UX flow where you click the big blue button or click one of the more specific download links below. Everything is one click.

If we do want to change it to multiple clicks with the proposed radio boxes, I think that could work too, but I'm a bit concerned that we're adding options below the download button that affects the state of the download button. That's a bit unexpected, and I would be in favor of moving the download button below the OS selector if we go that direction.

@fdoflorenzano @SableRaf Thoughts?

[SableRaf]

I don't feel too strongly about the current layout, although I do think it's a pretty simple UX flow where you click the big blue button or click one of the more specific download links below. Everything is one click.

The concern I have over the current layout is that it brings back the "too many choices" issue the new design was meant to solve.

I agree that the "surprise radio buttons" isn't the best. We could show the radio buttons at all time and make it also possible to click directly on the radio button to select the OS instead of the extra step of clicking the OS button then radio button, at the cost of more visual clutter.

Putting the download button below would improve the B flow but add friction to the A flow. Another tradeoff 🤔 Also it might make the placement of the "caption" a little more awkward but that's not so bad. I can try an mock this up.

[SableRaf]

Ok I tried to reorganize things. It brings a bunch of issues however:

1. When at the top, the download button acted as a headline of sorts (especially since the copy now says "Create with code.." instead of "Download Processing"). When bringing the button below, it gets more difficult to quickly grasp what this page is about.
2. The metadata under the button was colliding visually with the "older versions" text so I tried swapping it with the bottom buttons but the result doesn't flow as well as before.

I would suggest keeping the button above but making the radio buttons visible even when the OS isn't selected. It is a little more cluttered but that's a compromise I think we can live with 🙃 If you have other suggestions or ideas, let me know!

---

With the button below:

With the button above:

[fdoflorenzano]

Thanks for the explanations! Going through the rationale behind the decisions made me think of another alternative.

This is trying to:

• Reduce the amount of choices proposed initially, so that flow A is well covered and users are pointed to it. To achieve this, other OS versions aren't shown initially, but are available after clicking the OS rectangles. The options are also buttons that directly start the download of the asset.
• Reduce the amount of steps to also achieve flow B. Instead of using a single download button, each asset can be downloaded by directly clicking on it. So instead of 3 clicks, it would only bee two: select OS --> download asset. The big download button is also moved out of the OS section so that it's visually (and mentally) separated.

[SableRaf]

That's a very good solution to avoid unexpectedly changing the state of the download button!

However, the buttons don't read clearly as download buttons. How about something like this? And putting the info button outside of the download button to avoid nesting clickable areas?

---

[fdoflorenzano]

ow about something like this? And putting the info button outside of the download button to avoid nesting clickable areas?

I like that! I'll go forward with this approach :)

[SableRaf]

Thanks @fdoflorenzano :)

I explored the design a little further and I feel like there is a risk that many Apple Silicon users would download the Intel 64-bit version by mistake. I propose the following small tweak:

---

Current design: the Button says "Download Processing 4.1.2 for macOS". If you have an Apple Silicon Mac, you have to notice the small text that says "Intel 64-bit" and know what it means, or click the info button to maybe notice this is not the right version for you.

Proposed tweak: Add a line of text that says "Got an M1 or M2 CPU? Download the Apple Silicon version instead." with a link that downloads the Apple Silicon version.

[fdoflorenzano]

@SableRaf I just pushed the latest tweaks including the warning for Apple Intel and mobile layouts!

[SableRaf]

Thanks @fdoflorenzano! It looks amazing. Here are a few items of feedback:

Main download button

• The text should be slightly lower (padding-top: 0.15em on the span element seems to work). Same for the main download buttons
• The os-bit should also have a bit more room to breathe. margin-top: 0.8em on the div seems to do the trick.
• The button text should say "Download Processing 4.1.2 for Windows" or "Download Processing 4.1.2 for macOS", Linux, RPi (though we don't really need to detect Raspberry Pi)

Before

After

Tooltips

• The color of the tooltip is the same as the download buttons, which creates a confusing visual experience.
• The content could also use a little more padding.

OS detection Would there be a way to also detect Apple Silicon? Even if it requires some feature detection that isn't 100% reliable, we could catch a number of users who may otherwise get the Intel version by mistake. cc @benfry

Thanks again for all your work on this update. I'm really excited to launch the new page and it couldn't have happened without everyone at DSI!

[SableRaf]

I just got some updates for the tooltip text from Ben. I can make those changes myself later if you prefer. Just putting this here for reference.

Windows: "Compatible with Windows 10 and 11. For best compatibility, we recommend Windows 10."

macOS Intel 64-bit: "Compatible with macOS 10.15.7 (Catalina) through macOS 13 (Ventura). macOS 12 (Monterey) recommended."

macOS Apple Silicon: "Compatible with M1 and later processors. Where possible, we recommend macOS 12 (Monterey)."

Linux 64-bit Intel: "Tested and supported on Ubuntu 22.04, but will work with most major distributions."

Raspberry Pi (32-bit ARM): "Latest version of Raspberry Pi OS is recommended."

Raspberry Pi (64-bit ARM): "Latest version of Raspberry Pi OS is recommended. The 64-bit release Raspberry Pi OS is newer, so if you have issues, try the 32-bit version."

[fdoflorenzano]

Thanks for the feedback @SableRaf! Just pushed another round of updates.

Main download button

All considered and tweaked as proposed.

• The color of the tooltip is the same as the download buttons, which creates a confusing visual experience.

Yeah that;s true, I added a light border so there's more of a visual separation to the background.

• The content could also use a little more padding.

I added a little bit more to the horizontal padding.

I also tweaked a little z-index issue I found the tooltip buttons had with the donate banner; and fixed the positioning of the tooltip when too close to the right of the screen.

OS detection Would there be a way to also detect Apple Silicon? Even if it requires some feature detection that isn't 100% reliable, we could catch a number of users who may otherwise get the Intel version by mistake.

I looked a bit into it and I couldn't find a well established and reliable way of doing it. Some approaches don't work in all browsers and even may break soon because the base API is subjected to change. There are some visual indicators for the Apple Silicon case to realize what they are downloading, and I'm also under the impression they usually have to check compatibility for their software.

I just got some updates for the tooltip text from Ben.

Also updated these and their translation!

[fdoflorenzano]

@SableRaf amazing! Thanks so much for the feedback! it made for a better result at the end.

Do you want me to merge or should I leave it to you to correctly time it? I'm not sure how you do it over here haha

[runemadsen]

Amazing! Can't wait to see this in the real world :)

[SableRaf]

@fdoflorenzano I will merge it myself, thanks for asking! I'd like to ask for input on timing the release.