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

UX/UI improvements (New Design) #8

Open
wants to merge 9 commits into
base: master
Choose a base branch
from

Conversation

honoka428
Copy link

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.

Screenshot 2020-09-19 at 10 08 16 PM

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

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

@SomberNight
Copy link
Member

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

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

ecdsa commented Nov 17, 2020

thank you. I will have a look later

@jermanuts
Copy link

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

@edelstone
Copy link

@ecdsa Would love to see some movement on the public website. I am happy to help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants