UX/UI improvements (New Design)

[honoka428]

Hello!

The main purpose of this redesign is to make Electrum more accessible and comprehendible to new users. I restructured the content —especially the home and download panels— and designed a more modern look while maintaining the original brand of Electrum.

Below is a summary of the major visual and code base changes I made:

Visual Changes

🔅 UI

• Added new icons for each Feature on the home page.
• Removed the white background for the favicon.
• Kept a similar color palette as original, though at a later point I plan to create a “Light Mode” toggle so users can choose what look they prefer.
• Changed font-family to Montserrat.

🔅 Content Restructuring

• Re-organized all points listed on the home panel (slide show & icons) in order to remove redundancy and increase clarity.
• Moved one of the listed points as the tagline of the logo (“Securing bitcoin payments since 2011”).
• Created three feature subgroups (secure, financially independent, quick and reliable) so first-time visitors can understand the benefits of Electrum at first glance. The feature description texts are kept the same as the original.

🔅 Footer

• Added internal links to improve navigation experience.
• Repositioned social media links from Header.
• Included a short description to summarise what Electrum is.

🔅 Download User Flow

• Categorised download options to simplify the download process for users and avoid confusion.
• Designed to only show mobile download options on mobile devices, and show mobile, desktop, and CLI download options on tablets and desktops.

🔅 Mobile & Tablet Views

• Added responsive mobile and tablet designs.

Major Code Base Changes

• Combined download.html, panel_download.html and index.html into one file (all under index.html to be consistent).
• Removed some unused and/or empty files, icons and logos.
• Moved electrum.js import to bottom of index.html to enable sticky header on scroll.

Tested on:

• Chrome, Firefox, Safari
• MacOS, Windows

[AlexSSD7]

Looks dope. @ecdsa, you should take a look.

[SomberNight]

Note that panel-download.html.template is used by a script. It is used to populate all the distributable names / version numbers. We don't want to update those manually every time there is a release.

Also note that ideally the site should work without javascript (#3). That is, it can use it if it is available but it should be optional.

[honoka428]

Thanks for the notes, @SomberNight. I added the original panel-download.html.template logic back in.

I removed js files that the app no longer needs (slideshow related like prettyPhoto, cycleLite or unused likescrollTo). I also made the js optional using the link you shared in #3.

My home and download panels designs relied on more js logic but I redesigned the ui to avoid these functions.

The only js that is not optional is the hamburger menu in the mobile view, but in that case the user can navigate through the footer links.

[ecdsa]

thank you. I will have a look later

[jermanuts]

Any updates? @ecdsa The website looks very old that many will think that electrum is outdated.